/* Flicker splash
   1. Solid flame (bolt negative space filled) burns alone on black.
   2. Lightning flash. Under the flash the solid flame is swapped for the real logo icon,
      so the bolt shows up the moment the flash clears.
   3. Logo slides to center, name wipes in, subtext rises, splash fades out. */
.flicker-splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#000;overflow:hidden;
  animation:fs-exit .35s ease-in 2.1s forwards}
.flicker-splash.is-done{display:none}
.fs-defs{position:absolute;width:0;height:0;overflow:hidden}
.fs-logo{position:relative;width:min(84vw,560px);aspect-ratio:1055.36/407.91;
  transform:translateX(37.9%);animation:fs-slide .55s cubic-bezier(.22,1,.36,1) 1.2s forwards}
.fs-logo img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}

/* Fire. Rising turbulence warps the edges into licking tongues. The base stays put:
   the whole flame grows from its base, and the strong warp only affects the upper half. */
.fs-fire{position:absolute;inset:0;transform-origin:11% 97%;opacity:0;
  animation:fs-ignite .55s cubic-bezier(.3,0,.2,1) .05s forwards,fs-gone .01s linear .89s forwards}
/* Fallback when WebGL is unavailable: the solid flame image with a simple flicker. */
.fs-fire-img{animation:fs-burn 2.2s ease-in-out .3s infinite}
.has-gl .fs-fire-img{visibility:hidden}
.fs-fire-canvas{position:absolute;left:-8%;top:-14%;width:40%;height:114%;display:block;visibility:hidden}
.has-gl .fs-fire-canvas{visibility:visible}
.fs-glow{position:absolute;left:-8%;top:2%;width:34%;height:102%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,175,195,.5),rgba(40,110,160,.18) 55%,transparent 75%);
  filter:blur(18px);opacity:0;
  animation:fs-glow-in .55s ease-out .1s forwards,fs-glow-burn 1.3s ease-in-out .65s infinite alternate,fs-glow-out .45s ease-out .89s forwards}

/* Real logo icon: appears under the flash, with a bright electric edge that cools off. */
.fs-icon{opacity:0;animation:fs-strike .75s ease-out .89s forwards}

.fs-word{clip-path:inset(0 74.5% 0 0);animation:fs-wipe .5s cubic-bezier(.65,0,.35,1) 1.3s forwards}
.fs-sub{opacity:0;transform:translateY(5%);animation:fs-rise .35s ease-out 1.65s forwards}

.fs-flash{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 46%,#fff 0,rgba(222,247,255,.96) 28%,rgba(170,220,245,.62) 62%,rgba(120,180,220,.32) 100%);
  animation:fs-flash .5s linear .85s forwards}

@keyframes fs-ignite{0%{opacity:0;transform:scale(.5,.15)}30%{opacity:.8}65%{transform:scale(1.03,1.09)}100%{opacity:1;transform:scale(1)}}
/* Fallback flicker when WebGL is unavailable: gentle, eased. */
@keyframes fs-burn{0%,100%{opacity:1}35%{opacity:.9}60%{opacity:.97}80%{opacity:.88}}
@keyframes fs-glow-in{to{opacity:1}}
@keyframes fs-glow-burn{from{opacity:1}to{opacity:.78}}
@keyframes fs-glow-out{to{opacity:0}}
@keyframes fs-gone{to{opacity:0;visibility:hidden}}
@keyframes fs-flash{0%{opacity:0}5%{opacity:1}13%{opacity:.18}20%{opacity:.88}30%{opacity:.62}100%{opacity:0}}
@keyframes fs-strike{
  0%{opacity:1;filter:brightness(1.9) drop-shadow(0 0 14px rgba(180,238,255,.95))}
  100%{opacity:1;filter:brightness(1) drop-shadow(0 0 0 rgba(180,238,255,0))}}
@keyframes fs-slide{to{transform:translateX(0)}}
@keyframes fs-wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes fs-rise{to{opacity:1;transform:none}}
@keyframes fs-exit{to{opacity:0;visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  .flicker-splash{animation:fs-exit .25s ease-in .65s forwards}
  .fs-logo{transform:none;animation:none}
  .fs-fire,.fs-glow,.fs-flash{display:none}
  .fs-icon,.fs-sub{opacity:1;transform:none;animation:none}
  .fs-word{clip-path:none;animation:none}
}

/* Browser chrome (iOS Safari top/bottom bars, safe areas, overscroll) takes its color from the page
   background, not the fixed splash. Keep it black while the splash plays, fade back as it exits. */
html:has(#flickerSplash),html:has(#flickerSplash) body{transition:background-color .35s ease-in}
html:has(#flickerSplash:not(.fs-exiting)),html:has(#flickerSplash:not(.fs-exiting)) body{background-color:#000!important}