/* ================================================================
   animations.css — circle-reveal entrada + mesh blobs + reveals + dashboard
   Respeta prefers-reduced-motion en todos los keyframes.
   ================================================================ */

/* ----------------- Page entry: light curtain (solo home) ------- */
/* CSS-only: arranca antes que JS. Solo se aplica en .page-home.
   Una cortina mint clara cubre la página y se contrae en círculo desde el centro.
   500ms con ease-out-quint — suave, sin flash oscuro. */
@keyframes intro-curtain {
  0%   { clip-path: circle(150% at 50% 50%); opacity: 1; }
  60%  { opacity: 1; }
  100% { clip-path: circle(0%   at 50% 50%); opacity: 0; }
}

body.page-home::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--c-mint-50);
  z-index: 99999;
  pointer-events: none;
  clip-path: circle(150% at 50% 50%);
  animation: intro-curtain 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Pausa para bfcache restart (re-disparar animación al volver via back/forward) */
body.page-home.intro-replay::before { animation: none; clip-path: circle(0% at 50% 50%); }

@media (prefers-reduced-motion: reduce) {
  body.page-home::before { animation: none; display: none; }
}

/* ----------------- Page exit: light curtain (todas las páginas) - */
/* Fallback de page-transitions.js (Safari/Firefox sin View Transitions API).
   Cierra con cortina mint — suave, no agresivo. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--c-mint-50);
  z-index: 99998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.4, 0, 0.6, 1);
}
body.is-leaving::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

/* View Transitions API — Apple-style: cross-fade + scale micro muy suave.
   Old page: 280ms fade out + scale down 1→0.97 (casi imperceptible)
   New page: 380ms fade in + scale up 0.98→1 con ease-out-quart
   Sin slides laterales — fluido como cambio de página en iOS.
   El overlap (duración new > old) garantiza que nunca haya frame en blanco. */
@keyframes vt-fade-scale-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.97); }
}
@keyframes vt-fade-scale-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
::view-transition-old(root) {
  animation: vt-fade-scale-out 260ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
::view-transition-new(root) {
  animation: vt-fade-scale-in 400ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Hero title + lead: opacos hasta que hero-text.js los anima.
   Si JS falla, un timeout fallback en 800ms los hace visibles. */
.page-home .hero-title,
.page-home .hero-lead {
  opacity: 0;
  transition: opacity 300ms var(--ease-out-quart);
}
@media (prefers-reduced-motion: reduce) {
  .page-home .hero-title,
  .page-home .hero-lead { opacity: 1; }
}

/* ----------------- Hero word-by-word reveal -------------------- */
/* .hero-word = una palabra entera con white-space:nowrap → nunca se corta en dos líneas.
   --wi es el índice de palabra (stagger 42ms/palabra).
   El lead tiene --lead-delay como offset para que empiece después del título. */
@keyframes word-in {
  from {
    opacity: 0;
    transform: translateY(0.4em);
    filter: blur(5px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.hero-word {
  display: inline-block;
  white-space: nowrap;
  animation: word-in 420ms var(--ease-out-expo)
    calc(var(--lead-delay, 0ms) + var(--wi, 0) * 42ms) both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-word { animation: none; opacity: 1; transform: none; filter: none; }
}

/* Mobile (<768px): sin animaciones de texto (evita flashazos y blur GPU) */
@media (max-width: 767px) {
  /* Texto visible directamente, sin opacidad inicial ni JS animation */
  .page-home .hero-title,
  .page-home .hero-lead { opacity: 1; }
  .hero-word { animation: none; opacity: 1; transform: none; filter: none; }
  /* Entrada del hero más rápida y sin blur */
  .hero-eyebrow  { animation-duration: 0.3s; animation-delay: 0ms; }
  .hero-cta-row  { animation-duration: 0.3s; animation-delay: 0.1s; }
  .hero-meta-row { animation-duration: 0.3s; animation-delay: 0.15s; }
  /* Aurora deshabilitada en mobile (GPU budget) */
  .hero-bg-canvas::after { display: none; }
  /* Blobs: estáticos en mobile — posición fija, sin drift */
  .hero-mesh .blob-1, .hero-mesh .blob-2,
  .hero-mesh .blob-3, .hero-mesh .blob-4,
  .hero-mesh .blob-5, .hero-mesh .blob-6 { animation: none; }
  /* Líneas verticales: deshabilitadas en mobile */
  .hero-line { display: none; }
}

/* ----------------- Hero entry (fallback si no hay hero-text.js) */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Elementos de apoyo del hero: eyebrow, CTA row, meta row.
   Aparecen en secuencia después de que el título empiece a animarse. */
.hero-eyebrow  { animation: fade-up 0.55s var(--ease-out-expo) 0.05s both; }
.hero-cta-row  { animation: fade-up 0.55s var(--ease-out-expo) 0.55s both; }
.hero-meta-row { animation: fade-up 0.55s var(--ease-out-expo) 0.70s both; }

/* Dashboard de la derecha */
.hero-dashboard { animation: fade-up 0.8s var(--ease-out-quart) 0.40s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-cta-row, .hero-meta-row,
  .hero-dashboard { animation: none; }
}

/* ----------------- Hero líneas verticales (data flow) --------- */
@keyframes hero-line-fall {
  0%   { transform: translateY(-30%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(220%); opacity: 0; }
}

/* ----------------- Hero aurora (capa sobre blobs, deriva lenta) - */
/* Una mancha de gradiente grande que se mueve suavemente por el hero.
   Da sensación de profundidad / luz ambiental sin ser distractora. */
@keyframes aurora-drift {
  0%   { transform: translate(0%,   0%)   rotate(0deg);   opacity: 0.75; }
  33%  { transform: translate(3%,   2%)   rotate(1.5deg); opacity: 1; }
  66%  { transform: translate(-2%,  3.5%) rotate(-1deg);  opacity: 0.85; }
  100% { transform: translate(1%,  -1%)   rotate(0.5deg); opacity: 0.75; }
}
.hero-bg-canvas::after {
  content: "";
  position: absolute;
  inset: -15% -10%;
  background:
    radial-gradient(ellipse 55% 55% at 25% 35%, rgba(194, 85, 61, 0.14), transparent 70%),
    radial-gradient(ellipse 50% 45% at 75% 65%, rgba(107, 91, 46, 0.10), transparent 70%);
  animation: aurora-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-canvas::after { animation: none; }
}

/* ----------------- Mesh gradient blobs (verde esmeralda) ------- */
@keyframes blob-drift-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(140px, 80px, 0) scale(1.18); }
  100% { transform: translate3d(40px, 160px, 0) scale(0.92); }
}
@keyframes blob-drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-110px, 70px, 0) scale(0.88); }
  100% { transform: translate3d(60px, -50px, 0) scale(1.12); }
}
@keyframes blob-drift-3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-80px, -110px, 0) scale(1.14); }
  100% { transform: translate3d(120px, 30px, 0) scale(0.94); }
}
@keyframes blob-drift-4 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(140px, -60px, 0) scale(0.92); }
  100% { transform: translate3d(-50px, 90px, 0) scale(1.08); }
}

.hero-mesh .blob-1 { animation: blob-drift-1 28s var(--ease-in-out) infinite alternate; transform-origin: center; }
.hero-mesh .blob-2 { animation: blob-drift-2 34s var(--ease-in-out) infinite alternate; transform-origin: center; }
.hero-mesh .blob-3 { animation: blob-drift-3 38s var(--ease-in-out) infinite alternate; transform-origin: center; }
.hero-mesh .blob-4 { animation: blob-drift-4 31s var(--ease-in-out) infinite alternate; transform-origin: center; }
.hero-mesh .blob-5 { animation: blob-drift-1 32s var(--ease-in-out) infinite alternate-reverse; transform-origin: center; }
.hero-mesh .blob-6 { animation: blob-drift-2 39s var(--ease-in-out) infinite alternate; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .hero-mesh .blob-1, .hero-mesh .blob-2,
  .hero-mesh .blob-3, .hero-mesh .blob-4,
  .hero-mesh .blob-5, .hero-mesh .blob-6 { animation: none; }
}

/* Variant: mesh sutil para hero pequeño en páginas internas */
.hero-mesh.is-still .blob-1,
.hero-mesh.is-still .blob-2,
.hero-mesh.is-still .blob-3,
.hero-mesh.is-still .blob-4,
.hero-mesh.is-still .blob-5,
.hero-mesh.is-still .blob-6 { animation-duration: 60s; opacity: 0.5; }

/* ----------------- Reveals (stagger fadeUp + clip inset) ------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="scale"] { transform: translateY(28px) scale(0.97); }
[data-reveal="scale"].is-revealed { transform: translateY(0) scale(1); }

[data-reveal="clip"] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-slower) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="clip"].is-revealed {
  clip-path: inset(0 0 0 0);
}

/* Wipe-right: barrido horizontal de izquierda a derecha */
[data-reveal="wipe-right"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 700ms var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="wipe-right"].is-revealed { clip-path: inset(0 0 0 0); }

/* Wipe-diagonal: revelado en diagonal con polygon */
[data-reveal="wipe-diagonal"] {
  opacity: 1;
  transform: none;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 800ms var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="wipe-diagonal"].is-revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Slide-left: entrada desde izquierda (para grids alternados) */
[data-reveal="slide-left"] {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="slide-left"].is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Mask-blur: enfoque progresivo (para imágenes y fotos) */
[data-reveal="mask-blur"] {
  opacity: 0.6;
  filter: blur(8px);
  transform: scale(1.02);
  transition: opacity 700ms var(--ease-out-expo),
              filter 700ms var(--ease-out-expo),
              transform 700ms var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: filter, transform;
}
[data-reveal="mask-blur"].is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; filter: none; }
  [data-reveal="clip"],
  [data-reveal="wipe-right"],
  [data-reveal="wipe-diagonal"] { clip-path: none; transition: none; }
}

/* ----------------- Hero text rotator (barrido clip) ----------- */
.rotator-host {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: baseline;
}
.rotator-word {
  display: inline-block;
}
@keyframes rotator-out {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-110%); opacity: 0; }
}
@keyframes rotator-in {
  0%   { transform: translateY(110%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.rotator-word.rotator-out {
  animation: rotator-out 320ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.rotator-word.rotator-in {
  animation: rotator-in 360ms cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

/* ----------------- Hero scroll-indicator pulse ---------------- */
@keyframes scroll-pulse {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(280%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-line { animation: none; }
}

/* ----------------- Spinner ------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--c-ink-100);
  border-top-color: var(--c-accent);
  animation: spin 800ms linear infinite;
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ----------------- Dashboard panel cross-fade ------------------ */
.dash-panel {
  opacity: 0;
  transform: translateY(8px) scale(0.99);
  transition: opacity 600ms var(--ease-out-expo),
              transform 600ms var(--ease-out-expo);
  pointer-events: none;
}
.dash-panel.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .dash-panel { transition: none; }
}

/* ----------------- Logo hover: subrayado azul respira ---------- */
@keyframes brand-underline-breathe {
  0%, 100% { stroke-dashoffset: 0; opacity: 1; }
  50%      { stroke-dashoffset: -2px; opacity: 0.85; }
}
.brand:hover .brand-underline {
  animation: brand-underline-breathe 1.5s var(--ease-in-out) infinite;
}

/* ----------------- Niche tab transition ------------------------ */
.niche-detail {
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
}
.niche-detail[hidden] { display: none; }
.niche-detail.is-entering {
  opacity: 0;
  transform: translateY(8px);
}

/* ----------------- Lift hover ---------------------------------- */
.lift {
  transition: transform var(--dur-base) var(--ease-out-quart),
              box-shadow var(--dur-base) var(--ease-out-quart);
}
.lift:hover { transform: translateY(-3px); }

/* ----------------- Magnetic active indicator (nav) ------------- */
.nav-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out-quart),
              width var(--dur-base) var(--ease-out-quart),
              opacity var(--dur-fast) var(--ease-out-quart);
  opacity: 0;
  pointer-events: none;
}
.nav-links.has-active-indicator .nav-indicator { opacity: 1; }

/* ----------------- Dropdown stagger items ---------------------- */
@keyframes dropdown-item-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-dropdown[data-open="true"] .nav-dropdown-item,
.nav-dropdown[data-open="true"] .nav-dropdown-foot {
  animation: dropdown-item-in 280ms var(--ease-out-quart) both;
}
.nav-dropdown[data-open="true"] .nav-dropdown-item:nth-child(1) { animation-delay: 30ms; }
.nav-dropdown[data-open="true"] .nav-dropdown-item:nth-child(2) { animation-delay: 70ms; }
.nav-dropdown[data-open="true"] .nav-dropdown-item:nth-child(3) { animation-delay: 110ms; }
.nav-dropdown[data-open="true"] .nav-dropdown-item:nth-child(4) { animation-delay: 150ms; }
.nav-dropdown[data-open="true"] .nav-dropdown-item:nth-child(5) { animation-delay: 190ms; }
.nav-dropdown[data-open="true"] .nav-dropdown-foot { animation-delay: 220ms; }

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown[data-open="true"] .nav-dropdown-item,
  .nav-dropdown[data-open="true"] .nav-dropdown-foot { animation: none; }
}

/* ===== Aurora beams (hero del landing home) =====
   Port de aurora-section-hero (21st.dev) adaptado a paleta SalonApp.
   3 animaciones sincronizadas en cada beam: rise (translateY), fade (opacity),
   y un drop con duración distinta que actúa como "ritmo" interno.
   El JS las inyecta dinámicamente en .hero-beam con --bcolor (emerald o teal). */

@keyframes aurora-rise {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(-10%); }
}

@keyframes aurora-fade {
  0%, 100% { opacity: 0; }
  10%      { opacity: 1; }
  80%      { opacity: 0.85; }
}

@keyframes aurora-floor-glow {
  0%, 100% { transform: translateX(-50%) scale(0.9); opacity: 0.7; }
  50%      { transform: translateX(-50%) scale(1.1); opacity: 1; }
}

@keyframes aurora-main-glow {
  from { opacity: 0.6;  filter: blur(25px); }
  to   { opacity: 0.85; filter: blur(15px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-beam,
  .hero-floor,
  .hero-main-column { animation: none; }
}