/* ============================================================
   FX — capa de efectos (misma paleta, mas vida)
   Todo gated por prefers-reduced-motion. Sin JS la pagina
   se ve igual que la version base.
   ============================================================ */

/* ---- Grano filmico sobre toda la pagina ---- */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- Aurora: los glows del fondo derivan lentamente ---- */
  .bg-field::before {
    animation: fxAurora 26s ease-in-out infinite alternate;
    will-change: transform;
  }

  /* ---- Entrada en cascada del hero ---- */
  html.fx-ready .hero-copy > * {
    opacity: 0;
    animation: fxUp 0.8s cubic-bezier(.2,.7,.3,1) forwards;
  }
  html.fx-ready .hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
  html.fx-ready .hero-copy > *:nth-child(2) { animation-delay: 0.16s; }
  html.fx-ready .hero-copy > *:nth-child(3) { animation-delay: 0.34s; }
  html.fx-ready .hero-copy > *:nth-child(4) { animation-delay: 0.5s; }
  html.fx-ready .hero-visual {
    opacity: 0;
    animation: fxUp 0.9s cubic-bezier(.2,.7,.3,1) 0.62s forwards;
  }
}

@keyframes fxAurora {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2.5%, 0) scale(1.07); }
}
@keyframes fxUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Spotlight border: el borde sigue al cursor ---- */
.spotlight { position: relative; }
.spotlight::after {
  content: '';
  position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%),
              rgba(87, 178, 226, 0.65), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.spotlight:hover::after { opacity: 1; }

/* En tactil no hay hover: pulso de borde al entrar el card en pantalla */
@media (pointer: coarse) {
  @media (prefers-reduced-motion: no-preference) {
    .spotlight.in-view::after {
      --mx: 50%; --my: 0%;
      animation: fxSpotPulse 2.1s ease 0.2s forwards;
    }
  }
}
@keyframes fxSpotPulse {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- Ventanas con borde de vidrio mas marcado ---- */
html.fx-ready .window {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.09) inset,
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 40px 90px -40px rgba(0,0,0,0.85),
    0 8px 24px -12px rgba(0,0,0,0.5);
}

/* ---- Botones: feedback fisico ---- */
.btn:active { transform: translateY(0) scale(0.98); }

/* ---- Ritmo vertical: bloques mas compactos ---- */
:root { --sec-pad: calc(84px * var(--density)); }
.sec-head { margin-bottom: clamp(26px, 4vw, 44px); }

/* ---- Titulos de bloque con mas presencia ---- */
.sec-head h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
}

/* ---- Video vertical en el hero (Short 9:16, autoplay muted) ---- */
@media (min-width: 981px) {
  .hero-grid { grid-template-columns: 1.1fr 0.62fr; align-items: center; }
  /* la columna es mas angosta con el video al lado: bajar la escala del H1 */
  .hero h1 { font-size: clamp(36px, 4.1vw, 58px); }
  /* la ventana del producto ocupa el ancho completo bajo copy+video */
  .hero-visual { grid-column: 1 / -1; margin-top: 0; }
}
.hero-video { display: flex; justify-content: center; }
.hv-frame {
  width: min(330px, 100%);
  aspect-ratio: 9 / 16;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.09) inset,
    0 40px 90px -40px rgba(0,0,0,0.85),
    0 12px 30px -14px color-mix(in oklab, var(--primary) 30%, transparent);
}
.hv-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 980px) {
  .hero-video { margin-top: 34px; }
  .hv-frame { width: min(300px, 84vw); }
}

/* ---- Transcripcion en vivo (hero) ---- */
.tl { transition: opacity 0.45s ease, transform 0.45s ease; }
.tl.tl-hidden { opacity: 0; transform: translateY(7px); }
.fx-note-hidden { opacity: 0; transition: opacity 0.5s ease; }
.type-target::after {
  content: '▍'; color: var(--amber);
  animation: blink 1s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .type-target::after { animation: none; }
}