/* =====================================================================
   EFECTOS transversales (portados a CSS puro desde 21st.dev)
   [E-01] Revelado al entrar en pantalla — "Blur Fade" (Magic UI)
   [E-02] Corte vertical de titulares — "Vertical Cut Reveal"
   [E-03] Marquesina infinita — "Logo Cloud Marquee"
   [E-04] Botón con destello perimetral — "Shimmer Button" (Magic UI)
   [E-05] Odómetro para cifras — "Count Up" (modo slide)
   [E-06] Fondos que derivan — "Animated Gradient Background"
   [E-07] Movimiento reducido: todo visible y quieto
   ===================================================================== */

/* ---------- [E-01] Revelado. Solo se oculta cuando hay JS (html.js);
   data-reveal="" (sube + desenfoque) · "up" (sube) · "fade" (solo opacidad)
   · "left"/"right" · "host" (solo recibe .is-in para animar a sus hijos).
   Usa la propiedad individual `translate` (no `transform`) para no pisar los
   transform propios del mockup, de los botones al pasar el cursor o de las tarjetas. ---------- */
html.js [data-reveal] {
  opacity: 0; translate: 0 18px; filter: blur(6px);
  transition: opacity .8s var(--ease-out), translate .8s var(--ease-out), filter .8s var(--ease-out);
  transition-delay: var(--d, 0s);
}
html.js [data-reveal="up"]    { filter: none; translate: 0 28px; }
html.js [data-reveal="fade"]  { filter: none; translate: 0 0; }
html.js [data-reveal="left"]  { filter: none; translate: -28px 0; }
html.js [data-reveal="right"] { filter: none; translate: 28px 0; }
html.js [data-reveal="host"]  { opacity: 1; translate: 0 0; filter: none; transition: none; }
html.js [data-reveal].is-in   { opacity: 1; translate: 0 0; filter: blur(0); }
html.js [data-reveal="up"].is-in, html.js [data-reveal="fade"].is-in,
html.js [data-reveal="left"].is-in, html.js [data-reveal="right"].is-in { filter: none; }

/* ---------- [E-02] Corte vertical: cada palabra/línea sube desde su máscara ---------- */
.line { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 .26em; }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .06em .12em 0; margin: 0 -.06em -.12em 0; }
.w__i {
  display: inline-block; transform: translateY(112%);
  transition: transform .95s var(--ease-out);
  transition-delay: calc(.12s + var(--i, 0) * .1s);
}
html:not(.js) .w__i, [data-reveal="host"].is-in .w__i { transform: none; }

/* ---------- [E-03] Marquesina. JS clona el contenido hasta cubrir el ancho
   y duplica la mitad; el desplazamiento es exactamente un periodo (--half). ---------- */
.marquee {
  overflow: hidden; padding: 14px 0; margin: -14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 22px; width: max-content;
  animation: marquee var(--dur, 40s) linear infinite;
  will-change: transform;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-1 * var(--half, 50%))); } }

/* ---------- [E-04] Shimmer: un cono de luz gira detrás y solo asoma por
   el anillo de 1.5 px entre el borde y el relleno (::after) ---------- */
.btn--shimmer {
  position: relative; overflow: hidden; isolation: isolate;
  background: transparent; --cut: 1.5px; --spread: 90deg; --r: 14px;
}
.btn--shimmer::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -2;
  width: max(320%, 420px); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from calc(270deg - var(--spread) / 2), transparent 0, rgba(255, 255, 255, .95) var(--spread), transparent var(--spread));
  filter: blur(2px);
  animation: shimmer-spin 3s linear infinite;
}
.btn--shimmer::after {
  content: ""; position: absolute; inset: var(--cut); z-index: -1;
  border-radius: calc(var(--r) - var(--cut)); background: var(--btn);
  box-shadow: inset 0 -8px 10px rgba(255, 255, 255, .12);
  transition: background-color .2s ease, box-shadow .3s ease;
}
.btn--shimmer:hover { background: transparent; }
.btn--shimmer:hover::after { background: var(--btn-hover); box-shadow: inset 0 -6px 10px rgba(255, 255, 255, .26); }
.btn--shimmer:active::after { box-shadow: inset 0 -10px 10px rgba(255, 255, 255, .26); }
.btn__label { position: relative; }
@keyframes shimmer-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---------- [E-05] Odómetro: cada dígito es una tira 0–9–0 que se desliza ---------- */
.odo { display: inline-flex; align-items: center; line-height: 1; font-variant-numeric: tabular-nums; }
.odo__d { display: inline-block; position: relative; width: 1ch; height: 1em; overflow: hidden; }
.odo__s { display: flex; flex-direction: column; will-change: transform; }
.odo__s span { display: flex; align-items: center; justify-content: center; height: 1em; }
.odo__sep { display: inline-block; }

/* ---------- [E-06] Manchas de luz que derivan (hero y CTA) ---------- */
@keyframes drift-a { to { transform: translate(120px, 80px) scale(1.12); } }
@keyframes drift-b { to { transform: translate(-140px, 60px) scale(1.08); } }
@keyframes drift-c { to { transform: translate(-80px, -50px) scale(1.16); } }

/* Barra de progreso de las pestañas con autoplay (carrusel y fases) */
@keyframes tabfill { to { transform: scaleX(1); } }

/* ---------- [E-07] Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; translate: 0 0; filter: none; transition: none; }
  .w__i { transform: none; transition: none; }
  .marquee__track { animation: none; }
  .btn--shimmer::before { animation: none; }
  .auth[open], .auth[open]::backdrop, .auth.is-closing, .auth.is-closing::backdrop { animation: none; }
  html { scroll-behavior: auto; }
}