/* ============================================================
   NTIZAR MOTION PACK
   Depende de: ntizar.css

   Animaciones reutilizables, todas con respeto a
   prefers-reduced-motion.

   API pública:
     .nz-anim-fade-in
     .nz-anim-rise
     .nz-anim-scale-in
     .nz-anim-slide-left, .nz-anim-slide-right
     .nz-anim-glow-pulse
     .nz-anim-float
     .nz-anim-aurora-pan      -> mueve el gradient brand/aurora
     .nz-anim-shimmer         -> brillo a lo largo (sobre superficies)
     .nz-anim-typing          -> caret tipo terminal
     .nz-anim-scroll-fade     -> fade proporcional al scroll (view-timeline)

     Modificadores de timing:
       .nz-anim--delay-1 ... 6
       .nz-anim--slow | --fast
       .nz-anim--once  (no infinite)

     .nz-marquee, .nz-marquee__track  -> ticker horizontal
     .nz-reveal                       -> requiere clase .is-visible (vía IntersectionObserver)
     .nz-reveal--scroll               -> reveal con scroll-driven (CSS puro, Chrome 115+)
     .nz-progress-bar__fill--scroll   -> barra de progreso con scroll-driven (scroll-timeline)

   Nota: Este archivo usa CSS Nesting nativo (CSS 2023/2024).
   Soporte: Chrome 116+, Firefox 117+, Safari 16.1+.
   Aurora v5.1+ ya requiere navegadores modernos.
   ============================================================ */

@layer ntizar.utilities {

  /* ---------- BASE keyframes ---------- */
  @keyframes nz-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes nz-rise {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes nz-scale-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes nz-slide-left {
    from { opacity: 0; transform: translateX(2rem); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes nz-slide-right {
    from { opacity: 0; transform: translateX(-2rem); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes nz-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nz-color-brand) 50%, transparent); }
    50%      { box-shadow: 0 0 0 1.25rem color-mix(in srgb, var(--nz-color-brand) 0%, transparent); }
  }
  @keyframes nz-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.5rem); }
  }
  @keyframes nz-aurora-pan {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  @keyframes nz-shimmer-pan {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  @keyframes nz-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @keyframes nz-caret {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
  }

  /* ---------- ANIMACIONES BASE ---------- */
  .nz {
    .nz-anim-fade-in    { animation: nz-fade-in   var(--nz-anim-d, 600ms) var(--nz-ease-standard) both; }
    .nz-anim-rise       { animation: nz-rise      var(--nz-anim-d, 700ms) var(--nz-ease-standard) both; }
    .nz-anim-scale-in   { animation: nz-scale-in  var(--nz-anim-d, 500ms) var(--nz-ease-standard) both; }
    .nz-anim-slide-left { animation: nz-slide-left  var(--nz-anim-d, 700ms) var(--nz-ease-standard) both; }
    .nz-anim-slide-right{ animation: nz-slide-right var(--nz-anim-d, 700ms) var(--nz-ease-standard) both; }

    .nz-anim-glow-pulse { animation: nz-glow-pulse 2.4s ease-in-out infinite; }
    .nz-anim-float      { animation: nz-float 5s ease-in-out infinite; }

    .nz-anim-aurora-pan {
      background: var(--nz-gradient-aurora);
      background-size: 300% 300%;
      animation: nz-aurora-pan 14s ease-in-out infinite;
    }
  }

  /* ---------- TIMING MODIFIERS ---------- */
  .nz {
    .nz-anim--once  { animation-iteration-count: 1; }
    .nz-anim--slow  { --nz-anim-d: 1.2s; }
    .nz-anim--fast  { --nz-anim-d: 300ms; }

    .nz-anim--delay-1 { animation-delay: 80ms; }
    .nz-anim--delay-2 { animation-delay: 180ms; }
    .nz-anim--delay-3 { animation-delay: 280ms; }
    .nz-anim--delay-4 { animation-delay: 420ms; }
    .nz-anim--delay-5 { animation-delay: 600ms; }
    .nz-anim--delay-6 { animation-delay: 800ms; }
  }

  /* ---------- SHIMMER (sobre superficies) ---------- */
  .nz {
    .nz-anim-shimmer {
      position: relative;
      overflow: hidden;
      isolation: isolate;

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          110deg,
          transparent 30%,
          rgba(255, 255, 255, 0.35) 50%,
          transparent 70%);
        transform: translateX(-100%);
        animation: nz-shimmer-pan 2.6s ease-in-out infinite;
        pointer-events: none;
      }
    }
  }

  /* ---------- MARQUEE / TICKER ---------- */
  .nz {
    .nz-marquee {
      overflow: hidden;
      width: 100%;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);

      & .nz-marquee__track {
        display: inline-flex;
        gap: 2.5rem;
        white-space: nowrap;
        animation: nz-marquee 28s linear infinite;
        padding-right: 2.5rem;
        will-change: transform;
      }

      & .nz-marquee--slow .nz-marquee__track { animation-duration: 50s; }
      & .nz-marquee--fast .nz-marquee__track { animation-duration: 14s; }
      &:hover .nz-marquee__track { animation-play-state: paused; }
    }
  }

  /* ---------- TYPING / CARET ---------- */
  .nz {
    .nz-anim-typing::after {
      content: "▍";
      margin-left: 0.15em;
      color: var(--nz-color-accent);
      animation: nz-caret 1s steps(1) infinite;
    }
  }

  /* ---------- REVEAL on scroll (IntersectionObserver) ----------
     Uso:
       <div class="nz-reveal">…</div>
     + JS:
       const io = new IntersectionObserver((es)=>es.forEach(e=>e.isIntersecting && e.target.classList.add('is-visible')), {threshold: 0.15});
       document.querySelectorAll('.nz-reveal').forEach(el=>io.observe(el));
  */
  .nz {
    .nz-reveal {
      opacity: 0;
      transform: translateY(1.25rem);
      transition:
        opacity 700ms var(--nz-ease-standard),
        transform 700ms var(--nz-ease-standard);

      &.is-visible {
        opacity: 1;
        transform: none;
      }

      &--left  { transform: translateX(-1.5rem); }
      &--right { transform: translateX( 1.5rem); }
      &--scale { transform: scale(0.94); }

      &.is-visible.nz-reveal--left,
      &.is-visible.nz-reveal--right,
      &.is-visible.nz-reveal--scale {
        transform: none;
      }
    }
  }

  /* ---------- REVEAL con scroll-driven animations (CSS puro) ----------
     Uso:
       <div class="nz-reveal nz-reveal--scroll">…</div>
     No requiere JS ni IntersectionObserver — la animación es proporcional
     al scroll del viewport. Fallback graceful en navegadores que no soporten
     `animation-timeline` (Firefox, Safari).
     Soporte: Chrome 115+, Edge 115+
     Mejora 2026-05-30: usa tokens CSS para offset y duración, consistente
     con el resto del sistema Aurora.
  */
  .nz {
    .nz-reveal--scroll {
      opacity: 0;
      transform: translateY(var(--nz-reveal-offset, 1.25rem));
      animation: nz-scroll-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;

      &.nz-reveal--left {
        transform: translateX(var(--nz-reveal-offset-inline, -1.5rem));
      }
      &.nz-reveal--right {
        transform: translateX(var(--nz-reveal-offset-inline, 1.5rem));
      }
      &.nz-reveal--scale {
        transform: scale(var(--nz-reveal-scale-start, 0.94));
      }
    }

    @keyframes nz-scroll-reveal {
      from {
        opacity: 0;
        transform: translateY(var(--nz-reveal-offset, 1.25rem));
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }

  /* ---------- REVEAL proporcional al scroll (parallax suave) ----------
     Uso:
       <div class="nz-anim-scroll-fade">…</div>
     Opacidad y desplazamiento proporcionales a la visibilidad en viewport.
  */
  .nz {
    .nz-anim-scroll-fade {
      animation: nz-scroll-fade linear both;
      animation-timeline: view();
      animation-range: cover 20% cover 80%;
    }

    @keyframes nz-scroll-fade {
      from {
        opacity: 0;
        transform: translateY(2rem);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }

  /* ---------- PROGRESS BAR con scroll-driven ----------
     Uso:
       <div class="nz-progress-bar">
         <div class="nz-progress-bar__fill nz-progress-bar__fill--scroll"></div>
       </div>
     La barra se llena según el scroll de la página.
  */
  .nz {
    .nz-progress-bar__fill--scroll {
      animation: nz-scroll-progress linear both;
      animation-timeline: scroll();
      width: 0%;
    }

    @keyframes nz-scroll-progress {
      from { width: 0%; }
      to   { width: 100%; }
    }
  }

  /* ---------- HOVER LIFT (helper de microinteracción) ---------- */
  .nz {
    .nz-hover-lift {
      transition:
        transform var(--nz-duration-fast) var(--nz-ease-standard),
        box-shadow var(--nz-duration-base) var(--nz-ease-standard);

      &:hover {
        transform: translateY(-3px);
        box-shadow: var(--nz-shadow-md);
      }
    }
  }

  /* ---------- REDUCED MOTION ---------- */
  @media (prefers-reduced-motion: reduce) {
    .nz {
      .nz-anim-fade-in, .nz-anim-rise, .nz-anim-scale-in,
      .nz-anim-slide-left, .nz-anim-slide-right,
      .nz-anim-glow-pulse, .nz-anim-float,
      .nz-anim-aurora-pan, .nz-anim-shimmer,
      .nz-anim-scroll-fade,
      .nz-marquee__track, .nz-anim-typing::after {
        /* override: respeto absoluto a prefers-reduced-motion;
           las animaciones decorativas se cancelan sin importar la fuente. */
        animation: none !important;
      }

      .nz-reveal {
        opacity: 1 !important;
        transform: none !important;
      }

      .nz-reveal--scroll {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
      }

      .nz-progress-bar__fill--scroll {
        animation: none !important;
        width: 100% !important;
      }
    }
  }
}