/* ============================================================
   depth.css — profunzimea 3D, construită întâi pentru telefon.

   Regula de performanță, fără excepții: se animează DOAR
   `transform` și `opacity`. Amândouă rulează pe firul de
   compositor, deci nu ating layout-ul și nu declanșează repaint.
   Nicio animație de box-shadow, filter sau background.

   Două mecanisme, în ordinea preferinței:
     1. animation-timeline: view()  — legat direct de scroll,
        rulează pe compositor, imun la un thread principal ocupat.
     2. .is-revealed / .reveal-child din main.js — plasa de
        siguranță pentru browserele care încă n-au (1).

   Ordinea de încărcare contează: depth.css vine după motion.css,
   deci suprascrie tranzițiile de acolo la specificitate egală.
   ============================================================ */

/* ------------------------------------------------------------
   1 · KEYFRAMES
   ------------------------------------------------------------ */

/* cardul urcă din spatele planului paginii și se îndreaptă */
@keyframes d-rise {
  from {
    opacity: 0;
    transform: translateY(30px) translateZ(-120px) rotateX(-18deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* coverflow: cardul se rotește pe măsură ce traversează ecranul */
@keyframes d-coverflow {
  0%   { transform: rotateY(22deg) scale(0.88); opacity: 0.5; }
  50%  { transform: none;                       opacity: 1; }
  100% { transform: rotateY(-22deg) scale(0.88); opacity: 0.5; }
}

/* panoul roșu intră înclinat, ca o placă care se așază */
@keyframes d-panel {
  from { transform: perspective(1600px) rotateX(7deg) scaleY(0.97); }
  to   { transform: none; }
}

/* hero-ul se retrage în adâncime când derulezi peste el */
@keyframes d-hero-sink {
  to { transform: perspective(1400px) rotateX(5deg) scale(0.96); opacity: 0.55; }
}

/* ------------------------------------------------------------
   2 · CONTAINERE CU PERSPECTIVĂ
   Fără perspectivă pe părinte, un rotateX arată ca o simplă
   turtire pe verticală. Perspectiva e mai scurtă pe telefon:
   ecranul e mic, deci unghiul trebuie să fie mai agresiv.
   ------------------------------------------------------------ */
.who,
.delivers,
.steps,
.works,
.fees,
.plans {
  perspective: var(--persp);
  perspective-origin: 50% 40%;
}
@media (max-width: 899px) {
  .who,
  .delivers,
  .steps,
  .works,
  .fees,
  .plans { perspective: var(--persp-near); }
}

/* Fiecare card e propriul strat de compunere doar cât e nevoie.
   `contain` oprește invalidarea la marginea cardului: înclinarea
   unuia nu pune restul paginii la recalculat. */
.card-who,
.deliver,
.step,
.work,
.fee,
.plan {
  contain: layout paint;
  transform-origin: 50% 85%;
}

/* ------------------------------------------------------------
   3 · INTRAREA CARDURILOR, LEGATĂ DE SCROLL
   ------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Animația preia complet intrarea, deci starea de bază pusă
       de main.js (`opacity: 0`) trebuie neutralizată — altfel un
       card ar rămâne invizibil dacă observerul n-a apucat să tragă. */
    :is(.who, .delivers, .steps, .works, .fees) > .reveal-child {
      opacity: 1;
      transform: none;
    }

    :is(.who, .delivers, .steps, .works, .fees) > * {
      animation: d-rise linear backwards;
      animation-timeline: view();
      animation-range: entry 12% cover 42%;
    }

    /* `backwards`, nu `both`: după ce cardul s-a așezat, animația
       nu mai umple nimic, iar înclinarea la atingere (js/depth.js)
       poate prelua transformul. Cu `both` ar fi rămas blocat. */
  }
}

/* ------------------------------------------------------------
   4 · PACHETELE PE TELEFON — caruselul 3D
   Efectul principal, exact pe secțiunea care trebuie să vândă.
   ------------------------------------------------------------ */
@media (max-width: 899px) {
  .plans {
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* iese din container: gutierele laterale sunt exact cât
       trebuie ca vecinul să se vadă și să invite la glisare */
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: 7%;
    scroll-padding-inline: 7%;
    padding-block: var(--sp-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plan { scroll-snap-align: center; }

  /* Densitate mai mare pe telefon: cu 7–8 rânduri de listă,
     cardul ajungea mai înalt decât ecranul și nu se mai citea
     ca un obiect care se rotește. */
  .plan {
    gap: var(--sp-4);
    padding: var(--sp-6) var(--sp-5);
  }
  .plan__name { font-size: var(--fs-xl); }
  .plan__list { gap: var(--sp-2); }
}

@supports (animation-timeline: view(inline)) {
  @media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
    .plans > .reveal-child { opacity: 1; transform: none; }
    .plan {
      animation: d-coverflow linear both;
      animation-timeline: view(inline);
      animation-range: cover;
    }
  }
}

/* ------------------------------------------------------------
   5 · PANOURILE COLORATE
   ------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tilt-panel {
      transform-origin: 50% 0%;
      animation: d-panel linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
  }
}

/* ------------------------------------------------------------
   6 · HERO — se retrage în adâncime la derulare
   ------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__copy {
      transform-origin: 50% 20%;
      animation: d-hero-sink linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 90%;
    }
  }
}

/* ------------------------------------------------------------
   7 · ÎNCLINAREA LA ATINGERE / MOUSE
   `--rx` și `--ry` sunt scrise de js/depth.js, o singură dată
   per cadru. Restul e treaba compositorului.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .card-who,
  .deliver,
  .step,
  .work,
  .fee,
  .plan {
    transition: transform var(--tr-base) var(--ease-out-expo);
  }
  .is-tilting {
    transform:
      perspective(var(--persp-near))
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg))
      translateZ(10px);
    transition-duration: var(--tr-fast);
  }
}

/* ------------------------------------------------------------
   8 · LUCIUL CARE TRAVERSEAZĂ CARDUL
   Pseudo-element mutat prin translate — niciun gradient nu se
   recalculează în timpul mișcării.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .deliver,
  .fee,
  .plan { position: relative; overflow: hidden; }

  .deliver::after,
  .fee::after,
  .plan::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 38%,
      rgba(255, 255, 255, 0.07) 50%,
      transparent 62%
    );
    transform: translateX(-130%);
    opacity: 0;
  }
  .deliver:is(:hover, .is-tilting)::after,
  .fee:is(:hover, .is-tilting)::after,
  .plan:is(:hover, .is-tilting)::after {
    opacity: 1;
    animation: m-sheen 720ms var(--ease-out-expo);
  }
}

/* ------------------------------------------------------------
   9 · FĂRĂ MIȘCARE
   Un singur bloc care taie tot 3D-ul. Pagina rămâne întreagă.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .who,
  .delivers,
  .steps,
  .works,
  .fees,
  .plans { perspective: none; }

  .card-who,
  .deliver,
  .step,
  .work,
  .fee,
  .plan,
  .tilt-panel,
  .hero__copy {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}