/* Hero FX — lazy loaded after core CSS */
.hero-fx-blobs{width:100%;height:100%;opacity:1}.blob{transform-box:fill-box;transform-origin:center;will-change:transform}
/* CSS orb fallback for iOS — no SVG filter, pure GPU transforms */
.hero-fx-blobs-css{display:none}
@supports(-webkit-touch-callout:none){.hero-fx-blobs-svg{display:none !important}.hero-fx-blobs-css{display:block}}
.orb{position:absolute;border-radius:50%;will-change:transform}
.orb-1{width:280px;height:280px;bottom:10%;left:10%;background:radial-gradient(circle,var(--c3) 0%,transparent 70%);opacity:.35;animation:orbFloat1 16s ease-in-out infinite}
.orb-2{width:240px;height:240px;top:8%;left:40%;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);opacity:.3;animation:orbFloat2 20s ease-in-out infinite}
.orb-3{width:300px;height:300px;bottom:15%;right:5%;background:radial-gradient(circle,var(--c4) 0%,transparent 70%);opacity:.3;animation:orbFloat3 18s ease-in-out infinite}
@keyframes orbFloat1{0%,to{transform:translate3d(0,0,0) scale(1)}25%{transform:translate3d(0,-80px,0) scale(1.1)}50%{transform:translate3d(40px,-150px,0) scale(.93)}75%{transform:translate3d(-20px,-60px,0) scale(1.07)}}
@keyframes orbFloat2{0%,to{transform:translate3d(0,0,0) scale(1)}30%{transform:translate3d(-20px,100px,0) scale(1.12)}60%{transform:translate3d(20px,150px,0) scale(.92)}}
@keyframes orbFloat3{0%,to{transform:translate3d(0,0,0) scale(1)}35%{transform:translate3d(-20px,-100px,0) scale(.9)}65%{transform:translate3d(20px,-150px,0) scale(1.07)}}
body.chameleon-active .blob-1{animation:lava-1 16s ease-in-out infinite}body.chameleon-active .blob-2{animation:lava-2 20s ease-in-out infinite}body.chameleon-active .blob-3{animation:lava-3 18s ease-in-out infinite}
@keyframes lava-1{0%{transform:translate(0,0) scale(1)}25%{transform:translate(0,-200px) scale(1.1)}50%{transform:translate(100px,-380px) scale(.93)}75%{transform:translate(-50px,-150px) scale(1.07)}to{transform:translate(0,0) scale(1)}}
@keyframes lava-2{0%{transform:translate(0,0) scale(1)}30%{transform:translate(-50px,250px) scale(1.12)}60%{transform:translate(50px,380px) scale(.92)}to{transform:translate(0,0) scale(1)}}
@keyframes lava-3{0%{transform:translate(0,0) scale(1)}35%{transform:translate(-50px,-250px) scale(.9)}65%{transform:translate(50px,-370px) scale(1.07)}to{transform:translate(0,0) scale(1)}}
body.tamed .blob-1{animation:blob-1 22s ease-in-out infinite}body.tamed .blob-2{animation:blob-2 26s ease-in-out -8s infinite}body.tamed .blob-3{animation:blob-3 24s ease-in-out -14s infinite}
@keyframes blob-1{0%,to{transform:translate(0,0) scale(1)}50%{transform:translate(100px,-100px) scale(1.1)}}
@keyframes blob-2{0%,to{transform:translate(0,0) scale(1)}50%{transform:translate(50px,180px) scale(1.12)}}
@keyframes blob-3{0%,to{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,-130px) scale(.93)}}
body.fx-blobs .hero-fx-blobs,body.fx-fire .hero-fx-fire,body.fx-dust .hero-fx-dust,body.fx-plates .hero-fx-plates,body.fx-electric .hero-fx-electric,body.fx-shimmer .hero-fx-shimmer,body.fx-steam .hero-fx-steam,body.fx-oil .hero-fx-oil{opacity:1;transition:opacity .8s var(--ease-out)}
/* iOS perf: stop animations on inactive FX layers — opacity:0 still composites on iOS */
body:not(.fx-fire) .fire-glow-layer{animation:none}
body:not(.fx-dust) .arrival-blob,body:not(.fx-dust) .arrival-glass{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body:not(.fx-shimmer) .twinkle{animation:none}
body:not(.fx-steam) .steam-puff{animation:none}
body:not(.fx-plates) .pulse-ring{animation:none}
body:not(.fx-electric) .elec-flicker{animation:none}
body:not(.fx-oil) .headlight{animation:none}
.fire-glow-layer{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(255,147,41,.45) 0%,rgba(255,120,30,.25) 25%,rgba(255,100,20,.1) 50%,transparent 75%);animation:firelight 3s ease-in-out infinite;pointer-events:none}
@keyframes firelight{0%,to{opacity:1}25%{opacity:.75}50%{opacity:.6}75%{opacity:.85}}
.arrival-layer{position:absolute;inset:0;overflow:hidden}
.arrival-blob{position:absolute;border-radius:40% 60% 55% 45% / 50% 40% 60% 50%;filter:blur(50px)}
.arrival-1{width:45%;height:55%;top:5%;left:10%;background:var(--accent);opacity:.6;animation:arrivalDrift1 12s ease-in-out infinite}
.arrival-2{width:40%;height:50%;top:20%;left:40%;background:var(--c3);opacity:.5;animation:arrivalDrift2 15s ease-in-out 2s infinite}
.arrival-3{width:35%;height:60%;top:0;left:25%;background:var(--c4);opacity:.45;animation:arrivalDrift3 18s ease-in-out 4s infinite}
.arrival-glass{position:absolute;inset:0;backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);background:var(--bg-body);opacity:.55}
@supports(-webkit-touch-callout:none){.arrival-glass{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.arrival-blob{filter:blur(25px)}.elec-flicker{filter:blur(18px)}.steam-puff{filter:blur(12px)}}
@keyframes arrivalDrift1{0%,to{transform:translate(0,0) rotate(0) scale(1)}33%{transform:translate(8%,12%) rotate(120deg) scale(1.15)}66%{transform:translate(-5%,-8%) rotate(240deg) scale(.9)}}
@keyframes arrivalDrift2{0%,to{transform:translate(0,0) rotate(0) scale(1)}33%{transform:translate(-10%,8%) rotate(-90deg) scale(1.1)}66%{transform:translate(6%,-12%) rotate(-200deg) scale(.85)}}
@keyframes arrivalDrift3{0%,to{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(12%,6%) rotate(180deg) scale(1.2)}}
.pulse-ring{position:absolute;top:50%;left:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:pulseOut 4s cubic-bezier(.36,.11,.89,.32) infinite}
.pulse-ring-2{animation-delay:-1s}
.pulse-ring-3{animation-delay:-2s}
.pulse-ring-4{animation-delay:-3s}
@keyframes pulseOut{from{transform:scale(.5);opacity:.4;border-width:4px;border-color:var(--accent)}to{transform:scale(4);opacity:0;border-width:1px;border-color:var(--c4)}}
.elec-flicker{position:absolute;border-radius:50%;background:radial-gradient(ellipse,var(--c3) 0%,transparent 55%);opacity:0;filter:blur(35px);pointer-events:none}
body.dark .elec-flicker{background:radial-gradient(ellipse,var(--accent) 0%,transparent 55%)}
.elec-f1{top:15%;left:20%;width:200px;height:200px;animation:bulbGlow 4s ease-in-out infinite}
.elec-f2{top:40%;left:65%;width:180px;height:180px;animation:bulbGlow 3.5s ease-in-out 1s infinite}
.elec-f3{top:65%;left:35%;width:160px;height:160px;animation:bulbGlow 4.5s ease-in-out 2s infinite}
.elec-f4{top:25%;left:80%;width:140px;height:140px;animation:bulbGlow 3s ease-in-out .5s infinite}
.elec-f5{top:70%;left:10%;width:170px;height:170px;animation:bulbGlow 5s ease-in-out 2.5s infinite}
@keyframes bulbGlow{0%,18%,22%,25%,53%,57%,to{opacity:.35}20%,24%{opacity:.08}55%{opacity:.12}}
@keyframes lightSweep{0%{transform:translateX(-20%) rotate(-5deg)}50%{transform:translateX(160%) rotate(5deg)}to{transform:translateX(-20%) rotate(-5deg)}}
.twinkle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:0}
.twinkle::after{content:'';position:absolute;inset:-1px;border-radius:50%;background:inherit;filter:blur(3px)}
.twinkle-1{top:12%;left:8%;animation:twinkle 2.8s ease-in-out infinite}
.twinkle-2{top:25%;left:72%;animation:twinkle 3.5s ease-in-out .6s infinite}
.twinkle-3{top:45%;left:30%;animation:twinkle 2.4s ease-in-out 1.2s infinite}
.twinkle-4{top:68%;left:85%;animation:twinkle 3.2s ease-in-out 1.8s infinite}
.twinkle-5{top:15%;left:50%;animation:twinkle 2.6s ease-in-out 2.4s infinite}
.twinkle-6{top:78%;left:18%;animation:twinkle 3.8s ease-in-out .3s infinite}
.twinkle-7{top:38%;left:62%;animation:twinkle 2.2s ease-in-out 3.1s infinite}
.twinkle-8{top:55%;left:42%;animation:twinkle 3s ease-in-out 1.5s infinite}
.twinkle-9{top:8%;left:90%;animation:twinkle 2.9s ease-in-out 2s infinite}
.twinkle-10{top:82%;left:55%;animation:twinkle 3.4s ease-in-out .9s infinite}
.twinkle-11{top:32%;left:15%;animation:twinkle 2.5s ease-in-out 2.7s infinite}
.twinkle-12{top:60%;left:78%;animation:twinkle 3.1s ease-in-out 3.5s infinite}
.twinkle-13{top:5%;left:35%;animation:twinkle 3.3s ease-in-out .5s infinite}
.twinkle-14{top:42%;left:92%;animation:twinkle 2.7s ease-in-out 1.9s infinite}
.twinkle-15{top:72%;left:38%;animation:twinkle 3.6s ease-in-out 2.8s infinite}
.twinkle-16{top:20%;left:22%;animation:twinkle 2.3s ease-in-out 3.3s infinite}
@keyframes twinkle{0%,to{opacity:0;transform:scale(.5)}50%{opacity:.8;transform:scale(1)}}
.steam-puff{position:absolute;bottom:-10%;border-radius:50%;filter:blur(25px);opacity:0}
.steam-1{left:20%;width:120px;height:120px;background:var(--c4);animation:steamRise 6s ease-in-out infinite}
.steam-2{left:45%;width:90px;height:90px;background:var(--accent);animation:steamRise 7s ease-in-out 1.5s infinite}
.steam-3{left:65%;width:100px;height:100px;background:var(--c3);animation:steamRise 5.5s ease-in-out 3s infinite}
.steam-4{left:35%;width:80px;height:80px;background:var(--c4);animation:steamRise 8s ease-in-out 4.5s infinite}
.steam-5{left:55%;width:110px;height:110px;background:var(--accent);animation:steamRise 6.5s ease-in-out 2s infinite}
@keyframes steamRise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.2;transform:translateY(-10vh) scale(.8)}40%{opacity:.15;transform:translateY(-30vh) scale(1.1) translateX(15px)}65%{opacity:.1;transform:translateY(-50vh) scale(1.3) translateX(-10px)}to{transform:translateY(-80vh) scale(1.5) translateX(5px);opacity:0}}
.headlight{position:absolute;top:-50%;left:-30%;width:60%;height:200%;background:linear-gradient(105deg,transparent 0%,transparent 38%,rgba(255,200,60,.06) 42%,rgba(255,220,100,.12) 48%,rgba(255,255,255,.15) 50%,rgba(255,220,100,.12) 52%,rgba(255,200,60,.06) 58%,transparent 62%,transparent 100%);animation:lightSweep 10s ease-in-out infinite;pointer-events:none}
body.dark .headlight{background:linear-gradient(105deg,transparent 0%,transparent 38%,rgba(255,220,100,.04) 42%,rgba(255,255,255,.08) 50%,rgba(255,220,100,.04) 58%,transparent 62%,transparent 100%)}