/**
 * ads-factory-child: telefoanele animate de pe paginile de servicii 41, 46-49 (service-phones.js).
 * Spec: docs/superpowers/specs/2026-09-11-service-phones-design.md
 *
 * Reguli (aceleasi ca in motion.css):
 *  - nicio stare ascunsa fara html.motion-ready (pusa de guard.js) SI fara clasa pusa de
 *    service-phones.js; daca un script nu se incarca, telefonul ramane exact ca azi;
 *  - doar transform si opacity, plus box-shadow in keyframes pentru pulsul portocaliu;
 *  - fara clase Tailwind noi: tailwind.css e compilat o data, cu safelist gol.
 *
 * Clasele generice (le pun doar helperii din service-phones.js):
 *   adsf-sp-in     tranzitia de 350ms, prezenta cat timp elementul intra sau iese
 *   adsf-sp-off    starea ascunsa (opacity 0, 8px mai jos)
 *   adsf-sp-pulse  inel portocaliu care se stinge, o data (ca adsf-cp-pulse de pe 432)
 *   adsf-sp-pop    salt scurt in scale, o data
 *   adsf-sp-pop-sm acelasi salt, mai mic (elemente late, lipite de marginea unui overflow-hidden)
 *   adsf-sp-dim    stinsa si micsorata (stelele de pe 46), se aprinde la scoatere
 */

html.motion-ready .adsf-sp-in {
  transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1), transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ATENTIE: adsf-sp-off INLOCUIESTE transform-ul propriu al elementului cat timp clasa e pusa
 * (si pe durata tranzitiei de iesire). Pe un element cu utilitar Tailwind de transform
 * (-translate-*, scale-*, rotate-*) macheta s-ar muta. Scenele o pun doar pe elemente fara
 * transform propriu; parse() din service-phones.js trebuie sa respinga structura altfel. */
html.motion-ready .adsf-sp-off {
  opacity: 0;
  transform: translateY(8px);
}

/* ATENTIE: adsf-sp-pulse INLOCUIESTE box-shadow-ul propriu (shadow-*) pe durata animatiei,
 * iar la final umbra revine brusc. Doar pe elemente fara shadow-* propriu. */
html.motion-ready .adsf-sp-pulse {
  animation: adsf-sp-pulse 1200ms ease-out 1;
}

@keyframes adsf-sp-pulse {
  0%   { box-shadow: 0 0 0 0 hsl(24 95% 53% / 0.45); }
  60%  { box-shadow: 0 0 0 8px hsl(24 95% 53% / 0); }
  100% { box-shadow: 0 0 0 0 hsl(24 95% 53% / 0); }
}

/* ATENTIE: adsf-sp-pop INLOCUIESTE transform-ul propriu pe durata animatiei. Doar pe elemente
 * fara utilitare Tailwind de transform (-translate-*, scale-*, rotate-*). */
html.motion-ready .adsf-sp-pop {
  animation: adsf-sp-pop 600ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

@keyframes adsf-sp-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Acelasi salt, pentru elementele late lipite de marginea unui overflow-hidden: pe un element
 * lat, cresterea in pixeli e mare chiar si la un procent mic. CTA-ul de pe 49 are 228px latime
 * si doar 12px pana la marginea ecranului telefonului, deci la 1.18 varful saltului i-ar taia
 * capatul din stanga (masurat: 8.5px in afara). La 1.08 creste cu 9.1px in fiecare parte si
 * ramane in ecran, dar se misca in absolut mai mult decat inima (cerc de 28px). ATENTIE: ca
 * adsf-sp-pop, inlocuieste transform-ul propriu al elementului pe durata animatiei. */
html.motion-ready .adsf-sp-pop-sm {
  animation: adsf-sp-pop-sm 600ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

@keyframes adsf-sp-pop-sm {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Stea stinsa (scena Magazine online, 46): scoasa impreuna cu adsf-sp-in, steaua "se aprinde"
 * prin opacity + scale. ATENTIE: ca adsf-sp-off, inlocuieste transform-ul propriu. */
html.motion-ready .adsf-sp-dim {
  opacity: 0.2;
  transform: scale(0.6);
}

/* ---------- tipar ----------
 * Pe hartie nu exista timp: tot ce e ascuns sau in miscare apare in starea statica. */
@media print {
  html.motion-ready .adsf-sp-in {
    transition: none;
  }

  html.motion-ready .adsf-sp-off,
  html.motion-ready .adsf-sp-dim {
    opacity: 1;
    transform: none;
  }

  html.motion-ready .adsf-sp-pulse,
  html.motion-ready .adsf-sp-pop,
  html.motion-ready .adsf-sp-pop-sm {
    animation: none;
  }
}