/* =====================================================================
   ACS Inter Iași — stratul cinematic, registrul `arrival`
   (varianta C din stardust:uplift, 2026-08-22)

   Scris pe clasele REALE din acsinteriasi.ro, nu pe cele din prototip:
   .nav--sus / .hero__media / .section--sub-cifre / .cifre / ul.stats /
   .section--foto / .section--alt / .parteneri / .footer / .brand__text

   Se adauga DUPA css/style.css (fisier separat, sau lipit la final).
   Nu redefineste niciun token: foloseste --blue, --blue-deep, --bg,
   --radius, --nav-h asa cum exista deja in :root.

   TOATE regulile sunt sub `html.motion-on`, clasa pe care o pune
   runtime-ul dupa ce porneste. Daca JS-ul nu ruleaza, nimic nu e
   ascuns — exact bug-ul pe care il are acum `.reveal { opacity: 0 }`.
   ===================================================================== */


/* ---------------------------------------------------------------------
   0 · REPARATIA no-JS pentru .reveal  (vezi si nota din HANDOFF-C.md)
   In css/style.css regula e, acum:        .reveal { opacity: 0; ... }
   Trebuie sa devina:                 .motion-on .reveal { opacity: 0; ... }
   Daca nu poti edita style.css, regula de mai jos o anuleaza si o
   reconstruieste corect — dar prefera editarea, e mai curata.
   --------------------------------------------------------------------- */
html:not(.motion-on) .reveal{opacity:1 !important;transform:none !important}


/* ---------------------------------------------------------------------
   1 · Intrarile pe scroll — inlocuiesc saltul actual cu un ritm etajat
   --------------------------------------------------------------------- */
.motion-on .reveal{opacity:0;transform:translateY(40px)}
.motion-on .reveal.is-visible,
.motion-on .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity 720ms cubic-bezier(.25,.46,.45,.94) var(--d,0ms),
             transform 720ms cubic-bezier(.25,.46,.45,.94) var(--d,0ms);
}

/* intrarea din hero, la incarcare, cu decalaj de 90ms intre randuri */
.motion-on [data-enter]{opacity:0;transform:translateY(22px)}
.motion-on [data-enter].is-in{
  opacity:1;transform:none;
  transition:opacity 720ms cubic-bezier(.25,.46,.45,.94) var(--d,0ms),
             transform 720ms cubic-bezier(.25,.46,.45,.94) var(--d,0ms);
}


/* ---------------------------------------------------------------------
   2 · Hero: fotografia urca in parallax, scrimul se adanceste
   Presupune inaltimea de hero din etapa 1 (~78vh). Cu heroul de 412px
   de acum, cursa e prea scurta ca sa se vada ceva.
   --------------------------------------------------------------------- */
.motion-on .hero{isolation:isolate;overflow:hidden}
.motion-on .hero__media{inset:-12vh 0 0;will-change:transform;
  transform:translate3d(0, calc(var(--p, 0) * -14vh), 0)}

/* stratul care se inchide la coborare; e adaugat de runtime daca lipseste */
.hero__deepen{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg, rgba(42,33,150,.42) 0%, rgba(11,13,18,.72) 100%)}
.motion-on .hero__deepen{opacity:calc(var(--p, 0) * .9)}
.hero__inner{position:relative;z-index:1}


/* ---------------------------------------------------------------------
   3 · "Placa" de dupa hero: prima sectiune urca peste fotografie
   Se aplica pe sectiunea care exista deja — nu e nevoie de wrapper nou.
   --------------------------------------------------------------------- */
/* ADAPTARE fata de pachetul livrat: fara umbra si fara fundal plin.
   Umbra desena o dunga intunecata de-a lungul cusaturii, iar fundalul opac
   acoperea petele de lumina ale paginii — placa se vedea ca un dreptunghi
   mai palid, cu contur, taiat din fundal. Acum culoarea tine doar cat sa
   acopere marginea fotografiei de deasupra si se stinge pana la 200px, deci
   dedesubt fundalul paginii curge neintrerupt. */
.section--sub-cifre{position:relative;z-index:2;
  background:linear-gradient(180deg, var(--bg) 0, var(--bg) 72px, transparent 200px);
  border-radius:26px 26px 0 0;margin-top:-38px}
.motion-on .section--sub-cifre{will-change:transform;
  transform:translate3d(0, calc((1 - var(--pp, 1)) * 64px), 0)}


/* ---------------------------------------------------------------------
   4 · Emblema — pariul variantei C.
   4a. medalionul care aterizeaza pe cusatura placii
   --------------------------------------------------------------------- */
.crest-mark{position:absolute;left:50%;top:0;width:132px;height:132px;
  transform:translate(-50%,-50%);pointer-events:none;z-index:3;
  filter:drop-shadow(0 12px 32px rgba(11,13,18,.45))}
.motion-on .crest-mark{opacity:0;transform:translate(-50%,-50%) scale(.72) rotate(-14deg)}
.motion-on .crest-mark.is-in{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);
  transition:opacity 900ms cubic-bezier(.25,.46,.45,.94),
             transform 900ms cubic-bezier(.42,0,0,1)}

/* 4b. aceeasi emblema, tinuta ca filigran in spatele cifrelor */
.cifre{position:relative;overflow:hidden;isolation:isolate}
.cifre__crest{position:absolute;right:-40px;top:50%;width:340px;height:340px;
  transform:translateY(-50%);opacity:.14;z-index:-1;pointer-events:none;
  filter:grayscale(1) brightness(2.4)}
.motion-on .cifre__crest{will-change:transform,opacity;
  transform:translateY(-50%) translateX(calc(var(--cp, 0) * -70px))
            rotate(calc(var(--cp, 0) * 14deg))
            scale(calc(.92 + var(--cp, 0) * .16));
  opacity:calc(.06 + var(--cp, 0) * .16)}


/* ---------------------------------------------------------------------
   5 · Subsolul, fara animatie
   Wordmark-ul se stergea in sus cand ajungeai la subsol. Scos: subsolul e
   capatul paginii, locul unde cauti un link, nu inca un moment de aratat.
   Pe telefon animatia se declansa la fiecare derulare pana jos si intarzia
   exact textul dupa care te uitai.
   --------------------------------------------------------------------- */
.footer .brand__text{display:inline-block}


/* ---------------------------------------------------------------------
   6 · prefers-reduced-motion — neutralizare completa (obligatoriu)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .motion-on .reveal,
  .motion-on .reveal.is-visible,
  .motion-on .reveal.is-in,
  .motion-on [data-enter],
  .motion-on [data-enter].is-in,
  .motion-on .crest-mark,
  .motion-on .crest-mark.is-in{
    opacity:1 !important;transform:none !important;transition:none !important}
  .motion-on .crest-mark{transform:translate(-50%,-50%) !important}
  .motion-on .hero__media{transform:none !important}
  .motion-on .hero__deepen{opacity:0 !important}
  .motion-on .section--sub-cifre{transform:none !important}
  .motion-on .cifre__crest{transform:translateY(-50%) !important;opacity:.14 !important}
  html{scroll-behavior:auto}
}

@media (max-width:640px){
  .crest-mark{width:96px;height:96px}
  .cifre__crest{width:240px;height:240px;right:-70px}
}


/* ---------------------------------------------------------------------
   8 · Stiva de cartonase din dreapta antetului (numai pagina de acasa)
   Doua fotografii inclinate care intra dinspre dreapta o singura data,
   cand se ridica ecranul de incarcare, si raman asa. Fara bucla: e un
   element al paginii, nu o animatie de urmarit.
   Marcajul e in index.html, in <section class="hero">.
   Declansarea (clasa .is-in) o pune js/inter-cinematic.js, sectiunea 2b.
   --------------------------------------------------------------------- */
.hero__stiva{
  position:absolute; z-index:2;
  right:clamp(20px, 5vw, 84px); bottom:184px;
  display:flex; align-items:flex-end;
}
.hero__card{
  --t:none;
  /* Latimea scade cu ecranul: la 1150px, trei cartonase de 208px plus
     marginea ar fi ajuns peste coloana de text. Inaltimea vine din raport,
     ca sa nu tin doua cifre in acord. */
  --w:clamp(160px, 13vw, 208px);
  position:relative; display:block; flex:none;
  width:var(--w); aspect-ratio:3/4; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 26px 64px rgba(11,13,18,.55), 0 2px 8px rgba(11,13,18,.4);
  transform:var(--t);
  transition:transform 420ms cubic-bezier(.25,.46,.45,.94),
             box-shadow 420ms cubic-bezier(.25,.46,.45,.94);
}
/* Suprapunerea pe vecin, nu pe pozitie: cand tenisul lipseste din pagina,
   raman doua cartonase lipite corect, fara nicio alta regula. */
.hero__card + .hero__card{ margin-left:calc(var(--w) * -.19) }

/* Evantaiul. Scris pe `nth-child`, deci se aseaza singur si in doi. */
.hero__card:nth-child(1){--t:rotate(-7deg) translateY(18px); z-index:1}
.hero__card:nth-child(2){--t:rotate(1deg) translateY(-14px); z-index:2}
.hero__card:nth-child(3){--t:rotate(8deg) translateY(16px); z-index:3}

.hero__card img{width:100%;height:100%;object-fit:cover;display:block}
/* Numele st\u0103 pe o stingere proprie: peste o fotografie deschisa, alb pe alb. */
.hero__card-nume{
  position:absolute; left:0; right:0; bottom:0; padding:38px 16px 14px;
  font-weight:900; font-size:19px; letter-spacing:.2px; color:#fff;
  background:linear-gradient(to top, rgba(11,13,18,.82) 0%, rgba(11,13,18,0) 100%);
}
.hero__card:hover, .hero__card:focus-visible{
  transform:var(--t) translateY(-8px) scale(1.02);
  box-shadow:0 34px 72px rgba(11,13,18,.6), 0 0 0 1px rgba(255,255,255,.4);
}

/* Intrarea. Starea de plecare exista doar cat timp ruleaza runtime-ul si
   stiva n-a primit inca .is-in — fara JS, cartonasele sunt pur si simplu
   acolo, la locul lor. */
.motion-on .hero__stiva:not(.is-in) .hero__card{
  opacity:0; transform:translateX(76px) scale(.94);
}
.motion-on .hero__stiva .hero__card{
  opacity:1;
  transition:opacity 1250ms cubic-bezier(.16,1,.3,1) calc(var(--i) * 240ms),
             transform 1250ms cubic-bezier(.16,1,.3,1) calc(var(--i) * 240ms),
             box-shadow 420ms cubic-bezier(.25,.46,.45,.94);
}
/* Dupa ce a intrat, hover-ul trebuie sa raspunda scurt, nu in 1250ms. */
.motion-on .hero__stiva.is-in .hero__card:hover,
.motion-on .hero__stiva.is-in .hero__card:focus-visible{
  transition:transform 420ms cubic-bezier(.25,.46,.45,.94),
             box-shadow 420ms cubic-bezier(.25,.46,.45,.94);
}

/* Sub 1100px coloana de text ajunge in dreapta si nu mai e loc. */
@media (max-width:1100px){ .hero__stiva{display:none} }
@media (prefers-reduced-motion:reduce){
  .motion-on .hero__stiva:not(.is-in) .hero__card{opacity:1;transform:var(--t)}
  .motion-on .hero__stiva .hero__card{transition:none}
}