/* =========================================================
   CAMERE.MD — Motion layer
   Reveal system + the reduced-motion contract.
   Rule: only transform / opacity / clip-path / stroke-dashoffset.
   ========================================================= */

/* ---------------------------------------------------------
   SCROLL REVEAL
   One mechanism for the whole page. --i is the stagger index,
   written by reveal.js from data-i (default 0).
--------------------------------------------------------- */
[data-reveal]{
  --i:0;
  --rev-y:18px;
  opacity:0;
  transform:translate3d(0,var(--rev-y),0);
  transition:
    opacity var(--t-story) var(--e-out),
    transform var(--t-story) var(--e-out);
  transition-delay:calc(var(--i) * 70ms);
  will-change:transform,opacity;
}
[data-reveal].is-in{
  opacity:1;
  transform:none;
}
/* once revealed, stop reserving a compositor layer */
[data-reveal].is-settled{will-change:auto}

[data-reveal="right"]{--rev-y:0;transform:translate3d(-26px,0,0)}
[data-reveal="left"]{--rev-y:0;transform:translate3d(26px,0,0)}

/* Sub 1024px dezvaluirile laterale devin verticale. Cei 26px cu care intra
   dinspre dreapta ies din fereastra cat timp elementul nu a fost inca
   dezvaluit, si asta face pagina sa se deruleze lateral - masurat 10px la
   375. Nicio garda de overflow nu rezolva asta corect: pe body nu taie,
   pentru ca overflow-ul lui se propaga la fereastra si body-ul insusi
   ramane 'visible'; pe html, Chrome nu propaga 'clip'.
   Pe ecran ingust miscarea laterala oricum nu se citeste. */
@media (max-width:1023px){
  [data-reveal="right"],
  [data-reveal="left"]{--rev-y:18px;transform:translate3d(0,18px,0)}
}
[data-reveal="scale"]{transform:translate3d(0,14px,0) scale(.97)}

/* headline lines: masked wipe, not a fade.
   Section headings wait for scroll (.is-in); only the hero's own
   headline rides the boot sequence. */
.line-mask{
  display:block;
  overflow:hidden;
}
.line-mask > span{
  display:block;
  transform:translate3d(0,110%,0);
  transition:transform var(--t-story) var(--e-out);
  transition-delay:calc(var(--i) * 90ms);
}
.line-mask.is-in > span{transform:none}

/* ---------------------------------------------------------
   BOOT
   Intrarea hero-ului e o animatie CSS, pornita de prima
   randare — nu o tranzitie care astepta `.is-booted`.

   Pana pe 24 sept. 2026 titlul, butoanele si poza stateau la
   opacity 0 pana cand hero.js descarca scripturile de dinainte,
   astepta poza de NOAPTE (ascunsa, in tema luminoasa) si abia
   apoi pornea. Chrome nu numara ca „desenat" un element
   invizibil: pe telefon, primul text iesea la 3,9 s, iar poza
   la 6,3 s, desi era descarcata de mult.

   Aceleasi intarzieri, aceleasi curbe; doar ceasul porneste
   acum de la primul paint. `.is-booted` ramane pentru bara de
   navigatie si restul cromului din jurul hero-ului.
--------------------------------------------------------- */
.hero-title .line-mask > span{
  animation:boot-mask var(--t-story) var(--e-out) var(--boot-delay,0ms) both;
}
@keyframes boot-mask{
  from{transform:translate3d(0,110%,0)}
  to{transform:none}
}
.boot{
  --boot-delay:0ms;
  --boot-y:14px;
  animation:boot-in var(--t-comp) var(--e-out) var(--boot-delay) both;
}
@keyframes boot-in{
  from{opacity:0;transform:translate3d(0,var(--boot-y),0)}
  to{opacity:1;transform:none}
}

/* ---------------------------------------------------------
   REDUCED MOTION CONTRACT
   Everything lands in its final state. The page must look
   finished with all motion switched off.
--------------------------------------------------------- */
/* Feedback follows an action; scale composes with existing translations. */
@media (prefers-reduced-motion:no-preference){
  .btn,.icon-btn,.theme-toggle,.call-pill,.mk-tile,.filter{
    transition-property:background-color,border-color,color,transform,scale;
    transition-duration:var(--t-micro);
    transition-timing-function:var(--e-out);
  }
  .btn:active,.icon-btn:active,.theme-toggle:active,.call-pill:active,.mk-tile:active,.filter:active{scale:.97}
  .drawer{transform:translateY(-8px);transition:opacity var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out),visibility 0s linear var(--t-ui)}
  .drawer.is-open{transform:none;transition-delay:0s}
  html.theme-transition body,
  html.theme-transition :is(.hero,.nav,.mbar,.drawer,.nav-drop,.site-footer,.price,.mk-tile,.mk-card,.form,.info-card){
    transition:background-color var(--t-micro) var(--e-out),border-color var(--t-micro) var(--e-out),color var(--t-micro) var(--e-out);
  }
}
@media (hover:none){
  .btn:hover{transform:none}
  .btn:hover .ic{transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    transition-delay:0ms !important;
  }

  [data-reveal]{opacity:1;transform:none}
  .line-mask > span{transform:none}
  /* O animatie bate declaratiile obisnuite, iar regula globala de mai sus
     ii scurteaza doar durata, nu si intarzierea: fara `none`, hero-ul ar
     sta ascuns 0,5 s si apoi ar sari. */
  .boot,.hero-title .line-mask > span{animation:none}
  .boot{opacity:1;transform:none}

  /* Singura miscare continua ramasa pe pagina e indiciul de derulare, si
     acela transmite ceva: mai exista continut dedesubt. Restul - camera si
     pastilele care pluteau, scanline-ul, punctul care pulsa, banda care
     matura sectiunea de CTA si derularea logo-urilor - au fost scoase din
     pagina, nu doar oprite aici. Lista prin care erau dezactivate pe nume
     nu mai are pe cine sa acopere. */
  .scroll-cue .rail::after{animation:none !important}
}

/* Same contract, but user-toggled at runtime (JS sets this on <html>
   when reduced motion is detected, so JS-driven effects opt out too). */
html.no-motion .scroll-cue .rail::after{animation:none}