/* Galaxy Kid · ornament magic: animated hero, orbiting ornaments, scroll reveals, the photo "portal" + transporter beam, the
   launch-ready card, the friendly astronaut, the rocket launch and the proof "arrival". Transform/opacity only; reduced motion = still. */
.mg-fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:300}
/* hero */
.magic-hero{position:relative;overflow:hidden;isolation:isolate;background:#03081a}
.magic-hero .stars{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.magic-hero .nebula{position:absolute;top:-240px;left:-20%;width:140%;height:1500px;z-index:-2;background:
  radial-gradient(40% 35% at 78% 30%,rgba(169,139,255,.42),transparent 70%),radial-gradient(35% 30% at 18% 78%,rgba(255,47,208,.28),transparent 70%),
  radial-gradient(30% 25% at 55% 60%,rgba(127,227,255,.16),transparent 70%),#03081a;animation:mgNeb 28s ease-in-out infinite alternate}
@keyframes mgNeb{to{transform:translate3d(-3%,2%,0) scale(1.06) rotate(2deg)}}
.magic-hero h1 .wig{display:inline-block;animation:mgWig 3.2s ease-in-out infinite}
@keyframes mgWig{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg) translateY(-4px)}}
.magic-hero .hero-copy{position:relative;z-index:2}
.magic-hero .lead{text-shadow:0 2px 12px rgba(0,0,0,.6)}
/* orbit */
.orbit{position:relative;height:360px;margin:0 auto;width:100%;max-width:560px}
@media(min-width:900px){.orbit{height:560px}}
.orbit .planet{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffd2f3 0,#ff2fd0 22%,#8a3cff 56%,#1c1050 82%);box-shadow:0 0 60px rgba(255,47,208,.55),0 0 140px rgba(138,60,255,.45),inset -18px -22px 40px rgba(0,0,0,.45);
}
.orbit .planet::before{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,47,208,.45),transparent);animation:mgGlow 5s ease-in-out infinite;pointer-events:none}
.orbit .planet::after{content:"";position:absolute;left:-46%;top:42%;width:192%;height:18%;border-radius:50%;border:3px solid rgba(127,227,255,.55);transform:rotate(-14deg);box-shadow:0 0 18px rgba(127,227,255,.4)}
.orbit .planet b{position:absolute;inset:0;display:grid;place-items:center;font:700 13px/1.1 var(--display);letter-spacing:.12em;color:#fff;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.6)}
@media(min-width:900px){.orbit .planet{width:190px;height:190px;margin:-95px 0 0 -95px}.orbit .planet b{font-size:17px}}
@keyframes mgGlow{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:.9;transform:scale(1.05)}}
.orbit .ring{position:absolute;left:50%;top:50%;width:88%;height:44%;transform:translate(-50%,-50%) rotate(-8deg);border-radius:50%;border:1px dashed rgba(169,139,255,.35)}
/* each satellite: x and y swing on the same period, a quarter apart → an ellipse; scale + z-index follow y for depth */
.sat{position:absolute;left:50%;top:50%;width:0;height:0;animation:mgX 18s ease-in-out infinite alternate}
.sat .sy{animation:mgY 18s ease-in-out infinite alternate;animation-delay:-9s}
.sat img{max-width:none;width:96px;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 24px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,210,243,.25));animation:mgBob 4s ease-in-out infinite}
@media(min-width:900px){.sat img{width:150px}}
.sat.s2{animation-delay:-6s}.sat.s2 .sy{animation-delay:-15s}.sat.s2 img{animation-delay:-1.3s}
.sat.s3{animation-delay:-12s}.sat.s3 .sy{animation-delay:-21s}.sat.s3 img{animation-delay:-2.6s}
@keyframes mgX{from{transform:translateX(-31vw)}to{transform:translateX(31vw)}}
@media(min-width:600px){@keyframes mgX{from{transform:translateX(-215px)}to{transform:translateX(215px)}}}
@media(min-width:900px){@keyframes mgX{from{transform:translateX(-235px)}to{transform:translateX(235px)}}}
@keyframes mgY{from{transform:translateY(-95px) scale(.7)}to{transform:translateY(70px) scale(1.05)}}
@media(min-width:900px){@keyframes mgY{from{transform:translateY(-150px) scale(.7)}to{transform:translateY(110px) scale(1.05)}}}
@keyframes mgBob{50%{transform:translate(-50%,-56%) rotate(3deg)}}
.orbit .cap{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font:700 10px/1.3 var(--body);color:#aab3cc;letter-spacing:.04em}
/* scroll reveal (only when JS turned it on) */
@media (prefers-reduced-motion: no-preference){.mg-js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.mg-js .rv.in-view{opacity:1;transform:none}}
/* sound toggle */
.sndbtn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:999px;padding:6px 12px;font:700 13px var(--body);cursor:pointer;color:#e9ecf8}
.sndbtn[aria-pressed="true"]{border-color:var(--cyan);color:#fff}
/* photo portal */
.portal-drop{position:relative;border-radius:22px!important;background:radial-gradient(120% 90% at 50% 0%,rgba(138,60,255,.22),transparent 60%),rgba(255,255,255,.02)!important;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.portal-drop::before{content:"";position:absolute;left:50%;top:-30px;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:conic-gradient(from 0deg,#ff2fd0,#7fe3ff,#a98bff,#f5bd2a,#ff2fd0);opacity:.16;filter:blur(18px);animation:mgSpin 8s linear infinite;pointer-events:none}
.portal-drop.over{border-color:var(--cyan)!important;box-shadow:0 0 0 3px rgba(127,227,255,.35),0 0 40px rgba(127,227,255,.35);transform:scale(1.015)}
.portal-drop .pbtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px;position:relative;z-index:2}
.portal-drop .pbtns label{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line2);font:700 14px var(--body);cursor:pointer}
.portal-drop .pbtns label:hover{background:rgba(255,255,255,.12)}
.portal-drop .pbtns input{position:absolute;inset:auto;width:1px;height:1px;opacity:0;pointer-events:none}
.drop.has.scanning{align-items:center;text-align:center}.portal-drop .dz{font-size:12px;opacity:.75}
@media(pointer:coarse){.portal-drop .dz{display:none}}
.portal-drop .astro{margin-top:10px;text-align:left;position:relative;z-index:2}
.drop.has .ready,.drop.has .astro{margin-bottom:8px}
.portal-drop .ttl,.portal-drop .hint{position:relative;z-index:2}
@keyframes mgSpin{to{transform:rotate(360deg)}}
/* the transporter */
.tport{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0}
.tport .ring{position:relative;width:170px;height:170px;border-radius:50%;padding:6px;background:conic-gradient(from 0deg,#ff2fd0,#7fe3ff,#a98bff,#f5bd2a,#ff2fd0);animation:mgSpin 2.4s linear infinite}
.tport .ring>div{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#0a1430;animation:mgSpin 2.4s linear infinite reverse}
.tport img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}
.tport .beam{position:absolute;left:-10%;right:-10%;height:34%;top:-34%;background:linear-gradient(180deg,transparent,rgba(127,227,255,.15) 40%,rgba(127,227,255,.75) 50%,rgba(127,227,255,.15) 60%,transparent);mix-blend-mode:screen;animation:mgBeam 1.6s ease-in-out infinite}
.tport .grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(127,227,255,.12) 0 1px,transparent 1px 9px);mix-blend-mode:screen}
.tport .sp{position:absolute;width:10px;height:10px;color:#fff;font-size:14px;line-height:10px;animation:mgTw 1.4s ease-in-out infinite}
.tport .sp:nth-child(4){left:14%;top:20%}.tport .sp:nth-child(5){right:16%;top:34%;animation-delay:-.5s;color:#ffd2f3}.tport .sp:nth-child(6){left:30%;bottom:16%;animation-delay:-.9s;color:#7fe3ff}.tport .sp:nth-child(7){right:28%;bottom:24%;animation-delay:-1.2s;color:#f5bd2a}
.tport .status{font:800 16px/1.3 var(--body);color:#fff;text-align:center;min-height:1.3em;text-shadow:0 0 12px rgba(127,227,255,.6)}
.tport .bar{width:170px;height:6px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}.tport .bar i{display:block;height:100%;width:40%;border-radius:9px;background:linear-gradient(90deg,#ff2fd0,#7fe3ff);animation:mgBar 1.3s ease-in-out infinite}
@keyframes mgBeam{0%{top:-34%}100%{top:100%}}
@keyframes mgTw{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.3) rotate(90deg)}}
@keyframes mgBar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
/* launch-ready + astronaut */
.ready{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(47,210,122,.18),rgba(127,227,255,.12));border:1px solid rgba(47,210,122,.5);animation:mgPop .5s cubic-bezier(.2,1.4,.4,1)}
.ready .ico{font-size:34px;line-height:1}.ready b{display:block;font:800 17px var(--body);color:#fff}.ready small{color:#cfe9da}
.astro{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:rgba(255,181,71,.1);border:1px solid rgba(255,181,71,.45);animation:mgPop .5s cubic-bezier(.2,1.4,.4,1)}
.astro{font-size:14px;line-height:1.45}.astro .man{font-size:40px;line-height:1;animation:mgFloat 3s ease-in-out infinite}.astro b{display:block;font:800 16px/1.3 var(--body);color:#fff;margin-bottom:4px}
@keyframes mgPop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes mgFloat{50%{transform:translateY(-6px) rotate(-6deg)}}
/* rocket launch */
.mg-launch{position:relative;text-align:center;margin:10px 0 18px}
.mg-sky{position:relative;height:260px;border-radius:22px;overflow:hidden;background:radial-gradient(80% 70% at 50% 100%,rgba(255,47,208,.25),transparent 60%),radial-gradient(60% 60% at 50% 20%,rgba(138,60,255,.3),transparent 70%),#040a1c;border:1px solid var(--line2)}
.mg-sky canvas{position:absolute;inset:0;width:100%;height:100%}
.mg-rocket{position:absolute;left:50%;bottom:18px;width:80px;margin-left:-40px;animation:mgLift 3.2s cubic-bezier(.55,0,.75,.2) .6s forwards}
.mg-body{font-size:64px;line-height:1;transform:rotate(-45deg);filter:drop-shadow(0 0 16px rgba(255,255,255,.35))}
.mg-flame{position:absolute;left:50%;top:62px;width:22px;height:46px;margin-left:-11px;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;background:radial-gradient(circle at 50% 30%,#fff,#f5bd2a 40%,#ff2fd0 75%,transparent);animation:mgFlame .12s ease-in-out infinite alternate;filter:blur(1px)}
.mg-smoke{position:absolute;left:50%;top:84px;width:120px;height:60px;margin-left:-60px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);animation:mgSmoke 1.6s ease-out .6s infinite}
@keyframes mgLift{0%{transform:translateY(0)}12%{transform:translateY(4px)}100%{transform:translateY(-420px)}}
@keyframes mgFlame{to{transform:scaleY(1.25) scaleX(.85)}}
@keyframes mgSmoke{from{transform:scale(.4);opacity:.9}to{transform:scale(1.8) translateY(30px);opacity:0}}
.mg-launch-text{font:800 20px/1.3 var(--body);margin:14px 0 0;color:#fff}
.mg-overlay{position:fixed;inset:0;z-index:250;display:grid;place-items:center;background:rgba(3,8,26,.88);padding:20px}.mg-overlay .mg-launch{width:min(520px,100%)}
/* proof arrival */
.arrive{position:relative;text-align:center;padding:18px 16px;border-radius:22px;margin:0 0 16px;overflow:hidden;background:radial-gradient(70% 90% at 50% 0%,rgba(255,47,208,.28),transparent 70%),#081130;border:1px solid var(--line2)}
.arrive canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.arrive h2{position:relative;font-size:clamp(26px,6vw,40px);transform:scale(.6);opacity:0;transition:transform .8s cubic-bezier(.2,1.5,.4,1),opacity .6s}
.arrive p{position:relative;margin:6px 0 0;color:#dfe4f5;opacity:0;transition:opacity .6s .4s}
.arrive.arrived h2{transform:none;opacity:1}.arrive.arrived p{opacity:1}
.proof .proof-img img{transition:transform .9s cubic-bezier(.2,1.3,.4,1),filter .9s,opacity .6s}
.mg-js .arrive:not(.arrived)~.proof .proof-img img{transform:scale(.4) rotate(-8deg);filter:blur(10px) brightness(2);opacity:0}
.bhead{display:flex;align-items:center;justify-content:space-between;gap:10px}.bhead .eye{margin:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .sat,.sat .sy{animation:none!important}.sat img{animation:none}
  .orbit .sat.s1{left:18%;top:40%}.orbit .sat.s2{left:50%;top:82%}.orbit .sat.s3{left:82%;top:40%}
  .mg-rocket{animation:none!important;bottom:60px}
}

.boothbox{border-color:rgba(127,227,255,.5);background:linear-gradient(135deg,rgba(127,227,255,.12),rgba(255,47,208,.1))}
/* below-the-fold bands skip layout/paint until they come near the screen (faster first render on phones) */
.rv.band{content-visibility:auto;contain-intrinsic-size:auto 900px}.builder-wrap{content-visibility:auto;contain-intrinsic-size:auto 1800px}