/**
 * ads-factory-child: modulul motion (pilot 11.09.2026).
 * Spec: docs/superpowers/specs/2026-09-11-motion-pilot-chatgpt-ads-design.md
 *
 * Reguli:
 *  - nicio stare ascunsa fara html.motion-ready (pusa de guard.js) SI fara clasa pusa de
 *    scriptul care animeaza elementul; daca un script nu se incarca, nimic nu dispare;
 *  - doar transform si opacity (plus stroke-dashoffset pe bife, box-shadow in keyframes);
 *  - fara clase Tailwind noi: tailwind.css e compilat o data, cu safelist gol.
 */

/* ---------- telefonul ChatGPT (chat-phone.js) ---------- */

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

html.motion-ready .adsf-cp-part.adsf-cp-off {
  opacity: 0;
  transform: translateY(6px);
}

html.motion-ready .adsf-cp-line {
  transform-origin: left center;
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.motion-ready .adsf-cp-line.adsf-cp-off {
  transform: scaleX(0);
}

html.motion-ready .adsf-cp-pulse {
  animation: adsf-cp-pulse 1200ms ease-out 1;
}

@keyframes adsf-cp-pulse {
  0%   { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 0 hsl(24 95% 53% / 0.45); }
  60%  { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 8px hsl(24 95% 53% / 0); }
  100% { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 0 hsl(24 95% 53% / 0); }
}

/* Indicatorul "scrie...": pozitionat absolut peste liniile raspunsului, fara efect pe layout. */
.adsf-cp-dots {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  gap: 3px;
  padding: 1px 0;
}

.adsf-cp-dots span {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: #9ca3af;
  animation: adsf-cp-dot 900ms ease-in-out infinite;
}

.adsf-cp-dots span:nth-child(2) { animation-delay: 150ms; }
.adsf-cp-dots span:nth-child(3) { animation-delay: 300ms; }

@keyframes adsf-cp-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* ---------- intrari la scroll (scroll-motion.js) ----------
 * adsf-armed: pusa de script inainte de observare; adsf-in: la intrarea in viewport.
 * Dupa ce intrarea se termina, scriptul le scoate pe amandoua, ca elementele sa revina
 * la CSS-ul lor (altfel transform:none ar bloca hover-lift). --adsf-i = indexul copilului. */

html.motion-ready [data-motion].adsf-armed > * {
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--adsf-i, 0) * 80ms);
}

/* adsf-arming: pusa doar pe durata armarii, ca starea ascunsa sa se aplice instant, fara
   un fade 1 -> 0 vizibil la marginea de jos a ecranului. */
html.motion-ready [data-motion].adsf-arming > *,
html.motion-ready [data-motion].adsf-arming svg path,
html.motion-ready [data-motion].adsf-arming > * > p {
  transition: none !important;
}

html.motion-ready [data-motion="stagger"].adsf-armed:not(.adsf-in) > * {
  opacity: 0;
  transform: translateY(16px);
}

html.motion-ready [data-motion="columns"].adsf-armed:not(.adsf-in) > :first-child {
  opacity: 0;
  transform: translateX(-24px);
}

html.motion-ready [data-motion="columns"].adsf-armed:not(.adsf-in) > :last-child {
  opacity: 0;
  transform: translateX(24px);
}

/* Bife: randul aluneca, bifa se deseneaza. */
html.motion-ready [data-motion="checks"].adsf-armed > * {
  transition-delay: calc(var(--adsf-i, 0) * 120ms);
}

html.motion-ready [data-motion="checks"].adsf-armed:not(.adsf-in) > * {
  opacity: 0;
  transform: translateX(-12px);
}

html.motion-ready [data-motion="checks"].adsf-armed svg path {
  stroke-dasharray: 64;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--adsf-i, 0) * 120ms + 150ms);
}

html.motion-ready [data-motion="checks"].adsf-armed:not(.adsf-in) svg path {
  stroke-dashoffset: 64;
}

/* Pasi: cercul se aprinde plin si revine la nuanta de azi; textul trece de la estompat la normal. */
html.motion-ready [data-motion="steps"].adsf-armed > * {
  transition-delay: calc(var(--adsf-i, 0) * 180ms);
}

html.motion-ready [data-motion="steps"].adsf-armed > * > p {
  transition: opacity 500ms ease;
  transition-delay: inherit;
}

html.motion-ready [data-motion="steps"].adsf-armed:not(.adsf-in) > * > p {
  opacity: 0.35;
}

html.motion-ready [data-motion="steps"].adsf-in > * > span:first-child {
  animation: adsf-step-flash 900ms ease-out both;
  animation-delay: calc(var(--adsf-i, 0) * 180ms);
}

@keyframes adsf-step-flash {
  0%   { background-color: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); transform: scale(1); }
  35%  { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); transform: scale(1.12); }
  100% { background-color: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); transform: scale(1); }
}

/* Focus in interiorul unui container armat (Tab pe butoanele FAQ, pe linkurile cardurilor):
 * copiii apar imediat, fara tranzitie si fara intarzierea din --adsf-i, ca focusul sa nu stea
 * pe un element invizibil pana il vede IntersectionObserver. Specificitatea egaleaza regulile
 * de ascundere de mai sus (inclusiv :first-child / :last-child din columns); fiind dupa ele,
 * castiga. checks si steps nu au azi elemente focusabile, dar raman acoperite. */
html.motion-ready [data-motion].adsf-armed:focus-within > *,
html.motion-ready [data-motion="columns"].adsf-armed:focus-within > :first-child,
html.motion-ready [data-motion="columns"].adsf-armed:focus-within > :last-child {
  opacity: 1;
  transform: none;
  transition-duration: 0s;
  transition-delay: 0s;
}

html.motion-ready [data-motion="checks"].adsf-armed:focus-within svg path {
  stroke-dashoffset: 0;
  transition-duration: 0s;
  transition-delay: 0s;
}

html.motion-ready [data-motion="steps"].adsf-armed:focus-within > * > p {
  opacity: 1;
  transition-duration: 0s;
  transition-delay: 0s;
}

/* Stralucirea de pe butonul CTA: overflow hidden nu taie box-shadow-ul propriu (inelul de focus). */
html.motion-ready .adsf-shine {
  position: relative;
  overflow: hidden;
}

html.motion-ready .adsf-shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, hsl(0 0% 100% / 0.35), transparent);
  transform: translateX(-150%);
  pointer-events: none;
}

html.motion-ready .adsf-shine.adsf-in::after {
  animation: adsf-shine 4s ease-in-out 1s infinite;
}

@keyframes adsf-shine {
  0% { transform: translateX(-150%); }
  30%, 100% { transform: translateX(350%); }
}

/* ---------- tipar ----------
 * Pe hartie nu exista scroll si nici timp: tot ce e ascuns sau in miscare apare in starea
 * finala, statica. !important doar unde regula de ecran are specificitate mai mare
 * (starile armate si :focus-within); in rest, aceeasi specificitate si ordinea castiga. */
@media print {
  html.motion-ready [data-motion].adsf-armed > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.motion-ready [data-motion="steps"].adsf-armed > * > p {
    opacity: 1 !important;
    transition: none !important;
  }

  html.motion-ready [data-motion="checks"].adsf-armed svg path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  html.motion-ready [data-motion="steps"].adsf-in > * > span:first-child {
    animation: none;
  }

  html.motion-ready .adsf-cp-part,
  html.motion-ready .adsf-cp-line {
    transition: none;
  }

  html.motion-ready .adsf-cp-part.adsf-cp-off,
  html.motion-ready .adsf-cp-line.adsf-cp-off {
    opacity: 1;
    transform: none;
  }

  html.motion-ready .adsf-cp-pulse {
    animation: none;
  }

  .adsf-cp-dots {
    display: none;
  }

  html.motion-ready .adsf-shine.adsf-in::after {
    animation: none;
  }
}