/* =========================================================
   6 · MOTION
   Todo depende de la clase .motion en <html>, que js/boot.js pone
   si la persona no pide reducir el movimiento. Sin .motion la web
   se ve completa y quieta. Solo transform, scale, translate y opacity.
   ========================================================= */
@layer motion {
  @keyframes rise     { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
  @keyframes photo-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
  @keyframes neon-on  { 0% { opacity: .06; } 10% { opacity: 1; } 14% { opacity: .18; } 22% { opacity: 1; } 27% { opacity: .4; } 36% { opacity: 1; } 100% { opacity: 1; } }
  @keyframes pop      { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

  /* ---------- Scroll suave (Lenis) ---------- */
  html.lenis, html.lenis body { height: auto; }
  html.lenis { scroll-behavior: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-smooth iframe { pointer-events: none; }

  /* ---------- Header: se esconde al bajar, vuelve al subir ---------- */
  .motion .site-header { transition: transform .6s var(--ease), border-color var(--t), background-color var(--t); }
  .motion .site-header.is-hidden { transform: translate3d(0, -100%, 0); }

  /* ---------- Hero: entrada al cargar ---------- */
  .motion .hero__photo img { animation: photo-in 1.8s var(--ease) .05s both; }
  .motion [data-delay] { animation: rise 1s var(--ease) both; }
  .motion [data-delay="3"] { animation-delay: .55s; }
  .motion [data-delay="4"] { animation-delay: .7s; }
  .motion [data-delay="5"] { animation-delay: .85s; }
  .motion .hero__bigword .line__in { transform: translate3d(0, 105%, 0); transition: transform 1.2s var(--ease) .25s; }
  .motion .hero__bigword .line + .line .line__in { transition-delay: .37s; }
  .motion.hero-in .hero__bigword .line__in { transform: none; }

  /* ---------- Textos palabra a palabra (título del hero y statements) ---------- */
  .motion [data-i18n-rich] .word__in { transform: translate3d(0, 112%, 0); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 30ms); }
  .motion [data-i18n-rich].is-in .word__in { transform: none; }

  /* ---------- Apariciones al hacer scroll ----------
     data-reveal          sube y aparece
     data-reveal="left"   entra desde la izquierda
     data-reveal="curtain" foto: una cortina negra se retira y la imagen se asienta
     Dentro de [data-stagger] cada hijo recibe --d y entran en cascada. */
  .motion [data-reveal] {
    opacity: 0; transform: translate3d(0, 48px, 0) scale(.97);
    transition: opacity .9s var(--ease), transform 1.2s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .motion [data-reveal="left"] { transform: translate3d(-28px, 0, 0); }
  .motion [data-reveal].is-in { opacity: 1; transform: none; }

  .motion [data-reveal="curtain"] { opacity: 1; transform: none; }
  .motion [data-reveal="curtain"]::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: var(--black); transform-origin: 50% 0;
    transition: transform 1.25s var(--ease); transition-delay: var(--d, 0ms);
  }
  .motion [data-reveal="curtain"].is-in::before { transform: scaleY(0); }
  .motion [data-reveal="curtain"] img { scale: 1.2; transition: scale 1.8s var(--ease); transition-delay: var(--d, 0ms); }
  .motion [data-reveal="curtain"].is-in img { scale: 1; }

  /* ---------- Parallax de fotos (motion.js mueve la imagen con translate) ---------- */
  .motion [data-parallax] img { top: -8%; height: 116%; will-change: translate; }

  /* ---------- Pasos: la pista se llena y cada número se enciende ---------- */
  @media (min-width: 1025px) { .motion .steps__track { display: block; } }
  .motion .steps__fill { --p: 0; }
  .motion .step__num { background: var(--black); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: color .3s, box-shadow .3s; }
  .motion .step.is-lit .step__num { background: var(--grad-pink); color: var(--black); box-shadow: none; animation: pop .5s var(--ease); }
  .motion .step { transition: opacity .9s var(--ease), transform 1.2s var(--ease), border-color .4s; transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms; }
  .motion .step.is-lit { border-color: rgb(var(--pink-rgb) / .45); }

  /* ---------- Microinteracciones ---------- */
  .motion .channel { transition: border-color var(--t-fast), background-color var(--t-fast), transform .45s var(--ease); }
  .motion .channel:hover { transform: translate3d(0, -4px, 0); }
  .motion .btn--primary:hover { transform: translate3d(0, -2px, 0); }
  .motion .btn--primary:active { transform: scale(.98); }

  /* ---------- Menú móvil: los enlaces entran en cascada ---------- */
  .motion .mobile-nav:not([hidden]) .mobile-nav__links li,
  .motion .mobile-nav:not([hidden]) .mobile-nav__label,
  .motion .mobile-nav:not([hidden]) .mobile-nav__contact,
  .motion .mobile-nav:not([hidden]) .mobile-nav__cta { animation: rise .6s var(--ease) both; }
  .motion .mobile-nav__links li:nth-child(2) { animation-delay: .04s; }
  .motion .mobile-nav__links li:nth-child(3) { animation-delay: .08s; }
  .motion .mobile-nav__links li:nth-child(4) { animation-delay: .12s; }
  .motion .mobile-nav__links li:nth-child(5) { animation-delay: .16s; }
  .motion .mobile-nav__links li:nth-child(6) { animation-delay: .2s; }
  .motion .mobile-nav:not([hidden]) .mobile-nav__label { animation-delay: .24s; }
  .motion .mobile-nav:not([hidden]) .mobile-nav__contact { animation-delay: .28s; }
  .motion .mobile-nav:not([hidden]) .mobile-nav__cta { animation-delay: .32s; }

  /* Móvil: en el carrusel las tarjetas aparecen de lado */
  @media (max-width: 620px) {
    .motion .bento > [data-reveal]:not([data-reveal="curtain"]) { transform: translate3d(32px, 0, 0); }
    .motion .bento > [data-reveal].is-in { transform: none; }
    .motion .channel:hover { transform: none; }
  }

  /* ---------- Detalle: al cambiar de idioma la S se reenciende ---------- */
  .motion .neon.is-flicker { animation: neon-on 1.1s steps(1, end) both; }

  /* ---------- Movimiento reducido: todo quieto y visible ---------- */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}