/* Hero cinematic — video derulat din scroll. Tokenii de culoare vin din site.css. */
:root{--hero-scroll:660vh}
/* ══ HERO ══════════════════════════════════════════════════ */
.hero{position:relative;height:var(--hero-scroll)}
/* pe telefon scurtăm cursa — altfel sunt prea multe swipe-uri */
@media(max-width:760px){:root{--hero-scroll:520vh}}
.stage{
  position:sticky;top:0;
  height:100vh;height:100svh;
  width:100%;
  overflow:hidden;
  background:#000;
  isolation:isolate;
}
.stage video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  will-change:transform;
  transform:scale(1.04);
}
/* masterul se suprapune peste proxy și apare abia când e gata */
#filmHi{opacity:0;transition:opacity .5s ease}
#filmHi.on{opacity:1}

/* scrims + film texture */
.scrim{position:absolute;inset:0;pointer-events:none}
.scrim.top{background:linear-gradient(to bottom,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 16%,transparent 34%)}
.scrim.bottom{background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.34) 22%,transparent 52%)}
.scrim.edge{background:radial-gradient(120% 90% at 50% 50%,transparent 46%,rgba(0,0,0,.5) 100%)}
.scrim.sides{background:linear-gradient(to right,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 24%,transparent 40%,transparent 62%,rgba(0,0,0,.16) 80%,rgba(0,0,0,.48) 100%)}
.grain{
  position:absolute;inset:-50%;
  pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

/* passe-partout frame */
.frame{position:absolute;inset:18px;border:1px solid var(--hair);pointer-events:none;z-index:4}
@media(max-width:760px){.frame{inset:11px}}

/* ══ SCENE TEXT ══ */
.scenes{position:absolute;inset:0;z-index:5;pointer-events:none}
.scene{
  position:absolute;
  width:min(560px,74vw);
  opacity:0;
  will-change:opacity,transform;
}
/* halou moale sub text — garantează lizibilitatea pe cadrele deschise */
.scene::before{
  content:"";position:absolute;
  inset:-72px -96px -80px -96px;
  background:radial-gradient(closest-side ellipse at 50% 50%,
    rgba(0,0,0,.52) 0%,rgba(0,0,0,.34) 48%,rgba(0,0,0,.12) 76%,transparent 100%);
  pointer-events:none;
}
.scene > *{position:relative;opacity:0}
/* intrarea primei scene e legată de încărcare, nu de scroll —
   hero-ul trebuie să se citească din prima, fără să derulezi */
.scene.intro,.scene.intro > *{
  transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1),filter .9s ease;
}
.scene.intro > *:nth-child(1){transition-delay:.20s}
.scene.intro > *:nth-child(2){transition-delay:.38s}
.scene.intro > *:nth-child(3){transition-delay:.54s}
.scene .num{
  font-family:var(--serif);
  font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);
  display:flex;align-items:center;gap:14px;
  margin-bottom:20px;font-weight:500;
  text-shadow:0 1px 14px rgba(0,0,0,.9),0 0 30px rgba(0,0,0,.5);
}
.scene .num::after{content:"";height:1px;width:56px;background:linear-gradient(to right,var(--gold),transparent)}
.scene h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.05rem,4.4vw,3.7rem);
  line-height:1.06;
  letter-spacing:-.015em;
  text-shadow:0 2px 40px rgba(0,0,0,.55);
}
.scene h2 em{font-style:italic;color:var(--gold-soft)}
.scene p{
  margin-top:20px;
  font-size:clamp(.86rem,1.1vw,1rem);
  line-height:1.75;
  font-weight:300;
  color:rgba(244,239,230,.8);
  max-width:42ch;
  text-shadow:0 1px 20px rgba(0,0,0,.6);
}
.scene .line{display:block}

/* poziții alternate — ritm editorial, nu totul centrat */
.pos-bl{left:8vw;bottom:16vh;text-align:left}
.pos-tr{right:max(9vw,200px);top:20vh;text-align:right}
.pos-tr .num{justify-content:flex-end;flex-direction:row-reverse}
.pos-tr .num::after{background:linear-gradient(to left,var(--gold),transparent)}
.pos-tr p{margin-left:auto}
.pos-br{right:max(9vw,200px);bottom:17vh;text-align:right}
.pos-br .num{justify-content:flex-end;flex-direction:row-reverse}
.pos-br .num::after{background:linear-gradient(to left,var(--gold),transparent)}
.pos-br p{margin-left:auto}
.pos-c{left:50%;transform:translateX(-50%);bottom:15vh;width:min(680px,82vw);text-align:center}
.pos-c .num{justify-content:center}
.pos-c .num::after{display:none}
.pos-c .num::before{content:"";height:1px;width:56px;background:linear-gradient(to right,transparent,var(--gold))}
.pos-c p{margin-left:auto;margin-right:auto}

/* CTA în ultima scenă */
.cta{margin-top:30px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;pointer-events:auto}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 32px;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:400;
  text-decoration:none;border:1px solid var(--gold);
  color:var(--ink);background:var(--gold);
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.btn:hover{background:transparent;color:var(--gold-soft);border-color:var(--gold-soft)}
.btn.ghost{background:transparent;color:var(--ivory);border-color:var(--hair)}
.btn.ghost:hover{border-color:var(--gold-soft);color:var(--gold-soft)}

@media(max-width:760px){
  .scene,.pos-c{left:24px;right:24px;width:auto;bottom:14vh;top:auto;text-align:left;transform:none}
  .pos-c{left:24px;right:24px}
  .scene h2{font-size:clamp(1.75rem,8.4vw,2.5rem)}
  .scene p{font-size:.85rem;line-height:1.65;max-width:none}
  .scene .num,.pos-c .num,.pos-tr .num,.pos-br .num{justify-content:flex-start;flex-direction:row;margin-bottom:14px}
  .pos-c .num::before{display:none}
  .pos-c .num::after,.pos-tr .num::after,.pos-br .num::after{display:block;background:linear-gradient(to right,var(--gold),transparent)}
  .scene p,.pos-c p,.pos-tr p,.pos-br p{margin-left:0;margin-right:0}
  .cta{justify-content:flex-start;gap:10px;margin-top:22px}
  .btn{padding:13px 22px;font-size:.6rem;letter-spacing:.18em}
}

/* ══ RAIL (indicator 6 scene) ══ */
.rail{
  position:absolute;right:40px;top:50%;transform:translateY(-50%);
  z-index:6;display:flex;flex-direction:column;gap:0;align-items:flex-end;
  opacity:0;
}
.ready .rail{opacity:1;transition:opacity 1s ease .6s}
.rail .tick{
  display:flex;align-items:center;gap:12px;
  height:34px;
  font-size:.55rem;letter-spacing:.2em;
  color:rgba(244,239,230,.5);
  transition:color .5s ease;
  text-shadow:0 1px 10px rgba(0,0,0,.85);
}
.rail .tick .lbl{
  opacity:0;transform:translateX(6px);
  transition:opacity .5s ease,transform .5s ease;
  white-space:nowrap;text-transform:uppercase;
}
.rail .tick .bar{
  display:block;height:1px;width:16px;background:rgba(244,239,230,.45);box-shadow:0 0 8px rgba(0,0,0,.6);
  transition:width .5s cubic-bezier(.16,1,.3,1),background .5s ease;
}
.rail .tick.on{color:var(--gold-soft)}
.rail .tick.on .lbl{opacity:1;transform:none}
.rail .tick.on .bar{width:38px;background:var(--gold)}
@media(max-width:1100px){.rail{display:none}}

/* ══ PROGRESS + SCROLL CUE ══ */
.progress{
  position:absolute;left:0;bottom:0;height:2px;width:0%;
  background:linear-gradient(to right,rgba(200,165,106,.25),var(--gold));
  z-index:7;
}
.cue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.55rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(244,239,230,.7);
}
.cue .rail-line{width:1px;height:40px;background:rgba(244,239,230,.22);overflow:hidden;position:relative}
.cue .rail-line::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:40%;
  background:var(--gold-soft);animation:cueRun 1.9s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cueRun{0%{transform:translateY(-100%)}70%,100%{transform:translateY(250%)}}
@media(max-width:760px){.cue{bottom:24px}}

/* ══ LOADER ══ */
.loader{
  position:absolute;inset:0;z-index:20;background:#000;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;
  transition:opacity .9s ease,visibility .9s;
}
.ready .loader{opacity:0;visibility:hidden}
.loader .lname{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--gold-soft)}
.loader .lbar{width:120px;height:1px;background:rgba(244,239,230,.16);overflow:hidden}
.loader .lbar i{display:block;height:100%;width:30%;background:var(--gold);animation:load 1.4s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}

@media(prefers-reduced-motion:reduce){
  .grain,.cue .rail-line::after,.loader .lbar i{animation:none}
}