#fab-intro{--fab-energy:#65ff9c;position:fixed;inset:0;z-index:2147483647;isolation:isolate;overflow:hidden;background:#020605;color:#dce6de;display:grid;place-items:center;font:13px/1.5 system-ui,sans-serif;transition:opacity .7s ease,filter .7s ease}
#fab-intro[hidden]{display:none}
#fab-intro:focus{outline:none}
html[data-fab-loading]{overflow:hidden}
.fab-atmosphere{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,#0d2d1a80 0,transparent 53%),radial-gradient(ellipse at 50% 100%,#16382550,transparent 42%)}
.fab-atmosphere:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#64ff9c06 1px,transparent 1px),linear-gradient(90deg,#64ff9c06 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,#0008,transparent 68%)}
.fab-intro-corners{position:absolute;inset:24px;pointer-events:none;opacity:.3;background:linear-gradient(#67ac83,#67ac83) left top/25px 1px no-repeat,linear-gradient(#67ac83,#67ac83) left top/1px 25px no-repeat,linear-gradient(#67ac83,#67ac83) right bottom/25px 1px no-repeat,linear-gradient(#67ac83,#67ac83) right bottom/1px 25px no-repeat}
.fab-intro-brand{position:absolute;top:35px;left:44px;display:flex;align-items:center;gap:12px;color:#8dba9e;font-size:9px;letter-spacing:.32em;font-weight:500}
.fab-intro-brand:before{content:"";width:5px;height:5px;background:#94e5ae;box-shadow:0 0 12px #5cf795;transform:rotate(45deg)}
.fab-intro-scene{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:min(1060px,98vw,154vh);aspect-ratio:1.5;pointer-events:none}
.fab-energy-halo{position:absolute;width:68%;aspect-ratio:1;left:16%;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,transparent 36%,#37fe7220 45%,#56eea50b 48%,transparent 64%);filter:blur(12px);animation:fab-breathe 5s ease-in-out infinite}
.fab-orbits{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:.8;animation:fab-orbit-arrival 1.8s ease both}
.fab-orbits circle,.fab-orbits path{fill:none;vector-effect:non-scaling-stroke;stroke-width:1}
.fab-orbit-outer{stroke:#76a98826;stroke-dasharray:1 8}
.fab-orbit-inner{stroke:#63e18b1f}
.fab-orbit-arc{stroke:#85edaf88;stroke-dasharray:94 670 30 850;transform-origin:500px 333px;animation:fab-orbit 36s linear infinite}
.fab-orbit-arc.second{stroke:#e1dfbd55;stroke-dasharray:42 800 12 690;animation-direction:reverse;animation-duration:48s}
.fab-orbit-guides{stroke:#99e9ad30}
.fab-energy-film{position:absolute;inset:-12% -9%;overflow:hidden;mix-blend-mode:screen;transform:rotate(-9deg);opacity:.82;filter:hue-rotate(260deg) saturate(.65) brightness(1.2);mask-image:radial-gradient(ellipse 60% 38% at 50% 49%,#000 20%,transparent 80%)}
/* Keep the animation's central flare, feather out the caption below it. */
.fab-intro-animation{width:100%;height:100%;object-fit:fill;mask-image:linear-gradient(#000 0 54%,transparent 60%)}
.fab-energy-line{position:absolute;left:-8%;right:-8%;top:51%;height:1px;background:linear-gradient(90deg,transparent,#54d87c00 10%,#7dffc95c 32%,#d2ffea9c 50%,#54d87c00 90%,transparent);box-shadow:0 0 22px #63ffa64d;transform:rotate(-9deg);animation:fab-line-arrival 1.6s ease both}
.fab-logo-stage{position:absolute;inset:0;display:grid;place-items:center;animation:fab-logo-arrival 1.7s cubic-bezier(.16,1,.3,1) both}
.fab-intro-logo{display:block;width:66%;max-width:720px;height:auto;filter:drop-shadow(0 8px 24px #000c) drop-shadow(0 0 18px #75ff9520);animation:fab-logo-breathe 6s ease-in-out 1.7s infinite}
.fab-logo-glint{position:absolute;inset:0;display:grid;place-items:center;mix-blend-mode:screen;mask-image:linear-gradient(110deg,transparent 39%,#000 48%,transparent 56%);mask-size:300% 100%;animation:fab-glint 2.2s .55s ease-out both;opacity:0}
.fab-logo-glint img{width:66%;max-width:720px;height:auto;filter:brightness(2) saturate(.3)}
.fab-particles{position:absolute;inset:0}
.fab-particles i{position:absolute;left:var(--x);top:var(--y);width:2px;height:2px;border-radius:50%;background:#bdffd4;box-shadow:0 0 8px #65ff9c;opacity:0;animation:fab-spark 4.4s var(--delay) ease-in-out infinite}
.fab-intro-tagline{position:absolute;top:77%;width:100%;margin:0;text-align:center;color:#a4bbae;font-size:10px;letter-spacing:.58em;animation:fab-tagline-arrival 1.2s .7s both}
.fab-intro-controls{position:absolute;bottom:max(6vh,28px);left:20px;right:20px;display:flex;align-items:center;flex-direction:column;gap:16px;text-align:center}
.fab-wait-line{width:100px;height:1px;background:#244432;position:relative;overflow:hidden}
.fab-wait-line:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#b7ffce,transparent);transform:translateX(-100%);animation:fab-wait 1.7s ease-in-out infinite}
#fab-intro-status{margin:0;color:#8d9f94;font-size:9px;letter-spacing:.24em;text-transform:uppercase}
#fab-intro-sound{position:absolute;top:max(24px,env(safe-area-inset-top));right:max(28px,env(safe-area-inset-right));display:grid;place-items:center;width:46px;height:46px;border:1px solid #8ecfa33d;border-radius:50%;background:#0c1811c9;color:#c1dec9;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s;padding:0;z-index:5;backdrop-filter:blur(12px)}
#fab-intro-sound:hover{background:#193525;border-color:#88e5a7;box-shadow:0 0 22px #48ee8520}
#fab-intro-sound svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#fab-intro-sound .sound-off{display:none}
#fab-intro-sound[data-state="muted"] .sound-waves,#fab-intro-sound[data-state="blocked"] .sound-waves,#fab-intro-sound[data-state="unavailable"] .sound-waves{display:none}
#fab-intro-sound[data-state="muted"] .sound-off,#fab-intro-sound[data-state="blocked"] .sound-off,#fab-intro-sound[data-state="unavailable"] .sound-off{display:block}
#fab-intro button:focus-visible,#fab-intro a:focus-visible{outline:2px solid #b0f5c7;outline-offset:5px}
#fab-intro-recovery{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#fab-intro-recovery[hidden],.fab-intro-fallback[hidden]{display:none}
#fab-intro-recovery button,#fab-intro-recovery a{font:inherit;color:#c9e7d1;background:#07110c;border:1px solid #375843;padding:9px 16px;border-radius:3px;text-decoration:none;cursor:pointer}
.fab-intro-fallback{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;letter-spacing:.2em;text-align:center;font-size:clamp(18px,3vw,36px)}
#fab-intro.leaving{opacity:0;filter:blur(4px);pointer-events:none}
#fab-intro.leaving .fab-logo-stage{transition:transform .7s ease,opacity .7s ease;transform:scale(1.06);opacity:0}
#fab-intro.leaving .fab-energy-halo{transition:transform .7s ease;transform:translateY(-50%) scale(1.35)}
@keyframes fab-logo-arrival{from{opacity:0;transform:translateY(12px) scale(.95);filter:blur(10px);clip-path:inset(0 100% 0 0)}50%{opacity:1;filter:blur(0)}to{opacity:1;transform:none;filter:none;clip-path:inset(0)}}
@keyframes fab-orbit-arrival{from{opacity:0;transform:scale(.85) rotate(-12deg)}to{opacity:.8;transform:none}}
@keyframes fab-line-arrival{from{opacity:0;scale:.2 1}to{opacity:1;scale:1 1}}
@keyframes fab-tagline-arrival{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes fab-logo-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes fab-breathe{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes fab-orbit{to{transform:rotate(360deg)}}
@keyframes fab-glint{0%{mask-position:100% 0;opacity:0}20%,65%{opacity:.5}100%{mask-position:0 0;opacity:0}}
@keyframes fab-spark{0%,100%{opacity:0;transform:translateY(9px)}40%{opacity:.75}75%{opacity:0;transform:translateY(-15px)}}
@keyframes fab-wait{to{transform:translateX(100%)}}
@media(max-width:600px){.fab-intro-corners{inset:16px}.fab-intro-brand{left:28px;top:34px;font-size:8px;letter-spacing:.2em}#fab-intro-sound{right:22px;top:22px;width:42px;height:42px}.fab-intro-scene{width:128vw;top:46%}.fab-intro-logo,.fab-logo-glint img{width:65%}.fab-intro-tagline{font-size:8px;letter-spacing:.36em;top:80%}.fab-intro-controls{bottom:8vh}}
@media(max-height:450px){.fab-intro-scene{width:112vh;top:48%}.fab-intro-brand{top:24px}.fab-intro-controls{bottom:16px;gap:8px}.fab-intro-tagline{top:80%;font-size:8px}#fab-intro-sound{top:16px}}
@media(prefers-reduced-motion:reduce){#fab-intro,#fab-intro *{animation:none!important;transition:none!important}.fab-energy-film,.fab-particles,.fab-logo-glint{display:none}.fab-orbits{opacity:.45}.fab-logo-stage{opacity:1}.fab-energy-halo{opacity:.4}.fab-wait-line:after{transform:none}#fab-intro.leaving{filter:none}}

#fab-intro:not([data-logo-ready="true"]) .fab-logo-stage{animation-play-state:paused;opacity:0}
