/* ============================================================
   SHAMMA — ANIMACIONES Y REVEALS
   Regla APEX: el contenido SIEMPRE es legible aunque el JS falle.
   ============================================================ */

/* ============ REVEAL BASE ============ */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
[data-reveal].revealed { opacity: 1; transform: none; }

/* Retardos escalonados */
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
[data-reveal][data-delay="5"] { transition-delay: .40s; }
[data-reveal][data-delay="6"] { transition-delay: .48s; }

/* Variantes direccionales */
[data-reveal="left"]  { transform: translateX(-42px); }
[data-reveal="right"] { transform: translateX(42px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="left"].revealed,
[data-reveal="right"].revealed,
[data-reveal="scale"].revealed { transform: none; }

/* ============ CLIP-PATH WIPE (imágenes y bloques) ============ */
[data-wipe] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--ease-out);
}
[data-wipe].revealed { clip-path: inset(0 0 0% 0); }

/* Wipe lateral */
[data-wipe="right"] { clip-path: inset(0 100% 0 0); }
[data-wipe="right"].revealed { clip-path: inset(0 0 0 0); }

/* ============ SPLIT TEXT ============ */
/* El splitter JS envuelve cada línea en .sp-line y cada palabra en .sp-word */
.sp-line { display: block; overflow: hidden; }
.sp-word {
  display: inline-block;
  transform: translateY(105%) rotate(4deg);
  opacity: 0;
  transition: transform 1s var(--ease-out), opacity .8s var(--ease-out);
  will-change: transform, opacity;
}
.is-split-in .sp-word { transform: none; opacity: 1; }

.sp-char {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .9s var(--ease-out), opacity .7s var(--ease-out);
  will-change: transform, opacity;
}
.is-split-in .sp-char { transform: none; opacity: 1; }

/* Seguridad: si el splitter no llegó a correr, el texto se ve igual */
[data-split]:not(.is-split) { opacity: 1; }


/* ============ CONTADORES ============ */
[data-count] { font-variant-numeric: tabular-nums; }

/* ============ HOVER: SUBRAYADO ANIMADO ============ */
.link-u {
  position: relative; display: inline-block; color: var(--cream);
  background-image: linear-gradient(var(--gold-lit), var(--gold-lit));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .5s var(--ease-out), color .4s;
  padding-bottom: 2px;
}
.link-u:hover { background-size: 100% 1px; color: var(--gold-lit); }

/* ============ FLOTACIÓN SUAVE ============ */
.float-slow { animation: floatY 7s ease-in-out infinite; }
.float-slow--alt { animation: floatY 9s ease-in-out infinite reverse; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

/* ============ APARICIÓN DEL HERO (sin depender de JS) ============ */
.hero__verse, .hero__sub, .hero__cta, .hero__meta {
  opacity: 0; transform: translateY(24px);
  animation: heroIn 1.2s var(--ease-out) forwards;
}
.hero__verse { animation-delay: .35s; }
.hero__sub   { animation-delay: .85s; }
.hero__cta   { animation-delay: 1.0s; }
.hero__meta  { animation-delay: 1.15s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

.hero__stack .hero__ph {
  opacity: 0; transform: translateY(50px) scale(.96);
  animation: heroPhIn 1.5s var(--ease-out) forwards;
}
.hero__ph--a { animation-delay: .55s; }
.hero__ph--b { animation-delay: .75s; }
.hero__ph--c { animation-delay: .95s; }
@keyframes heroPhIn { to { opacity: 1; transform: none; } }
.hero__ph--c { --end-opacity: .85; }

/* ============ TRANSICIÓN DE FILTRO DE GALERÍA ============ */
.gal-grid { transition: min-height .5s var(--ease-out); }

/* ============ ACCESIBILIDAD ============ */
/* NOTA APEX: Windows activa 'reduce' por defecto en muchas configuraciones.
   Por eso NO se apagan las micro-interacciones, solo los movimientos
   grandes y continuos que pueden causar molestia real. */
@media (prefers-reduced-motion: reduce) {
  /* El grano sí se detiene: es un parpadeo rápido y es lo único
     realmente molesto de la página. Lo demás solo se ralentiza. */
  .grain { animation: none; }
  .float-slow, .float-slow--alt { animation-duration: 22s; }
  .hero__scroll-line::after { animation-duration: 4.5s; }
  /* El destello de la caligrafía no se apaga: se espacia. No mueve nada de
     sitio —es un degradado cruzando dentro de las letras—, así que apagarlo
     dejaría la cabecera muerta sin ganar nada en comodidad. */
  .crest__shine { animation-duration: 15s; }
  .crest__art   { animation-duration: 18s; }
  .nav__logo:hover .crest__shine { animation-duration: 6s; }
}