/* ===== Intro 3D épico — Kourtney XV ===== */
html.intro-on body{overflow:hidden}
#intro{position:fixed;inset:0;z-index:9999;perspective:1100px;overflow:hidden;color:#f6e7c8;font-family:Georgia,serif}
#intro .door{position:absolute;top:0;bottom:0;width:50.5%;background:radial-gradient(120% 90% at 100% 50%,#24465c 0%,#132a3a 45%,#08131c 100%);transition:transform 1.5s cubic-bezier(.7,0,.2,1),opacity 1.5s ease;backface-visibility:hidden}
#intro .door-l{left:0;transform-origin:left center}
#intro .door-r{right:0;transform-origin:right center;background:radial-gradient(120% 90% at 0% 50%,#24465c 0%,#132a3a 45%,#08131c 100%)}
#intro .door::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(transparent,#d8b36a,transparent);opacity:0;transition:opacity .4s}
#intro .door-l::after{right:0}#intro .door-r::after{left:0}
#intro canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity 1.2s}
#intro .stage{position:absolute;inset:0;transform-style:preserve-3d;display:grid;place-items:center;transition:transform 1.3s cubic-bezier(.6,0,.3,1),opacity 1.1s ease}
#intro .ring-wrap{position:absolute;transform-style:preserve-3d;transform:translateZ(-2600px) rotateX(14deg);transition:transform 3.4s cubic-bezier(.16,.84,.3,1)}
#intro .ring{transform-style:preserve-3d;animation:introSpin 11s linear infinite;--R:520px}
#intro .card{position:absolute;left:-90px;top:-130px;width:180px;height:260px;border-radius:6px;overflow:hidden;transform:rotateY(calc(var(--i)*30deg)) translateZ(var(--R));box-shadow:0 0 0 1px #d8b36a88,0 20px 60px #000a,0 0 30px #d8b36a33;transition:transform 1.6s cubic-bezier(.5,0,.2,1),opacity 1.2s ease;background:#20394a}
#intro .card img{width:100%;height:100%;object-fit:cover;display:block}
#intro .card::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,#fff6 48%,transparent 60%);background-size:250% 100%;animation:introShine 3s ease-in-out infinite}
#intro .xv{position:absolute;font:400 min(62vmin,620px)/1 Georgia,serif;color:transparent;-webkit-text-stroke:2px #d8b36a;letter-spacing:-.04em;opacity:0;transform:translateZ(-1800px);transition:transform 2.6s cubic-bezier(.16,.84,.3,1),opacity 1.4s ease;text-shadow:0 0 60px #d8b36a55;pointer-events:none}
#intro .title{position:absolute;text-align:center;transform-style:preserve-3d;pointer-events:none}
#intro .title .kicker{font:600 11px/1 Arial,sans-serif;letter-spacing:.6em;color:#d8b36a;opacity:0;transform:translateY(20px);transition:all 1s ease .2s}
#intro .title h2{margin:.18em 0 .1em;font:400 clamp(64px,14vw,200px)/1 Georgia,serif;letter-spacing:-.03em;transform-style:preserve-3d;perspective:900px}
#intro .title h2 span{display:inline-block;opacity:0;transform:translateZ(-600px) rotateX(-100deg) translateY(40px);transform-origin:50% 100%;background:linear-gradient(100deg,#9b7340 0%,#f8e6b8 25%,#c99a52 45%,#fff3d1 55%,#a77c43 75%,#f0d79c 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 18px #0009)}
#intro .title .sub{font:italic clamp(18px,2.6vw,30px)/1.3 Georgia,serif;color:#f4e2bf;opacity:0;transform:translateY(24px);letter-spacing:.04em}
#intro .title .line{width:0;height:1px;margin:18px auto 0;background:linear-gradient(90deg,transparent,#d8b36a,transparent);transition:width 1.4s ease .6s}
#intro .skip{position:absolute;right:22px;bottom:22px;z-index:3;background:#0006;border:1px solid #d8b36a99;color:#f4e2bf;font:600 11px Arial,sans-serif;letter-spacing:.25em;padding:12px 18px;border-radius:40px;cursor:pointer;backdrop-filter:blur(6px);transition:opacity .5s,background .2s}
#intro .skip:hover{background:#d8b36a;color:#132a3a}
#intro .flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#fff8e6 0%,#f3d89a55 30%,transparent 65%);opacity:0;pointer-events:none}

/* Fases */
#intro.p-fly .ring-wrap{transform:translateZ(-380px) rotateX(10deg)}
#intro.p-title .ring{--R:1500px}
#intro.p-title .card{opacity:0}
#intro.p-title .xv{opacity:.35;transform:translateZ(-500px)}
#intro.p-title .kicker,#intro.p-title .sub{opacity:1;transform:none}
#intro.p-title .sub{transition:all 1.1s ease 1.1s}
#intro.p-title .line{width:min(340px,60vw)}
#intro.p-title h2 span{animation:introLetter 1.1s cubic-bezier(.2,.9,.25,1.15) forwards,introGold 4s ease-in-out 1.4s infinite;animation-delay:calc(var(--i)*.09s),calc(1.4s + var(--i)*.09s)}
#intro.p-out .flash{animation:introFlash 1s ease-out}
#intro.p-out .stage{transform:translateZ(700px);opacity:0}
#intro.p-out canvas{opacity:0}
#intro.p-out .skip{opacity:0}
#intro.p-out .door::after{opacity:.9}
#intro.p-out .door-l{transform:rotateY(100deg);opacity:.0}
#intro.p-out .door-r{transform:rotateY(-100deg);opacity:.0}

@keyframes introSpin{to{transform:rotateY(-360deg)}}
@keyframes introShine{0%,40%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes introLetter{to{opacity:1;transform:none}}
@keyframes introGold{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@keyframes introFlash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* Entrada de la portada después del intro */
html.intro-on .hero-copy>*,html.intro-on .hero-photo img,html.intro-on header{opacity:0}
html.intro-reveal .hero-copy>*{animation:heroUp 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0)*.09s + .15s)}
html.intro-reveal .hero-photo img{animation:heroPhoto 1.6s cubic-bezier(.2,.8,.2,1) both}
html.intro-reveal header{animation:heroUp .9s ease both}
@keyframes heroUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes heroPhoto{from{opacity:0;transform:scale(1.12) rotateY(-8deg)}to{opacity:1;transform:none}}

/* Inclinación 3D de la foto de portada */
.hero-photo{perspective:1200px}
.hero-photo img{transition:transform .25s ease-out;will-change:transform}

@media(max-width:700px){
  #intro .ring-wrap{scale:.62}
  #intro .skip{right:50%;transform:translateX(50%);bottom:28px}
}

/* ===== Videos (dos capítulos) ===== */
.video-section{display:block}
.vs-head{text-align:center;margin-bottom:40px}
.vs-head h2{margin:14px 0}
.vs-head>p:not(.eyebrow){font-size:13px;color:#5d6c73}
.videos{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1200px;margin:0 auto}
.vcard{margin:0;perspective:1000px}
.vcard .video-frame{aspect-ratio:16/10;border-radius:4px;box-shadow:0 25px 60px #20394a33;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.vcard:hover .video-frame{transform:translateY(-6px) rotateX(3deg)}
.vcard .video-label{border:0;background:transparent;font:inherit;width:100%;cursor:default}
.vcard.ready .video-label{cursor:pointer}
.vcard.ready .play{transition:transform .3s,background .3s}
.vcard.ready:hover .play{transform:scale(1.12);background:#ffffff26}
.vcard video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain}
.vcard figcaption{margin-top:14px;font:italic 15px Georgia,serif;color:var(--gold);text-align:center}
@media(max-width:800px){.videos{grid-template-columns:1fr;gap:34px}.vcard .video-frame{aspect-ratio:4/3}}

/* ===== Botón de música ===== */
.music-toggle{position:fixed;left:18px;bottom:18px;z-index:900;display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:40px;border:1px solid #99744288;background:#faf8f2e6;color:var(--ink);font:600 10px Arial,sans-serif;letter-spacing:.25em;cursor:pointer;backdrop-filter:blur(8px);box-shadow:0 8px 25px #20394a26}
.music-toggle .bars{display:flex;gap:2px;align-items:flex-end;height:14px}
.music-toggle .bars i{width:3px;height:4px;background:var(--gold);border-radius:2px}
.music-toggle.on .bars i{animation:eq .9s ease-in-out infinite}
.music-toggle.on .bars i:nth-child(2){animation-delay:.2s}.music-toggle.on .bars i:nth-child(3){animation-delay:.45s}.music-toggle.on .bars i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
#intro .music-start{position:absolute;left:22px;bottom:22px;z-index:3;background:#d8b36a;border:0;color:#132a3a;font:700 11px Arial,sans-serif;letter-spacing:.25em;padding:13px 20px;border-radius:40px;cursor:pointer;box-shadow:0 0 30px #d8b36a66;transition:opacity .5s}
#intro.p-out .music-start{opacity:0}
@media(max-width:700px){#intro .music-start{left:50%;transform:translateX(-50%);bottom:84px}}