/* Twelve extra motions: grid drift, comet glint, outline breath, arrow launch,
   phone wobble, pixel jump, spark twinkle, friend bounce, chaos streaks,
   label swing, principle line growth, and the contact plus pirouette. */
.home-playful .hero-art{animation:grid-drift 18s linear infinite;translate:var(--parallax-x,0px) var(--parallax-y,0px);transition:translate .4s ease-out}
.home-playful .orbit::before{animation:comet-glint 4s ease-in-out infinite}
.home-playful .orbit-two::before{animation-delay:-2s}
.home-playful .hero .outline{animation:outline-breathe 6s ease-in-out infinite}
.home-playful .button:hover span:last-child{animation:arrow-launch .8s ease-out infinite}
.home-playful .phone{animation:phone-wobble 7s ease-in-out infinite}
.home-playful .pixel-plus{animation:pixel-jump 3.5s ease-in-out infinite}
.home-playful .pixel-world i{animation:spark-twinkle 4s ease-in-out infinite}
.home-playful .pixel-world i:nth-child(2){animation-delay:-1s}.home-playful .pixel-world i:nth-child(3){animation-delay:-2s}.home-playful .pixel-world i:nth-child(4){animation-delay:-3s}
.home-playful .friend{animation:friend-bounce 4s ease-in-out infinite;--friend-angle:-17deg;--friend-y:0px}
.home-playful .friend-two{--friend-angle:10deg;--friend-y:-24px;animation-delay:-1.3s}.home-playful .friend-three{--friend-angle:23deg;--friend-y:15px;animation-delay:-2.6s}
.home-playful .chaos-line{animation:chaos-streak 3s ease-in-out infinite}.home-playful .chaos-two{animation-delay:-1.5s}
.home-playful .float-tag{animation:label-swing 8s ease-in-out infinite;transform-origin:left center}.home-playful .pc-art .float-tag{animation-direction:reverse}
.home-playful .principles>div{position:relative;border-top-color:#ccc}.home-playful .principles>div::before{content:'';position:absolute;left:0;top:-1px;width:100%;height:1px;background:#111;transform-origin:left;animation:principle-line 8s ease-in-out infinite}.home-playful .principles>div:nth-child(2)::before{animation-delay:-2s}.home-playful .principles>div:nth-child(3)::before{animation-delay:-4s}
.home-playful .contact h2 span{animation:contact-pirouette 8s cubic-bezier(.65,0,.35,1) infinite}
.home-playful .project-visual{transform:perspective(900px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg));transition:transform .35s ease-out}
.home-playful.motion-ready .reveal-block{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.home-playful.motion-ready .reveal-block.is-visible{opacity:1;transform:translateY(0)}
.home-playful .out-of-view *, .home-playful .out-of-view::before{animation-play-state:paused!important}
@keyframes grid-drift{to{background-position:28px 14px}}
@keyframes comet-glint{0%,100%{box-shadow:0 0 0 4px #fff;scale:1}50%{box-shadow:0 0 0 7px #fff,0 0 0 8px #ccc;scale:1.2}}
@keyframes outline-breathe{0%,100%{color:#fff}50%{color:#efefed}}
@keyframes arrow-launch{0%,100%{transform:translate(0)}50%{transform:translate(5px,5px)}}
@keyframes phone-wobble{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-9px) rotate(-6deg)}}
@keyframes pixel-jump{0%,45%,100%{transform:translateY(0) scale(1)}55%{transform:translateY(3px) scale(1.1,.85)}72%{transform:translateY(-15px) scale(.95,1.1)}85%{transform:translateY(0) scale(1.07,.95)}}
@keyframes spark-twinkle{0%,65%,100%{transform:rotate(0);background:transparent}80%{transform:rotate(90deg);background:#111}}
@keyframes friend-bounce{0%,50%,100%{transform:translateY(var(--friend-y)) rotate(var(--friend-angle))}65%{transform:translateY(calc(var(--friend-y) - 12px)) rotate(calc(var(--friend-angle) + 8deg))}82%{transform:translateY(calc(var(--friend-y) + 3px)) rotate(var(--friend-angle))}}
@keyframes chaos-streak{0%,45%,100%{opacity:.3;scale:.8}65%{opacity:1;scale:1.2}}
@keyframes label-swing{0%,100%{rotate:-3deg}50%{rotate:4deg}}
@keyframes principle-line{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}
@keyframes contact-pirouette{0%,45%{transform:rotate(-13deg)}75%,100%{transform:rotate(347deg)}}
.secret-node{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;position:relative}.secret-node:focus-visible{outline:2px dashed currentColor;outline-offset:5px}.secret-node:hover{filter:drop-shadow(2px 2px 0 #bbb)}.secret-node::after{content:'✧';font-size:10px;position:absolute;right:-13px;top:-7px;opacity:0;transition:opacity .3s}.secret-node:hover::after,.secret-node:focus-visible::after{opacity:1}.secret-catalog{position:absolute;right:20px;top:20px;font-size:26px}.catalog-page{position:relative}
.secret-dialog{width:min(540px,94vw);max-height:90dvh;overflow:auto;border:2px solid #111;background:#fff;color:#111;padding:25px;box-shadow:12px 12px 0 #1112}.secret-dialog::backdrop{background:#111a;backdrop-filter:blur(5px)}.secret-head{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;letter-spacing:1px}.secret-close{border:1px solid #111;width:32px;height:32px;background:#fff;font-size:22px;cursor:pointer}.secret-dialog h2{font-size:32px;margin:25px 0 12px}.secret-dialog p{font-size:13px;line-height:1.7;color:#555}.secret-stage{min-height:230px;background:#f2f2f0;position:relative;margin:20px 0;overflow:hidden;display:flex;align-items:center;justify-content:center}.secret-action{display:block;margin:15px auto 0;border:1px solid #111;background:#111;color:white;padding:12px 18px;font:inherit;font-size:12px;cursor:pointer}.secret-hint{min-height:25px;font-size:12px;text-align:center}.egg-solar{width:140px;height:140px;border:1px solid #777;border-radius:50%;position:relative;animation:egg-orbit 8s linear infinite}.egg-solar::before{content:'+';position:absolute;top:-22px;left:48px;font-weight:800;font-size:48px}.egg-solar::after{content:'99';position:absolute;font-size:48px;font-weight:800;left:40px;top:42px;animation:egg-orbit 8s linear infinite reverse}.egg-solar.warp{animation-duration:.9s}.egg-solar.warp::after{animation-duration:.9s}.egg-mines{display:grid;grid-template-columns:repeat(3,60px);gap:8px}.egg-mines button{height:60px;border:2px solid #111;background:#fff;font-size:24px;font-weight:800;cursor:pointer}.egg-mines button:disabled{color:#111;background:#ddd}.egg-friends{display:flex;gap:15px}.egg-friends button{width:75px;height:90px;border:2px solid #111;border-radius:27px 27px 7px 7px;background:#fff;font-size:28px;cursor:pointer}.egg-friends button.dancing{animation:egg-dance .65s ease-in-out infinite alternate}.egg-friends button:nth-child(2){background:#111;color:#fff;animation-delay:-.3s}.egg-friends button:nth-child(3){animation-delay:-.15s}.egg-catch{width:100%;height:250px;position:relative}.egg-target{position:absolute;border:0;background:transparent;font-size:38px;font-weight:800;cursor:pointer;padding:8px}.egg-cubes{display:grid;grid-template-columns:repeat(3,48px);gap:4px;transform:rotate(-15deg) skew(10deg)}.egg-cubes span{height:48px;background:#111;border:1px solid #555;box-shadow:6px 6px 0 #aaa;animation:egg-cube-wave 2s ease-in-out infinite;animation-delay:calc(var(--i) * -.13s)}.egg-cubes.reverse span{animation-direction:reverse;background:#fff;border:2px solid #111}.secret-progress{font-size:10px;color:#777;margin-top:18px}.secret-open{overflow:hidden}@keyframes egg-orbit{to{transform:rotate(360deg)}}@keyframes egg-dance{to{transform:translateY(-18px) rotate(12deg)}}@keyframes egg-cube-wave{0%,100%{translate:0 0}50%{translate:0 -20px}}
@media(max-width:650px){.secret-dialog{padding:20px}.secret-dialog h2{font-size:28px}.secret-stage{min-height:210px}}
@media(prefers-reduced-motion:reduce){.home-playful .hero-art{translate:none}.home-playful.motion-ready .reveal-block{opacity:1;transform:none;transition:none}.secret-stage *{animation:none!important}.secret-node::after{transition:none}}
/* Ten additional game-themed effects. */
/* 1. Header underline travels on hover. */
.header nav a{position:relative}.header nav a::after{content:'';position:absolute;bottom:-7px;left:0;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.8,.2,1)}.header nav a:hover::after,.header nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
/* 2. The main call to action gets a moving highlight. */
.button{position:relative;overflow:hidden}.button::before{content:'';position:absolute;inset:-50% auto -50% -40%;width:25%;background:#ffffff30;transform:skewX(-20deg);pointer-events:none}.button:hover::before{animation:bonus-button-sweep 1.3s ease-out}
/* 3. The phone platform stretches before the pixel lands. */
.home-playful .platform{transform-origin:center;animation:bonus-platform 3.5s ease-in-out infinite}
/* 4. Friends blink at staggered intervals. */
.home-playful .friend span{display:block;animation:bonus-blink 6s ease-in-out infinite;transform-origin:center}.home-playful .friend-two span{animation-delay:-2s}.home-playful .friend-three span{animation-delay:-4s}
/* 5. Decorative corner signs make quarter-turns. */
.home-playful .visual-plus{animation:bonus-quarter-turn 9s cubic-bezier(.6,0,.4,1) infinite}.home-playful .pc-art .visual-plus{animation-delay:-4.5s}
/* 6. The studio underline draws itself on hover. */
.underlined{position:relative;text-decoration:none}.underlined::after{content:'';position:absolute;bottom:-6px;left:0;width:100%;height:2px;background:currentColor;transform-origin:left;transition:transform .5s}.studio-content:hover .underlined::after{animation:bonus-underline .8s ease-out}
/* 7. Email arrow springs toward the outgoing link. */
.email:hover span{animation:bonus-email-arrow .8s cubic-bezier(.2,.8,.2,1)}
/* 8. Screenshot zoom badges ripple on hover. */
.zoom-marker::after{content:'';position:absolute;inset:0;border:1px solid #fff;border-radius:50%;opacity:0}.screenshot-open:hover .zoom-marker::after{animation:bonus-zoom-ripple 1.5s ease-out infinite}
/* 9. Orbit feature numbers hop once on hover. */
.feature-grid article:hover>.eyebrow{animation:bonus-number-hop .65s ease-out}
/* 10. FAQ answers enter softly when opened. */
.orbit-faq details[open]>p{animation:bonus-answer-in .35s ease-out}
@keyframes bonus-button-sweep{from{left:-40%}to{left:140%}}
@keyframes bonus-platform{0%,55%,100%{transform:scaleX(1)}70%{transform:scaleX(.8)}85%{transform:scaleX(1.2)}}
@keyframes bonus-blink{0%,65%,71%,100%{transform:scaleY(1)}68%{transform:scaleY(.08)}}
@keyframes bonus-quarter-turn{0%,40%{transform:rotate(0)}55%,85%{transform:rotate(90deg)}100%{transform:rotate(180deg)}}
@keyframes bonus-underline{0%{transform:scaleX(1)}35%{transform:scaleX(.08)}100%{transform:scaleX(1)}}
@keyframes bonus-email-arrow{0%,100%{transform:translate(0)}40%{transform:translate(5px,-5px)}70%{transform:translate(-2px,2px)}}
@keyframes bonus-zoom-ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.8);opacity:0}}
@keyframes bonus-number-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}70%{transform:translateY(2px)}}
@keyframes bonus-answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.header nav a::after,.underlined::after{transition:none}.button::before,.platform,.friend span,.visual-plus,.underlined::after,.email span,.zoom-marker::after,.feature-grid article>.eyebrow,.orbit-faq details>p{animation:none!important}}