/* Módulo Intro — portada, apertura del sobre, cielo y transición.
   Prefijo .ix- ; colores nuevos declarados aquí como --intro-* (tokens.css es de solo lectura). */

#intro-root {
  --intro-ink: #05071a;            /* interior del sobre */
  --intro-paper-a: #151c4d;        /* papel noche, luz */
  --intro-paper-b: #0b1030;        /* papel noche, sombra */
  --intro-liner: #0a0e28;          /* forro de la solapa */
  --intro-seal-hi: #fff2c4;        /* lacre: brillo */
  --intro-seal-lo: #6b4c12;        /* lacre: relieve oscuro */
  --intro-flash-core: #fffdf5;     /* destello cálido: centro */
  --intro-flash-mid: #fbefc8;
  --intro-flash-edge: #e6c36f;
  --intro-bokeh: 255, 236, 190;    /* rgb para bokeh */
  --intro-name-size: clamp(2.4rem, min(17vw, 10svh), 5.6rem);

  overflow: hidden;
  background: transparent;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#intro-root * { box-sizing: border-box; }
.ix-layer { position: absolute; inset: 0; }
.ix-bg { background: radial-gradient(120% 85% at 50% 36%, var(--night-700) 0%, var(--night-900) 56%, var(--night-950) 100%); }
.ix-grain {
  opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .92  0 0 0 0 .75  0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
.ix-stars { width: 100%; height: 100%; pointer-events: none; }
.ix-stars .tw-a { animation: ix-tw 4.6s ease-in-out infinite; }
.ix-stars .tw-b { animation: ix-tw 5.8s ease-in-out -2.4s infinite; }
@keyframes ix-tw { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---------- Escenario de la portada ---------- */
.ix-stage {
  display: grid; justify-items: center; align-content: center;
  row-gap: clamp(.6rem, 4svh, 2.8rem);
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
}
.ix-head { text-align: center; max-width: 100%; will-change: transform, opacity; }
.ix-name {
  position: relative; display: inline-block; white-space: nowrap;
  font-family: var(--font-script); font-size: var(--intro-name-size); line-height: 1.12;
  padding: .04em .18em .2em;
}
.ix-namefx { display: inline-block; filter: drop-shadow(0 0 14px rgba(230, 195, 111, .28)); }
.ix-name__t, .ix-name::after {
  background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-name::after {  /* brillo metálico: capa más clara que solo pulsa en opacidad */
  content: attr(data-text); position: absolute; inset: 0; padding: inherit;
  background: linear-gradient(100deg, transparent 20%, #fff 46%, var(--gold-200) 54%, transparent 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; animation: ix-sheen 6.5s ease-in-out 1.2s infinite;
}
@keyframes ix-sheen { 0%, 60%, 100% { opacity: 0; } 78% { opacity: .85; } }
.ix-years {
  margin: .1rem 0 0; font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(1.1rem, min(5.4vw, 3.4svh), 1.75rem); letter-spacing: .22em; text-indent: .22em; color: var(--gold-300);
}
.ix-date {
  display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: .55rem;
  font-family: var(--font-body); font-weight: 300; font-size: .86rem; letter-spacing: .26em; color: var(--text-muted);
}
.ix-date::before, .ix-date::after { content: ""; width: 2.4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-500)); }
.ix-date::after { transform: scaleX(-1); }

/* ---------- Sobre ---------- */
.ix-envwrap { will-change: transform, opacity; }
.ix-float { will-change: transform; }
.ix-envbtn {
  display: block; position: relative; padding: 0; border: 0; background: none; border-radius: 6px;
  width: min(80vw, 21rem, 40svh * 1.43); aspect-ratio: 10 / 7; perspective: 1100px; cursor: pointer;
}
.ix-envbtn:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 10px; }
.ix-env { position: absolute; inset: 0; transform-style: preserve-3d; }
.ix-env > svg, .ix-env > div, .ix-env > span { position: absolute; display: block; }
.ix-back, .ix-front { inset: 0; width: 100%; height: 100%; }
.ix-shadow { left: 6%; right: 6%; bottom: -9%; height: 14%; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 72%); }
.ix-glow {
  left: 14%; top: 2%; width: 72%; height: 44%; opacity: 0;
  background: radial-gradient(60% 70% at 50% 62%, rgba(255, 244, 214, .95) 0%, rgba(230, 195, 111, .5) 42%, transparent 72%);
}
.ix-flap { left: 0; top: 0; width: 100%; height: 58.6%; transform-origin: 50% 0; transform-style: preserve-3d; }
.ix-flap svg { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ix-flap .ix-flap__in { transform: rotateY(180deg); }
.ix-to {
  left: 6%; right: 6%; bottom: 8%; text-align: center; pointer-events: none;
  font-family: var(--font-display); font-style: italic; font-weight: 500; line-height: 1.15;
  font-size: clamp(1rem, 4.6vw, 1.3rem); color: var(--gold-200); text-wrap: balance;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 0 10px rgba(230, 195, 111, .3);
}
.ix-seal {
  left: 50%; top: 58.6%; width: 21%; aspect-ratio: 1; margin: -10.5% 0 0 -10.5%; pointer-events: none;
  will-change: transform;
}
.ix-seal__aura {
  position: absolute; inset: -38%; border-radius: 50%; opacity: .7;
  background: radial-gradient(circle, rgba(243, 220, 154, .55), transparent 62%);
  animation: ix-aura 3.4s ease-in-out infinite;
}
@keyframes ix-aura { 0%, 100% { transform: scale(.85); opacity: .35; } 50% { transform: scale(1.05); opacity: .8; } }
.ix-seal__half { position: absolute; inset: 0; will-change: transform, opacity; }
.ix-seal__half svg { width: 100%; height: 100%; overflow: visible; }
.ix-seal__half--l { clip-path: polygon(-20% -20%, 52% -20%, 46% 18%, 55% 38%, 47% 58%, 54% 80%, 49% 120%, -20% 120%); }
.ix-seal__half--r { clip-path: polygon(52% -20%, 120% -20%, 120% 120%, 49% 120%, 54% 80%, 47% 58%, 55% 38%, 46% 18%); }
.ix-seal::after {  /* destello que cruza el lacre */
  content: ""; position: absolute; inset: 6%; border-radius: 50%; overflow: hidden; opacity: 0;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%);
  animation: ix-glint 5.2s ease-in-out 1.6s infinite;
}
@keyframes ix-glint { 0%, 70%, 100% { opacity: 0; transform: translateX(-30%); } 82% { opacity: .9; transform: translateX(0); } 94% { opacity: 0; transform: translateX(30%); } }

.ix-hint {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.15rem; letter-spacing: .06em; color: var(--gold-300);
  animation: ix-pulse 2.8s ease-in-out infinite;
}
@keyframes ix-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---------- Cielo: luna, constelaciones ---------- */
.ix-sky { width: 100%; height: 100%; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.ix-const { opacity: 1; }
.ix-const .ln { fill: none; stroke: var(--gold-300); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; }
.ix-const .nd { opacity: 0; transform-box: fill-box; transform-origin: center; }

/* ---------- Efectos ---------- */
.ix-fx { width: 100%; height: 100%; pointer-events: none; }
.ix-bokeh { pointer-events: none; overflow: hidden; }
.ix-bokeh i {
  position: absolute; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(var(--intro-bokeh), .55) 0%, rgba(230, 195, 111, .3) 52%, rgba(230, 195, 111, .08) 66%, transparent 71%);
}
.ix-flash {
  opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, var(--intro-flash-core) 0%, var(--intro-flash-mid) 38%, var(--intro-flash-edge) 100%);
}
.ix-skip {
  position: absolute; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; opacity: 0; pointer-events: none;
  border: 1px solid var(--line); background: var(--glass); color: var(--text-muted);
  font-family: var(--font-body); font-weight: 300; font-size: .82rem; letter-spacing: .08em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ix-skip[hidden] { display: none; }
.ix-skip.is-on { pointer-events: auto; }
.ix-block { display: block; }
.ix-skip:hover { color: var(--text); border-color: var(--gold-500); }

@media (min-width: 768px) {
  .ix-envbtn { width: min(24rem, 40svh * 1.43); }
}
@media (prefers-reduced-motion: reduce) {
  .ix-stars .tw-a, .ix-stars .tw-b, .ix-hint, .ix-name::after, .ix-seal::after, .ix-seal__aura { animation: none !important; }
  .ix-hint { opacity: .9; }
  .ix-seal__aura { opacity: .5; }
}