/* ==========================================================================
   WAYTA · Intro de carga
   Solo se muestra cuando js/intro.js añade la clase .has-intro a <html>
   en cada carga de la página. Sin JavaScript, la intro no existe.
   Línea de tiempo: logo (0,15–1,85 s) → WAYTA (1,2–2,6 s) → progreso hasta ~3,6 s → telón (0,9 s)
   ========================================================================== */

.intro { display: none; }

html.intro-active { overflow: hidden; }

html.has-intro .intro {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  visibility: visible; /* visible aunque la página espere la traducción */
  background:
    radial-gradient(120% 90% at 50% 42%, #fbf9f3 0%, var(--paper) 58%, #ebe4d2 100%);
  color: var(--green);
  overflow: hidden;
  cursor: default;
  will-change: transform;
}

/* --- Contenido central ------------------------------------------------- */
.intro-center {
  position: relative; z-index: 2;
  display: grid; justify-items: center;
  padding: 24px;
  transition: opacity .35s ease, transform .5s ease;
}

.intro-logo {
  width: clamp(150px, 34vw, 230px); height: auto;
  /* se revela de abajo hacia arriba: primero el ornamento de hojas, luego el nombre */
  clip-path: inset(100% 0 0 0);
  filter: blur(6px);
  opacity: 0;
  animation: intro-logo 1.7s cubic-bezier(.25, .7, .2, 1) .15s forwards;
}

.intro-product {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-size: clamp(.9rem, .8rem + .5vw, 1.15rem);
  letter-spacing: .7em;
  text-indent: .7em; /* compensa el espaciado para centrar ópticamente */
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  animation: intro-product 1.4s cubic-bezier(.25, .7, .2, 1) 1.2s forwards;
}

/* --- Indicador de progreso (discreto) ---------------------------------- */
.intro-progress {
  display: flex; align-items: center; gap: 12px;
  margin-top: 34px;
  opacity: 0;
  animation: intro-fade .8s ease .5s forwards;
  transition: opacity .3s ease;
}
.intro-bar {
  position: relative;
  width: clamp(110px, 22vw, 150px); height: 1px;
  background: rgba(151, 115, 71, .22);
  overflow: hidden;
}
.intro-bar-fill {
  position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}
.intro-percent {
  min-width: 3.2em;
  font: 700 .625rem/1 var(--font-sans);
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-text);
  opacity: .7;
}

/* Saltar intro (accesibilidad) */
.intro-skip {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  min-height: 44px; padding: 10px 14px;
  border: 0; background: transparent;
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  opacity: .55; cursor: pointer;
  transition: opacity .2s;
}
.intro-skip:hover, .intro-skip:focus-visible { opacity: 1; }

/* --- Hojas cayendo con la brisa ----------------------------------------- */
.intro-leaves { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.intro-leaf {
  position: absolute; top: -40px; left: var(--x);
  width: var(--s);
  color: var(--c);
  opacity: 0;
  animation: leaf-fall var(--d) linear var(--delay) infinite;
}
.intro-leaf svg {
  width: 100%; height: auto;
  fill: currentColor;
  animation: leaf-sway calc(var(--d) / 3) ease-in-out var(--delay) infinite alternate;
}

/* Cada hoja: posición, tamaño, velocidad, desfase, deriva por la brisa, opacidad y giro */
.intro-leaf:nth-child(1) { --x: 8%;  --s: clamp(18px, 2vw, 30px); --d: 7s;   --delay: -3.2s; --drift: 22vw; --o: .55; --r1: -35deg; --r2: 20deg; --c: var(--green); }
.intro-leaf:nth-child(2) { --x: 24%; --s: clamp(13px, 1.4vw, 21px); --d: 8.5s; --delay: -6.1s; --drift: 16vw; --o: .40; --r1: 15deg;  --r2: 65deg; --c: #6c7a3d; }
.intro-leaf:nth-child(3) { --x: 41%; --s: clamp(20px, 2.4vw, 36px); --d: 7.6s; --delay: -1.4s; --drift: 26vw; --o: .30; --r1: -60deg; --r2: -10deg; --c: var(--gold); }
.intro-leaf:nth-child(4) { --x: 63%; --s: clamp(15px, 1.7vw, 25px); --d: 9s;   --delay: -4.8s; --drift: 14vw; --o: .50; --r1: 10deg;  --r2: 55deg; --c: var(--green); }
.intro-leaf:nth-child(5) { --x: 78%; --s: clamp(19px, 2.2vw, 32px); --d: 7.2s; --delay: -2.3s; --drift: 18vw; --o: .35; --r1: -25deg; --r2: 30deg; --c: #6c7a3d; }
.intro-leaf:nth-child(6) { --x: 90%; --s: clamp(12px, 1.4vw, 20px); --d: 8.2s; --delay: -5.4s; --drift: 10vw; --o: .45; --r1: 40deg;  --r2: 85deg; --c: var(--gold); }
.intro-leaf:nth-child(7) { --x: 52%; --s: clamp(12px, 1.3vw, 19px); --d: 9.4s; --delay: -7.6s; --drift: 20vw; --o: .30; --r1: -15deg; --r2: 35deg; --c: var(--green); }

@media (max-width: 640px) {
  .intro-leaf:nth-child(n+6) { display: none; } /* menos hojas en móvil: más limpio */
}

/* --- Salida: el velo se levanta con un borde en arco -------------------- */
.intro.is-complete .intro-progress,
.intro.is-complete .intro-skip { opacity: 0; animation: none; }

.intro.is-leaving {
  transform: translateY(-100%);
  border-radius: 0 0 50% 50% / 0 0 16vh 16vh;
  transition: transform .9s cubic-bezier(.76, 0, .24, 1), border-radius .9s cubic-bezier(.76, 0, .24, 1);
}
.intro.is-leaving .intro-center { opacity: 0; transform: translateY(-24px); }

/* La portada aparece suavemente mientras el velo sube */
html.intro-reveal .hero-copy > * { animation: intro-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
html.intro-reveal .hero-copy > :nth-child(2) { animation-delay: .08s; }
html.intro-reveal .hero-copy > :nth-child(3) { animation-delay: .16s; }
html.intro-reveal .hero-copy > :nth-child(4) { animation-delay: .24s; }
html.intro-reveal .hero-copy > :nth-child(n+5) { animation-delay: .32s; }
html.intro-reveal .hero-media { animation: intro-rise 1.1s cubic-bezier(.2, .7, .2, 1) .15s both; }

/* --- Animaciones -------------------------------------------------------- */
@keyframes intro-logo {
  to { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1; }
}
@keyframes intro-product {
  from { opacity: 0; letter-spacing: 1.1em; text-indent: 1.1em; }
  to   { opacity: 1; letter-spacing: .7em;  text-indent: .7em; }
}
@keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes leaf-fall {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: var(--o); }
  85%  { opacity: var(--o); }
  100% { transform: translate3d(var(--drift), 110vh, 0); opacity: 0; }
}
@keyframes leaf-sway {
  from { transform: translateX(-14px) rotate(var(--r1)); }
  to   { transform: translateX(14px) rotate(var(--r2)); }
}

/* --- Reducir movimiento: sin hojas ni telón, solo un fundido ------------- */
@media (prefers-reduced-motion: reduce) {
  .intro-leaves { display: none; }
  .intro-logo { clip-path: none; filter: none; animation: intro-fade .4s ease forwards !important; }
  .intro-product, .intro-progress { animation: intro-fade .4s ease forwards !important; }
  .intro.is-leaving { transform: none; border-radius: 0; opacity: 0; transition: opacity .4s ease !important; }
  html.intro-reveal .hero-copy > *, html.intro-reveal .hero-media { animation: none !important; }
}