/* ==========================================================================
   Saraf · system layer (round 12, 11.10.2026): one type scale, numbered chapters,
   the chapter rail, the loader, line-mask titles, and the hero payoff.
   Loaded after chapters.css, before motion.css and dark.css.
   ========================================================================== */

/* ---------- type scale: calmer than before (hero 96–105px, chapter titles 64px) ---------- */
:root { --fs-mega: clamp(3.2rem, 1.5rem + 6vw, 6.6rem); --fs-h2: clamp(2.3rem, 1.3rem + 3.1vw, 4.2rem); }
.night__title { font-size: clamp(3rem, 1.8rem + 5vw, 6.4rem); }
.lp__title { font-size: clamp(3rem, 1.8rem + 4.6vw, 6rem); }
.band__line { font-size: clamp(2.2rem, 1.4rem + 3vw, 4.6rem); }
.hero--pour .hero__title { line-height: .9; }

/* ---------- numbered chapters on the film pages (the hero keeps its label) ---------- */
body.sf-home { counter-reset: ch; }
body.sf-home .chapter:not(.hero) .eyebrow::before,
body.sf-home .sf-w--head .eyebrow::before,
body.sf-home .sf-sec .sf-eyebrow .elementor-heading-title::before {
	counter-increment: ch; content: counter(ch, decimal-leading-zero);
	width: auto; height: auto; background: none; opacity: 1;
	font-family: var(--f-display); font-weight: 700; font-size: 1.55rem; line-height: 1; letter-spacing: 0; color: var(--sf-gold);
}
body.sf-home .chapter:not(.hero) .eyebrow, body.sf-home .sf-w--head .eyebrow, body.sf-home .sf-sec .sf-eyebrow .elementor-heading-title { align-items: baseline; }

/* ---------- line-mask titles: words rise from under a mask, line after line ---------- */
.split .w { overflow: hidden; vertical-align: bottom; padding: .08em 0 .07em; margin: -.08em 0 -.07em; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.split .w .wi { display: inline-block; transition: transform 1.05s var(--ease-out); transition-delay: calc(var(--ln, 0) * 120ms + var(--i, 0) * 16ms); }
html.sf-anim .split:not(.is-in) .w .wi { transform: translateY(112%); }
.hero__title .w { overflow: visible; padding: 0; margin: 0; }
.hero__title .w .wi { transition: none; transform: none !important; }

/* ---------- chapter rail (desktop, film pages) ---------- */
.sf-rail { position: fixed; left: 16px; top: 50%; translate: 0 -50%; z-index: 80; display: none; flex-direction: column; gap: 9px; direction: ltr; transition: opacity .4s; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) { .sf-rail { display: flex; } }
.sf-rail a { display: flex; align-items: center; gap: 10px; min-height: 18px; color: var(--sf-ink); text-decoration: none; opacity: .5; transition: opacity .3s, color .3s; }
.sf-rail a i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; transition: transform .3s var(--ease-out); }
.sf-rail a span { font-family: var(--f-sans); font-size: .78rem; font-weight: 500; direction: rtl; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--ease-out); }
.sf-rail:hover a span, .sf-rail a.is-on span { opacity: 1; transform: none; }
.sf-rail a.is-on { opacity: 1; color: var(--sf-wine); }
.sf-rail a.is-on i { transform: scale(1.7); }
.sf-rail.is-dark a { color: var(--sf-paper); }
.sf-rail.is-dark a.is-on { color: var(--sf-gold-soft); }
.sf-rail.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- loader: the SARAF wordmark draws itself, then fills (once per session, film pages) ---------- */
.sf-loader { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: var(--sf-paper); animation: sfLoaderOut .5s var(--ease-out) 9s forwards; }
.sf-loader.is-done { animation: sfLoaderOut .55s var(--ease-out) forwards; }
html.sf-noload .sf-loader, body.elementor-editor-active .sf-loader { display: none; }
.sf-loader__in { display: grid; justify-items: center; gap: 16px; }
.sf-loader__mark { width: min(56vw, 320px); height: auto; overflow: visible; }
.sf-loader__mark path { fill: var(--sf-wine); fill-opacity: 0; stroke: var(--sf-wine); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
	animation: sfDraw .9s cubic-bezier(.65,0,.35,1) forwards, sfFill .45s ease-out forwards; animation-delay: calc(var(--i, 0) * 70ms), calc(.75s + var(--i, 0) * 40ms); animation-play-state: paused; }
.sf-loader.is-go .sf-loader__mark path, .sf-loader.is-go .sf-loader__line, .sf-loader.is-go .sf-loader__sub { animation-play-state: running; }
.sf-loader__line { width: min(56vw, 320px); height: 1px; background: var(--sf-gold); transform: scaleX(0); animation: sfLine .7s var(--ease-out) .9s forwards; animation-play-state: paused; }
.sf-loader__sub { font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; line-height: 1; color: var(--sf-ink); opacity: 0; animation: sfFade .5s ease-out 1.05s forwards; animation-play-state: paused; }
@keyframes sfDraw { to { stroke-dashoffset: 0; } }
@keyframes sfFill { to { fill-opacity: 1; } }
@keyframes sfLine { to { transform: scaleX(1); } }
@keyframes sfFade { to { opacity: 1; } }
@keyframes sfLoaderOut { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .sf-loader__mark path { animation: none !important; fill-opacity: 1; stroke-dashoffset: 0; } .sf-loader__line { animation: none !important; transform: none; } .sf-loader__sub { animation: none !important; opacity: 1; } }

/* ---------- hero payoff: the SARAF wordmark (desktop frames mode) ----------
   After the pour, the outline of the wordmark draws itself over the poured table; then the footage gives way to paper
   everywhere except inside the letters, and the lockup settles with its line and "בית לאומנות בעץ" (like the logo).
   JS writes on the section: --ho --hy --veil (the copy leaves) · --wo (outline opacity) · --fill · --lock, and each glyph's stroke offset. */
.hero--payoff { --wmw: min(68vw, 1060px, calc((100vh - 320px) * 1.9286)); --fill: 0; --lock: 0; --wo: 0; }
.hero--payoff .hero__pground { position: absolute; inset: 0; z-index: 0; background: var(--sf-paper); }
.hero--payoff .hero__pword { position: absolute; inset: 0; z-index: 1; overflow: hidden;
	-webkit-mask: url("../media/saraf-wordmark-mask.svg") center / var(--wmw) auto no-repeat; mask: url("../media/saraf-wordmark-mask.svg") center / var(--wmw) auto no-repeat;
	transform: translateY(calc(var(--lock) * -4.5vh)) scale(calc(1 - var(--lock) * .14)); transform-origin: 50% 50%; will-change: transform; }
/* the material settles into the letters: the last frame drifts up and in, so the letters end filled with wood and resin, not with the wall behind */
.hero--payoff .hero__pword i { position: absolute; inset: 0; background: #2A1C15 var(--last) center / cover no-repeat; transform-origin: 50% 72%;
	transform: translateY(calc(var(--fill) * -9%)) scale(calc(1 + var(--fill) * .16)); will-change: transform; }
/* the footage condenses into the letters: an iris closes on the centre while it fades */
.hero--payoff .hero__pdisc { position: absolute; inset: 0; z-index: 2; opacity: calc(1 - var(--fill) * var(--fill)); contain: strict; }
/* the iris mask costs a repaint per frame, so it exists only while the footage gives way */
.hero--payoff.is-filling .hero__pdisc {
	-webkit-mask-image: radial-gradient(ellipse calc(150% - var(--fill) * 120%) calc(150% - var(--fill) * 120%) at 50% 50%, #000 55%, transparent 100%);
	mask-image: radial-gradient(ellipse calc(150% - var(--fill) * 120%) calc(150% - var(--fill) * 120%) at 50% 50%, #000 55%, transparent 100%); }
.hero--payoff .hero__pcv { will-change: contents; }
.hero--payoff .hero__in, .hero__wmark, .hero__ptag { will-change: opacity, transform; }
.hero--payoff .hero__pdim { position: absolute; inset: 0; z-index: 3; background: rgba(28,18,14,.42); opacity: var(--dim, 0); pointer-events: none; }
.hero--payoff .hero__pveil { opacity: var(--veil, 1); }
.hero__wmark { position: absolute; z-index: 3; left: 50%; top: 50%; width: var(--wmw); height: auto; translate: -50% -50%; overflow: visible; pointer-events: none; opacity: var(--wo);
	transform: translateY(calc(var(--lock) * -4.5vh)) scale(calc(1 - var(--lock) * .14)); }
.hero__wmark path { fill: none; stroke: #FAF7F2; stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: round; }
.hero__ptag { position: absolute; z-index: 3; left: 50%; top: calc(50% + var(--wmw) * .2593 * (1 - var(--lock) * .14) - var(--lock) * 4.5vh + 26px); translate: -50% 0; display: grid; justify-items: center; gap: 14px; opacity: var(--lock); pointer-events: none; }
.hero__ptag i { display: block; width: calc(var(--wmw) * .86); height: 1px; background: var(--sf-gold); transform: scaleX(var(--lock)); }
.hero__ptag span { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.9rem, 1rem + 1.9vw, 3.1rem); line-height: 1; color: var(--sf-ink); letter-spacing: .02em; transform: translateY(calc((1 - var(--lock)) * 12px)); }
.hero--payoff .hero__in, .hero--payoff .hero__phud { opacity: var(--ho, 1); }
.hero--payoff .hero__in { position: relative; z-index: 4; transform: translateY(calc(var(--hy, 0) * 1px)); will-change: opacity, transform; }
.hero--payoff .hero__in.is-gone { visibility: hidden; }
.hero--payoff .hero__phud { z-index: 4; }
/* phones: no pinned film. After the copy, the letters fill with the poured table from the bottom up, like resin poured into a mould */
@media (max-width: 767px) {
	.hero--payoff .hero__pground, .hero__wmark { display: none; }
	.hero--payoff .hero__pdisc { position: static; opacity: 1; -webkit-mask-image: none; mask-image: none; order: 1; }
	.hero--payoff .hero__pdim { display: none; }
	.hero--payoff .hero__in { order: 2; opacity: 1; transform: none; padding-bottom: 28px; }
	.hero--payoff .hero__pword { order: 3; position: relative; inset: auto; display: block; width: 84vw; margin: 8px auto 0; aspect-ratio: 1.9286; transform: none;
		-webkit-mask-size: 100% auto; mask-size: 100% auto; clip-path: inset(100% 0 0 0); transition: clip-path 1.8s cubic-bezier(.65,0,.35,1); }
	.hero--payoff .hero__pword.is-in { clip-path: inset(0 0 0 0); }
	.hero--payoff .hero__pword i { transform: none; background-position: 50% 62%; background-size: 230% auto; }
	.hero--payoff .hero__ptag { order: 4; position: static; translate: none; margin: 14px auto 64px; opacity: 0; transition: opacity .8s ease 1.3s; }
	.hero--payoff .hero__pword.is-in ~ .hero__ptag { opacity: 1; }
	.hero--payoff .hero__ptag i { width: 84vw; transform: none; }
	.hero--payoff .hero__ptag span { font-size: 1.7rem; transform: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .hero--payoff .hero__pword { clip-path: none; transition: none; } .hero--payoff .hero__ptag { opacity: 1; transition: none; } }


/* through the letter: after the lockup, the camera flies into the counter of the second A; its paper becomes the next chapter */
.hero__pzoom { position: absolute; inset: 0; z-index: 1; will-change: transform;
	transform-origin: calc(50% + var(--wmw) * .2255 * .86) calc(50% - 4.5vh + var(--wmw) / 1.9286 * .166 * .86);
	transform: scale(var(--zoom, 1)); }
.hero--payoff .hero__ptag { opacity: calc(var(--lock) * max(0, 1 - var(--ex, 0) * 5)); }
/* the next chapter arrives while the stage is still pinned: no empty paper screen after the fly-through */
/* the letters burst apart (--ex 0→1) and the next chapter, already sitting behind the stage, shows through */
@media (min-width: 768px) {
	body.sf-home .e-con:has(.hero--payoff) { position: relative; z-index: 2; background: transparent !important; }
	body.sf-home .e-con:has(.hero--payoff) + .e-con { margin-top: -100vh !important; position: relative; z-index: 1; }
	.hero--payoff, .hero--payoff .hero__pstage { background: transparent !important; }
	.hero--payoff > .chapter__bg { display: none; }
	.hero--payoff .hero__pground { opacity: calc(1 - var(--ex, 0)); }
	.hero--payoff.is-burst .hero__pstage { pointer-events: none; }
	.hero__pglyphs { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; }
	.hero--payoff.is-burst .hero__pglyphs { display: block; }
	.hero--payoff.is-burst .hero__pzoom { visibility: hidden; }
	.hero__pglyph { position: absolute; inset: 0; -webkit-mask: var(--m) center / var(--wmw) auto no-repeat; mask: var(--m) center / var(--wmw) auto no-repeat;
		transform: translate(calc(var(--ex, 0) * var(--gx)), calc(var(--ex, 0) * var(--gy) - 4.5vh)) rotate(calc(var(--ex, 0) * var(--gr))) scale(calc(.86 + var(--ex, 0) * .5));
		transform-origin: 50% 50%; opacity: calc(1 - var(--ex, 0) * var(--ex, 0)); will-change: transform, opacity; }
	.hero__pglyph i { position: absolute; inset: 0; background: #2A1C15 var(--last) center / cover no-repeat; transform-origin: 50% 72%; transform: translateY(-9%) scale(1.16); }
}
@media (max-width: 767px) { .hero__pglyphs { display: none; } }
/* the main headline, louder */
.hero--pour .hero__title { font-size: clamp(3.8rem, 1.4rem + 8vw, 9.6rem) !important; line-height: .86; text-shadow: 0 2px 40px rgba(20,12,9,.35); }
.hero--pour .hero__copy { max-width: 780px; }
.hero--pour .hero__pveil { background: linear-gradient(to left, rgba(28,18,14,.62) 0%, rgba(28,18,14,.35) 45%, rgba(28,18,14,0) 75%), linear-gradient(to top, rgba(28,18,14,.7) 0%, rgba(28,18,14,0) 45%); }
@media (max-width: 767px) { .hero__pzoom { position: static; transform: none; display: contents; } .hero--pour .hero__title { font-size: clamp(3.6rem, 17vw, 5rem) !important; text-shadow: none; } }

/* ---------- at home: a piece in a real home, edge to edge; the wine tint and the small wine card from the brand posts ---------- */
.athome { padding: 0; min-height: 78vh; display: grid; align-items: end; isolation: isolate; overflow: clip; }
.athome > .chapter__bg { display: none; }
.athome__media { position: absolute; inset: -8% 0; z-index: 0; }
.athome__media picture, .athome__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; }
.athome__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(102,12,12,.46) 0%, rgba(102,12,12,.14) 34%, rgba(42,28,21,0) 58%, rgba(42,28,21,.38) 100%); }
.athome__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-block: clamp(48px, 8vh, 96px); }
.athome__eyebrow { color: var(--sf-paper); }
body.sf-home .athome .eyebrow::before { color: var(--sf-gold-soft); }
.athome__card { max-width: 440px; padding: 20px 24px 22px; border-radius: 10px; background: rgba(102,12,12,.86); color: #FAF7F2; display: grid; gap: 6px; backdrop-filter: none; }
.athome__card b { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1; }
.athome__card p { margin: 0; font-size: .95rem; line-height: 1.5; color: rgba(250,247,242,.9); }
.athome__card a { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: #FAF7F2; font-weight: 600; border-bottom: 1px solid rgba(250,247,242,.55); padding-bottom: 2px; }
@media (max-width: 767px) {
	.athome { min-height: 0; display: block; }
	.athome__media { position: relative; inset: 0; aspect-ratio: 4 / 5; }
	.athome__in { padding-block: 0 44px; margin-top: -56px; }
	.athome__card { max-width: none; width: 100%; }
}

/* ---------- round 14: selected work as a quiet grid ---------- */
.strip__grid { padding-inline: var(--gutter); }
.strip__track--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); width: auto; padding: 0; transform: none !important; }
.strip__track--grid .strip__item { width: auto; transform: none; }
.strip__track--grid .strip__item:hover { transform: translateY(-4px); }
.strip__track--grid .strip__img img { transition: transform 1.2s var(--ease-out); }
.strip__track--grid .strip__item:hover .strip__img img { transform: scale(1.04); }
.strip__track--grid .strip__meta b { font-family: var(--f-display); font-size: 1.6rem; font-weight: 700; line-height: 1; }
@media (max-width: 767px) { .strip__track--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .strip__track--grid .strip__meta { flex-direction: column; gap: 2px; } .strip__track--grid .strip__meta b { font-size: 1.3rem; } }

/* ---------- round 14: workshops as three tall video cards ---------- */
.ws--cards .wrap { display: block; }
.wsv__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.wsv { position: relative; display: block; aspect-ratio: 3 / 4.4; overflow: hidden; border-radius: 4px; background: #2A1C15; color: #FAF7F2; text-decoration: none; isolation: isolate; }
.wsv__video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.wsv:hover .wsv__video { transform: scale(1.05); }
.wsv__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,18,14,.86) 0%, rgba(28,18,14,.35) 42%, rgba(28,18,14,0) 65%), linear-gradient(to bottom, rgba(102,12,12,.35), rgba(102,12,12,0) 30%); }
.wsv__no { position: absolute; top: 18px; inset-inline-start: 20px; font-family: var(--f-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--sf-gold-soft); }
.wsv__body { position: absolute; inset-inline: 20px; bottom: 20px; display: grid; gap: 8px; }
.wsv__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 1.6vw, 3.2rem); line-height: .95; }
.wsv__meta { font-size: .95rem; color: rgba(250,247,242,.85); }
.wsv__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; margin-top: 4px; border-top: 1px solid rgba(250,247,242,.3); }
.wsv__price { font-weight: 700; font-size: 1.1rem; }
.wsv__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(250,247,242,.6); transition: background .3s, color .3s; }
.wsv:hover .wsv__go { background: #FAF7F2; color: var(--sf-wine); }
.wsv__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 767px) { .wsv__grid { grid-template-columns: 1fr; } .wsv { aspect-ratio: 4 / 5; } }

/* ---------- round 14: the planner, louder ---------- */
@media (min-width: 901px) {
	body.sf-home .sf-w--configurator .cfg__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
	body.sf-home .sf-w--configurator .cfg__frame { max-width: 720px; }
	body.sf-home .sf-w--configurator .h2 { font-size: clamp(3rem, 1.6rem + 3.6vw, 5.4rem); }
}

/* Orel 13.10: the next chapter is pulled under the hero (-100vh) for the burst, so the hero's stage sat on top of the categories and swallowed every click.
   The hero lets clicks through; only its own links/buttons take them, and only while its copy is on screen. */
body.sf-home .e-con:has(.hero--payoff) { pointer-events: none; }
body.sf-home .e-con:has(.hero--payoff) a, body.sf-home .e-con:has(.hero--payoff) button { pointer-events: auto; }
body.sf-home .hero--payoff .is-gone a, body.sf-home .hero--payoff .is-gone button, body.sf-home .hero--payoff.is-burst a, body.sf-home .hero--payoff.is-burst button { pointer-events: none; }