/* ==========================================================================
   Capa de movimiento compartida (inspirada en la web de Framer "Forma Studio")
   - Entradas de bloque: opacity 0 + translateY(80px), 1s, ease [0.23,0.83,0.56,1]
   - Texto palabra a palabra: opacity 0 + translateY(20px), escalonado
   - Contadores con rodillo de dígitos
   - Transición entre páginas con cortina
   ========================================================================== */

:root {
  --ease-framer: cubic-bezier(0.23, 0.83, 0.56, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 1s;
}

/* ---------- Reveal de bloque ---------- */
.js [data-reveal] {
  opacity: 0.001;
  transform: translateY(80px);
  transition:
    opacity var(--dur-reveal) var(--ease-framer),
    transform var(--dur-reveal) var(--ease-framer);
  transition-delay: var(--d, 0s);
  will-change: transform, opacity;
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(1.08); opacity: 0.001; }
.js [data-reveal="left"] { transform: translateX(-60px); }
.js [data-reveal="right"] { transform: translateX(60px); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Imagen que se destapa con máscara */
.js [data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--ease-framer);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal="clip"] img {
  transform: scale(1.25);
  transition: transform 1.6s var(--ease-framer);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="clip"].is-in img { transform: scale(1); }

/* ---------- Texto palabra a palabra ---------- */
.split-word {
  display: inline-block;
  white-space: nowrap;
}
.js [data-split] .split-word {
  opacity: 0.001;
  transform: translateY(20px);
  transition:
    opacity 0.8s var(--ease-framer),
    transform 0.8s var(--ease-framer);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 0.035s);
}
.js [data-split].is-in .split-word {
  opacity: 1;
  transform: none;
}
/* Variante ligada al scroll: cada palabra pasa de tenue a opaca */
.js [data-split="scroll"] .split-word {
  opacity: 0.16;
  transform: none;
  transition: opacity 0.25s linear;
}
.js [data-split="scroll"] .split-word.on { opacity: 1; }

/* ---------- Contador con rodillo ---------- */
.roll {
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.roll-digit {
  display: inline-block;
  height: 1.15em;
  overflow: hidden;
  position: relative;
}
.roll-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 2.2s var(--ease-out-expo);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 0.12s);
}
.roll-strip > span { height: 1.15em; line-height: 1.15; display: block; text-align: center; }
.roll-static { display: inline-block; line-height: 1.15; white-space: pre; }

/* ---------- Botón con texto que rueda al hover ---------- */
[data-roll] { position: relative; }
[data-roll] .roll-label {
  display: inline-block;
  overflow: hidden;
  height: 1.25em;
  line-height: 1.25em;
  vertical-align: top;
}
[data-roll] .roll-label > span {
  display: block;
  transition: transform 0.5s var(--ease-framer);
}
[data-roll]:hover .roll-label > span { transform: translateY(-100%); }
[data-roll] .roll-arrow { transition: transform 0.5s var(--ease-framer); display: inline-block; }
[data-roll]:hover .roll-arrow { transform: rotate(45deg); }

/* ---------- Cortina de transición entre páginas ---------- */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: #1c1a1a;
  transform: translateY(0);
  transition: transform 0.9s var(--ease-framer);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-curtain__mark {
  font-family: "Jost", sans-serif;
  font-weight: 300;
  color: #faf7f7;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: 0.3em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-framer), transform 0.5s var(--ease-framer);
}
.page-curtain__mark b { font-weight: inherit; color: #e6aaa2; }
.page-curtain.is-leaving .page-curtain__mark,
.page-curtain.is-covering .page-curtain__mark { opacity: 1; transform: none; }
.page-curtain.is-gone { transform: translateY(-100%); }
.page-curtain.is-covering {
  transform: translateY(0);
  pointer-events: all;
}
.page-curtain.from-bottom { transform: translateY(100%); transition: none; }

/* ---------- Barra de progreso de scroll ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: #94191a;
  z-index: 70;
  pointer-events: none;
}

/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal="clip"],
  .js [data-reveal="clip"] img,
  .js [data-split] .split-word,
  .roll-strip,
  .page-curtain {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
  .page-curtain { display: none; }
}