/* =========================================================
   OPUS Studio — motion.css
   Design system de movimiento. Una sola curva de easing,
   una sola familia de duraciones, un set de variantes con
   nombre — nada de easings sueltos por el sitio.

   Ciclo de vida de un [data-reveal]:
     1. sin clase        -> estado oculto (solo mientras :not(.is-in))
     2. .is-in           -> anima hacia su estado natural
     3. .is-revealed     -> la transición de reveal se retira y vuelven
                            a mandar las transiciones propias del
                            componente (hover de cards, botones, etc.)
   El retraso de stagger viaja como --reveal-delay (se hereda a los
   hijos, así las variantes compuestas como "project" también escalonan).
   ========================================================= */

:root{
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); /* EASING_OPUS: decelera limpio, sin rebote ni overshoot */
  --motion-fast: .45s;   /* MOTION_DURATION_FAST */
  --motion-normal: .7s;  /* MOTION_DURATION_NORMAL */
  --motion-slow: .9s;    /* MOTION_DURATION_SLOW */
  --stagger-small: .06s; /* STAGGER_SMALL */
  --stagger-normal: .08s;/* STAGGER_NORMAL */

  --motion-y: 30px;
  --motion-y-lateral: 40px;
  --motion-blur: 8px;
  --motion-scale-from: .94;
}

/* Mobile: desplazamientos y blur más cortos — misma personalidad, menos distancia. */
@media (max-width:720px){
  :root{
    --motion-y: 18px;
    --motion-y-lateral: 22px;
    --motion-blur: 4px;
    --motion-normal: .6s;
    --motion-slow: .75s;
  }
}

/* ---------- Estados ocultos (solo antes de entrar) ---------- */
[data-reveal]:not(.is-in){ opacity:0; will-change:opacity, transform; }
[data-reveal="fadeUp"]:not(.is-in){ transform:translate3d(0, var(--motion-y), 0); }
[data-reveal="fadeDown"]:not(.is-in){ transform:translate3d(0, calc(var(--motion-y) * -1), 0); }
[data-reveal="fadeLeft"]:not(.is-in){ transform:translate3d(calc(var(--motion-y-lateral) * -1), 0, 0); }
[data-reveal="fadeRight"]:not(.is-in){ transform:translate3d(var(--motion-y-lateral), 0, 0); }
[data-reveal="blurUp"]:not(.is-in){ transform:translate3d(0, 20px, 0); filter:blur(var(--motion-blur)); }
[data-reveal="scale"]:not(.is-in){ transform:scale(var(--motion-scale-from)); }
[data-reveal="card"]:not(.is-in){ transform:translate3d(0, 25px, 0) scale(.97); }

/* ---------- Transiciones de reveal (se retiran con .is-revealed) ---------- */
[data-reveal]:not(.is-revealed){
  transition:opacity var(--motion-normal) var(--motion-ease) var(--reveal-delay, 0s);
}
[data-reveal="fadeUp"]:not(.is-revealed),
[data-reveal="fadeDown"]:not(.is-revealed),
[data-reveal="fadeLeft"]:not(.is-revealed),
[data-reveal="fadeRight"]:not(.is-revealed),
[data-reveal="scale"]:not(.is-revealed),
[data-reveal="card"]:not(.is-revealed){
  transition:
    opacity var(--motion-normal) var(--motion-ease) var(--reveal-delay, 0s),
    transform var(--motion-normal) var(--motion-ease) var(--reveal-delay, 0s);
}
[data-reveal="blurUp"]:not(.is-revealed){
  transition:
    opacity var(--motion-slow) var(--motion-ease) var(--reveal-delay, 0s),
    transform var(--motion-slow) var(--motion-ease) var(--reveal-delay, 0s),
    filter var(--motion-slow) var(--motion-ease) var(--reveal-delay, 0s);
}
[data-reveal="fade"]:not(.is-revealed){
  transition:opacity var(--motion-fast) var(--motion-ease) var(--reveal-delay, 0s);
}

/* ---------- project: imagen cinematográfica + contenido con leve delay ---------- */
[data-reveal="project"]:not(.is-in){ opacity:1; } /* el contenedor no se oculta: lo hacen sus hijos */
[data-reveal="project"]:not(.is-revealed){ transition:none; }
[data-reveal="project"]:not(.is-in) .project-thumb{ opacity:0; transform:scale(1.05); }
[data-reveal="project"]:not(.is-in) .project-body{ opacity:0; transform:translate3d(0, 30px, 0); }
[data-reveal="project"]:not(.is-revealed) .project-thumb{
  transition:
    opacity var(--motion-slow) var(--motion-ease) var(--reveal-delay, 0s),
    transform calc(var(--motion-slow) + .3s) var(--motion-ease) var(--reveal-delay, 0s);
}
[data-reveal="project"]:not(.is-revealed) .project-body{
  transition:
    opacity var(--motion-normal) var(--motion-ease) calc(var(--reveal-delay, 0s) + .12s),
    transform var(--motion-normal) var(--motion-ease) calc(var(--reveal-delay, 0s) + .12s);
}

/* ---------- lines: revelado título línea por línea (no letra por letra) ---------- */
[data-reveal="lines"]:not(.is-in){ opacity:1; }
[data-reveal="lines"] .ov-word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; }
[data-reveal="lines"] .ov-word-inner{
  display:inline-block;
  transition:
    opacity var(--motion-normal) var(--motion-ease) calc(var(--reveal-delay, 0s) + var(--line-delay, 0s)),
    transform var(--motion-slow) var(--motion-ease) calc(var(--reveal-delay, 0s) + var(--line-delay, 0s));
}
[data-reveal="lines"]:not(.is-in) .ov-word-inner{ opacity:0; transform:translate3d(0,110%,0) rotate(2deg); }
/* sin JS (o reduced-motion) el título entero hace fade */
[data-reveal="lines"]:not(.is-split):not(.is-in){ opacity:0; }

/* ---------- draw: trazo SVG progresivo (circuitos, separadores) ---------- */
[data-reveal="draw"]{
  transition:stroke-dashoffset var(--motion-slow) var(--motion-ease) var(--reveal-delay, 0s);
}
[data-reveal="draw"].is-in{ stroke-dashoffset:0 !important; }

/* ---------- Reduced motion: solo un fade corto, nada más ---------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal]:not(.is-in){ transform:none !important; filter:none !important; }
  [data-reveal]:not(.is-revealed){ transition:opacity var(--motion-fast) linear !important; }
  [data-reveal="project"]:not(.is-in) .project-thumb,
  [data-reveal="project"]:not(.is-in) .project-body,
  [data-reveal="lines"]:not(.is-in) .ov-word-inner{ transform:none !important; }
  [data-reveal="project"] .project-thumb,
  [data-reveal="project"] .project-body,
  [data-reveal="lines"] .ov-word-inner{ transition:opacity var(--motion-fast) linear !important; }
  [data-reveal="draw"]{ transition:none !important; }
}