/* Header follows the supplied 2048 × 93 reference. */
:root{--header-scale:.048828125vw;--header:clamp(60px,4.541015625vw,110px);--hero-height:min(49.583333vw,calc(100svh - var(--header) - 20px));--hero-controls-height:44px}
.header{height:var(--header);padding:0 calc(46 * var(--header-scale)) 0 calc(53 * var(--header-scale));display:grid;grid-template-columns:calc(359 * var(--header-scale)) minmax(0,1fr) auto;gap:0;background:#000;border:0;backdrop-filter:none}
.header .brand{width:calc(230.9461875 * var(--header-scale));line-height:0}
.header .brand img{width:100%;height:auto}
.header .header-caption{display:block;font-size:calc(24 * var(--header-scale));font-weight:400;line-height:1.3;letter-spacing:.02em;color:#737373;white-space:nowrap}
.header #main-nav{margin-left:0;display:flex;align-items:center;gap:calc(20 * var(--header-scale));font-size:calc(23 * var(--header-scale));font-weight:400;line-height:1.3;letter-spacing:.025em}
.header #main-nav>a:not(.contact){color:#0098e3;white-space:nowrap}
.header #main-nav>a:nth-child(-n+3){border-right:2px solid #292929;padding-right:calc(20 * var(--header-scale))}
.header #main-nav>a.active{color:#edcf00}
.header #main-nav>a:not(.contact):hover,.header #main-nav>a:not(.contact):focus-visible{color:#62baff}
.header #main-nav .contact{height:calc(52 * var(--header-scale));min-width:calc(230 * var(--header-scale));padding:0 calc(30 * var(--header-scale));border:0;border-radius:999px;background:#252525;color:#c9c9c9;font-size:calc(23 * var(--header-scale));font-weight:700;letter-spacing:.04em;line-height:1.2;box-shadow:none;margin-left:calc(5 * var(--header-scale))}
.header #main-nav .contact:hover,.header #main-nav .contact:focus-visible{background:#303030;color:#62baff}
/* Preserve the reference composition. Characters extend to the outer hero edge;
   controls overlay the bottom and stay inside the visible viewport. */
.hero{height:var(--hero-height);min-height:0;aspect-ratio:auto;overflow:hidden;background:#080517}
.hero-scene{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;z-index:0;transition:opacity .9s ease,visibility 0s .95s}
.hero-scene.active{opacity:1;visibility:visible;z-index:1;transition:opacity .75s ease,visibility 0s}
.hero-scene:after{display:none}
.hero .hero-backdrop{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.025);filter:blur(5px);transition:transform .85s ease,filter .75s ease}
.hero-scene.active .hero-backdrop{transform:scale(1);filter:blur(0)}
.hero .hero-composition{position:absolute;left:50%;right:auto;top:0;bottom:auto;margin:0;max-width:none;width:min(100%,calc(var(--hero-height) * 1920 / 952));height:auto;aspect-ratio:1920/952;transform:translateX(-50%);overflow:visible}
.scene-layer{position:absolute;opacity:0;filter:blur(5px);transition:opacity .4s ease,filter .4s ease,transform .5s ease;transform:translateY(12px) scale(.96);transform-origin:50% 100%;pointer-events:none}
.scene-layer img{display:block;width:100%;height:auto;max-width:none}
.layer-screen{z-index:1}.layer-logo{z-index:2}
.layer-left,.layer-right{z-index:3;transform:scale(1.055);transform-origin:50% 35%}
.hero-scene.active .scene-layer{opacity:1;filter:blur(0);transform:translate(0) scale(1);transition-duration:.7s,.7s,.8s;transition-delay:.65s}
.hero-scene.active .layer-left,.hero-scene.active .layer-right{transition-delay:1.3s;transition-duration:.85s,.85s,1s}
.hero .hero-controls{bottom:5px;left:50%;right:auto;transform:translateX(-50%);opacity:1;visibility:visible;z-index:7;gap:5px;padding:0;background:none}
.hero-controls button{min-width:34px;height:34px;color:#82c8fa;text-shadow:0 1px 6px #000,0 0 6px #000}
.hero-controls button:hover,.hero-controls button:focus-visible{color:#ffe36c}
.hero-dots button:after{width:7px;height:7px;background:#82c8fa;box-shadow:0 0 4px #000}
.hero-dots button[aria-current=true]:after{background:#ffe36c;box-shadow:0 0 8px #ffd55199}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:var(--hero-controls-height);background:linear-gradient(transparent,#050314b3);z-index:5;pointer-events:none}
@media(max-width:1200px){
 .header{padding:0 24px;grid-template-columns:180px 1fr;gap:20px}
 .header .brand{width:170.7496875px}
 .header .header-caption{display:none}
 .header #main-nav{justify-self:end;font-size:16px;gap:14px;letter-spacing:0}
 .header #main-nav>a:nth-child(-n+3){padding-right:14px;border-width:1px}
 .header #main-nav .contact{height:38px;min-width:155px;font-size:16px;padding:0 18px;letter-spacing:.02em;margin:0}
}
@media(max-width:900px){
 :root{--header:64px;--hero-controls-height:38px;--hero-height:min(calc(49.583333vw + 38px),calc(100svh - var(--header) - 16px))}
 .header{display:flex;justify-content:space-between;padding:0 20px;gap:10px}
 .header .brand{width:170.7496875px}
 .header .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:40px;height:44px;margin-left:auto}
 .header .menu-toggle span{width:23px;height:1px;background:#f2ebff}
 .header #main-nav{display:none;position:absolute;top:var(--header);left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:0;padding:16px 25px 24px;background:#000;border-bottom:1px solid #ffffff20;font-size:17px}
 .header #main-nav.open{display:flex}
 .header #main-nav>a:not(.contact){padding:10px 0;border:0}
 .header #main-nav .contact{margin-top:10px;padding:10px;font-size:17px;height:44px}
 .hero .hero-controls{bottom:3px;gap:3px}
 .hero-controls button{height:32px;min-width:32px}
}
@media(prefers-reduced-motion:reduce){
 .hero-scene,.hero .hero-backdrop,.hero .scene-layer{transition:none!important;animation:none!important;filter:none!important}
 .hero .hero-backdrop,.hero .scene-layer{transform:none!important}
}

/* Canvas follows exactly the existing actor placement and entrance transition. */
.scene-layer .spine-canvas{position:absolute;left:-2%;top:-2%;width:104%;height:104%;max-width:none;pointer-events:none;opacity:0;}
.scene-layer.spine-ready .spine-canvas{opacity:1;}
.scene-layer.spine-ready > img{opacity:0;}
@media(prefers-reduced-motion:reduce){.scene-layer .spine-canvas{display:none;}.scene-layer.spine-ready > img{opacity:1;}}

/* Ambient motion stays behind the logo, screens and animated characters. */
.hero-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;--ambient-color:180,210,255;z-index:0}
.hero .hero-composition{z-index:1}
.hero-atmosphere span{position:absolute;pointer-events:none;animation-play-state:paused}
.hero-scene.active .hero-atmosphere span{animation-play-state:running}
.hero.ambient-paused .hero-atmosphere span,.hero.ambient-offscreen .hero-atmosphere span{animation-play-state:paused}
.ambient-haze{left:-15%;bottom:-9%;width:130%;height:31%;opacity:.13;background:radial-gradient(ellipse at 25% 70%,rgba(var(--ambient-color),.55),transparent 58%),radial-gradient(ellipse at 80% 80%,rgba(var(--ambient-color),.35),transparent 60%);animation:ambient-haze-drift 19s ease-in-out infinite alternate}
.ambient-glow{inset:0;opacity:.11;background:radial-gradient(ellipse at 12% 36%,rgba(var(--ambient-color),.6),transparent 22%),radial-gradient(ellipse at 88% 44%,rgba(var(--ambient-color),.4),transparent 20%);animation:ambient-light 6.5s ease-in-out infinite alternate}
.ambient-particle{width:var(--size);height:var(--size);border-radius:50%;background:rgba(var(--ambient-color),.85);box-shadow:0 0 7px rgba(var(--ambient-color),.6);opacity:0;animation:ambient-float var(--duration) ease-in-out var(--delay) infinite}
.atmosphere-magic{--ambient-color:182,224,255}
.atmosphere-tropical{--ambient-color:186,248,239}
.atmosphere-tropical .ambient-haze{height:18%;opacity:.1;animation-duration:14s}
.atmosphere-tropical .ambient-glow{inset:68% 0 0;animation-duration:4s;opacity:.15}
.atmosphere-tropical .ambient-particle{box-shadow:none;opacity:0;animation-name:ambient-shimmer}
.atmosphere-dust{--ambient-color:241,209,161}
.atmosphere-dust .ambient-particle{box-shadow:none;animation-name:ambient-dust}
.atmosphere-dust .ambient-haze{opacity:.1}
.atmosphere-haunted{--ambient-color:179,161,232}
.atmosphere-haunted .ambient-haze{height:36%;opacity:.22;animation-duration:22s}
.atmosphere-haunted .ambient-glow{--ambient-color:255,176,86;animation-duration:3.8s}
.atmosphere-haunted .ambient-particle:nth-child(n+8){display:none}
.atmosphere-warm{--ambient-color:255,215,143}
.atmosphere-warm .ambient-haze{opacity:.08}
.atmosphere-warm .ambient-particle{animation-name:ambient-dust;box-shadow:none}
@keyframes ambient-haze-drift{from{transform:translateX(-3%) translateY(0)}to{transform:translateX(5%) translateY(-5%)}}
@keyframes ambient-light{from{opacity:.05}to{opacity:.17}}
@keyframes ambient-float{0%,100%{opacity:0;transform:translate(0,10px)}25%{opacity:.45}65%{opacity:.65}90%{opacity:0;transform:translate(16px,-35px)}}
@keyframes ambient-dust{0%,100%{opacity:0;transform:translate(-18px,8px)}30%,65%{opacity:.28}90%{opacity:0;transform:translate(28px,-16px)}}
@keyframes ambient-shimmer{0%,100%{opacity:0;transform:translate(0,5px) scale(.7)}45%{opacity:.38;transform:translate(7px,-7px) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.hero-atmosphere{display:none}}
@media(max-width:540px){.ambient-particle:nth-child(n+9){display:none}.ambient-haze{opacity:.1}}

/* Intro: yellow → magenta → violet → blue, then crossfade to Wizards. */
.hero-scene.hero-intro{background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .533333s ease,visibility 0s .533333s}
.hero-scene.hero-intro.active{transition:opacity .6s ease,visibility 0s}
.intro-slogan{margin:0;padding:0 3%;font-family:Baloo,system-ui,sans-serif;font-weight:400;font-size:clamp(25px,4.7vw,94px);line-height:1.15;text-align:center;color:#ffe500;transform-origin:center;will-change:transform,opacity;animation:none}
.hero-intro.active .intro-slogan,.hero-intro.departing .intro-slogan{animation:intro-slogan-zoom 2.866666s cubic-bezier(.15,.5,.25,1) both,intro-slogan-color 2.333333s linear both}
.hero.ambient-paused .intro-slogan,.hero.ambient-offscreen .intro-slogan{animation-play-state:paused}
@keyframes intro-slogan-zoom{0%{transform:scale(1.78);opacity:0}9%{opacity:1}85%,100%{transform:scale(1);opacity:1}}
@keyframes intro-slogan-color{0%,18%{color:#ffe500}36%,43%{color:#f000ef}61%,68%{color:#8000ff}86%,100%{color:#2670ff}}
@media(max-width:540px){.intro-slogan{max-width:92%;font-size:clamp(27px,7vw,38px)}@keyframes intro-slogan-zoom{0%{transform:scale(1.44);opacity:0}9%{opacity:1}85%,100%{transform:scale(1);opacity:1}}}
@media(prefers-reduced-motion:reduce){.hero-intro .intro-slogan{animation:none!important;transform:none;color:#ffe500;opacity:1;will-change:auto}}

.hero-intro.departing{z-index:2}
.hero-intro .intro-slogan{filter:blur(0);transition:filter .533333s ease}
.hero-intro.departing .intro-slogan{filter:blur(12px)}
@media(prefers-reduced-motion:reduce){.hero-intro .intro-slogan{filter:none!important}}
/* A single soft highlight sweeps across the actual letter shapes. */
.intro-slogan{position:relative}
.intro-slogan:after{content:'Worlds For Game Creators';position:absolute;inset:0;padding:inherit;font:inherit;line-height:inherit;text-align:inherit;color:transparent;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.1) 55%,transparent 60%);background-size:300% 100%;background-position:150% 0;background-clip:text;-webkit-background-clip:text;pointer-events:none;opacity:0}
.hero-intro.active .intro-slogan:after,.hero-intro.departing .intro-slogan:after{animation:intro-light-sweep 2.333333s ease-in-out both}
.hero.ambient-paused .intro-slogan:after,.hero.ambient-offscreen .intro-slogan:after{animation-play-state:paused}
@keyframes intro-light-sweep{0%,12%{background-position:150% 0;opacity:0}20%{opacity:.8}76%{opacity:.8}90%,100%{background-position:-50% 0;opacity:0}}
@media(prefers-reduced-motion:reduce){.intro-slogan:after{display:none}}

/* A gentle levels-like lift affects only the five background images. */
.hero-scene.active .hero-backdrop,.hero-scene.departing .hero-backdrop{animation:background-light-breathe 7.2s ease-in-out .75s infinite;animation-play-state:running}
.hero.ambient-paused .hero-backdrop,.hero.ambient-offscreen .hero-backdrop{animation-play-state:paused}
@keyframes background-light-breathe{0%,100%{filter:brightness(1) contrast(1)}50%{filter:brightness(1.14) contrast(.98)}}
/* Soft luminous motes drift behind the foreground artwork. */
.hero .hero-atmosphere .ambient-particle{width:var(--size);height:var(--size);background:radial-gradient(circle,rgba(var(--ambient-color),.9) 0%,rgba(var(--ambient-color),.45) 30%,rgba(var(--ambient-color),0) 72%);box-shadow:0 0 14px 3px rgba(var(--ambient-color),.25);filter:blur(1.4px);animation-name:ambient-luminous-flight;opacity:0}
.hero .atmosphere-haunted .ambient-particle:nth-child(n+8){display:block}
@keyframes ambient-luminous-flight{0%{opacity:0;transform:translate(-16px,30px) scale(.8)}20%{opacity:.5}50%{opacity:.7;transform:translate(20px,-12px) scale(1.05)}80%{opacity:.4}100%{opacity:0;transform:translate(-5px,-65px) scale(.85)}}
@media(max-width:540px){.hero .hero-atmosphere .ambient-particle:nth-child(n+11){display:none}}
@media(prefers-reduced-motion:reduce){.hero .hero-backdrop{animation:none!important;filter:none!important}}
/* Longer, brighter sweep within the short introduction. */
.intro-slogan:after{background-image:linear-gradient(110deg,transparent 36%,rgba(255,255,255,.3) 43%,#fff 50%,rgba(255,255,255,.3) 57%,transparent 64%)}
@keyframes intro-light-sweep{0%{background-position:150% 0;opacity:0}8%{opacity:1}88%{opacity:1}100%{background-position:-50% 0;opacity:0}}
/* Keep moving through the fade instead of holding the final scale. */
@keyframes intro-slogan-zoom{0%{transform:scale(1.78);opacity:0}9%{opacity:1}72%{opacity:1}100%{transform:scale(.94);opacity:0}}
@media(max-width:540px){@keyframes intro-slogan-zoom{0%{transform:scale(1.44);opacity:0}9%{opacity:1}72%{opacity:1}100%{transform:scale(.94);opacity:0}}}
/* The highlight passes during the opening yellow phase, at constant speed. */
.hero-intro.active .intro-slogan:after,.hero-intro.departing .intro-slogan:after{animation:intro-light-sweep .95s linear both}
@keyframes intro-light-sweep{0%{background-position:100% 0;opacity:0}12%{opacity:1}88%{opacity:1}100%{background-position:0% 0;opacity:0}}
@keyframes intro-slogan-color{0%,43%{color:#ffe500}60%,65%{color:#f000ef}79%,83%{color:#8000ff}96%,100%{color:#2670ff}}
/* More visible magic fireflies, still behind screens and characters. */
.hero .hero-atmosphere .ambient-particle{background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(var(--ambient-color),.95) 16%,rgba(var(--ambient-color),.55) 38%,rgba(var(--ambient-color),0) 74%);box-shadow:0 0 20px 5px rgba(var(--ambient-color),.4);filter:blur(1.8px)}
@keyframes ambient-luminous-flight{0%{opacity:0;transform:translate(-16px,30px) scale(.8)}20%{opacity:.7}50%{opacity:.95;transform:translate(20px,-12px) scale(1.05)}80%{opacity:.65}100%{opacity:0;transform:translate(-5px,-65px) scale(.85)}}
@media(max-width:540px){.hero .hero-atmosphere .ambient-particle:nth-child(n+11){display:block}.hero .hero-atmosphere .ambient-particle:nth-child(n+19){display:none}}
/* The home slideshow fills the remaining viewport below the header. */
:root{--hero-height:calc(100svh - var(--header))}
.hero .hero-controls{bottom:12px}
.hero-controls button:focus-visible{outline:2px solid #8bd9ff;outline-offset:-2px;border-radius:50%}
@media(max-width:800px){:root{--hero-height:calc(100svh - var(--header))}.hero .hero-controls{bottom:10px}}
/* Mix small motes with larger luminous orbs. */
.hero .hero-atmosphere .ambient-particle{box-shadow:0 0 24px 6px rgba(var(--ambient-color),.55);filter:blur(1.2px)}
@keyframes ambient-luminous-flight{0%{opacity:0;transform:translate(-16px,30px) scale(.8)}15%{opacity:.85}50%{opacity:1;transform:translate(20px,-12px) scale(1.05)}85%{opacity:.8}100%{opacity:0;transform:translate(-5px,-65px) scale(.85)}}
@media(max-width:540px){.hero .hero-atmosphere .ambient-particle:nth-child(n+19){display:block}.hero .hero-atmosphere .ambient-particle:nth-child(n+29){display:none}}
/* Feather the glow continuously; no separate halo with a visible rim. */
.hero .hero-atmosphere .ambient-particle{background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(var(--ambient-color),.8) 12%,rgba(var(--ambient-color),.5) 28%,rgba(var(--ambient-color),.2) 48%,rgba(var(--ambient-color),.05) 65%,rgba(var(--ambient-color),0) 85%);box-shadow:none;filter:blur(4px);overflow:visible}
/* Tiny bright cores surrounded by irregular, feathered magic light. */
.hero .hero-atmosphere .ambient-particle{border-radius:45% 55% 60% 40%;background:radial-gradient(ellipse at 45% 42%,rgba(255,255,240,.95) 0%,rgba(var(--ambient-color),.85) 8%,rgba(var(--ambient-color),.4) 22%,rgba(var(--ambient-color),.12) 45%,rgba(var(--ambient-color),0) 75%);filter:blur(3px);box-shadow:none}
.hero .hero-atmosphere .ambient-particle:after{content:'';position:absolute;left:43%;top:39%;width:3px;height:3px;border-radius:50%;background:#fffde6;box-shadow:0 0 5px rgba(var(--ambient-color),.85);filter:blur(.5px)}
@keyframes ambient-luminous-flight{0%{opacity:0;transform:translate(-16px,30px) scale(.75)}15%{opacity:.7}30%{opacity:1}43%{opacity:.45}55%{opacity:.9;transform:translate(20px,-12px) scale(1.1)}70%{opacity:.55}85%{opacity:.85}100%{opacity:0;transform:translate(-5px,-65px) scale(.8)}}