/* MDP · Scroll animation system · Webflow-style
 * Patterns: reveal-up | reveal-down | reveal-left | reveal-right
 *           reveal-fade | reveal-clip | reveal-scale | reveal-blur
 * Stagger:  d-1 .. d-8 (80ms incrementos)
 * Parallax: data-parallax="0.3"  (transform Y · scroll-driven)
 *
 * Triggered by motion.js IntersectionObserver al añadir .is-in.
 * Reduced motion: respeta prefers-reduced-motion (paso directo al final state).
 */

@import url("./tokens.css");

/* ============ BASE · todos los reveal-* hidden hasta .is-in ============ */
[class*="reveal-"] {
  opacity: 0;
  transition: opacity 900ms var(--ease-cinematic),
              transform 900ms var(--ease-cinematic),
              clip-path 1100ms var(--ease-cine-strong),
              filter 700ms var(--ease-out-expo);
  will-change: opacity, transform;
}

/* ============ PATRONES · transform inicial ============ */
.reveal-up    { transform: translateY(36px); }
.reveal-down  { transform: translateY(-36px); }
.reveal-left  { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal-fade  { transform: none; }
.reveal-scale { transform: scale(0.96); }
.reveal-blur  { filter: blur(8px); transform: scale(1.02); }
.reveal-clip  {
  clip-path: inset(0 100% 0 0);            /* recortado desde derecha */
  opacity: 1;                              /* clip ya oculta · opacity full */
}
.reveal-clip-up {
  clip-path: inset(100% 0 0 0);            /* recortado desde abajo */
  opacity: 1;
}

/* ============ FINAL STATE · .is-in (añadida por IntersectionObserver) ============ */
[class*="reveal-"].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* ============ STAGGER · delays incrementales (80ms steps) ============ */
[class*="reveal-"].d-1 { transition-delay: 80ms; }
[class*="reveal-"].d-2 { transition-delay: 160ms; }
[class*="reveal-"].d-3 { transition-delay: 240ms; }
[class*="reveal-"].d-4 { transition-delay: 320ms; }
[class*="reveal-"].d-5 { transition-delay: 400ms; }
[class*="reveal-"].d-6 { transition-delay: 480ms; }
[class*="reveal-"].d-7 { transition-delay: 560ms; }
[class*="reveal-"].d-8 { transition-delay: 640ms; }

/* ============ WORD-LEVEL STAGGER · para split text ============ */
.reveal-words .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-cinematic),
              transform 700ms var(--ease-cinematic);
}
.reveal-words.is-in .w { opacity: 1; transform: none; }
.reveal-words.is-in .w:nth-child(1)  { transition-delay: 80ms; }
.reveal-words.is-in .w:nth-child(2)  { transition-delay: 160ms; }
.reveal-words.is-in .w:nth-child(3)  { transition-delay: 240ms; }
.reveal-words.is-in .w:nth-child(4)  { transition-delay: 320ms; }
.reveal-words.is-in .w:nth-child(5)  { transition-delay: 400ms; }
.reveal-words.is-in .w:nth-child(6)  { transition-delay: 480ms; }
.reveal-words.is-in .w:nth-child(7)  { transition-delay: 560ms; }
.reveal-words.is-in .w:nth-child(8)  { transition-delay: 640ms; }
.reveal-words.is-in .w:nth-child(9)  { transition-delay: 720ms; }
.reveal-words.is-in .w:nth-child(10) { transition-delay: 800ms; }

/* ============ HAIRLINE DRAW · linea horizontal que crece scroll-in ============ */
.reveal-line {
  display: inline-block;
  height: 1px;
  background: var(--ink, currentColor);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--ease-cine-strong);
  opacity: 1;
  width: 100%;
}
.reveal-line.is-in { transform: scaleX(1); }

/* ============ PARALLAX · transform Y bound to scroll (script-driven) ============ */
[data-parallax] {
  will-change: transform;
}

/* ============ MARQUEE · loop infinito horizontal ============ */
.marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marqueeScroll var(--marquee-dur, 40s) linear infinite;
  will-change: transform;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============ CURSOR · sutil indicator para zonas interactivas ============ */
[data-cursor="view"]   { cursor: zoom-in; }
[data-cursor="link"]   { cursor: pointer; }
[data-cursor="drag"]   { cursor: grab; }
[data-cursor="drag"]:active { cursor: grabbing; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  [class*="reveal-"],
  .reveal-words .w,
  .reveal-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .marquee-track { animation: none; }
}