/* ============================================================
   EXCENTRIC BARBERÍA — Animaciones
   Sistema de "reveal on scroll" + keyframes + microinteracciones.
   Todas las animaciones usan transform/opacity para mantener 60 FPS.
   ============================================================ */

/* ------------------------------------------------------------
   1. REVEAL ON SCROLL
   Los elementos con [data-reveal] parten ocultos y se muestran
   cuando animations.js les añade la clase .is-visible.
   Variantes: fade · up · down · left · right · zoom
   Retardo opcional con data-delay (ms), aplicado vía JS.
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(44px); }
[data-reveal="down"]  { transform: translateY(-44px); }
[data-reveal="left"]  { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="zoom"]  { transform: scale(0.88); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Al completar la transición se libera will-change vía JS
   añadiendo .reveal-done para no saturar la GPU. */
[data-reveal].reveal-done {
  will-change: auto;
}

/* ------------------------------------------------------------
   2. REVELADO DE TEXTO POR LÍNEAS
   [data-reveal-text] se divide en .reveal-line > .reveal-line__inner
   mediante JS; cada línea sube desde su máscara.
   ------------------------------------------------------------ */
.reveal-line {
  display: block;
  overflow: hidden;
}
.reveal-line__inner {
  display: block;
  transform: translateY(115%);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--line-index, 0) * 0.12s);
  will-change: transform;
}
.is-visible .reveal-line__inner,
[data-reveal-text].is-visible .reveal-line__inner {
  transform: translateY(0);
}

/* ------------------------------------------------------------
   3. KEYFRAMES REUTILIZABLES
   ------------------------------------------------------------ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}
@keyframes pulseGold {
  0%   { box-shadow: 0 0 0 0 rgba(198, 165, 124, 0.35); }
  70%  { box-shadow: 0 0 0 16px rgba(198, 165, 124, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 165, 124, 0); }
}

/* Entrada escalonada del contenido del hero al cargar la página */
.hero__tag     { animation: fadeDown 0.9s 0.25s var(--ease-out) both; }
.hero__text    { animation: fadeUp 0.9s 0.7s var(--ease-out) both; }
.hero__actions { animation: fadeUp 0.9s 0.9s var(--ease-out) both; }
.hero__meta    { animation: fadeIn 1.1s 1.25s var(--ease-out) both; }
.scroll-hint   { animation: fadeIn 1.1s 1.6s var(--ease-out) both; }

/* Pulso sutil del CTA principal del hero */
.hero .btn:first-child {
  animation: fadeUp 0.9s 0.9s var(--ease-out) both,
             pulseGold 2.6s 2.4s var(--ease-in-out) 3;
}

/* ------------------------------------------------------------
   4. PARALLAX
   Elementos con [data-parallax]; el desplazamiento se calcula
   en animations.js con requestAnimationFrame.
   ------------------------------------------------------------ */
[data-parallax] {
  will-change: transform;
}

/* ------------------------------------------------------------
   5. MICROINTERACCIONES ADICIONALES
   ------------------------------------------------------------ */

/* Subrayado dorado deslizante reutilizable */
.hover-underline {
  background-image: linear-gradient(var(--clr-gold), var(--clr-gold));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease-out), color var(--dur);
}
.hover-underline:hover {
  background-size: 100% 1px;
  color: var(--clr-gold);
}

/* Elevación genérica para tarjetas */
.hover-lift {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-2);
}

/* Icono flotante decorativo */
.float {
  animation: floatY 3.2s var(--ease-in-out) infinite;
}

/* ------------------------------------------------------------
   6. ACCESIBILIDAD — MOVIMIENTO REDUCIDO
   Desactiva animaciones y muestra el contenido de inmediato.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  .reveal-line__inner {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__bg {
    animation: none !important;
    transform: none !important;
  }
  .cta-banner {
    background-attachment: scroll;
  }
}