/* WTF Studios case study hero. Scoped to .universe-hero; only this page loads it.
   Type, controls and logos all scale with the page width so big monitors match. */
@font-face{font-family:Clash;src:url('/universe/assets/clash-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Clash;src:url('/universe/assets/clash-600.woff2') format('woff2');font-weight:600;font-display:swap}

.universe-hero{--lime:#c4ff39;--purple:#b98aff;--logo-scale:1;--edge:var(--gutter);--h:clamp(560px,50vw,1300px);position:relative;isolation:isolate;overflow:hidden;background:#080808;font-family:Clash,Arial,sans-serif;height:min(var(--h),calc(100svh - 72px))}
.universe-hero button{font-family:inherit;cursor:pointer}
.universe-hero .live-dot{width:.55em;height:.55em;border-radius:50%;display:inline-block;background:var(--lime)}

.universe-viewport{position:absolute;inset:0;background:radial-gradient(ellipse at 78% 64%,#3987202b,transparent 39%),radial-gradient(ellipse at 25% 56%,#47117b9c,transparent 45%),radial-gradient(ellipse at 60% 85%,#11277a60,transparent 45%),#080808;overflow:hidden}
.universe-viewport:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 40% 60%,#b531f719,transparent 40%);transform:rotate(-20deg)}
.universe-hero .scene-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 28px 32px #080808,inset 0 -55px 65px #080808}
#world-canvas{position:absolute;inset:0;cursor:grab}
#world-canvas:active{cursor:grabbing}
#world-canvas canvas{display:block;width:100%;height:100%;outline:none;touch-action:pan-y!important}
#world-labels{position:absolute;inset:0;pointer-events:none;z-index:2}

.universe-hero .world-label{position:absolute;display:flex;align-items:center;justify-content:center;width:calc(152px * var(--logo-scale));min-height:calc(84px * var(--logo-scale));padding:0;border:0;background:none;border-radius:0;transform:translate(-50%,-50%);pointer-events:auto;isolation:isolate}
.universe-hero .world-label img{display:block;width:calc(var(--logo-width,145px) * var(--logo-scale));max-width:none;height:auto;filter:drop-shadow(0 3px 3px #05030ddd) drop-shadow(0 8px 10px #05030d80);transition:transform .2s ease,filter .2s ease;pointer-events:none}
.universe-hero .world-label:hover img,.universe-hero .world-label.selected img{transform:translateY(-4px) scale(1.09)}
.universe-hero .world-label:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:8px}
.universe-hero .world-label.depth-label img{opacity:0}
.universe-hero .world-label[data-world="royal-flush"]{--logo-width:117.3px}
.universe-hero .world-label[data-world="numbface"]{--logo-width:113px}
.universe-hero .world-label[data-world="ladyboy"]{--logo-width:148.3px}
.universe-hero .world-label[data-world="lost-my-marbles"]{--logo-width:135.1px}
.universe-hero .world-label[data-world="bubblegun"]{--logo-width:155.2px}
.universe-hero .world-label[data-world="fireflies"]{--logo-width:153.2px}

.universe-hero .map-loading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px;color:#c6b5ec;font-size:clamp(15px,1vw,30px)}
.universe-hero .map-loading[hidden]{display:none}
.universe-hero .map-loading span{width:20px;height:20px;border:2px solid #5e4b72;border-top-color:var(--lime);border-radius:50%;animation:universe-spin .8s linear infinite}
@keyframes universe-spin{to{transform:rotate(1turn)}}

.universe-hero .map-caption,.universe-hero .map-help{position:absolute;z-index:2;display:flex;align-items:center;gap:.8em;bottom:clamp(32px,2.4vw,72px);font-size:clamp(11px,.76vw,23px);pointer-events:none;white-space:nowrap}
.universe-hero .map-caption{left:var(--edge);color:#ce9bff;letter-spacing:.14em}
.universe-hero .map-help{left:50%;transform:translateX(-50%);color:#dcc8f4}
.universe-hero .map-help svg{width:1.4em;height:1.4em;fill:none;stroke:currentColor;stroke-width:1.6}
.universe-hero .mobile-help{display:none}
.universe-hero .map-tools{--tool:clamp(42px,2.9vw,88px);position:absolute;right:var(--edge);bottom:calc(clamp(32px,2.4vw,72px) - var(--tool)/2 + .4em);z-index:4;display:flex;gap:6px}
.universe-hero .icon-btn{width:var(--tool);height:var(--tool);display:inline-flex;align-items:center;justify-content:center;padding:0;color:#f5f2fa;background:#211135a6;border:1px solid #8f54bc66;border-radius:50%;transition:background .2s}
.universe-hero .icon-btn:hover{background:#3b3151}
.universe-hero .icon-btn svg{width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:2}

.universe-hero .world-preview{--u:clamp(1px,.0695vw,2.4px);position:absolute;left:var(--edge);bottom:calc(var(--u) * 84);z-index:5;width:calc(var(--u) * 320);padding:calc(var(--u) * 14);color:#f5f2fa;background:#1d1032f5;border-radius:calc(var(--u) * 14);box-shadow:0 18px 45px #0008;backdrop-filter:blur(15px)}
.universe-hero .world-preview[hidden]{display:none}
.universe-hero .preview-top{display:flex;gap:calc(var(--u) * 13);padding-right:calc(var(--u) * 22)}
.universe-hero .preview-top img{width:calc(var(--u) * 80);height:calc(var(--u) * 80);object-fit:cover;border-radius:calc(var(--u) * 7)}
.universe-hero .preview-top h3{margin:calc(var(--u) * 4) 0;color:#f5f2fa;font-family:inherit;font-size:calc(var(--u) * 21);font-weight:600;line-height:1.1;letter-spacing:-.01em}
.universe-hero .preview-top small{display:flex;align-items:center;gap:calc(var(--u) * 7);color:var(--purple);font-size:calc(var(--u) * 11);text-transform:uppercase;letter-spacing:.06em}
.universe-hero .preview-age{display:inline-flex;align-items:center;height:calc(var(--u) * 20);padding:0 calc(var(--u) * 5);color:#fff;border:1px solid #ffffff80;border-radius:calc(var(--u) * 4);font-size:calc(var(--u) * 11);font-weight:600;letter-spacing:.04em}
.universe-hero .world-preview p{margin:calc(var(--u) * 11) 0;color:#c1b9cc;font-size:calc(var(--u) * 13);line-height:1.4}
.universe-hero .preview-enter{box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;width:100%;min-height:calc(var(--u) * 42);padding:0 calc(var(--u) * 14);color:#151b0e;background:var(--lime);border-radius:calc(var(--u) * 7);font-size:calc(var(--u) * 14);font-weight:600;text-decoration:none}
.universe-hero .preview-enter svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16);fill:none;stroke:currentColor;stroke-width:2}
.universe-hero .preview-enter.is-soon{justify-content:center;color:#c1b9cc;background:#2e2146}
.universe-hero .preview-close{position:absolute;right:calc(var(--u) * 8);top:calc(var(--u) * 8);display:flex;align-items:center;justify-content:center;width:calc(var(--u) * 26);height:calc(var(--u) * 26);padding:0;color:#9d92ae;background:none;border:0}
.universe-hero .preview-close svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:2}

.universe-hero .studio-experiment-trigger{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.universe-hero .studio-experiment-trigger:focus-visible{clip-path:none;width:auto;height:auto;bottom:75px;left:50%;transform:translateX(-50%);padding:12px 18px;background:var(--lime);color:#211036;border-radius:12px;z-index:8}

.universe-hero .fallback-map{display:flex;align-items:center;justify-content:center;height:100%;color:#bba5d9;text-align:center;padding:60px}
.universe-viewport.scene-failed #world-labels{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:10px;padding:0 var(--edge) 100px}
.universe-viewport.scene-failed .world-label{position:static;transform:none}
.universe-viewport.scene-failed .map-tools,.universe-viewport.scene-failed .map-help{display:none}

@media(min-width:2000px){.universe-hero{--logo-scale:1.5}}
@media(min-width:3000px){.universe-hero{--logo-scale:2}}
@media(max-width:900px){.universe-hero .map-caption{display:none}.universe-hero .map-help{left:var(--edge);transform:none}}
@media(max-width:650px){
 .universe-hero{--logo-scale:.7;height:500px}
 .universe-hero .scene-vignette{box-shadow:inset 0 24px 28px #080808,inset 0 -40px 45px #080808}
 .universe-hero .world-label{min-height:44px}
 .universe-hero .desktop-help{display:none}
 .universe-hero .mobile-help{display:inline}
 .universe-hero .map-help{bottom:26px;font-size:10px}
 .universe-hero .map-tools{--tool:38px;bottom:16px}
 .universe-hero .world-preview{--u:1px;left:var(--edge);right:var(--edge);bottom:68px;width:auto}
 .universe-hero .preview-top img{width:48px;height:48px}
 .universe-hero .preview-top h3{font-size:18px}
 .universe-hero .world-preview{padding:12px}
 .universe-hero .world-preview p{display:none}
 .universe-hero .preview-enter{margin-top:10px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){.universe-hero .map-loading span{animation:none}}