/* fullgtm motion layer — editorial cinético (design-direction.md §5-8).
   PROGRESSIVE ENHANCEMENT ESTRICTO:
   - Todo el motion vive bajo `html.fg-motion`, clase que SOLO agrega fullgtm-motion.js
     cuando el navegador la soporta y prefers-reduced-motion NO es reduce.
   - Sin JS, con reduced-motion, o para un crawler → no hay clase → la página es el
     ESTADO FINAL estático (visible, legible, indexable). El bots-eye queda intacto.
   - Solo se animan `transform`/`opacity` (compositor) → cero CLS.
   Presupuesto: este archivo ≤ 6 KB. */

:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .18s;
  --dur-mid: .4s;
  --dur-slow: .8s;
  --reveal-y: 16px;
  --accent-glow: rgba(21, 71, 232, .14);   /* halo del foco de inputs */
  --accent-bloom: rgba(37, 90, 255, .30);  /* bloom del top de secciones oscuras (visible, no neón) */
}

/* ---- Micro-feedback táctil (siempre on, barato, sin riesgo) ---- */
.bp, .nbtn, .fsub, .btn-quote, .bs, .btn-sample-s {
  transition: transform var(--dur-fast) var(--ease-out-expo),
              background var(--dur-fast) ease, opacity var(--dur-fast) ease,
              border-color var(--dur-fast) ease, box-shadow var(--dur-mid) ease;
}
.pc, .dc, .emodel, .step, .qc, .sw {
  transition: transform var(--dur-mid) var(--ease-out-expo),
              box-shadow var(--dur-mid) ease, border-color var(--dur-mid) ease;
}
.fi, .fta {
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease;
}
.fi:focus, .fta:focus { box-shadow: 0 0 0 3px var(--accent-glow); }

/* ---- Acabado táctil de secciones oscuras: grain + accent-glow (estático, siempre on) ---- */
.estrip, .ss, .cta-band { position: relative; isolation: isolate; }
.estrip > *, .ss > *, .cta-band > * { position: relative; z-index: 1; }
.estrip::before, .ss::before, .cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(70% 55% at 50% 0%, var(--accent-bloom), transparent 68%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  background-size: cover, 160px 160px;
}

/* ============================================================
   MOTION gated: solo con html.fg-motion Y soporte de scroll-timeline.
   ============================================================ */
@supports (animation-timeline: view()) {
  html.fg-motion .cb,
  html.fg-motion section > .slabel,
  html.fg-motion section > h2,
  html.fg-motion .pintro, html.fg-motion .dintro, html.fg-motion .hintro,
  html.fg-motion .pgrid > .pc,
  html.fg-motion .dgrid > .dc,
  html.fg-motion .pisarski-strip,
  html.fg-motion .steps > .step,
  html.fg-motion .einner > *,
  html.fg-motion .proof-inner > *,
  html.fg-motion .ssi > *,
  html.fg-motion .fgrid > * {
    animation: fg-reveal linear both;
    animation-timeline: view();
    animation-range: entry 2% cover 18%;
  }
}
@keyframes fg-reveal {
  from { opacity: 0; transform: translateY(var(--reveal-y)); }
  to   { opacity: 1; transform: none; }
}

/* Magnetic: el JS setea --mx/--my; el translate es CSS (compositor) */
html.fg-motion .bp, html.fg-motion .nbtn, html.fg-motion .fsub, html.fg-motion .btn-quote {
  transform: translate(var(--mx, 0), var(--my, 0));
}

/* Kinetic roles rotator (inyectado por JS, decorativo, aria-hidden) */
.fg-kinetic {
  display: inline-flex; overflow: hidden; vertical-align: bottom;
  height: 1.1em; margin-left: .1em;
}
.fg-kinetic > span {
  display: block; color: var(--accent); font-weight: 600;
  animation: fg-roll 9s var(--ease-out-expo) infinite;
}
@keyframes fg-roll {
  0%,18%   { transform: translateY(0); }
  25%,43%  { transform: translateY(-100%); }
  50%,68%  { transform: translateY(-200%); }
  75%,93%  { transform: translateY(-300%); }
  100%     { transform: translateY(-400%); }
}

/* Counter: el JS anima el texto; el número final ya está en el HTML (fallback) */

/* ---- Anulación total con reduced-motion (defensa en profundidad; el JS ya no
        agrega la clase, esto cubre el caso de que algo la fuerce) ---- */
@media (prefers-reduced-motion: reduce) {
  html.fg-motion .cb, html.fg-motion section > *, html.fg-motion .pgrid > .pc,
  html.fg-motion .dgrid > .dc, html.fg-motion .steps > .step,
  html.fg-motion .einner > *, html.fg-motion .proof-inner > *,
  html.fg-motion .ssi > *, html.fg-motion .fgrid > *,
  html.fg-motion .pisarski-strip {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .fg-kinetic > span { animation: none !important; }
  html.fg-motion .bp, html.fg-motion .nbtn, html.fg-motion .fsub, html.fg-motion .btn-quote {
    transform: none !important;
  }
}