/* Bonk Brigade motion direction: slow atmosphere, quick playful responses. */
:root{--motion-ease:cubic-bezier(.2,.7,.2,1);--scene-x:0px;--scene-y:0px}
.header{border-bottom-color:#526c9f38;box-shadow:0 6px 35px #02071220;transition:background .3s,box-shadow .3s}
.header.is-scrolled{background:#090e1ff2;box-shadow:0 12px 45px #02071266}
.reading-progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--mint),var(--blue),#a49bff);box-shadow:0 0 12px #6adeff44;pointer-events:none}
.scene-layer{position:absolute;inset:0;pointer-events:none;will-change:transform;transition:transform .65s var(--motion-ease)}
.scene-landscape{z-index:1;transform:translate3d(calc(var(--scene-x)*.3),calc(var(--scene-y)*.3),0)}
.scene-fox{z-index:2;transform:translate3d(var(--scene-x),var(--scene-y),0)}
.scene-axolotl{z-index:3;transform:translate3d(calc(var(--scene-x)*1.35),calc(var(--scene-y)*1.35),0)}
.hero-art{overflow:visible;isolation:isolate;touch-action:pan-y}
.scene-atmosphere{position:absolute;inset:-6% -5% 0;pointer-events:none;z-index:0}
.scene-aurora{position:absolute;border-radius:50%;opacity:.8;animation:auroraDrift 19s ease-in-out infinite alternate;will-change:transform}
.aurora-cyan{width:82%;height:71%;top:5%;left:-2%;background:radial-gradient(ellipse,#48c9ff24,transparent 66%)}
.aurora-violet{width:76%;height:85%;right:-5%;top:10%;background:radial-gradient(ellipse,#b58aff25,transparent 66%);animation-duration:25s;animation-delay:-8s}
.scene-orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#9edfff15;stroke-width:1;transform:rotate(-18deg) scaleY(.78);animation:orbitDrift 38s linear infinite;opacity:.85}
.orbit-inner{inset:4%;width:92%;height:92%;animation-direction:reverse;animation-duration:48s;opacity:.6}
.orbit-energy{stroke:#8be4ff;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:46 1726;filter:drop-shadow(0 0 5px #6adeff80)}
.orbit-inner .orbit-energy{stroke:var(--mint);stroke-dasharray:24 1566}
.scene-stars{position:absolute;inset:0}
.scene-stars i{position:absolute;width:3px;height:3px;background:#d8f8ff;border-radius:50%;box-shadow:0 0 10px #77cbff99;opacity:.45;animation:starDrift 8s ease-in-out infinite}
.scene-stars i:nth-child(1){left:5%;top:31%;animation-delay:-3s}.scene-stars i:nth-child(2){left:25%;top:8%;width:2px;animation-delay:-5s}.scene-stars i:nth-child(3){left:63%;top:4%;animation-delay:-1s}.scene-stars i:nth-child(4){right:1%;top:51%;width:2px;animation-delay:-6s}.scene-stars i:nth-child(5){left:12%;bottom:15%;animation-delay:-2s}.scene-stars i:nth-child(6){right:18%;bottom:8%;width:2px;animation-delay:-7s}.scene-stars i:nth-child(7){left:38%;top:16%;animation-delay:-4s}.scene-stars i:nth-child(8){right:9%;top:21%;width:2px;animation-delay:-3.5s}.scene-stars i:nth-child(9){left:48%;bottom:6%;animation-delay:-5.5s}.scene-stars i:nth-child(10){left:4%;bottom:38%;width:2px;animation-delay:-.5s}
.hero-fox{animation:foxIdle 8s ease-in-out infinite}
.hero-island{animation:islandIdle 11s ease-in-out infinite}
.hero-axolotl{animation:critterFloat 7s ease-in-out infinite;animation-delay:-1s}
.spark-one{animation:sparkleFloat 9s ease-in-out infinite}.spark-two{animation:sparkleFloat 11s ease-in-out infinite reverse}
.floating-pieces{z-index:4}
.tile-diamond{animation:diamondFloat 8s ease-in-out infinite}.tile-star{animation:pieceFloat 10s ease-in-out infinite}.tile-drop{animation:dropFloat 9s ease-in-out infinite}
.bonk-sticker{z-index:5;appearance:none;min-height:62px;transition:transform .3s var(--motion-ease),box-shadow .3s,border-color .3s}
.bonk-sticker:hover{transform:rotate(3deg) translateY(-4px);box-shadow:5px 8px 0 #0007,0 0 35px #c2fa8425}.bonk-sticker:active{transform:rotate(9deg) translateY(2px);box-shadow:1px 2px 0 #0007}
.art-caption{z-index:5;backdrop-filter:blur(14px)}
.bonk-effects{position:absolute;inset:0;z-index:6;pointer-events:none}
.bonk-wave,.bonk-pop,.burst-spark{position:absolute;left:39%;top:48%;opacity:0}
.bonk-wave{width:115px;height:115px;border:2px solid #c2fa8490;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 22px #c2fa8422}
.bonk-pop{font-size:clamp(30px,4vw,52px);font-weight:1000;letter-spacing:-.045em;color:var(--mint);text-shadow:0 3px 0 #090e1f,0 0 30px #c2fa8455;white-space:nowrap;transform:translate(-50%,-50%) rotate(-10deg)}
.burst-spark{width:7px;height:7px;border-radius:1px;background:var(--mint);box-shadow:0 0 15px #c2fa84aa}
.burst-spark:nth-of-type(1){--burst-x:-120px;--burst-y:-70px}.burst-spark:nth-of-type(2){--burst-x:0px;--burst-y:-120px;background:var(--blue)}.burst-spark:nth-of-type(3){--burst-x:120px;--burst-y:-80px}.burst-spark:nth-of-type(4){--burst-x:150px;--burst-y:10px;background:var(--coral)}.burst-spark:nth-of-type(5){--burst-x:90px;--burst-y:90px}.burst-spark:nth-of-type(6){--burst-x:-10px;--burst-y:110px;background:var(--blue)}.burst-spark:nth-of-type(7){--burst-x:-110px;--burst-y:75px}.burst-spark:nth-of-type(8){--burst-x:-155px;--burst-y:-5px;background:#ff96df}
.is-bonking .bonk-wave{animation:bonkWave .65s ease-out both}.is-bonking .bonk-pop{animation:bonkWord .65s var(--motion-ease) both}.is-bonking .burst-spark{animation:bonkSpark .6s ease-out both}.is-bonking .hero-fox{animation:foxBonk .55s var(--motion-ease) both}.is-bonking .hero-axolotl{animation:axolotlBonk .6s var(--motion-ease) both}
html[data-motion="on"] .hero-copy>.eyebrow{animation:enterScene .6s var(--motion-ease) both}
html[data-motion="on"] .hero h1{animation:enterScene .8s .08s var(--motion-ease) both}
html[data-motion="on"] .hero-description{animation:enterScene .8s .16s var(--motion-ease) both}
html[data-motion="on"] .hero-actions{animation:enterScene .8s .24s var(--motion-ease) both}
html[data-motion="on"] .hero-note,html[data-motion="on"] .game-stats{animation:enterScene .8s .32s var(--motion-ease) both}
html[data-motion="on"] .hero-art{animation:enterArtwork 1.1s .1s var(--motion-ease) both}
.ticker{box-shadow:0 0 45px #c2fa840a}
.ticker>.ticker-track{width:max-content;justify-content:flex-start;gap:0;animation:tickerTravel 42s linear infinite;will-change:transform}
.ticker-group{display:flex;justify-content:space-around;align-items:center;gap:42px;flex:0 0 auto;min-width:100vw;padding:0 24px;white-space:nowrap}
.ticker:hover .ticker-track{animation-play-state:paused}
.button,.nav-cta{position:relative;overflow:hidden;isolation:isolate}
.button::after,.nav-cta::after{content:'';position:absolute;inset:-40% -100%;background:linear-gradient(110deg,transparent 40%,#fff4 48%,transparent 57%);transform:translateX(-65%);pointer-events:none;transition:transform .7s var(--motion-ease)}
.button:hover::after,.nav-cta:hover::after{transform:translateX(65%)}
.primary{box-shadow:0 4px 0 #738f57,0 0 24px #c2fa8410}.primary:hover{box-shadow:0 7px 0 #738f57,0 0 36px #c2fa8429}
html[data-motion="on"] .motion-reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity .75s var(--motion-ease),transform .85s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
html[data-motion="on"] .motion-reveal.is-visible{opacity:1;transform:translateZ(0)}
.world-grid{border:0;gap:18px}
.world-grid article,.world-grid article:nth-child(even),.world-grid article:nth-child(-n+2){position:relative;overflow:hidden;border:1px solid #36496785;border-radius:18px;padding:30px;background:linear-gradient(145deg,#15243b,#0d1529);transition:transform .3s var(--motion-ease),border-color .3s,box-shadow .3s}
.world-grid article::before{content:'';position:absolute;inset:0;background:radial-gradient(320px circle at var(--spot-x,50%) var(--spot-y,50%),#6adeff13,transparent 68%);opacity:0;transition:opacity .4s;pointer-events:none}
.world-grid article>*{position:relative}
.world-grid article:hover{border-color:#79caee80;box-shadow:0 15px 45px #02071255;transform:translateY(-5px)}
.world-grid article:hover::before{opacity:1}
.world-grid article.motion-reveal.is-visible:hover{transform:translateY(-5px)}
.feature-num{display:inline-flex;align-items:center;gap:11px;margin-bottom:22px}
.feature-num::after{content:'';width:26px;height:1px;background:#b6ef8c66}
.feature-tags>span{border-radius:6px;background:#22304785;border-color:#48618266}
.residents{position:relative;overflow:hidden;background:radial-gradient(ellipse at 15% 80%,#4397c24d,transparent 65%),linear-gradient(130deg,#172447,#352563);box-shadow:0 22px 75px #0003,inset 0 1px 0 #cce8ff17}
.resident-halo::after{content:'';position:absolute;inset:-20px;border:1px solid #9ce5ff1c;border-radius:50%;border-top-color:#8fdcf16b;animation:haloTurn 25s linear infinite}
.resident-switch button{transition:background .25s,border-color .25s,transform .25s}.resident-switch button:hover{transform:translateY(-3px);border-color:#94def6}
.match-flow{margin-top:23px;padding:17px 18px 19px;border:1px solid #344f7080;border-radius:14px;background:linear-gradient(145deg,#18253d,#10182b);box-shadow:inset 0 1px 0 #cde9ff09}
.flow-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px;color:#96afd0;font-size:8px;font-weight:950;letter-spacing:.1em}
.flow-caption{color:#d2e3fb;font-size:10px;letter-spacing:0}
.flow-row{display:flex;align-items:center;gap:12px;--flow-color:#ff9f89;--flow-glow:#ff937329;--flow-delay:0s}
.flow-guard{margin-top:13px;--flow-color:#91e3fc;--flow-glow:#6adeff2a;--flow-delay:-3.5s}
.tile-triplet{display:flex;gap:5px;flex:0 0 auto}
.flow-tile{width:35px;height:35px;display:grid;place-items:center;border:1px solid #e5c1ad26;border-radius:7px;background:#402b35;animation:tileCharge 7s ease-in-out infinite;animation-delay:var(--flow-delay)}
.flow-guard .flow-tile{background:#203d52;border-color:#baeaff26}
.flow-tile svg{width:20px;height:20px;fill:var(--flow-color);filter:drop-shadow(0 0 6px var(--flow-glow))}
.flow-beam{flex:1;min-width:20px;display:flex;align-items:center;max-width:80px}
.flow-beam svg{width:100%;height:20px;fill:none;stroke:var(--flow-color);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.beam-track{opacity:.22}.beam-energy{stroke-dasharray:13 70;animation:beamTravel 7s linear infinite;animation-delay:var(--flow-delay)}
.flow-meter{width:92px;flex:0 0 92px}.flow-meter-label{font-size:11px;font-weight:850;color:var(--flow-color);display:block;margin-bottom:5px}
.meter-track{height:6px;display:block;background:#253652;border:1px solid #556e8622;border-radius:99px;overflow:hidden}
.meter-track i{display:block;width:100%;height:100%;transform:scaleX(.3);transform-origin:left;border-radius:99px;background:var(--flow-color);box-shadow:0 0 12px var(--flow-color);animation:meterBuild 7s var(--motion-ease) infinite;animation-delay:var(--flow-delay)}
.roadmap-track li{transition:border-color .3s}.roadmap-track li:hover{border-color:var(--blue)}
.road-dot{transition:box-shadow .3s,border-color .3s}.roadmap-track li:hover .road-dot{border-color:var(--blue);box-shadow:0 0 0 5px #6adeff15,0 0 20px #6adeff33}
.contact{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 26px 65px #0004,inset 0 1px 0 #d9e5ff22}
.contact::before{content:'';position:absolute;width:75%;height:110%;right:-25%;top:-50%;border:1px solid #ccbdff21;border-radius:50%;transform:rotate(-20deg);pointer-events:none;z-index:-1}
.contact::after{content:'';position:absolute;width:60%;height:130%;right:-15%;top:-65%;border:1px solid #ccbdff14;border-radius:50%;transform:rotate(-20deg);pointer-events:none;z-index:-1}
.contact-critter{transition:transform .6s var(--motion-ease)}.contact:hover .contact-critter{transform:translateY(-7px) rotate(12deg)}
dialog[open]{animation:openGallery .3s var(--motion-ease) both}dialog[open]::backdrop{animation:fadeBackdrop .3s ease-out both}
.motion-toggle{position:fixed;right:19px;bottom:19px;z-index:10;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:11px 15px;border:1px solid #718dbb55;border-radius:999px;background:#101c32e8;color:#c9d9f3;backdrop-filter:blur(15px);box-shadow:0 8px 25px #0003;font-size:10px;font-weight:850;transition:background .2s,border-color .2s}
.motion-toggle[hidden]{display:none}.motion-toggle svg{width:16px;height:16px;color:var(--blue)}.motion-toggle:hover{background:#213454;border-color:#9fdcff88}
body:has(dialog[open]) .motion-toggle{opacity:0;pointer-events:none}
.motion-outside *,.motion-outside::before,.motion-outside::after,.motion-page-hidden *,.motion-page-hidden *::before,.motion-page-hidden *::after{animation-play-state:paused!important}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after,html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,html[data-motion="reduced"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion="off"],html[data-motion="reduced"]{scroll-behavior:auto!important}
html[data-motion="off"] .scene-layer,html[data-motion="reduced"] .scene-layer{transform:none}
html[data-motion="off"] .motion-reveal,html[data-motion="reduced"] .motion-reveal{opacity:1;transform:none}
@keyframes enterScene{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes enterArtwork{from{opacity:0;transform:translateY(15px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes auroraDrift{from{transform:translate3d(-2%,0,0) scale(.95)}to{transform:translate3d(3%,-3%,0) scale(1.08)}}
@keyframes orbitDrift{from{transform:rotate(-18deg) scaleY(.78)}to{transform:rotate(342deg) scaleY(.78)}}
@keyframes starDrift{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.7;transform:translateY(-7px)}}
@keyframes foxIdle{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-7px) rotate(-7deg)}}
@keyframes islandIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes sparkleFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(10deg)}}
@keyframes diamondFloat{0%,100%{transform:translateY(0) rotate(33deg)}50%{transform:translateY(-12px) rotate(45deg)}}
@keyframes pieceFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(9px) rotate(6deg)}}
@keyframes dropFloat{0%,100%{transform:translateY(0) rotate(-45deg)}50%{transform:translateY(-9px) rotate(-34deg)}}
@keyframes tickerTravel{to{transform:translateX(-50%)}}
@keyframes haloTurn{to{transform:rotate(360deg)}}
@keyframes tileCharge{0%,12%,58%,100%{transform:translateY(0);box-shadow:0 0 0 transparent}24%,34%{transform:translateY(-3px);box-shadow:0 0 18px var(--flow-glow)}40%{transform:translateY(0)}}
@keyframes beamTravel{0%,25%{stroke-dashoffset:85;opacity:0}30%{opacity:1}49%{stroke-dashoffset:0;opacity:1}55%,100%{stroke-dashoffset:-75;opacity:0}}
@keyframes meterBuild{0%,28%{transform:scaleX(.3)}48%,70%{transform:scaleX(.94)}90%,100%{transform:scaleX(.3)}}
@keyframes bonkWave{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:.7}100%{opacity:0;transform:translate(-50%,-50%) scale(3)}}
@keyframes bonkWord{0%{opacity:0;transform:translate(-50%,-40%) rotate(-12deg) scale(.6)}20%,50%{opacity:1;transform:translate(-50%,-80%) rotate(-8deg) scale(1)}100%{opacity:0;transform:translate(-50%,-140%) rotate(-5deg) scale(.92)}}
@keyframes bonkSpark{0%{opacity:0;transform:translate(0,0) rotate(45deg) scale(.2)}18%{opacity:1}100%{opacity:0;transform:translate(var(--burst-x),var(--burst-y)) rotate(150deg) scale(.2)}}
@keyframes foxBonk{0%,100%{transform:translateY(0) rotate(-9deg)}30%{transform:translateY(-18px) rotate(-3deg) scale(1.03)}65%{transform:translateY(2px) rotate(-10deg)}}
@keyframes axolotlBonk{0%,100%{transform:translateY(0) rotate(14deg)}38%{transform:translateY(-22px) rotate(19deg) scale(1.02)}70%{transform:translateY(0) rotate(11deg)}}
@keyframes openGallery{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeBackdrop{from{opacity:0}to{opacity:1}}
@media(max-width:1100px){.flow-row{gap:8px}.flow-tile{width:31px;height:31px}.flow-meter{width:80px;flex-basis:80px}.match-flow{padding:15px}.world-grid article,.world-grid article:nth-child(even){padding:25px}}
@media(max-width:760px){.scene-atmosphere{inset:-6% -3% 0}.scene-layer{will-change:auto}.scene-fox,.scene-axolotl,.scene-landscape{transform:none}.scene-stars i:nth-child(n+7){display:none}.scene-orbit{stroke-width:1.4;opacity:.7}.bonk-sticker{min-height:58px}.bonk-pop{font-size:38px}.world-grid{gap:14px}.world-grid article,.world-grid article:nth-child(even),.world-grid article:nth-child(-n+2){border:1px solid #36496785;padding:25px}.motion-toggle{right:13px;bottom:13px;padding:10px 13px;font-size:10px}.ticker-group{gap:30px;padding:0 16px}.flow-row{gap:13px}.flow-tile{width:35px;height:35px}.flow-meter{width:95px;flex-basis:95px}.match-flow{padding:17px}.bonk-wave{width:85px;height:85px}}
@media(max-width:360px){.flow-tile{width:29px;height:29px}.flow-row{gap:8px}.flow-meter{width:76px;flex-basis:76px}.flow-heading{font-size:7px}.flow-caption{font-size:9px}.world-grid article,.world-grid article:nth-child(even){padding:22px}.hero-art{margin-top:34px}.game-stats>div{padding-left:13px;padding-right:13px}.game-stats dt{font-size:18px}.motion-toggle{font-size:9px}.bonk-sticker{min-height:55px}.bonk-pop{font-size:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scene-layer{transform:none!important}.motion-reveal{opacity:1!important;transform:none!important}.hero-art,.hero-copy>*{opacity:1!important}.scene-stars{opacity:.5}}