/* Intro: overlay a pantalla completa. Solo existe mientras <html> tiene .intro-on. */

/* La página real está en el DOM debajo; mientras suena la intro sus bloques esperan. */
.rv{transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--r,0) * 90ms)}
html.intro-on:not(.intro-reveal) .rv{opacity:0;transform:translateY(18px)}
html.intro-on{overflow:hidden}

.intro,.skip{display:none}
html.intro-on .intro{display:block}
html.intro-on .skip{display:block}

.intro{
  --pw:clamp(250px,54vw,470px);   /* ancho de cada polaroid */
  --ease:cubic-bezier(.2,.8,.2,1);
  position:fixed;inset:0;z-index:1000;background:var(--paper);color:var(--ink);overflow:hidden;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.intro.leave{opacity:0;transform:translateY(-2.5%);pointer-events:none;transition:opacity .6s ease,transform .6s ease}
.intro.leave.fast{transition-duration:.3s}

/* ----- frases ----- */
.stage{position:absolute;inset:0;display:grid;place-items:center;padding:0 max(16px,5vw) 7vh}
.s{
  grid-area:1/1;margin:0;max-width:min(100%,15em);text-align:center;text-wrap:balance;
  font-family:var(--font-intro);font-size:clamp(32px,6.4vw,96px);line-height:1.02;letter-spacing:-.04em;
  opacity:0;transition:opacity .28s ease,transform .28s ease;
}
.s.on{opacity:1}
.s.out{opacity:0;transform:translateY(-.14em)}
.s .w{display:inline-block;opacity:0;font-weight:600}
.s .acc{font-weight:850}
.s.on .w{animation:wIn .45s var(--ease) both;animation-delay:calc(var(--i) * 45ms)}
.s.on .w.soft{animation-name:wSoft;animation-duration:.7s}
@keyframes wIn{0%{opacity:0;transform:translateY(.3em)}40%{opacity:.3}100%{opacity:1;transform:none}}
@keyframes wSoft{0%{opacity:0;transform:translateY(.3em)}30%{opacity:.25;transform:none}60%{opacity:.25}100%{opacity:1}}

/* Acento 1: entra más claro y se asienta en color de acento */
.s[data-mode="fade"].on .acc,.s[data-mode="light"].on .acc{animation:wAcc .7s var(--ease) both;animation-delay:calc(var(--i) * 45ms + 180ms)}
@keyframes wAcc{
  0%{opacity:0;transform:translateY(.3em);color:var(--ink)}
  45%{opacity:.3;transform:none;color:var(--ink)}
  100%{opacity:1;transform:none;color:var(--intro-accent)}
}
/* Acento 2: la frase aparece en tinta y el grupo cambia de color */
.s .acc{transition:color .5s ease}
.s[data-mode="hot"].hot .acc{color:var(--intro-accent)}
/* Acento 3: subrayado que se dibuja */
.s .u{position:relative}
.s .u::after{content:"";position:absolute;left:0;right:0;bottom:-.03em;height:.09em;background:var(--intro-accent);transform:scaleX(0);transform-origin:left center}
.s.on .u::after{animation:uline .5s cubic-bezier(.65,0,.25,1) .55s both}
@keyframes uline{to{transform:scaleX(1)}}
/* Beat final: más liviano y más pequeño */
.s[data-mode="light"]{font-size:clamp(28px,5vw,72px)}
.s[data-mode="light"] .w{font-weight:500}
.s[data-mode="light"] .acc{font-weight:750}

/* ----- polaroids ----- */
.polas{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:transform .7s cubic-bezier(.7,0,.2,1)}
.polas.docked{transform:translateY(calc(50% - 28px - var(--pw) * .19)) scale(.3)}
.pola{
  grid-area:1/1;width:var(--pw);margin:0;
  padding:calc(var(--pw) * .045) calc(var(--pw) * .045) calc(var(--pw) * .17);
  background:var(--frame);border-radius:2px;opacity:0;
  box-shadow:0 1px 2px rgba(0,0,0,.14),0 18px 36px -10px rgba(0,0,0,.38);
  transform:translate(var(--x),var(--y)) rotate(var(--rot));
}
.pola img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--line)}
.pola:nth-child(1){--x:calc(var(--pw) * .11);--y:calc(var(--pw) * -.05);--rot:7deg}
.pola:nth-child(2){--x:calc(var(--pw) * -.05);--y:calc(var(--pw) * .03);--rot:-5deg}
.pola:nth-child(3){--x:calc(var(--pw) * .02);--y:calc(var(--pw) * .06);--rot:2deg}
.pola{will-change:transform,opacity}
@keyframes drop{
  0%{opacity:0;transform:translate(var(--x),-75vh) rotate(calc(var(--rot) - 16deg))}
  15%{opacity:1}
  100%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--rot))}
}

/* ----- saltar ----- */
.skip{
  position:fixed;z-index:1001;right:16px;bottom:max(16px,env(safe-area-inset-bottom));
  font:500 13px var(--font-mono);letter-spacing:.02em;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:10px 16px;cursor:pointer;
}
.skip:hover{border-color:var(--intro-accent)}

@media (prefers-reduced-motion:reduce){
  .intro,.skip{display:none !important}
  html.intro-on{overflow:auto}
  html.intro-on .rv{opacity:1 !important;transform:none !important}
}
html.intro-reveal .skip{opacity:0;pointer-events:none;transition:opacity .2s}

/* En celular las frases llenan el ancho (la última antes era la más chica). */
@media (max-width:620px){
  .s,.s[data-mode="light"]{font-size:clamp(38px,11.5vw,58px);max-width:100%}
  .s[data-mode="light"] .w{font-weight:600}
}
@media (min-width:621px){.s[data-mode="light"]{font-size:clamp(34px,6vw,84px)}}


/* ---- Primera frase estilo Apple / context-con: palabra por palabra, cada una sube un poco y pasa de gris a tinta (~115 ms entre palabras).
        Las demás frases quedan como antes. ---- */
.s[data-mode="fade"] .w{opacity:0}
.s[data-mode="fade"].on .w,.s[data-mode="fade"].on .w.soft{animation:aIn .6s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--i) * 115ms)}
@keyframes aIn{0%{opacity:0;transform:translateY(.24em)}100%{opacity:1;transform:none}}
.s[data-mode="fade"].on .acc{animation:aAcc .9s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--i) * 115ms)}
@keyframes aAcc{0%{opacity:0;transform:translateY(.24em);color:var(--ink)}55%{opacity:1;transform:none;color:var(--ink)}100%{opacity:1;transform:none;color:var(--intro-accent)}}
.s[data-mode="fade"].out{transform:scale(.96)}