/* ============================================================
   COMPUTER NATION — SISTEMUL DE MISCARE

   IMPORTANT: mecanismul JS exista deja si functioneaza.
   app.js:124-137 ruleaza un IntersectionObserver care adauga
   .reveal-ready la incarcare si .is-visible cand elementul
   intra in ecran. In markup exista deja 31 de elemente cu
   data-reveal, pe 11 pagini publice.

   Lipsea exclusiv acest fisier. Nu se modifica nici JS-ul,
   nici markup-ul existent.
   ============================================================ */

/* ---------- 1. DEZVALUIRE LA SCROLL ---------- */

/* Starea initiala se aplica DOAR daca JS-ul a confirmat ca e activ.
   Fara .reveal-ready continutul ramane vizibil — daca JS-ul cade,
   pagina e in continuare complet lizibila. */
[data-reveal].reveal-ready {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].reveal-ready.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Variante — se adauga ca atribut pe acelasi element */
[data-reveal="fade"].reveal-ready       { transform: none; }
[data-reveal="left"].reveal-ready       { transform: translateX(-24px); }
[data-reveal="right"].reveal-ready      { transform: translateX(24px); }
[data-reveal="scale"].reveal-ready      { transform: scale(.96); }
[data-reveal="left"].reveal-ready.is-visible,
[data-reveal="right"].reveal-ready.is-visible,
[data-reveal="scale"].reveal-ready.is-visible { transform: none; }

/* ---------- 2. DECALAJ IN CASCADA ---------- */
/* Pe un container: copiii intra unul dupa altul.
   Se poate regla din markup cu style="--stagger:60ms" */
[data-stagger] > * {
  --stagger: 80ms;
}
[data-stagger].reveal-ready > *:nth-child(1)  { transition-delay: calc(var(--stagger) * 0); }
[data-stagger].reveal-ready > *:nth-child(2)  { transition-delay: calc(var(--stagger) * 1); }
[data-stagger].reveal-ready > *:nth-child(3)  { transition-delay: calc(var(--stagger) * 2); }
[data-stagger].reveal-ready > *:nth-child(4)  { transition-delay: calc(var(--stagger) * 3); }
[data-stagger].reveal-ready > *:nth-child(5)  { transition-delay: calc(var(--stagger) * 4); }
[data-stagger].reveal-ready > *:nth-child(6)  { transition-delay: calc(var(--stagger) * 5); }
[data-stagger].reveal-ready > *:nth-child(7)  { transition-delay: calc(var(--stagger) * 6); }
[data-stagger].reveal-ready > *:nth-child(8)  { transition-delay: calc(var(--stagger) * 7); }

/* ---------- 3. INTRAREA EROULUI (fara scroll, la incarcare) ---------- */
@keyframes cn-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.cn-enter > * {
  animation: cn-rise var(--dur-slow) var(--ease-out) backwards;
}
.cn-enter > *:nth-child(1) { animation-delay:  60ms; }
.cn-enter > *:nth-child(2) { animation-delay: 140ms; }
.cn-enter > *:nth-child(3) { animation-delay: 220ms; }
.cn-enter > *:nth-child(4) { animation-delay: 300ms; }
.cn-enter > *:nth-child(5) { animation-delay: 380ms; }

/* ---------- 4. ANTETUL LA SCROLL ---------- */
/* app.js:89 comuta deja clasa .is-scrolled — lipsea doar stilul */
.site-header {
  transition:
    box-shadow      var(--dur-fast) var(--ease-out),
    border-color    var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--border-strong);
}

/* ---------- 5. RASPUNS LA INTERACTIUNE ---------- */
.cn-lift {
  transition:
    transform    var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.cn-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.cn-lift:active { transform: translateY(-1px); }

/* ---------- 6. FOCUS VIZIBIL — GLOBAL ---------- */
/* Nu exista nicaieri in proiectul actual, in afara butoanelor flotante. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ---------- 7. ADMIN: ACELASI SISTEM, MULT MAI SOBRU ---------- */
/* Unealta de lucru zilnica. Miscarea confirma actiuni, nu impresioneaza. */
.admin-page [data-reveal].reveal-ready {
  transform: translateY(8px);
  transition-duration: var(--dur-fast);
}
.admin-page [data-stagger] > * { --stagger: 30ms; }
.admin-page .cn-enter > * { animation-duration: var(--dur-fast); }
.admin-page .cn-lift:hover { transform: translateY(-2px); }

/* ---------- 8. RESPECTAREA PREFERINTEI DE MISCARE REDUSA ---------- */
/* Obligatoriu, nu optional: vestibular disorders, epilepsie fotosensibila,
   plus cerintele de accesibilitate. Continutul ramane integral vizibil. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal].reveal-ready,
  [data-reveal].reveal-ready.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cn-enter > * { animation: none !important; }
  .cn-lift { transition: none !important; }
  .cn-lift:hover, .cn-lift:active { transform: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}