/* ═══════════════════════════════════════════════════════════════
   HERO — vitrina care se deschide
   Filmul stă într-o arcadă îngustă pe hârtie și se lățește până
   la ecran plin pe măsură ce derulezi. --open (0…1) face lățirea,
   --p (0…1) e progresul brut al scroll-ului.
   ═══════════════════════════════════════════════════════════════ */

.hero{
  --open:0;
  --p:0;
  position:relative;
  height:660vh;                 /* lungimea de derulare a hero-ului */
  background:var(--paper);
}

.stage{
  position:sticky; top:0;
  height:100svh; min-height:520px;
  overflow:hidden;
  background:var(--paper);
  display:grid; place-items:center;
}

/* adresa scrisă pe „peretele” de hârtie, în spatele vitrinei */
.ambient{
  position:absolute; left:50%; top:calc(var(--head-h) + 26px);
  transform:translateX(-50%);
  margin:0; white-space:nowrap;
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  font-weight:500; color:var(--ink-3);
  opacity:calc(1 - var(--open) * 1.9);
  transition:opacity .2s linear;
}

/* ─────────── arcada ─────────── */

.vitrina{
  position:relative;
  width:calc((34 + 66 * var(--open)) * 1vw);
  height:calc((66 + 34 * var(--open)) * 1svh);
  min-height:340px;
  border-radius:calc((1 - var(--open)) * 22vw) calc((1 - var(--open)) * 22vw) 0 0;
  overflow:hidden;
  background:#0d0c0a;
  box-shadow:0 calc(28px * (1 - var(--open))) calc(70px * (1 - var(--open)))
             rgba(23,21,15,calc(.22 * (1 - var(--open))));
  will-change:width,height,border-radius;
}
.vitrina video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
#filmHi{ opacity:0; transition:opacity .5s linear; }
.vitrina .scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top,   rgba(9,8,6,.86) 0%, rgba(9,8,6,.52) 30%, rgba(9,8,6,0) 62%),
    linear-gradient(to bottom, rgba(9,8,6,.50) 0%, rgba(9,8,6,.18) 12%, rgba(9,8,6,0) 26%);
}

/* eticheta de epocă, sus în vitrină */
/* centrată sus, nu în colț: cât timp arcada e o ușă, colțurile sunt
   rotunjite cu sute de pixeli și `overflow:hidden` ar tăia eticheta */
.era{
  position:absolute; z-index:3; margin:0;
  /* când arcada ajunge la ecran plin, marginea ei de sus intră sub antet;
     eticheta trebuie să coboare cu exact înălțimea lui, altfel dispare */
  top:calc(16px + (1 - var(--open)) * 3.5vh + var(--open) * var(--head-h));
  left:50%; transform:translateX(-50%);
  font-size:14px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-lt); white-space:nowrap;
  text-shadow:0 1px 10px rgba(9,8,6,.85), 0 0 2px rgba(9,8,6,.6);
  opacity:calc(.72 + var(--open) * .28);
}
.era span{ display:inline-block; }
.era.flip span{ animation:eraIn .5s var(--ease) both; }
@keyframes eraIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ─────────── textele ─────────── */

.says{
  position:absolute; z-index:3;
  left:0; right:0; bottom:0;
  padding:0 calc((18 + 36 * var(--open)) * 1px) calc((24 + 34 * var(--open)) * 1px);
}
.say{
  grid-area:1/1;
  max-width:min(560px, 78%);
  color:var(--paper);
  opacity:0; visibility:hidden;
  transform:translateY(16px);
  transition:opacity .24s var(--ease), transform .4s var(--ease), visibility 0s .24s;
}
.says{ display:grid; }
.say.is-on{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .46s .18s var(--ease), transform .6s .18s var(--ease), visibility 0s;
}

/* tipografia crește odată cu vitrina: cât timp arcada e o ușă îngustă,
   un titlu de 62px ar ocupa tot cadrul și ar acoperi filmul */
.say h1, .say h2{
  font-size:min(62px, calc((20 + 14 * var(--open)) * 1px + (0.8 + 1.4 * var(--open)) * 1vw));
  letter-spacing:-.022em;
  margin:0 0 calc((8 + 8 * var(--open)) * 1px);
  text-wrap:balance;
}
.say p{
  margin:0;
  font-size:calc((13 + 2.4 * var(--open)) * 1px + 0.14vw);
  line-height:1.58;
  color:rgba(246,243,236,.80);
  max-width:46ch;
  font-weight:300;
}

.cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.btn{
  display:inline-block; text-decoration:none;
  font-size:14.5px; font-weight:600; letter-spacing:.02em;
  padding:15px 28px;
  background:var(--cherry); color:var(--paper);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.btn:hover{ background:#8c1319; transform:translateY(-2px); }
.btn.ghost{
  background:transparent; color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(246,243,236,.4);
}
.btn.ghost:hover{ background:rgba(246,243,236,.1); }

/* ─────────── firul de progres ─────────── */

.tape{
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:4;
  background:rgba(23,21,15,.10);
}
.tape i{
  display:block; height:100%; width:calc(var(--p) * 100%);
  background:var(--cherry);
}

/* ─────────── încărcare ─────────── */

.boot{
  position:absolute; inset:0; z-index:9;
  display:grid; place-content:center; justify-items:center; gap:22px;
  background:var(--paper);
  transition:opacity .6s var(--ease), visibility 0s .6s;
}
.boot.gone{ opacity:0; visibility:hidden; }
.boot-mark{
  width:74px; height:74px; color:var(--gold);
  background:currentColor;
  -webkit-mask:url(logo-mark.svg) center/contain no-repeat;
          mask:url(logo-mark.svg) center/contain no-repeat;
  animation:pulse 2.1s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
.boot-bar{ display:block; width:132px; height:2px; background:var(--line); overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:0; background:var(--cherry); transition:width .3s linear; }

/* ─────────── telefon ─────────── */

@media (max-width:900px){
  .hero{ height:620vh; }
  .vitrina{
    width:calc((70 + 30 * var(--open)) * 1vw);
    height:calc((62 + 38 * var(--open)) * 1svh);
    border-radius:calc((1 - var(--open)) * 36vw) calc((1 - var(--open)) * 36vw) 0 0;
  }
  .say{ max-width:100%; }
  .say p{ font-size:14px; }
  /* la 390 px linia ajungea la 373 px lățime — pe telefoane de 360 px
     s-ar fi tăiat; o strâng și îi las margini garantate */
  .ambient{ font-size:9px; letter-spacing:.16em; max-width:calc(100% - 34px); }
  .era{ font-size:12.5px; }
}

@media (prefers-reduced-motion:reduce){
  .hero{ height:auto; }
  .stage{ position:relative; height:auto; padding:calc(var(--head-h) + 30px) 0 40px; }
  .vitrina{ width:min(1100px,92vw); height:70vh; border-radius:0; }
  .say{ position:relative; opacity:1; visibility:visible; transform:none; }
  .says{ display:block; }
  .say + .say{ margin-top:26px; }
}