:root{color-scheme:dark;--white:#fff;--muted:#c8c7c2}
*{box-sizing:border-box}html,body{height:100%;overflow:hidden}html{background:#050200}body{margin:0;color:var(--white);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;min-width:280px}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:20px;top:-60px;padding:14px 20px;background:white;color:black;z-index:20;font-size:14px}.skip-link:focus{top:16px}
.atmosphere{position:fixed;inset:0;isolation:isolate;pointer-events:none;overflow:hidden;background:#050200}#room{display:none}#motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.fallback-room{position:absolute;inset:-4%;background:#050200 url('assets/room-still-desktop.jpg?v=29') center center/cover no-repeat;transform:scale(1.04);animation:room-drift 72s ease-in-out infinite alternate}.reduced-motion .fallback-room{animation:none}.fallback-portals,.fallback-halo,.fallback-floor,.fallback-sun{display:none}.sun-field{position:absolute;left:49%;top:24%;width:76%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}.sun-fog{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(ellipse at 50% 46%,rgba(255,214,140,.26),rgba(255,160,40,.07) 38%,transparent 68%);filter:blur(18px);mix-blend-mode:screen;animation:fog-a 24s ease-in-out infinite alternate}.sun-fog::before,.sun-fog::after{content:"";position:absolute;border-radius:50%;filter:blur(26px);mix-blend-mode:screen}.sun-fog::before{inset:12% 6% 34% 18%;background:radial-gradient(ellipse at 42% 48%,rgba(255,196,90,.22),transparent 72%);animation:fog-b 16s ease-in-out infinite alternate}.sun-fog::after{inset:28% 14% 10% 30%;background:radial-gradient(ellipse at 60% 42%,rgba(255,176,60,.16),transparent 74%);animation:fog-b 28s ease-in-out infinite alternate-reverse}.og-sun{position:absolute;left:50%;top:50%;width:45%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(255,236,190,.34),rgba(255,186,60,.08) 46%,transparent 70%);mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle,#000 34%,transparent 74%);mask-image:radial-gradient(circle,#000 34%,transparent 74%);animation:sun-breathe 7.4s ease-in-out infinite}@keyframes sun-breathe{0%,100%{opacity:.34;transform:translate(-50%,-50%) scale(1)}50%{opacity:.62;transform:translate(-50%,-50%) scale(1.03)}}@keyframes fog-a{from{opacity:.7;transform:translate3d(-1.2%,-.6%,0) scale(1)}to{opacity:1;transform:translate3d(1.6%,1.1%,0) scale(1.05)}}@keyframes fog-b{from{transform:translate3d(-4%,1%,0) scale(1)}to{transform:translate3d(5%,-2%,0) scale(1.08)}}@keyframes room-drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(0,-1.1%,0)}}.room-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 24%,transparent 0 16%,#05020066 62%,#050200d0 100%)}
.page{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;padding:28px 40px 18px;overflow:hidden;pointer-events:none}.masthead{display:flex;justify-content:space-between;gap:20px;color:#b5b4ab;font-size:9px;line-height:1.5;letter-spacing:1.8px;text-transform:uppercase;pointer-events:none}.masthead p{margin:0}.masthead>span,.masthead-end>span{color:#9d9b91}.masthead-end{display:flex;align-items:center;gap:22px}main{width:min(1120px,100%);margin-top:auto;min-height:0;display:flex;flex-direction:column;pointer-events:none}.identity{margin-bottom:14px;width:min(440px,100%);flex:0 0 auto;pointer-events:none}h1{margin:0;font-size:inherit;font-weight:400}.wordmark{display:block;width:100%;height:auto}h1>span{display:block;text-transform:uppercase;font-size:clamp(10px,1.17vw,17px);letter-spacing:.14em;line-height:1.4;margin-top:16px;white-space:nowrap}.intro{font-size:11px;line-height:1.7;letter-spacing:.28px;margin:14px 0 0;color:var(--muted)}
.destinations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-height:0;max-height:min(250px,34svh);overflow:auto;overscroll-behavior:contain;pointer-events:auto;scrollbar-color:#ffffff40 transparent}.destinations::-webkit-scrollbar{width:6px;height:6px}.destinations::-webkit-scrollbar-thumb{background:#ffffff40;border-radius:99px}.destination{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:74px;padding:12px 14px;border:1px solid #ffffff2e;border-radius:18px;background:#070708c4;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 #ffffff22;transition:transform .22s ease,border-color .22s ease,background .22s ease}.platform-icon{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;border-radius:12px;background:#101114;border:1px solid #ffffff24}.platform-icon img{display:block;width:26px;height:26px;object-fit:contain}.destination--discord .platform-icon img{width:26px}.destination--x .platform-icon img{width:18px;height:18px}.link-copy{flex:1;display:grid;gap:4px;min-width:0}.link-copy strong{font-size:15px;font-weight:400;letter-spacing:.2px}.link-copy>span{font-size:11px;line-height:1.35;color:var(--muted)}.enter{flex-shrink:0;color:#f3f3f1;font-size:9px;letter-spacing:.18em;text-transform:uppercase}.wayfinder{width:28px;height:18px;fill:currentColor;color:#f3f3f1;flex-shrink:0;overflow:visible}.wayfinder-shaft{transform-origin:2px 10px;transition:transform .22s ease}.wayfinder-head{transition:transform .22s ease}.destination:hover{background:#121316e6;border-color:#ffffffa8;transform:translateY(-2px)}.destination:active{transform:translateY(0)}.destination:is(:hover,:focus-visible) .wayfinder-shaft{transform:scaleX(1.35)}.destination:is(:hover,:focus-visible) .wayfinder-head{transform:translateX(4px)}.destination:is(:hover,:focus-visible) .enter{letter-spacing:.22em}a:focus-visible{outline:2px solid #fff;outline-offset:3px}
footer{display:flex;align-items:center;padding-top:12px;flex:0 0 auto;pointer-events:none}footer p{margin:0;color:#b4b2a8;font-size:9px;line-height:1.6;letter-spacing:.3px}footer p span{display:inline}
@media(max-aspect-ratio:17/20){.page{padding:22px 18px 12px}.masthead{font-size:7px;letter-spacing:1.2px}.masthead>span,.masthead-end{display:none}main{width:100%;max-width:460px;margin:42svh auto 0;padding:0;flex:1 1 auto}.identity{margin-bottom:10px;width:100%}.wordmark{width:70%;max-width:260px}h1>span{font-size:10px;letter-spacing:.12em;margin-top:8px}.intro{font-size:11px;letter-spacing:.1px;margin-top:8px}.destinations{grid-template-columns:1fr;gap:8px;max-height:none;flex:1 1 auto}.destination{min-height:68px;padding:11px 12px}.link-copy strong{font-size:15px}.link-copy>span{font-size:11px}.room-shade{background:linear-gradient(180deg,transparent 0 38%,#05020055 62%,#050200aa 100%)}footer{padding-top:8px}footer p{font-size:8px}footer p span{display:block}.fallback-room{background-image:url('assets/room-still-mobile.jpg?v=29');background-position:center top}.sun-field{left:50%;top:30.5%;width:92%}}
@media(max-width:350px){.page{padding-left:14px;padding-right:14px}.masthead{font-size:6px}.link-copy>span{font-size:10px}.intro{font-size:10px}h1>span{font-size:9px}}
@media(min-aspect-ratio:17/20) and (max-height:650px){main{width:min(100%,980px)}.identity{margin-bottom:8px}.destination{min-height:62px}.intro{margin-top:8px}.destinations{max-height:min(210px,36svh)}}
@media(prefers-reduced-motion:reduce){.fallback-room,#motes{animation:none}#motes{visibility:hidden}.destination,.wayfinder-shaft,.wayfinder-head,.enter{transition:none}.destination:hover{transform:none}.destination:is(:hover,:focus-visible) .wayfinder-shaft,.destination:is(:hover,:focus-visible) .wayfinder-head{transform:none}}

.destination--spotify .platform-icon{background:#000;border-color:#ffffff18}.destination--tiktok .platform-icon img,.destination--deezer .platform-icon img{width:28px;height:28px}.destination--youtube .platform-icon img{width:28px;height:auto}

/* ---- Desktop scene v2 (>=1024px, landscape). Mobile layout untouched. ---- */
.stage{display:none}
@media (min-width:1024px) and (min-aspect-ratio:17/20){
  .fallback-room{background:transparent;animation:none;transform:none;inset:0}
  .stage{display:block;position:absolute;left:50%;top:0;width:max(100vw,177.78vh);height:max(56.25vw,100vh);
    transform:translate3d(calc(-50% + var(--px,0px)),calc(var(--ty,14%) + var(--py,0px)),0) scale(var(--zoom,.86));
    transform-origin:50% 0;will-change:transform;
    }
  .stage-plate{position:absolute;left:-17.5%;top:-17.5%;width:135%;height:135%;background:#050200 url('assets/room-still-desktop-ext.jpg?v=29') center/100% 100% no-repeat}
  #sun-spin{position:absolute;left:29.17%;top:-14%;width:42.19%;height:71.5%;pointer-events:none}
  .stage-haze{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.55;
    background:radial-gradient(ellipse 40% 14% at 30% 66%,rgba(255,190,60,.10),transparent 70%),radial-gradient(ellipse 36% 12% at 72% 70%,rgba(255,200,80,.08),transparent 70%);
    animation:haze-drift 38s ease-in-out infinite alternate}
  .floor-pulse{position:absolute;left:0;right:0;top:64%;height:36%;pointer-events:none;mix-blend-mode:screen;opacity:var(--pulse,0);
    background:radial-gradient(ellipse 46% 40% at 50% 18%,rgba(255,206,70,.32),transparent 72%);transition:opacity .09s linear}
  .sun-field{left:50.1%;top:23.8%;width:76%}
  .stage .sun-field{left:50.1%;top:23.8%;width:76%}
  .room-shade{background:radial-gradient(ellipse at 50% 26%,transparent 0 22%,#05020055 60%,#050200cc 100%)}
  /* refined destinations */
  .destinations{gap:12px}
  .destination{position:relative;border-radius:16px;border-color:#ffffff24;background:linear-gradient(180deg,#0b0b0dd6,#060607d0);
    box-shadow:inset 0 1px 0 #ffffff1f,0 10px 30px -18px #000;transition:transform .32s cubic-bezier(.2,.7,.2,1),border-color .32s ease,background .32s ease,box-shadow .32s ease}
  .destination::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .32s ease;
    background:radial-gradient(120% 140% at 0% 0%,rgba(244,239,66,.10),transparent 55%)}
  .destination:hover,.destination:focus-visible{background:linear-gradient(180deg,#141417eb,#0a0a0be6);border-color:#ffffff99;transform:translateY(-3px);
    box-shadow:inset 0 1px 0 #ffffff2e,0 18px 40px -20px #000,0 0 0 1px #f4ef4214}
  .destination:hover::after,.destination:focus-visible::after{opacity:1}
  .destination:active{transform:translateY(-1px);transition-duration:.08s}
  .destination:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .platform-icon{transition:transform .32s cubic-bezier(.2,.7,.2,1),border-color .32s ease}
  .destination:hover .platform-icon,.destination:focus-visible .platform-icon{transform:scale(1.06);border-color:#ffffff40}
}
@keyframes haze-drift{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,-1%,0)}}
@keyframes bar{0%,100%{height:3px}50%{height:10px}}
@media (min-width:1024px) and (min-aspect-ratio:17/20) and (prefers-reduced-motion:reduce){
  .stage{transform:translate(-50%,14%) scale(.86)}
  .destination,.platform-icon{transition:none}.destination:hover,.destination:focus-visible{transform:none}
}


/* sun light meeting the booth (desktop stage only) */
.sun-spill,.booth-rim{display:none}
@media(min-width:1024px) and (min-aspect-ratio:17/20){
.sun-spill{display:block;position:absolute;left:30%;width:42%;top:44%;height:28%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse 60% 70% at 50% 18%,rgba(255,196,80,.16),rgba(255,160,40,.06) 45%,transparent 75%);filter:blur(10px);animation:spill 8.6s ease-in-out infinite alternate}
.booth-rim{display:block;position:absolute;left:22%;width:58%;top:70.5%;height:7%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,200,95,.20),rgba(255,170,50,.07) 50%,transparent 78%);filter:blur(12px);animation:spill 7.3s ease-in-out infinite alternate-reverse}
@keyframes spill{from{opacity:.75}to{opacity:1}}
}

/* link cards always above the scene, hover lift never clipped */
main{position:relative;z-index:5;isolation:isolate}
.destinations{padding-top:4px;margin-top:-4px}
.destination:hover,.destination:focus-visible{z-index:1}


.sun-band{position:absolute;left:29.167%;top:22.685%;width:41.146%;height:2.315%;pointer-events:none;background:#030100;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
@media (min-width:1024px) and (min-aspect-ratio:17/20){.fallback-room .sun-field,.stage .sun-field{display:none!important}}
html.intro-pending main,html.intro-pending footer,html.intro-pending .masthead{opacity:0}
main,footer,.masthead{transition:opacity .9s ease;will-change:opacity}

/* Opener: zoom-through wordmark. Only transform and opacity animate. */
#opener{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:hidden;cursor:pointer;contain:strict}
.op-box{grid-area:1/1;width:min(74vw,740px);aspect-ratio:1428/292;display:block}
@media(max-width:767px){.op-box{width:86vw}}
.op-fill{position:relative;opacity:1;transition:opacity .5s ease;will-change:opacity}
.op-white{position:absolute;inset:0;background:#fff;transition:opacity .6s ease;will-change:opacity}
.opener-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;will-change:opacity}
.op-cut{overflow:visible;position:relative}
#opener.op-in .op-fill{opacity:1}
#opener.op-footage .opener-video{opacity:1}
#opener.op-footage .op-white{opacity:0}
#opener.op-reveal .op-fill{opacity:0;transition:opacity .35s ease}

#opener.op-fadeout{opacity:0;transition:opacity .5s ease}
.op-white{background:#ffffff}
.op-emboss{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 1px 0 rgba(255,255,255,1)) drop-shadow(0 3px 6px rgba(0,0,0,.16)) drop-shadow(0 0 1px rgba(0,0,0,.22));transition:opacity .6s ease;will-change:opacity}
.op-emboss{opacity:0}#opener.op-in .op-emboss{opacity:1}#opener.op-footage .op-emboss{opacity:0}
.op-stills{position:absolute;inset:0;overflow:hidden}
.op-stills img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);will-change:opacity,transform}
.op-stills img.on{opacity:1;transform:scale(1.06);transition:transform .9s linear}
#opener.op-stillmode .opener-video{display:none}
#opener.op-reveal .op-cut{opacity:0;transition:opacity .55s ease .65s}
html.intro-pending{background:#050200}
#opener{background:#050200}
#opener.op-reveal{background:transparent}
.op-emboss{filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 4px 8px rgba(0,0,0,.2)) drop-shadow(0 0 1px rgba(0,0,0,.3))}
.op-outline{position:relative;overflow:visible;pointer-events:none;transition:opacity .3s ease;will-change:opacity}

.op-stills img{transition:opacity .12s linear}
.op-stills img.on{transition:opacity .12s linear,transform .9s linear}
.op-bloom{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(60% 55% at 50% 50%,rgba(255,246,226,1) 0%,rgba(255,240,210,.55) 40%,rgba(255,236,200,0) 75%);will-change:opacity}
#opener.op-flash .op-bloom{animation:op-bloom .55s linear forwards}
@keyframes op-bloom{0%{opacity:0;animation-timing-function:cubic-bezier(.2,.8,.2,1)}27%{opacity:.35;animation-timing-function:cubic-bezier(.2,.8,.2,1)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.op-bloom,.op-glint{display:none}}
footer{flex-wrap:wrap;column-gap:18px}
footer p.legal{pointer-events:auto;font-size:9px;letter-spacing:.3px;color:#b4b2a8}
footer .legal a,footer .legal .cookie-settings{color:inherit;font-size:inherit;opacity:1;text-underline-offset:2px;padding:6px 0;cursor:pointer}
footer .legal a:focus-visible,footer .legal .cookie-settings:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* v26 desktop: centred composition, the whole scene framed above the deck, plate edges feather to black */
@media (min-width:1024px) and (min-aspect-ratio:17/20){
  .page{padding:max(30px,env(safe-area-inset-top)) max(44px,env(safe-area-inset-right)) 14px max(44px,env(safe-area-inset-left))}
  .stage-plate{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
  main{width:min(1040px,100%);margin:auto auto 0;align-items:center}
  .identity{width:auto;margin:0 auto 18px;text-align:center}
  .identity .wordmark{width:clamp(220px,17vw,330px);margin:0 auto}
  h1>span{margin-top:12px;font-size:clamp(10px,.85vw,13px);letter-spacing:.32em}
  main>.xf,main>nav.xf,#destinations{width:100%}
}
@media (min-width:1024px) and (min-aspect-ratio:17/20) and (max-height:760px){
  .identity .wordmark{width:clamp(180px,14vw,260px)}
  .identity{margin-bottom:12px}
}

/* v27 ambient life at the fitted scale: haze drift, strip flicker, floor shimmer. Off under reduced motion. */
@media (min-width:1024px) and (min-aspect-ratio:17/20){
  .stage-haze{opacity:.7;animation:haze-drift2 26s ease-in-out infinite alternate}
  .booth-rim{animation:strip-flicker 5.3s steps(1,end) infinite,spill 7.3s ease-in-out infinite alternate-reverse}
  .stage-haze::after{content:"";position:absolute;left:8%;right:8%;top:68%;height:24%;mix-blend-mode:screen;opacity:.5;
    background:repeating-linear-gradient(180deg,rgba(255,205,110,0) 0 7px,rgba(255,205,110,.07) 8px,rgba(255,205,110,0) 10px);
    -webkit-mask-image:radial-gradient(ellipse 50% 60% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse 50% 60% at 50% 30%,#000,transparent 75%);
    animation:shimmer 3.8s ease-in-out infinite alternate}
}
@keyframes haze-drift2{0%{transform:translate3d(-4%,0,0);opacity:.55}50%{opacity:.8}100%{transform:translate3d(4%,-1.5%,0);opacity:.6}}
@keyframes strip-flicker{0%,100%{filter:blur(12px) brightness(1)}37%{filter:blur(12px) brightness(1.18)}39%{filter:blur(12px) brightness(.92)}41%{filter:blur(12px) brightness(1.1)}72%{filter:blur(12px) brightness(1.05)}}
@keyframes shimmer{from{transform:translate3d(0,0,0) scaleY(1);opacity:.35}to{transform:translate3d(0,3px,0) scaleY(1.06);opacity:.6}}
@media (prefers-reduced-motion:reduce){.stage-haze,.booth-rim,.sun-spill,.stage-haze::after{animation:none!important}}

/* v28 composition: bigger fitted scene, smaller wordmark in the floor zone, plate continues to the edges (mirrored, feathered) */
@media (min-width:1024px) and (min-aspect-ratio:17/20){
  .stage-plate{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 86%,transparent 100%)}
  .stage::before,.stage::after{content:"";position:absolute;top:-17.5%;height:135%;width:150%;pointer-events:none;
    background-image:url('assets/room-still-desktop-ext.jpg?v=29');background-size:1000% 100%;background-repeat:no-repeat;filter:blur(8px) brightness(.85);transform:scaleX(-1)}
  .stage::before{left:-167.5%;background-position:0 0;-webkit-mask-image:linear-gradient(90deg,#000,transparent 85%);mask-image:linear-gradient(90deg,#000,transparent 85%)}
  .stage::after{right:-167.5%;background-position:100% 0;-webkit-mask-image:linear-gradient(270deg,#000,transparent 85%);mask-image:linear-gradient(270deg,#000,transparent 85%)}
  .identity{margin:0 auto 14px}
  .identity .wordmark{width:clamp(150px,10.5vw,210px)}
  h1>span{margin-top:8px;font-size:clamp(9px,.7vw,11px)}
}
@media (min-width:1024px) and (min-aspect-ratio:17/20) and (max-height:760px){.identity .wordmark{width:clamp(130px,9vw,170px)}.identity{margin-bottom:10px}}