/* ============================================================
   Intro de sección (js/section-intro.js)
   Capa a pantalla completa que se reproduce la primera vez que se
   entra en cada página. Todo lo que se mueve lo anima el JS (WAAPI);
   aquí solo va el aspecto y el estado inicial.
   ============================================================ */

/* Tapa previa: la pone el script del <head> antes del primer pintado
   para que no se vea la página un instante antes de la intro. Si el JS
   fallara, se retira sola a los 4 s. */
html.intro-pending::before {
  content: ""; position: fixed; inset: 0; z-index: 210; background: var(--wine);
  animation: si-failsafe .4s 4s forwards;
}
html.intro-pending[data-intro="inicio"]::before { background: var(--butter); }
html.intro-pending[data-intro="eventos"]::before { background: #1a0200; }
@keyframes si-failsafe { to { opacity: 0; visibility: hidden; } }

/* Contador de carga: solo aparece si las imágenes de la intro tardan
   (con caché no llega a verse). Encima de la tapa y de la capa. */
html.intro-load::after {
  content: attr(data-si-load) "%"; position: fixed; right: 20px; bottom: 14px; z-index: 230;
  font-family: var(--sans); font-weight: 800; font-size: clamp(44px, 7vw, 96px); line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--butter); pointer-events: none;
  animation: si-load-in .35s .4s both, si-failsafe .4s 6s forwards;
}
html.intro-load[data-intro="inicio"]::after { color: var(--wine); }
@keyframes si-load-in { from { opacity: 0; translate: 0 12px; } }

/* Debajo de la tapa los saltos son secos: un scroll suave al ancla
   seguiría animándose después de que site.js suba al principio */
html:is(.intro-pending, .intro-run) { scroll-behavior: auto; }

/* La entrada del nombre de la portada espera a que acabe la intro */
html:is(.intro-pending, .intro-hold) .ln > span { animation-play-state: paused; }

/* --- Capa ------------------------------------------------- */
.si {
  position: fixed; inset: 0; z-index: 220; overflow: hidden;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  color: var(--butter);
  animation: si-failsafe .4s 9.5s forwards;
}
.si-bg, .si-bg2, .si-stage, .si-flash { position: absolute; inset: 0; }
.si-bg { background: var(--wine); }
.si-bg2 { display: none; }
.si:not(.is-on) .si-stage { opacity: 0; }
.si-dots { background-image: radial-gradient(rgba(247,228,147,.13) 1.5px, transparent 1.6px); background-size: 22px 22px; }

.si-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; pointer-events: none; }
.si-title {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(56px, 13vw, 220px); line-height: .88; letter-spacing: -.045em;
}
.si-cm { display: inline-block; overflow: hidden; padding: .1em .02em; margin: -.1em -.02em; vertical-align: top; }
.si-cw, .si-ch { display: inline-block; }
.si-kicker { margin: 0 0 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

.si-stk {
  position: absolute; translate: -50% -50%; height: auto; max-width: none; pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(40,4,0,.28));
  will-change: transform, opacity;
}

.si-skip {
  position: absolute; right: 20px; bottom: 18px; z-index: 30; opacity: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.si-skip i { display: block; height: 1px; margin-top: 6px; background: currentColor; transform: scaleX(0); transform-origin: left; }

/* --- Inicio · Sobre mí ------------------------------------ */
.si--inicio { color: var(--wine); }
.si--inicio .si-bg { background: var(--butter); }
.si-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* --- Galería ---------------------------------------------- */
.si--galeria .si-center { z-index: 3; }
.si-ph {
  position: absolute; left: 50%; top: 50%; width: clamp(96px, 12vw, 200px); aspect-ratio: 4 / 5;
  /* Sin foto aún (red lenta): polaroid sin revelar, no un pósit */
  border: 5px solid var(--butter); background: radial-gradient(120% 90% at 30% 20%, #4a120a, #1a0200);
  box-shadow: 0 18px 40px rgba(20,2,0,.45);
  will-change: transform, opacity;
}
.si-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.si-flash { z-index: 20; background: var(--butter); opacity: 0; pointer-events: none; }
@media (max-width: 699px) { .si-ph { width: 24vw; border-width: 4px; } }

/* --- París ------------------------------------------------ */
.si--paris .si-bg2 { display: block; background: var(--butter); }
.si-tower, .si-pword, .si-glasses { position: absolute; overflow: visible; }
.si-tower path {
  fill: none; stroke: var(--butter); stroke-width: var(--sw, 1); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1;
}
.si-tower circle { fill: var(--butter); opacity: 0; }
.si-pword text {
  font-family: var(--sans); font-weight: 800; font-size: 250px; letter-spacing: -.05em;
  fill: var(--butter); fill-opacity: 0; stroke: var(--butter); stroke-width: 2.5;
  stroke-dasharray: 1600; stroke-linejoin: round;
}
.si-glasses path { fill: none; stroke: var(--butter); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.si-glasses .si-wine { fill: #b3122a; stroke: none; stroke-dasharray: none; }
.si-glass, .si-wine { transform-box: fill-box; transform-origin: 50% 100%; }
.si-glasses .si-spark { opacity: 0; }

/* --- Proyectos · cuaderno --------------------------------- */
.si-padwrap { position: absolute; left: 50%; top: 50%; will-change: transform; }
.si-pad { position: relative; width: 100%; height: 100%; }
.si-page { position: absolute; inset: 0; transform-origin: 50% 0; transform-style: preserve-3d; }
.si-face, .si-back { position: absolute; inset: 0; overflow: hidden; border-radius: 3px 3px 6px 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.si-face {
  background-color: var(--butter);
  background-image:
    linear-gradient(90deg, transparent calc(var(--m) - 1px), rgba(87,3,0,.35) calc(var(--m) - 1px), rgba(87,3,0,.35) var(--m), transparent var(--m)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), rgba(87,3,0,.14) calc(var(--lh) - 1px) var(--lh));
  background-position: 0 0, 0 calc(var(--lh) * 1.5);
  box-shadow: 0 1px 0 rgba(87,3,0,.12), 0 6px 14px rgba(20,2,0,.18);
}
.si-page--last .si-face { box-shadow: 0 2px 0 #e9d27a, 0 4px 0 #dcc46a, 0 24px 60px rgba(20,2,0,.5); }
.si-back {
  transform: rotateX(180deg);
  background-color: #eed97f;
  background-image: linear-gradient(rgba(87,3,0,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(87,3,0,.08) 1px, transparent 1px);
  background-size: 18px 18px;
}
.si-rings { position: absolute; left: 4%; right: 4%; top: -14px; height: 30px; display: flex; justify-content: space-between; pointer-events: none; }
.si-rings span {
  width: 12px; height: 30px; border-radius: 7px;
  background: linear-gradient(90deg, #6f6a5c, #efeadb 45%, #9a9483);
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
.si-ptitle {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; white-space: nowrap;
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: -.045em;
  color: var(--wine);
}
.si-ptitle span { display: inline-block; }
.si-ptitle .is-off { visibility: hidden; }
.si-note { position: absolute; font-family: var(--serif); font-style: italic; color: var(--wine); white-space: nowrap; line-height: 1; }
.si-doodle { position: absolute; overflow: visible; }
.si-doodle path { fill: none; stroke: var(--wine); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.si-ul { left: 8%; top: 100%; width: 84%; height: .22em; margin-top: .06em; }
.si-ul path { stroke-width: 4; }
.si-pstk { filter: drop-shadow(0 3px 4px rgba(40,4,0,.25)); will-change: auto; }
.si-hl { background: linear-gradient(transparent 52%, rgba(87,3,0,.16) 52% 90%, transparent 90%); padding: 0 .15em; }
.si-pno { position: absolute; right: 5%; bottom: 4%; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: rgba(87,3,0,.55); }
.si-postit {
  position: absolute; display: grid; place-content: center; padding: 8%; box-sizing: border-box; text-align: center;
  background: var(--wine); color: var(--butter); font-family: var(--serif); font-style: italic; line-height: 1.05;
  box-shadow: 0 4px 8px rgba(40,4,0,.22);
}
.si-postit::before { content: ""; position: absolute; left: 30%; right: 30%; top: -7%; height: 16%; background: rgba(255,253,246,.55); transform: rotate(-3deg); }
.si-check { position: absolute; display: grid; gap: .2em; font-family: var(--serif); font-style: italic; color: var(--wine); line-height: 1.1; white-space: nowrap; }
.si-check i { position: relative; display: inline-block; width: .7em; height: .7em; margin-right: .4em; border: 1.5px solid currentColor; vertical-align: -.05em; }
.si-check i.on::after { content: ""; position: absolute; left: .18em; top: -.3em; width: .3em; height: .75em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.si-check s { text-decoration-thickness: 1.5px; opacity: .7; }
.si-board path { stroke-width: 1.6; }
.si-ring { position: absolute; border-radius: 50%; border: 3px solid rgba(87,3,0,.09); box-shadow: inset 0 0 0 4px rgba(87,3,0,.04); translate: -50% -50%; }
.si-back .si-doodle path { stroke: rgba(87,3,0,.16); }

/* --- Eventos · vinilo ------------------------------------- */
.si--eventos .si-bg { background: radial-gradient(120% 90% at 50% 45%, #3a0602, #1a0200 55%, #0e0100); }
.si-spot {
  position: absolute; top: -4%; height: 112%; transform-origin: 50% 0; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(247,228,147,.5), rgba(247,228,147,.05) 90%);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen; filter: blur(6px);
}
.si-rec { position: absolute; border-radius: 50%; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(247,228,147,.08); }
.si-rec .si-disc { position: static; translate: none; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: none; }
.si-arm { position: absolute; width: 1px; height: 1px; overflow: visible; transform-origin: 0 0; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.si-arm path { fill: none; stroke: #d9d3c2; stroke-linecap: round; stroke-linejoin: round; }
.si-arm rect { fill: #2b2724; stroke: #d9d3c2; stroke-width: 1.5; }
.si-arm .si-pivot { fill: #3a3531; stroke: #d9d3c2; stroke-width: 2; }
.si--eventos .si-title { font-size: clamp(52px, 12vw, 200px); text-shadow: 0 6px 40px rgba(0,0,0,.6); }
.si-eq { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; display: flex; align-items: flex-end; gap: 5px; height: 56px; opacity: 0; }
.si-eq i { display: block; width: 7px; height: 100%; background: var(--butter); border-radius: 2px; transform-origin: 50% 100%; transform: scaleY(.1); }
.si-glyph { position: absolute; font-family: var(--serif); font-size: clamp(28px, 3.4vw, 52px); line-height: 1; color: var(--butter); opacity: 0; pointer-events: none; }
.si.is-iris {
  -webkit-mask-image: radial-gradient(circle at var(--si-cx) var(--si-cy), transparent var(--si-hole), #000 calc(var(--si-hole) + 1px));
  mask-image: radial-gradient(circle at var(--si-cx) var(--si-cy), transparent var(--si-hole), #000 calc(var(--si-hole) + 1px));
}
@media (max-width: 699px) {
  .si-eq { gap: 4px; height: 40px; }
  .si-eq i { width: 6px; }
}