:root{
  --bg:#02030a; --ink:#eef1ff; --mute:#9aa3c7; --gold:#ffcf8a; --cyan:#7fd4ff; --line:rgba(190,205,255,.16);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:.68rem}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,6,.55) 100%)}
#scroll{height:3500vh;position:relative;z-index:0}

/* LOADER · títulos de crédito */
#loader{position:fixed;inset:0;z-index:50;background:#000;display:grid;place-content:center;justify-items:center;gap:1rem;overflow:hidden;transition:opacity 1.6s ease,visibility 1.6s}
#loader.done{opacity:0;visibility:hidden}
.ld-bars i{position:absolute;left:0;right:0;height:11vh;background:#000;z-index:3;box-shadow:0 0 40px 20px #000}
.ld-bars i:first-child{top:0}.ld-bars i:last-child{bottom:0}
.ld-stars{position:absolute;inset:-10%;opacity:.55;animation:ldz 30s linear infinite;
  background-image:radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 78% 14%,#cfe0ff,transparent),radial-gradient(1.5px 1.5px at 33% 71%,#fff,transparent),radial-gradient(1px 1px at 61% 58%,#ffe9c9,transparent),radial-gradient(1px 1px at 90% 82%,#fff,transparent),radial-gradient(1px 1px at 8% 90%,#cfe0ff,transparent),radial-gradient(1.5px 1.5px at 47% 9%,#fff,transparent),radial-gradient(1px 1px at 24% 47%,#fff,transparent),radial-gradient(1px 1px at 70% 36%,#fff,transparent);background-size:420px 420px}
@keyframes ldz{to{transform:scale(1.5)}}
.ld-core{position:relative;width:120px;height:120px;display:grid;place-items:center;margin-bottom:.4rem}
.ld-dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 22px 8px rgba(255,255,255,.8),0 0 90px 34px rgba(255,170,90,.38);animation:pulse 2.6s ease-in-out infinite}
.ld-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,207,138,.35);animation:ring 3.2s ease-out infinite;opacity:0}
.ld-ring.r2{animation-delay:1.6s}
@keyframes ring{0%{transform:scale(.05);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes pulse{50%{transform:scale(1.8);opacity:.75}}
.ld-title{display:flex;font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,5.2vw,3.4rem);letter-spacing:.3em;margin-right:-.3em}
.ld-title span{opacity:0;transform:translateY(.4em);filter:blur(10px);animation:ldin 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.ld-title span.g{font-style:italic;font-weight:500;color:var(--gold)}
.ld-title span:nth-child(1){animation-delay:.3s}.ld-title span:nth-child(2){animation-delay:.38s}.ld-title span:nth-child(3){animation-delay:.46s}.ld-title span:nth-child(4){animation-delay:.54s}
.ld-title span:nth-child(5){animation-delay:.62s}.ld-title span:nth-child(6){animation-delay:.7s}.ld-title span:nth-child(7){animation-delay:.78s}.ld-title span:nth-child(8){animation-delay:.86s}
.ld-title span:nth-child(9){animation-delay:.94s}.ld-title span:nth-child(10){animation-delay:1.02s}.ld-title span:nth-child(11){animation-delay:1.1s}.ld-title span:nth-child(12){animation-delay:1.18s}
@keyframes ldin{to{opacity:1;transform:none;filter:blur(0)}}
.ld-tag{color:var(--gold);min-height:1.2em;transition:opacity .4s}
.ld-bar{width:min(340px,64vw);height:1px;background:rgba(190,205,255,.14);position:relative}
.ld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,transparent,#fff);box-shadow:0 0 12px 1px rgba(255,255,255,.6);transition:width .35s}
.ld-pct{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--mute)}
.ld-cred{position:absolute;bottom:calc(11vh + 1.2rem);left:0;right:0;text-align:center;color:rgba(154,163,199,.55);font-size:.55rem;z-index:4}
.ld-btns{position:relative;z-index:4}
/* TÍTULOS DE ARRANQUE (cold open) */
#intro{position:fixed;inset:0;z-index:45;background:#000;display:grid;place-items:center;pointer-events:none;transition:opacity 3s ease}
#intro.off{opacity:0}
#intro p{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,4.2vw,3.2rem);letter-spacing:.04em;text-align:center;padding:0 8vw;line-height:1.25;opacity:0;filter:blur(12px);transform:scale(1.04);transition:opacity 1.3s ease,filter 1.3s ease,transform 3.4s ease}
#intro p.on{opacity:1;filter:blur(0);transform:scale(1)}
#intro p em{color:var(--gold);font-weight:500}
html.introing{overflow:hidden}
/* RÓTULO DE CAPÍTULO */
#card{position:fixed;left:0;right:0;top:15vh;z-index:7;text-align:center;pointer-events:none;opacity:0;transition:opacity .9s ease}
#card.show{opacity:1}
#card small{display:block;color:var(--gold);letter-spacing:.5em;margin-bottom:.6rem;transform:translateY(8px);transition:transform 1.4s ease}
#card b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(2rem,6.4vw,5.2rem);letter-spacing:.32em;text-transform:uppercase;text-shadow:0 0 50px rgba(255,207,138,.35);padding-left:.32em;transform:scale(1.07);transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
#card.show small{transform:none}#card.show b{transform:scale(1)}
body.film #card{top:18vh}
.ld-btns{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:.8rem}
button{font:inherit;color:inherit;cursor:pointer}
.ld-btns button,#nameForm button{border:1px solid var(--ink);background:var(--ink);color:#05060f;padding:.85rem 1.4rem;border-radius:99px;font-size:.82rem;letter-spacing:.06em;transition:transform .25s,box-shadow .25s}
.ld-btns button.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.ld-btns button:hover,#nameForm button:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(127,212,255,.25)}

/* HUD */
.hud{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:calc(1.2rem + env(safe-area-inset-top)) clamp(1rem,3vw,2.4rem) 0;pointer-events:none}
.brand{font-family:var(--serif);font-weight:300;font-size:1.15rem;letter-spacing:.12em}
.brand b{font-weight:500;font-style:italic;color:var(--gold)}
.hud-r{display:flex;gap:1.4rem;align-items:center;pointer-events:auto}
#chap{color:var(--mute)}
#sndBtn{background:none;border:1px solid var(--line);padding:.45rem .8rem;border-radius:99px;color:var(--mute);transition:color .2s,border-color .2s}
#sndBtn:hover{color:var(--ink);border-color:var(--ink)}
.rail{position:fixed;right:clamp(.7rem,2vw,1.6rem);top:50%;transform:translateY(-50%);z-index:10;display:grid;gap:.9rem}
.rail i{display:block;width:5px;height:5px;border-radius:50%;background:var(--mute);opacity:.35;transition:all .4s;position:relative;cursor:pointer}
.rail i.on{opacity:1;background:var(--gold);box-shadow:0 0 10px var(--gold);transform:scale(1.5)}
.hint{position:fixed;left:50%;bottom:calc(1.6rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:10;color:var(--mute);display:grid;justify-items:center;gap:.5rem;transition:opacity .6s}
.hint i{width:1px;height:34px;background:linear-gradient(var(--ink),transparent);animation:drop 2s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* PANELES */
.panel{position:fixed;z-index:5;max-width:min(560px,86vw);opacity:0;pointer-events:none;will-change:opacity,transform}
.panel.on{pointer-events:auto}
.panel.left{left:clamp(1.2rem,7vw,7rem);top:50%;translate:0 -50%}
.panel.right{right:clamp(2.2rem,8vw,8rem);top:50%;translate:0 -50%;text-align:right}
.panel.right .pase{margin-left:auto}
.panel.center{left:50%;top:50%;translate:-50% -50%;text-align:center;max-width:min(820px,90vw)}
.panel.bottom{left:50%;bottom:calc(7vh + env(safe-area-inset-bottom));translate:-50% 0;text-align:center;max-width:min(620px,88vw)}
.kicker{color:var(--gold);margin-bottom:1.2rem}
h1,h2{font-family:var(--serif);font-weight:300;line-height:1.08;text-shadow:0 2px 40px rgba(0,0,8,.9)}
h1{font-size:clamp(2.6rem,7.5vw,6rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.6rem)}
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--gold)}
.sub{margin-top:1.4rem;color:#c9d0ee;font-weight:300;line-height:1.65;font-size:clamp(.92rem,1.25vw,1.08rem);text-shadow:0 1px 20px rgba(0,0,8,.95)}
.sub.wide{font-size:clamp(.95rem,1.4vw,1.15rem)}

/* TARJETAS DE EMBARQUE */
.pase{display:grid;gap:.55rem;text-align:left;margin-top:1.8rem;width:min(430px,100%);padding:1.1rem 1.3rem 1rem;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(135deg,rgba(60,90,160,.28),rgba(10,14,36,.55));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 60px rgba(0,0,12,.55),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s;transform-style:preserve-3d}
.pase:hover{border-color:rgba(255,207,138,.55)}
div.pase{cursor:default}
.pase-top{color:var(--mute)} .pase-top b{color:#fff}
.pase-name{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:500;line-height:1.1}
.pase-row{color:var(--mute);line-height:1.8;font-size:.6rem} .pase-row i{font-style:normal;color:var(--cyan)}
.pase-st{color:var(--gold);padding-top:.5rem;border-top:1px dashed var(--line)}

/* EPÍLOGO */
#nameForm{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
#nameIn{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);padding:.85rem 1.3rem;border-radius:99px;font:inherit;font-size:1rem;min-width:min(280px,70vw);outline:none;backdrop-filter:blur(10px);transition:border-color .25s}
#nameIn:focus{border-color:var(--gold)}
.sign{margin-top:2.4rem;color:var(--ink)}
.credits{margin-top:.8rem;color:var(--mute);font-size:.55rem;letter-spacing:.08em;line-height:1.7;text-transform:none}

/* ETIQUETAS 3D */
#labels{position:fixed;inset:0;z-index:6;pointer-events:none}
.lab{position:absolute;left:0;top:0;transform:translate(-50%,-50%);opacity:0;transition:opacity .5s;pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.lab::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--c,#fff);box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 22px 4px var(--c,#fff);animation:ping 2.4s ease-out infinite}
.lab span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(4,6,18,.7);border:1px solid var(--line);padding:.35rem .6rem;border-radius:99px;backdrop-filter:blur(8px)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.35),0 0 22px 4px var(--c,#fff)}100%{box-shadow:0 0 0 14px rgba(255,255,255,0),0 0 22px 4px var(--c,#fff)}}

#lightbox{position:fixed;inset:0;z-index:60;background:rgba(2,3,10,.88);display:grid;place-items:center;backdrop-filter:blur(8px)}
#lightbox[hidden]{display:none}
#lightbox img{max-width:92vw;max-height:84vh;border-radius:10px;box-shadow:0 30px 100px #000}
#lightbox button{position:absolute;top:1.2rem;right:1.4rem;background:none;border:1px solid var(--line);border-radius:50%;width:42px;height:42px;font-size:1.4rem;color:var(--ink)}

@media (max-width:760px){
  .rail,#chap{display:none}
  .panel.left,.panel.right{left:50%;right:auto;top:auto;bottom:calc(6vh + env(safe-area-inset-bottom));translate:-50% 0;text-align:left;max-width:90vw;width:90vw}
  .panel.right .pase{margin-left:0}
  .panel.center{max-width:92vw}
  .panel.bottom{bottom:calc(10vh + env(safe-area-inset-bottom))}
  .hint{display:none}
  h2{font-size:clamp(1.7rem,7.4vw,2.4rem)}
}
@media (prefers-reduced-motion:reduce){.ld-dot,.hint i,.lab::before{animation:none}}

/* PASE DE EMBARQUE (recreaciones) */
.bp{display:grid;grid-template-columns:1fr auto;text-align:left;margin-top:1.6rem;width:min(470px,100%);border-radius:14px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,rgba(70,100,175,.30),rgba(8,12,32,.62));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(190,205,255,.2);box-shadow:0 22px 70px rgba(0,0,12,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.panel.right .bp{margin-left:auto}
.bp-main{padding:1rem 1.2rem 1rem;display:grid;gap:.7rem}
.bp-h{display:flex;justify-content:space-between;gap:1rem;color:var(--mute);font-size:.6rem}.bp-h b{color:#fff}.bp-h span{color:var(--gold)}
.bp-name{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.8rem);font-weight:500;line-height:1.1}
.bp-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1rem;font-size:.62rem;color:#dfe5ff;letter-spacing:.08em}
.bp-grid i{display:block;font-style:normal;color:var(--cyan);font-size:.5rem;letter-spacing:.16em;margin-bottom:.12rem}
.bp-bar{height:30px;border-radius:2px;opacity:.85;background:repeating-linear-gradient(90deg,#e9eeff 0 2px,transparent 2px 4px,#e9eeff 4px 5px,transparent 5px 9px,#e9eeff 9px 12px,transparent 12px 14px)}
.bp-note{color:var(--mute);font-size:.5rem;letter-spacing:.1em;text-transform:none;opacity:.8}
.bp-stub{writing-mode:vertical-rl;transform:rotate(180deg);padding:1rem .8rem;border-right:1px dashed rgba(190,205,255,.35);color:var(--gold);font-size:.62rem;letter-spacing:.3em;text-align:center;
  background:rgba(255,207,138,.06);border-left:0;order:-1;border-right:1px dashed rgba(190,205,255,.35)}
.bp::before,.bp::after{content:'';position:absolute;left:calc(2.6rem - 7px);width:14px;height:14px;border-radius:50%;background:var(--bg);border:1px solid rgba(190,205,255,.2)}
.bp::before{top:-8px}.bp::after{bottom:-8px}
@media(max-width:760px){.bp{width:100%}.bp-grid{font-size:.56rem}}

/* PELÍCULA */
#filmBtn{background:none;border:1px solid var(--line);padding:.45rem .8rem;border-radius:99px;color:var(--ink);transition:all .2s}
#filmBtn:hover,#filmBtn[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.bars{position:fixed;inset:0;z-index:8;pointer-events:none}
.bars i{position:absolute;left:0;right:0;height:0;background:#000;transition:height 1.6s cubic-bezier(.2,.7,.2,1)}
.bars i:first-child{top:0}.bars i:last-child{bottom:0}
body.film .bars i{height:9vh}
body.film .hud,body.film .rail,body.film .hint{opacity:.0;transition:opacity 1s}
body.film .hud:hover{opacity:1}
body.film .panel.bottom{bottom:calc(11vh)}
.grain{position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.07;mix-blend-mode:overlay;animation:grain 1.2s steps(6) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

.bp-pax{display:grid;gap:.15rem;font-family:var(--serif);font-size:clamp(1.05rem,1.9vw,1.35rem);font-weight:500;line-height:1.2}
.bp-pax span+span{color:#dfe5ff;font-weight:400}

/* RELOJ CÓSMICO */
.clock{position:fixed;left:clamp(1rem,3vw,2.4rem);bottom:calc(1.4rem + env(safe-area-inset-bottom));z-index:10;display:flex;align-items:center;gap:.8rem;color:var(--mute);font-size:.6rem;pointer-events:none;transition:opacity .8s}
#clkN{color:var(--gold);letter-spacing:.2em}
.clk-line{display:block;width:clamp(70px,12vw,150px);height:1px;background:rgba(190,205,255,.18);position:relative;overflow:hidden}
#clkBar{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),#fff);transform-origin:left;transform:scaleX(0)}
#clkT{min-width:9em;transition:opacity .5s}
body.film .clock{opacity:0}
.foot{position:fixed;right:clamp(1rem,3vw,2.4rem);bottom:calc(1.4rem + env(safe-area-inset-bottom));z-index:10;display:flex;gap:1rem;align-items:center;color:rgba(154,163,199,.6);font-size:.55rem}
.foot button{background:none;border:0;color:var(--mute);letter-spacing:.14em;text-transform:uppercase;font:inherit;border-bottom:1px solid var(--line);padding:0 0 2px}
.foot button:hover,.lnk:hover{color:var(--gold);border-color:var(--gold)}
body.film .foot{opacity:0}
.lnk{background:none;border:0;border-bottom:1px solid var(--line);color:var(--mute);margin-top:1rem;padding:0 0 2px}
#menuBtn{background:none;border:1px solid var(--line);padding:.45rem .8rem;border-radius:99px;color:var(--mute);transition:all .2s}
#menuBtn:hover{color:var(--ink);border-color:var(--ink)}
/* MENÚ DE CAPÍTULOS */
#menu,#credits{position:fixed;inset:0;z-index:55;background:rgba(2,3,10,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:grid;align-content:center;justify-items:center;opacity:0;transition:opacity .6s}
#menu[hidden],#credits[hidden]{display:none}
#menu.show,#credits.show{opacity:1}
.menu-x{position:absolute;top:1.2rem;right:1.4rem;background:none;border:1px solid var(--line);border-radius:50%;width:42px;height:42px;font-size:1.4rem;color:var(--ink);z-index:2}
#menuList{list-style:none;width:min(780px,90vw);display:grid;gap:0}
#menuList li{display:grid;grid-template-columns:3.2rem 1fr auto;gap:1rem;align-items:baseline;padding:.95rem .4rem;border-bottom:1px solid rgba(190,205,255,.1);cursor:pointer;transition:padding .35s,color .3s}
#menuList li:hover,#menuList li.on{padding-left:1.1rem}
#menuList li:hover b,#menuList li.on b{color:var(--gold)}
#menuList .mn{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--gold)}
#menuList b{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,3.2vw,2.1rem);letter-spacing:.04em;transition:color .3s}
#menuList small{display:block;color:var(--mute);font-family:var(--sans);font-size:.78rem;font-weight:300;margin-top:.15rem;letter-spacing:0}
#menuList .mt{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;color:var(--mute);text-align:right;text-transform:uppercase}
.menu-h{margin-top:1.4rem;color:rgba(154,163,199,.6);font-size:.55rem}
/* CRÉDITOS */
#credits{overflow:hidden;align-content:start}
.cr-roll{width:min(640px,88vw);text-align:center;padding:100vh 0 40vh;animation:crroll 62s linear forwards}
@keyframes crroll{to{transform:translateY(-100%)}}
.cr-big{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,7vw,4.4rem);letter-spacing:.16em}.cr-big em{color:var(--gold);font-weight:500}
.cr-sm{color:var(--mute);margin:.6rem 0 4rem}
.cr-k{color:var(--gold);margin-top:2.6rem;font-size:.62rem}
.cr-v{font-family:var(--serif);font-weight:300;font-size:clamp(1.05rem,2.2vw,1.5rem);line-height:1.5;margin-top:.5rem;color:#e6ebff}.cr-v span{font-size:.8em;color:var(--mute)}
.cr-n{margin-top:4rem;color:var(--mute);font-size:.8rem;line-height:1.7;font-weight:300}
.cr-ded{margin-top:4rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,3vw,2rem);color:var(--gold);line-height:1.5}
.cr-end{margin-top:5rem;color:var(--mute)}
/* CURSOR DE LUZ */
#cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid rgba(255,207,138,.55);z-index:70;pointer-events:none;opacity:0;transition:width .3s,height .3s,margin .3s,background .3s,opacity .4s;mix-blend-mode:screen}
#cursor.on{opacity:1}
#cursor.big{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(255,207,138,.1)}
@media (hover:none),(pointer:coarse){#cursor{display:none}}
@media (hover:hover) and (pointer:fine){body.cur,body.cur button{cursor:none}}
@media(max-width:760px){.foot span{display:none}.clock{font-size:.55rem}#clkT{min-width:0;max-width:44vw}#menuList li{grid-template-columns:2.4rem 1fr}#menuList .mt{display:none}#menuBtn{padding:.4rem .6rem}}
@media (prefers-reduced-motion:reduce){.cr-roll{animation:none;padding-top:12vh}#credits{overflow:auto}}

#sndBtn b{font-weight:400}
@media(max-width:760px){
  .hud-r{gap:.45rem}.hud-r .tx{display:none}
  .hud-r button{padding:.5rem .75rem;font-size:.8rem;white-space:nowrap}
  .panel.left,.panel.right{padding:1.4rem 1.1rem 1.1rem;border-radius:18px 18px 0 0;background:linear-gradient(180deg,rgba(2,3,10,0),rgba(2,3,10,.74) 26%,rgba(2,3,10,.88));bottom:calc(3.4rem + env(safe-area-inset-bottom))}
  .brand{font-size:1rem}
}
/* móvil: el rótulo de capítulo no pisa al panel de texto */
@media(max-width:760px){
  #card{top:calc(4.6rem + env(safe-area-inset-top))}
  body.film #card{top:calc(4.6rem + env(safe-area-inset-top))}
  #card b{font-size:clamp(1.15rem,5.6vw,1.6rem);letter-spacing:.2em;padding-left:.2em}
  #card small{font-size:.6rem;letter-spacing:.34em;margin-bottom:.35rem}
}

/* kilómetros por misión y odómetro */
.km{display:grid;gap:.15rem;margin-top:.9rem;padding:.7rem .95rem;border-left:2px solid var(--gold);background:linear-gradient(90deg,rgba(255,207,138,.08),transparent);font-size:.62rem;letter-spacing:.12em;color:var(--mute);text-align:left;width:min(470px,100%)}
.panel.right .km{margin-left:auto}
.km b{font-family:var(--serif);font-weight:500;font-size:1.25rem;letter-spacing:.02em;color:#fff;text-transform:none}
.km u{text-decoration:none;color:var(--gold)}
.odo{display:grid;gap:.35rem;margin:1.2rem auto .4rem;font-size:.62rem;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.odo b{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,4.4vw,3rem);letter-spacing:.04em;color:var(--gold);text-shadow:0 0 40px rgba(255,207,138,.35);font-variant-numeric:tabular-nums;text-transform:none}
.stats{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;margin-top:1rem;font-size:.6rem;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.stats div{display:grid;gap:.1rem}.stats b{font-family:var(--serif);font-weight:500;font-size:1.15rem;letter-spacing:.02em;color:var(--gold);text-transform:none}
.panel.right .stats{justify-content:flex-end}
@media(max-width:760px){.km b{font-size:1.05rem}.km{padding:.55rem .8rem;font-size:.55rem}.odo b{font-size:1.5rem}.stats b{font-size:1rem}}

.panel.legacy{max-width:min(760px,90vw);padding:2.2rem 1.6rem;border-radius:24px;background:radial-gradient(ellipse at center,rgba(2,3,10,.78),rgba(2,3,10,.55) 60%,rgba(2,3,10,0))}
.panel.legacy .sub{margin:.9rem auto 0;max-width:34em}
@media(max-width:760px){.panel.legacy{top:auto;bottom:calc(3.4rem + env(safe-area-inset-bottom));translate:-50% 0;padding:1.2rem .9rem;max-height:80vh;overflow:auto}}

.panel.legacy h2{font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.12}
.panel.legacy .sub{font-size:.92rem;line-height:1.5}
.panel.legacy .odo{margin:.9rem auto .2rem}.panel.legacy .odo b{font-size:clamp(1.5rem,3.4vw,2.5rem)}
.panel.legacy .sign{margin:.6rem 0 .2rem;font-size:.62rem}.panel.legacy .credits{font-size:.5rem;margin-top:.4rem}
@media(min-width:761px){.panel.legacy{top:54%}}
@media(min-width:761px) and (max-height:860px){
  .panel.right,.panel.left{translate:0 -47%}
  .panel .sub{font-size:.88rem;line-height:1.5}.panel .bp{margin-top:.8rem}.panel .km{margin-top:.5rem;padding:.4rem .8rem}.km b{font-size:1rem}
  .bp-main{padding:.8rem 1rem;gap:.5rem}.bp-name{font-size:1.25rem}
}

/* ===== TÍTULOS: un solo tono, vidrio iridiscente (sin dos colores) ===== */
h1,h2{background:linear-gradient(100deg,#fff 0%,#dbe6ff 26%,#aec4ff 46%,#fff 60%,#e4dcff 78%,#fff 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 26px rgba(0,0,14,.92));animation:holo 10s ease-in-out infinite}
h1 em,h2 em{font-style:normal;font-weight:600;color:inherit;-webkit-text-fill-color:transparent;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:rgba(190,214,255,.5)}
@keyframes holo{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.kicker{color:#a9d4ff;display:flex;align-items:center;gap:.8rem}.kicker::before{content:'';width:2.2rem;height:1px;background:linear-gradient(90deg,transparent,#a9d4ff)}
.panel.right .kicker{justify-content:flex-end}.panel.center .kicker{justify-content:center}.panel.center .kicker::after{content:'';width:2.2rem;height:1px;background:linear-gradient(90deg,#a9d4ff,transparent)}
.brand b{color:#cfe0ff}.ld-title span.g{color:#cfe0ff}#intro p em{color:#fff;font-weight:600}.cr-big em{color:inherit;font-weight:600}
#card b{background:linear-gradient(100deg,#fff,#b9ccff,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 30px rgba(150,190,255,.45))}
#card small{color:#a9d4ff}
@media (prefers-reduced-motion:reduce){h1,h2{animation:none}}

/* ===== TARJETAS DE EMBARQUE: cristal espacial ===== */
.bp,.pase{--rx:0deg;--ry:0deg;--mx:30%;--my:0%;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .4s;will-change:transform;
  border-radius:24px;border:1px solid rgba(255,255,255,.26);
  background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.045) 42%,rgba(110,150,255,.12));
  -webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7);
  box-shadow:0 34px 90px rgba(0,0,20,.6),0 0 70px rgba(120,165,255,.13),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 0 40px rgba(160,190,255,.06)}
.bp::before,.bp::after{display:none}
.bp-main{position:relative;overflow:hidden}
.bp-main::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.2),transparent 55%);mix-blend-mode:screen}
.bp-main::after{content:'';position:absolute;right:1rem;bottom:.9rem;width:38px;height:38px;border-radius:50%;pointer-events:none;opacity:.8;
  background:conic-gradient(from 0deg,#8fd0ff,#c9a6ff,#ffd0e8,#9ffbe0,#8fd0ff);-webkit-mask:radial-gradient(circle,transparent 11px,#000 12px,#000 16px,transparent 17px);mask:radial-gradient(circle,transparent 11px,#000 12px,#000 16px,transparent 17px);animation:seal 9s linear infinite}
@keyframes seal{to{transform:rotate(360deg)}}
.bp-h{color:#b5c3ee}.bp-h span{color:#a9d4ff;letter-spacing:.2em}
.bp-grid i{color:#8fd0ff}
.bp-bar{display:none}
.bp-route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;font-size:.6rem;letter-spacing:.2em;color:#fff;margin-top:.2rem;padding-right:3rem}
.bp-route small{display:block;color:#8fa0d6;font-size:.5rem;letter-spacing:.12em;margin-top:.2rem}
.bp-route span:last-child{text-align:right}
.bp-route i{position:relative;height:1px;background:repeating-linear-gradient(90deg,rgba(170,205,255,.6) 0 5px,transparent 5px 9px)}
.bp-route i::before,.bp-route i::after{content:'';position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:#a9d4ff;box-shadow:0 0 10px #a9d4ff}
.bp-route i::before{left:0}.bp-route i::after{right:0;background:#fff}
.bp-stub{background:linear-gradient(180deg,rgba(150,200,255,.12),rgba(150,200,255,.03));color:#a9d4ff;border-right:1px dashed rgba(190,215,255,.4)}
.pase{padding:1.2rem 1.4rem 1.1rem}.pase-st{color:#a9d4ff}.pase:hover{border-color:rgba(255,255,255,.5)}.pase-row i{color:#8fd0ff}
.km{border-left:1px solid #a9d4ff;background:linear-gradient(90deg,rgba(160,200,255,.1),transparent)}
.km u,.stats b,.odo b{color:#cfe3ff}.odo b{text-shadow:0 0 44px rgba(150,190,255,.45)}
@media (prefers-reduced-motion:reduce){.bp-main::after{animation:none}.bp,.pase{transition:none}}
/* barras de desplazamiento discretas en los paneles */
.dk-grid,.bk-main,.inf-card,.hg-info{scrollbar-width:thin;scrollbar-color:rgba(150,200,255,.4) transparent}
.dk-grid::-webkit-scrollbar,.bk-main::-webkit-scrollbar,.inf-card::-webkit-scrollbar,.hg-info::-webkit-scrollbar{width:8px}
.dk-grid::-webkit-scrollbar-thumb,.bk-main::-webkit-scrollbar-thumb,.inf-card::-webkit-scrollbar-thumb,.hg-info::-webkit-scrollbar-thumb{background:rgba(150,200,255,.35);border-radius:8px}

/* fotos de Juanman en las tarjetas de embarque */
.bp-main{grid-template-columns:1fr auto;column-gap:1.1rem}
.bp-h,.bp-route,.bp-note,.bp-bar{grid-column:1/-1}
.bp-ph{grid-column:2;grid-row:2/4;width:84px;aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;border-radius:14px;border:1px solid rgba(255,255,255,.4);box-shadow:0 10px 30px rgba(0,0,20,.5),0 0 24px rgba(140,190,255,.2);align-self:start}
.pase{position:relative}.pase-ph{position:absolute;right:1.3rem;top:1.2rem;width:74px;aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;border-radius:12px;border:1px solid rgba(255,255,255,.4);box-shadow:0 10px 30px rgba(0,0,20,.5)}
.pase-top,.pase-name{padding-right:92px}
@media(max-width:760px){.bp-ph{width:68px}.pase-ph{width:60px}.pase-top,.pase-name{padding-right:76px}}
/* botones nuevos del HUD (bitácora · hangar · mando) */
#bookBtn,#mindBtn,#hangarBtn,#deckBtn{background:none;border:1px solid var(--line);padding:.45rem .8rem;border-radius:99px;color:var(--mute);transition:all .2s;cursor:pointer}
#bookBtn:hover,#mindBtn:hover,#hangarBtn:hover,#deckBtn:hover{color:var(--ink);border-color:var(--ink)}
#deckBtn{color:#a9d4ff;border-color:rgba(169,212,255,.4)}
@media(max-width:760px){#bookBtn,#mindBtn,#hangarBtn,#deckBtn{padding:.5rem .65rem;font-size:.8rem}.hud-r{gap:.3rem}}
@media(max-width:760px){
  .hud-r{gap:.22rem}
  .hud-r button,#bookBtn,#mindBtn,#hangarBtn,#deckBtn,#menuBtn,#filmBtn,#sndBtn{padding:.42rem .5rem;font-size:.74rem}
  .brand{font-size:.9rem}
}

/* años y cifras grandes de la historia */
.yr{font-family:var(--serif);font-weight:200;font-size:clamp(2.6rem,7.2vw,6rem);line-height:1;letter-spacing:-.01em;margin:0 0 .7rem;background:linear-gradient(100deg,#fff,rgba(160,195,255,.55));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 30px rgba(0,0,14,.9))}
.yr small{font:500 .22em var(--mono);letter-spacing:.28em;text-transform:uppercase;margin-left:.5rem;-webkit-text-fill-color:#a9d4ff;color:#a9d4ff}
.panel.right .yr,.panel.center .yr{}
.panel.center .yr{margin-left:auto;margin-right:auto}
@media(max-width:760px){.yr{font-size:clamp(2.2rem,12vw,3.6rem)}}

/* ===== animación: capa de ambiente, revelado de textos, legibilidad ===== */
#fx{position:fixed;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;transition:opacity .6s}
.panel h1,.panel h2{clip-path:inset(-15% 100% -25% -2%);transition:clip-path 1.5s cubic-bezier(.2,.7,.2,1)}
.panel.on h1,.panel.on h2{clip-path:inset(-15% -4% -25% -2%)}
.panel.right h1,.panel.right h2{clip-path:inset(-15% -2% -25% 100%)}.panel.right.on h1,.panel.right.on h2{clip-path:inset(-15% -2% -25% -4%)}
.panel.center h1,.panel.center h2{clip-path:inset(-15% 50% -25% 50%)}.panel.center.on h1,.panel.center.on h2{clip-path:inset(-15% -4% -25% -4%)}
.panel .sub,.panel .yr,.panel .kicker,.panel .stats,.panel .cta{opacity:0;transform:translateY(16px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.panel.on .kicker{opacity:1;transform:none;transition-delay:.05s}
.panel.on .yr{opacity:1;transform:none;transition-delay:.15s}
.panel.on .sub{opacity:1;transform:none;transition-delay:.55s}
.panel.on .stats,.panel.on .cta{opacity:1;transform:none;transition-delay:.8s}
.kicker::before{width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1) .2s}.panel.on .kicker::before{width:2.2rem}
.panel.left::before,.panel.right::before{content:'';position:absolute;z-index:-1;inset:-3.5rem -3rem;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(2,3,10,.62),rgba(2,3,10,.35) 55%,transparent 75%)}
.panel.center::before{content:'';position:absolute;z-index:-1;inset:-3rem -4rem;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(2,3,10,.55),transparent 72%)}
@media (prefers-reduced-motion:reduce){.panel h1,.panel h2{clip-path:none!important;transition:none}.panel .sub,.panel .yr,.panel .kicker,.panel .stats,.panel .cta{opacity:1;transform:none;transition:none}}

/* ===== v2 · tarjeta de distancia «wow» ===== */
.km{position:relative;overflow:hidden;border:1px solid rgba(190,215,255,.28);border-left:1px solid rgba(190,215,255,.28);border-radius:16px;padding:.9rem 1.15rem 1.05rem;gap:.3rem;background:linear-gradient(135deg,rgba(24,34,70,.62),rgba(8,10,26,.72));-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 18px 50px rgba(0,0,20,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.km::before{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#8fd0ff,#ffd089,transparent);background-size:200% 100%;animation:kmFlow 4s linear infinite}
.km::after{content:'◉';position:absolute;right:1rem;top:.8rem;font-size:.9rem;color:#ffd089;text-shadow:0 0 14px rgba(255,200,120,.8)}
@keyframes kmFlow{to{background-position:-200% 0}}
.km>span:first-child{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:#9fb4e6;padding-right:1.6rem}
.km b{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3.2vw,2.35rem);line-height:1.05;letter-spacing:-.01em;background:linear-gradient(100deg,#fff 10%,#bfe0ff 50%,#ffe2b0 95%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 18px rgba(150,200,255,.35))}
.km>span:last-child{font-size:.6rem;letter-spacing:.16em;color:#aebbe0}
@media(max-width:760px){.km b{font-size:1.5rem}}
@media (prefers-reduced-motion:reduce){.km::before{animation:none}}

/* ===== v3 · carga con impacto, elección película/explorar, tarjeta final ===== */
.ld-sub{font:500 .62rem var(--mono);letter-spacing:.32em;text-transform:uppercase;color:#9fb4e6;opacity:0;animation:ldin 2s 1.6s forwards;margin-top:-.2rem;text-align:center;padding:0 1rem}
.ld-title{font-size:clamp(2.2rem,7vw,5rem)}
.ld-btns button.big{display:grid;gap:.25rem;justify-items:center;padding:1.1rem 1.9rem;border-radius:22px;min-width:230px;font-size:1rem;position:relative;overflow:hidden}
.ld-btns button.big i{font-style:normal;font-size:1.3rem}
.ld-btns button.big small{font:500 .55rem var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.ld-btns button.big:not(.ghost){background:linear-gradient(135deg,#fff,#bfe0ff 60%,#ffe2b0);box-shadow:0 0 50px rgba(150,200,255,.45);animation:bigPulse 2.6s ease-in-out infinite}
@keyframes bigPulse{50%{box-shadow:0 0 90px rgba(190,220,255,.8)}}
.ld-snd{display:flex;gap:.6rem;align-items:center;color:#9fb4e6;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;margin-top:.9rem}
.ld-snd input{accent-color:#bfe0ff;width:16px;height:16px}
#intro p{font-size:clamp(1.5rem,4.2vw,3rem);line-height:1.25;max-width:20em}
#endcard{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1.2rem;background:radial-gradient(circle at 50% 40%,rgba(30,50,110,.55),rgba(2,3,10,.9));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .6s}
#endcard.on{opacity:1}
.ec-in{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;max-width:860px;padding:2rem;border:1px solid rgba(190,215,255,.3);border-radius:28px;background:linear-gradient(135deg,rgba(24,34,70,.7),rgba(6,8,22,.8));box-shadow:0 40px 120px rgba(0,0,30,.7),0 0 80px rgba(120,170,255,.2),inset 0 1px 0 rgba(255,255,255,.2);transform:translateY(24px) scale(.97);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#endcard.on .ec-in{transform:none}
.ec-in img{width:min(240px,34vw);aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border-radius:20px;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 60px rgba(140,190,255,.4)}
.ec-k{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:#ffd089}
.ec-in h3{font:300 clamp(1.5rem,3.4vw,2.4rem)/1.15 var(--serif);margin:.5rem 0 .8rem;color:#fff}
.ec-in h3 em{font-weight:600;font-style:italic;color:#cfe3ff}
.ec-s{color:#aebbe0;font-size:.92rem;line-height:1.5}
.ec-b{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.3rem}
.ec-b button.big{border:1px solid #fff;background:#fff;color:#05060f;padding:.8rem 1.3rem;border-radius:99px;font-size:.85rem}
.ec-b button.ghost{background:transparent;color:#fff;border-color:rgba(190,215,255,.4)}
.ec-b .lnk{background:none;border:0;color:#9fb4e6;font-size:.65rem;letter-spacing:.16em;cursor:pointer}
.ec-x{position:absolute;right:1rem;top:.7rem;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}
@media(max-width:760px){.ec-in{grid-template-columns:1fr;text-align:center;gap:1rem;padding:1.3rem}.ec-in img{margin:auto;width:130px}.ec-b{justify-content:center}.ld-btns button.big{min-width:0;width:100%}}
@media(max-width:760px){.ld-btns{width:100%;padding:0 1.4rem;box-sizing:border-box;flex-direction:column}.ld-btns button.big{padding:.8rem 1rem;border-radius:18px}.ld-cred{display:none}.ld-sub{letter-spacing:.18em;font-size:.55rem}}

/* ===== móvil (iPhone): títulos nítidos, sin solapes, panel que cabe ===== */
@media(max-width:760px){
  h1,h2{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:#f4f7ff!important;color:#f4f7ff!important;filter:none!important;text-shadow:0 2px 18px rgba(0,0,10,.95)!important;line-height:1.16!important;padding-bottom:.08em;animation:none!important}
  h1 em,h2 em{-webkit-text-fill-color:#fff!important;color:#fff!important}
  h1{font-size:clamp(2.1rem,10vw,3rem)}
  h2,.panel.legacy h2{font-size:clamp(1.45rem,6.4vw,1.95rem)}
  .yr{font-size:clamp(1.9rem,10vw,2.8rem);line-height:1.1;margin-bottom:.45rem;filter:none!important;-webkit-text-fill-color:#e6eeff}
  .yr small{-webkit-text-fill-color:#a9d4ff}
  .panel .kicker{margin-bottom:.7rem;font-size:.55rem}
  .panel .sub{margin-top:.8rem;font-size:.84rem;line-height:1.5}
  .panel h1,.panel h2{clip-path:none!important;opacity:0;transform:translateY(12px);transition:opacity 1s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
  .panel.on h1,.panel.on h2{opacity:1;transform:none}
  .panel.left,.panel.right{max-height:calc(100dvh - 8.2rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  .panel.left::-webkit-scrollbar,.panel.right::-webkit-scrollbar{display:none}
  .panel.left::before,.panel.right::before{display:none}
  .panel .bp{margin-top:.8rem}.panel .km{margin-top:.6rem;padding:.6rem .85rem}
}
#endcard[hidden],.ld-snd[hidden],.ld-btns[hidden]{display:none!important}
#endcard:not(.on){pointer-events:none}

/* ===== LOADER BRUTAL: túnel de luz + logo gigante ===== */
#ldfx{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#loader>*:not(#ldfx){position:relative;z-index:2}
#loader .ld-stars,#loader .ld-bars{z-index:1}
#loader .ld-core{display:none}
.ld-title{font-weight:200;font-size:clamp(2.3rem,10.5vw,9.5rem);letter-spacing:.1em;margin-right:-.1em;line-height:1;position:relative;filter:drop-shadow(0 0 40px rgba(130,180,255,.55))}
.ld-title span{background:linear-gradient(100deg,#fff 0%,#cfe3ff 30%,#fff 50%,#cfe3ff 70%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  opacity:0;transform:scale(2.4) translateZ(0);filter:blur(22px);text-shadow:none;animation:ldLogo 1.7s cubic-bezier(.16,.8,.2,1) forwards,ldSheen 4s 2.4s linear infinite}
.ld-title span.g{font-weight:400;background:linear-gradient(100deg,#8fd0ff,#c9a8ff,#ffd089,#8fd0ff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:ldLogo 1.7s cubic-bezier(.16,.8,.2,1) forwards,ldIri 5s 2.2s linear infinite}
@keyframes ldLogo{0%{opacity:0;transform:scale(2.4);filter:blur(22px)}60%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes ldSheen{to{background-position:-250% 0}}@keyframes ldIri{to{background-position:-300% 0}}
.ld-title span:nth-child(n){animation-delay:calc(var(--i,0)*.09s + 1.4s),calc(var(--i,0)*.09s + 3.4s)}
.ld-title::after{content:'';position:absolute;left:-10%;right:-10%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#fff,#8fd0ff,#fff,transparent);transform:scaleX(0);opacity:0;animation:ldFlare 2.2s 2.7s cubic-bezier(.2,.7,.2,1) forwards;filter:blur(1px);box-shadow:0 0 40px 6px rgba(150,200,255,.7)}
@keyframes ldFlare{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1.1);opacity:0}}
.ld-sub{font-size:.75rem;letter-spacing:.4em;color:#bcd0ff;text-shadow:0 0 18px rgba(120,170,255,.7)}
.ld-tag{font-size:.7rem}
.ld-bar{width:min(420px,70vw)}
@media(max-width:760px){.ld-title{letter-spacing:.04em;font-size:clamp(2rem,10.2vw,3rem)}.ld-sub{letter-spacing:.14em;font-size:.55rem}}
.ld-cred{display:none}
.ld-btns:not([hidden]),.ld-snd:not([hidden]){animation:ldin 1.2s 3.4s both}
.ld-tag,.ld-bar,.ld-pct{transform:scale(.9);opacity:.85}

.chipline{margin-top:.9rem;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#ffd089;line-height:1.7;opacity:0;transition:opacity 1s .9s}.panel.on .chipline{opacity:.95}
@media(max-width:760px){.chipline{font-size:.5rem}}
.panel.center::before{content:'';position:absolute;z-index:-1;inset:-4rem -5rem;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(2,3,10,.78),rgba(2,3,10,.5) 55%,transparent 78%)}