/* ════════════════════════════════════════════════
   SVAMZ — Hero v3 "Projektor"  ·  scroll-driven film hero
   Loaded by index.html only, after style.css.
   Palette and fonts come from style.css; nothing here overrides them.
   ════════════════════════════════════════════════ */
:root{
  /* additions to style.css for the film hero */
  --accent:#E8493F;     /* the italic accent already hard-coded at style.css:2000 */
  --film-bg:#060607;
  --film-shade:.4;      /* darkness of the wash over the picture (0 = off) */
}

/* ════════════════════════════════════════════════
   1. TRACK + STAGE
   ════════════════════════════════════════════════ */
.hero-film{position:relative;background:var(--film-bg)}
.film-track{position:relative;height:520vh;height:520svh}
.film-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--film-bg)}
/* Opening iris: a separate plate that only fades. Never clip-path the stage
   (it re-rasterises everything inside it every frame) and no will-change on a
   full-viewport gradient (promoting it forces a costly texture over the film). */
.film-iris{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,
    rgba(6,6,7,.10) 0%, rgba(6,6,7,.62) 30%, rgba(6,6,7,.97) 56%, #060607 70%);
  opacity:1}
.film-stage.opened .film-iris{animation:irisOpen 1.25s cubic-bezier(.4,.02,.2,1) forwards}
@keyframes irisOpen{from{opacity:1}to{opacity:0}}
.film-stage.booting .film-canvas,.film-stage.booting .film-poster,.film-stage.booting .film-beats{opacity:0}
.film-stage.opened .film-canvas,.film-stage.opened .film-poster{animation:filmIn 1.5s cubic-bezier(.4,.02,.2,1) forwards}
.film-stage.opened.film-live .film-poster{animation:none}
@keyframes filmIn{from{opacity:0}to{opacity:1}}

/* image: slow push-in + a little drift, both driven from JS vars */
.film-canvas,.film-poster{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  --vs:1.04;--vx:0px;--vy:0px;
  transform:scale(var(--vs)) translate3d(var(--vx),var(--vy),0);will-change:transform}
.film-poster{object-fit:cover;z-index:1;transition:opacity .5s linear}
.film-stage.film-live .film-poster{opacity:0}

/* ─── cover → story ─── */
.film-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  transform:scale(1.02);transform-origin:50% 50%}
.film-stage.opened .film-cover{animation:filmIn 1.5s cubic-bezier(.4,.02,.2,1) forwards,
  coverBreathe 18s cubic-bezier(.2,0,.1,1) forwards}          /* the still breathes while it waits */
@keyframes coverBreathe{to{transform:scale(1.10)}}
.film-stage.booting .film-cover{opacity:0}
/* Once the story has begun the cover is driven by scroll (see hero-film.js):
   the breathe stops and it simply crossfades with the film at the top. */
.film-stage.story .film-cover{animation:none;transform:scale(1.02)}
.film-fade{position:absolute;inset:0;z-index:7;background:#060607;opacity:0;pointer-events:none}
.film-fade.in {opacity:1;transition:opacity .55s cubic-bezier(.4,0,.2,1)}    /* screen dips to black */
.film-fade.out{opacity:0;transition:opacity 1.4s cubic-bezier(.2,0,.2,1)}    /* film fades up to 100 */

/* one quiet global vignette, always on. Per-beat darkening is a band that
   follows the text, not a full-frame gradient. */
.film-cine{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.50) 0%,transparent 16%),
    linear-gradient(to top,rgba(0,0,0,.62) 0%,transparent 26%),
    radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.42) 100%)}
/* A flat dark wash over the picture — cover still and film alike — that mutes
   the too-clean highlights of the generated imagery. Sits under the vignette
   and grain. Plain alpha, no blend mode, for the same reason as the grain. */
.film-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(6,6,7,var(--film-shade))}
/* Grain: viewport-sized, NO blend mode. A 2.5x-viewport overlay-blended layer
   measurably cost frames; a plain low-alpha composite reads the same. */
.film-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ════════════════════════════════════════════════
   2. BEATS — position is f(--kin, --kout)
   --kin  : 0→1 while the beat enters
   --kout : 1→0 while it leaves
   ════════════════════════════════════════════════ */
.film-beats{position:absolute;inset:0;z-index:5}
.fbeat{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none;
  padding:calc(var(--nav-h) + 24px) 48px 96px;
  --kin:0;--kout:1;--k:calc(var(--kin) * var(--kout));
  opacity:var(--k);
  /* enter from below, leave upward — a continuous glide, never a fade-in-place */
  transform:translate3d(0,calc((1 - var(--kin)) * 90px - (1 - var(--kout)) * 70px),0);
  visibility:hidden;contain:layout paint}
.fbeat.is-live{visibility:visible}
.fbeat.is-live .fb-cta a{pointer-events:auto}

/* only two vertical positions — centred, or a bottom band */
.fbeat[data-pos="center"]{justify-content:center;align-items:center;text-align:center}
.fbeat[data-pos="bottom"]{justify-content:flex-end;align-items:center;text-align:center;padding-bottom:118px}
/* hero copy hugs the left of the viewport rather than a centred container —
   on wide displays the centred column drifts into the bright lens reflection */
.fbeat[data-pos="left-bottom"]{justify-content:flex-end;align-items:flex-start;text-align:left;
  padding-left:max(48px,5.5vw)}

/* a soft band of shadow that travels with the text, so the film stays bright
   everywhere the type isn't. Sized by the beat's own content. */
.fb-inner{position:relative;max-width:820px}
.fb-inner::before{content:'';position:absolute;inset:-22% -18%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(6,6,7,var(--pad,.55)) 0%,rgba(6,6,7,calc(var(--pad,.55)*.6)) 55%,rgba(6,6,7,0) 100%);
  filter:blur(18px)}
.fbeat[data-pos="left-bottom"] .fb-inner::before{inset:-20% -30% -30% -40%}

/* ─── type ─── */
.fb-eyebrow{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin:0 0 18px;
  display:inline-flex;align-items:center;gap:14px}
.fb-eyebrow::before{content:'';width:36px;height:1px;background:var(--red)}
.fbeat[data-pos="left-bottom"] .fb-eyebrow::before{width:46px}

.fb-head{font-family:var(--font-serif);font-weight:700;color:#fff;
  font-size:clamp(2.6rem,min(5.4vw,10vh),4.4rem);line-height:.99;letter-spacing:-.025em;margin:0}
.fb-head em,.fb-big em,.fb-line em{font-style:italic;font-weight:600;color:var(--accent)}

/* monumental — one word, or one number. Sized to the viewport and never
   allowed to wrap: a broken "V / gibanju" is worse than a smaller word. */
.fbeat[data-pos="center"] .fb-inner,.fbeat[data-pos="bottom"] .fb-inner{max-width:min(92vw,1180px)}
.fb-big{font-family:var(--font-serif);font-weight:700;color:#fff;white-space:nowrap;
  font-size:clamp(3.6rem,11.5vw,11.5rem);line-height:.92;letter-spacing:-.04em;margin:0;
  font-variant-numeric:tabular-nums}
.fb-big.num{font-weight:600;letter-spacing:-.02em}
/* a short phrase, not a word: smaller, and on a phone it may break */
.fb-big--phrase{font-size:clamp(2.6rem,6.4vw,5.6rem)}

/* type shadows — the film is bright in places (road, fog, paper) */
.fb-big,.fb-head{text-shadow:0 2px 4px rgba(0,0,0,.35),0 6px 40px rgba(0,0,0,.55)}
.fb-big em,.fb-head em{text-shadow:0 2px 4px rgba(0,0,0,.45),0 6px 40px rgba(0,0,0,.7),0 0 90px rgba(0,0,0,.5)}
.fb-line,.fb-lead,.fb-eyebrow,.fb-micro{text-shadow:0 1px 3px rgba(0,0,0,.4),0 3px 24px rgba(0,0,0,.5)}

/* The odometer moved to style.css (see MECHANISMS) — it is shared with the
   membership stat band now, and style.css is where shared primitives live.
   Its JS moved to odo.js for the same reason. */

/* the spoken line */
.fb-line{font-family:var(--font-serif);font-weight:600;color:#fff;
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.25;letter-spacing:-.012em;margin:0;
  text-wrap:balance}
.fb-big + .fb-line{margin-top:22px;font-weight:400;color:rgba(255,255,255,.86)}

.fb-lead{font-size:1.06rem;font-weight:300;line-height:1.65;color:rgba(255,255,255,.72);
  max-width:462px;margin:22px 0 0}
.fb-micro{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin:22px 0 0;display:flex;gap:22px;
  justify-content:center;flex-wrap:wrap}
.fbeat[data-pos="left-bottom"] .fb-micro{justify-content:flex-start}
.fb-micro b{color:#fff;font-weight:600}
.fb-micro i{font-style:normal;color:rgba(255,255,255,.3)}

/* word-level stagger, still f(scroll): each word gets its own delayed copy of --kin */
.w{display:inline-block;
  --kw:clamp(0,calc((var(--kin) - var(--i,0) * .09) / .72),1);
  opacity:var(--kw);
  transform:translate3d(0,calc((1 - var(--kw)) * .55em),0)}

.fb-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}

/* the opening beat is at scroll 0 on load, so it gets the one timed entrance
   the page has — the same staged reveal the live hero uses */
.fbeat--intro{--kin:1}
/* .01, not 0: invisible to the eye, but the browser treats the headline as
   painted from the first frame, so its arrival isn't scored as a late paint */
.fbeat--intro .w{--kw:1;opacity:.01;transform:translate3d(0,.55em,0);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fbeat--intro .fb-eyebrow,.fbeat--intro .fb-lead{opacity:.01;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fbeat--intro.in .w,.fbeat--intro.in .fb-eyebrow,.fbeat--intro.in .fb-lead{opacity:1;transform:none}
.fbeat--intro.in .fb-eyebrow{transition-delay:.5s}
.fbeat--intro.in .w{transition-delay:calc(.62s + var(--i,0) * .13s)}
.fbeat--intro.in .fb-lead{transition-delay:1.15s}
.fbeat--intro .fb-cta{justify-content:flex-start;margin-top:28px;opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fbeat--intro.in .fb-cta{opacity:1;transform:none;transition-delay:1.35s}
.fb-cta a{pointer-events:auto}

/* ─── auto-play ("Izvedi več"): the hero copy dissolves, the vignette lifts,
   and the page carries the visitor through the film on its own ─── */
.film-stage.auto .fbeat--intro{transition:opacity .7s var(--ease);opacity:0!important}
.film-stage.auto .film-cine{opacity:.6}
.film-cine{transition:opacity 1.4s var(--ease)}
.film-hint{position:absolute;left:48px;bottom:26px;z-index:7;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.42);opacity:0;transition:opacity .6s;pointer-events:none}
.film-stage.auto .film-hint{opacity:1}

/* ════════════════════════════════════════════════
   3. CHROME — a hairline and a breath
   ════════════════════════════════════════════════ */
.film-line{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:6;background:rgba(255,255,255,.08)}
.film-line i{position:absolute;inset:0;background:var(--red);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.film-line b{position:absolute;inset:0;background:rgba(255,255,255,.16);transform-origin:0 50%;transform:scaleX(0)}  /* frames loaded */
/* wrapper owns visibility (keyframe opacity on the same element would win) */
.film-cue{position:absolute;left:50%;bottom:34px;margin-left:-.5px;z-index:6;pointer-events:none;
  width:1px;height:38px;opacity:var(--cue,1);transition:opacity .4s}
.film-cue i{position:absolute;inset:0;display:block;
  background:linear-gradient(to bottom,rgba(255,255,255,.55),transparent);
  animation:cueDrop 2.2s var(--ease) infinite}
@keyframes cueDrop{0%{transform:scaleY(0);transform-origin:top;opacity:0}
  40%{transform:scaleY(1);transform-origin:top;opacity:1}
  65%{transform:scaleY(1);transform-origin:bottom;opacity:1}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0}}
.film-skip{position:absolute;right:48px;bottom:26px;z-index:7;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.38);text-decoration:none;
  opacity:0;animation:fadeIn 1s var(--ease) 2.6s forwards;transition:color .3s}
.film-skip:hover{color:#fff}
@keyframes fadeIn{to{opacity:1}}

/* handoff target (prototype) */

/* ════════════════════════════════════════════════
   4. RESPONSIVE
   ════════════════════════════════════════════════ */
@media(max-width:900px){
  .film-track{height:400vh;height:400svh}
  .fbeat{padding:calc(var(--nav-h) + 12px) 24px 84px}
  .fbeat[data-pos="bottom"]{padding-bottom:96px}
  .fb-head{font-size:clamp(2.3rem,10.5vw,3.3rem)}
  .fb-big{font-size:clamp(3.2rem,16.5vw,6rem)}
  .fb-big--phrase{font-size:clamp(2.6rem,12.5vw,3.8rem);line-height:1;white-space:normal;text-wrap:balance}
  .fb-inner{max-width:100%}
  .fb-line{font-size:clamp(1.45rem,6.4vw,1.95rem)}
  .fb-lead{font-size:1rem;line-height:1.55;max-width:34ch;margin-top:16px}
  .fb-eyebrow{font-size:.68rem;letter-spacing:.16em;margin-bottom:14px;gap:10px}
  .fb-eyebrow::before{width:22px}
  /* portrait cover: lift the picture so the car sits above the copy and the
     headline lands on the wet road, not on the windows */
  .film-cover{object-position:50% 28%}
  .fbeat--intro .fb-cta{margin-top:20px}
  .fb-micro{gap:8px 14px;font-size:.72rem;letter-spacing:.12em}
  .fb-cta{flex-direction:column;align-items:stretch;width:100%}
  .fb-cta .btn-primary,.fb-cta .btn-ghost{justify-content:center;width:100%;padding:15px 24px}
  .film-skip{right:24px}
}

/* Short landscape screens (small laptops, larger text scaling, browser chrome
   eating height). The intro copy is bottom-anchored, so once the stack is
   taller than the room under the nav it climbs into the crest. The headline
   already shrinks with height (see .fb-head); here the stack tightens and the
   bottom band gives back what the scroll cue doesn't need — the cue is centred
   and this copy is on the left. */
@media(min-width:901px) and (max-height:700px){
  .fbeat[data-pos="left-bottom"]{padding-bottom:clamp(44px,8vh,96px)}
  .fbeat--intro .fb-eyebrow{margin-bottom:12px}
  .fbeat--intro .fb-lead{margin-top:14px;line-height:1.55}
  .fbeat--intro .fb-cta{margin-top:20px}
}

/* ════════════════════════════════════════════════
   5. REDUCED MOTION — unpinned, stacked, still
   ════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .film-track{height:auto}
  /* The poster and the shade/vignette/grain go position:fixed here, a still
     backdrop behind the stacked beats. clip-path is what keeps a fixed child
     inside its ancestor's box; with it off they painted over the whole page
     below the hero. */
  .film-stage{position:relative;height:auto;clip-path:inset(0)!important;animation:none!important}
  .film-poster{position:fixed;transform:none!important;opacity:1!important}
  .film-canvas{display:none}
  .film-shade,.film-cine,.film-grain{position:fixed}
  .film-beats{position:relative;inset:auto}
  .fbeat{position:relative;inset:auto;min-height:72vh;visibility:visible!important;
    opacity:1!important;transform:none!important;justify-content:center!important}
  .w,.fbeat--intro .w,.fbeat--intro .fb-eyebrow,.fbeat--intro .fb-lead{opacity:1!important;transform:none!important;transition:none!important}
  .fb-cta a{pointer-events:auto}
  /* the iris only fades via .opened, which never runs here — hide it outright
     or it leaves a permanent dark vignette over the stills */
  .film-cue,.film-skip,.film-line,.film-iris,.film-cover,.film-fade{display:none}
  .film-stage.booting .film-poster,.film-stage.booting .film-beats{opacity:1}
}

/* ════════════════════════════════════════════════
   5b. NO JAVASCRIPT — same treatment, different trigger

   Without JS, hero-film.js never boots: the stage keeps its `booting` class
   (which zeroes the canvas, poster and beats) and no .fbeat ever gets
   `.is-live`, so every beat stays `visibility:hidden`. The whole narrative —
   including the page's only <h1> — was invisible to a client with scripting
   off, and to anything that renders HTML without executing it.

   The `js` class is written by an inline <head> script, so `html:not(.js)`
   is true during the very first paint and permanently true when JS is off.
   ════════════════════════════════════════════════ */
html:not(.js) .film-track{height:auto}
html:not(.js) .film-stage{position:relative;height:auto;overflow:visible}
html:not(.js) .film-canvas{display:none}
html:not(.js) .film-poster{position:absolute;inset:0;opacity:1}
html:not(.js) .film-beats{position:relative;inset:auto}
html:not(.js) .fbeat{position:relative;inset:auto;min-height:72vh;
  visibility:visible;opacity:1;transform:none;justify-content:center}
html:not(.js) .fbeat .w,
html:not(.js) .fbeat--intro .w,
html:not(.js) .fbeat--intro .fb-eyebrow,
html:not(.js) .fbeat--intro .fb-lead,
html:not(.js) .fbeat--intro .fb-cta{opacity:1;transform:none}
html:not(.js) .fb-cta a{pointer-events:auto}
html:not(.js) .film-cue,
html:not(.js) .film-skip,
html:not(.js) .film-line,
html:not(.js) .film-iris,
html:not(.js) .film-cover,
html:not(.js) .film-fade{display:none}
html:not(.js) .film-stage.booting .film-poster,
html:not(.js) .film-stage.booting .film-beats,
html:not(.js) .film-stage.booting .film-canvas{opacity:1}


/* ════════════════════════════════════════════════
   6. NAV over the film
   The hero copy is full-bleed left-aligned, so the centred 1200px .nav-inner
   left the emblem ~270px to the right of the headline. Over the film the bar
   runs edge to edge on the copy's axis; at the handoff it eases back into the
   1200px container so it lines up with .container content below.
   ════════════════════════════════════════════════ */
body.has-hero-film #navbar .nav-inner{
  max-width:2000px;padding:0 max(48px,5.5vw);
  transition:max-width .55s var(--ease),padding .55s var(--ease)}
body.has-hero-film #navbar.scrolled .nav-inner{max-width:1200px;padding:0 24px}
body.has-hero-film #navbar.transparent .logo-img{filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
@media (min-width:901px){body.has-hero-film #navbar.transparent .nav-btn{text-shadow:0 1px 12px rgba(0,0,0,.55)}} /* not in the phone drawer */
@media(max-width:900px){
  body.has-hero-film #navbar .nav-inner,
  body.has-hero-film #navbar.scrolled .nav-inner{padding:0 24px}
}