/* =========================================================
   CASTA — movimiento
   Regla: solo se anima transform y opacity. Todos los estados
   iniciales cuelgan de html.motion (lo pone js/boot.js), así que
   sin JS o con prefers-reduced-motion todo se ve, quieto.
   ========================================================= */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* expo out */
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --stagger: 90ms;
}

/* ---------- intro 3-2-1 · WOD START ---------- */
.preload { display: none; }
html.intro .preload {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--ink); color: var(--chalk);
  will-change: transform;
}
html.intro body { overflow: hidden; }
.preload__stage { position: relative; display: grid; place-items: center; width: 100%; height: 40vh; }
.preload__num {
  position: absolute; opacity: 0;
  font: 400 clamp(180px, 52vw, 440px)/.8 var(--f-display);
  color: var(--drop);
}
.preload__num--start { font-size: clamp(64px, 17vw, 220px); color: var(--chalk); text-align: center; line-height: .85; }
.preload__num--start b { display: block; color: var(--drop); font-weight: 400; }
.preload__meta {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px;
  display: flex; justify-content: space-between;
  font: 700 11px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
}
.preload__bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--drop); transform: scaleX(0); transform-origin: left; }

/* ---------- cortinilla entre páginas ---------- */
.pt {
  position: fixed; inset: 0; z-index: 280;
  display: grid; place-items: center;
  background: var(--drop);
  transform: scaleY(0); transform-origin: bottom;
  pointer-events: none;
}
.pt img { width: min(220px, 50vw); filter: brightness(0); opacity: .9; }
html.pt-in .pt { transform: scaleY(1); }

/* ---------- cabecera que se esconde ---------- */
.header { transition: transform .45s var(--ease-out); }
.header.is-hidden { transform: translateY(-100%); }

/* ---------- reveals genéricos ---------- */
.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.motion [data-reveal="fade"] { transform: none; }
.motion [data-reveal="scale"] { transform: scale(.92); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* titulares por líneas con máscara */
.line { display: block; overflow: hidden; padding-top: .06em; margin-top: -.06em; }
.line > span { display: block; }
.motion [data-reveal="lines"] { opacity: 1; transform: none; }
.motion [data-reveal="lines"] .line > span {
  transform: translate3d(0, 110%, 0);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.motion [data-reveal="lines"].is-in .line > span { transform: none; }

/* imagen que se destapa: una cortina que encoge (transform) */
[data-reveal="wipe"] { position: relative; overflow: hidden; }
.motion [data-reveal="wipe"] { opacity: 1; transform: none; }
.motion [data-reveal="wipe"]::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--wipe, var(--ink));
  transform-origin: top;
  transition: transform 1.2s var(--ease-in-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.motion [data-reveal="wipe"].is-in::after { transform: scaleY(0); }
.motion [data-reveal="wipe"] > img { transform: scale(1.25); transition: transform 1.8s var(--ease-out); }
.motion [data-reveal="wipe"].is-in > img { transform: scale(1); }

/* hijos escalonados */
.motion [data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 56px, 0);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.motion [data-stagger].is-in > * { opacity: 1; transform: none; }

/* barras de stock que se rellenan */
.motion .reps__bar:not(.is-in) i { transform: scaleX(0); }
.reps__bar i { transition: transform 1.6s var(--ease-out) .25s; }

/* ---------- HERO orquestado ---------- */
.motion .hero [data-h] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion .hero .hero__title .line > span {
  transform: translate3d(0, 112%, 0) rotate(3deg);
  transform-origin: left bottom;
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(120ms + var(--i, 0) * 110ms);
}
.motion .hero .hero__brush { opacity: 1; position: relative; }
.motion .hero .hero__brush::after {
  content: ""; position: absolute; inset: -4px -8px; background: var(--ink);
  transform-origin: right; transition: transform .9s var(--ease-in-out) 700ms;
}
.motion .hero__cover {
  position: absolute; inset: 0; z-index: 2; background: var(--drop);
  transform-origin: bottom; transition: transform 1.25s var(--ease-in-out) 150ms;
}
.motion .hero__media img { transform: scale(1.35); transition: transform 2.2s var(--ease-out) 250ms; }
.motion .hero .advisory { opacity: 0; transform: scale(.4) rotate(-25deg); transition: opacity .4s ease 1.5s, transform .7s cubic-bezier(.34, 1.8, .5, 1) 1.5s; }

.motion .hero.is-in [data-h] { opacity: 1; transform: none; }
.motion .hero.is-in .hero__title .line > span { transform: none; }
.motion .hero.is-in .hero__brush::after { transform: scaleX(0); }
.motion .hero.is-in .hero__cover { transform: scaleY(0); }
.motion .hero.is-in .hero__media img { transform: scale(1.06); }
.motion .hero.is-in .advisory { opacity: 1; transform: rotate(4deg); }
.hero__cover { display: none; }
.motion .hero__cover { display: block; }

/* reloj que arranca dígito a dígito */
.motion [data-boot]:not(.is-booted) .seg polygon.on { opacity: .09; filter: none; }
.motion [data-boot]:not(.is-booted) .seg.lit polygon.on { opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
.motion [data-boot] .seg.flash polygon { opacity: 1 !important; filter: none; }

/* ---------- cinta de texto gigante ---------- */
.band {
  overflow: hidden; white-space: nowrap;
  background: var(--drop); color: var(--ink);
  border-block: 2px solid var(--ink);
  padding: 10px 0;
}
.band--ink { background: var(--ink); color: var(--chalk); border-color: var(--line); }
.band__track { display: inline-flex; align-items: center; gap: 28px; will-change: transform; }
.band__track span { font: 400 clamp(46px, 11vw, 150px)/1 var(--f-display); text-transform: uppercase; }
.band__track .o { color: transparent; -webkit-text-stroke: 2px currentColor; }
.band__track i { font-style: normal; font-size: clamp(28px, 6vw, 80px); }

/* ---------- tarjetas: zoom + cambio de imagen ---------- */
.card__img .card__alt {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.12);
  transition: opacity .5s var(--ease-out), transform 1s var(--ease-out);
}
@media (hover: hover) {
  .card__link:hover .card__alt { opacity: 1; transform: scale(1); }
  .card__link:hover .card__main { transform: scale(1.08); }
}
.card__main { transition: transform .9s var(--ease-out); }

/* ---------- botones magnéticos ---------- */
.btn, .icon-btn { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .35s var(--ease-out), background .15s, color .15s, box-shadow .15s; }
.btn:hover { transform: translate3d(calc(var(--mx, 0px) - 2px), calc(var(--my, 0px) - 2px), 0); }

/* ---------- cursor propio (solo puntero fino) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; mix-blend-mode: difference; }
.cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; }
.cursor__ring {
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
}
.cursor__ring b {
  font: 700 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #fff;
  opacity: 0; transition: opacity .2s;
}
.cursor__scale { border: 1.5px solid #fff; width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; transition: transform .35s var(--ease-out); }
.cursor.is-link .cursor__scale { transform: scale(1.6); }
.cursor.is-label .cursor__scale { transform: scale(2.1); }
.cursor.is-label .cursor__ring b { opacity: 1; }
.cursor.is-hidden { opacity: 0; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label { cursor: none; }

@media (prefers-reduced-motion: reduce) {
  .cursor, .preload, .pt { display: none !important; }
  .band__track { transform: none !important; }
}