/* Loaded first and blocks the first paint: everything the page shows before the app's own styles and scripts.
   A separate file because the site's CSP forbids inline styles. Colour here repeats --acc from tokens.css. */
/* Only on body: with a background on html too, body's own would be painted over the circuit (z-index:-1). */
body{background:#000}
/* The circuit SVG sits in index.html: without this it flashes as huge black shapes until circuit.css arrives. */
#circuit-bg{position:fixed;inset:0;z-index:-1;width:100%;height:100%}
#circuit-bg *{fill:none}
/* Background switch: class="bg-plain" on <html> in index.html = deep blue-graphite background, no hero stars
   (the circuit stays). Remove the class for the original black background with stars. */
.bg-plain #hero .cv,.bg-plain .hero-shade.hide-sm{display:none}
/* Shade colour behind the logo and title (hides the circuit there): black by default, the background's tone here. */
:root{--shade-rgb:0,0,0}
.bg-plain{--shade-rgb:9,14,23}
/* Not flat black: a deep blue-graphite space, lighter at the top centre, darker at the edges (matches the logo's glow). */
.bg-plain body{background:radial-gradient(120% 80% at 50% 0%,#0E1724 0%,#080D15 45%,#04060A 100%) fixed,#04060A}
/* Below the hero the background turns upside down (lighter at the bottom); body.on-hero is set by the header (Nav.tsx). */
.bg-plain body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(120% 80% at 50% 100%,#0E1724 0%,#080D15 45%,#04060A 100%);opacity:1;transition:opacity .8s}
.bg-plain body.on-hero::before{opacity:0}

#preloader{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden;animation:pl-failsafe .4s 8s forwards}
.pl-t,.pl-b{position:absolute;left:0;width:100%;height:50.5%;background:#000}
.pl-t{top:0}
.pl-b{bottom:0}
.pl-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;white-space:nowrap;color:#fff}
.pl-bar{position:relative;display:block;width:168px;height:1px;overflow:hidden;background:rgba(255,255,255,.14);animation:pl-in .4s .5s both}
.pl-bar i{position:absolute;left:0;top:0;width:40%;height:100%;background:#22D3EE;animation:pl-bar 1.1s ease-in-out infinite alternate}

/* Logo: comes out of a blur, a blue glow breathes behind it, a light glint runs over the metal. */
.pl-logo{position:relative;width:clamp(220px,42vmin,400px);aspect-ratio:960/462}
.pl-logo img{position:relative;display:block;width:100%;height:auto;animation:pl-logo-in 1.1s cubic-bezier(.16,1,.3,1) both}
.pl-halo{position:absolute;inset:-40% -18%;border-radius:50%;background:radial-gradient(closest-side,rgba(30,120,255,.34),rgba(30,120,255,0));animation:pl-halo 2.2s ease-in-out infinite}
.pl-shine{position:absolute;inset:0;-webkit-mask:url(/images/ayron-logo.webp) center/100% 100% no-repeat;mask:url(/images/ayron-logo.webp) center/100% 100% no-repeat;background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 60%) no-repeat;background-size:300% 100%;background-position:150% 0;animation:pl-shine 1.8s .7s cubic-bezier(.45,0,.25,1) infinite}

/* Page is ready: content fades, the two halves part. */
.pl-done .pl-c{animation:pl-out .3s both}
.pl-done .pl-t{animation:pl-up .7s .35s cubic-bezier(.76,0,.24,1) both}
.pl-done .pl-b{animation:pl-down .7s .35s cubic-bezier(.76,0,.24,1) both}

@keyframes pl-logo-in{from{opacity:0;transform:scale(.9);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes pl-halo{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
@keyframes pl-shine{0%{background-position:150% 0}70%,100%{background-position:-50% 0}}
@keyframes pl-in{from{opacity:0}to{opacity:1}}
@keyframes pl-out{to{opacity:0;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes pl-bar{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes pl-up{to{transform:translateY(-101%)}}
@keyframes pl-down{to{transform:translateY(101%)}}
/* If the scripts never run, the loader must not stay on the screen forever. */
@keyframes pl-failsafe{to{opacity:0;visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  .pl-logo img,.pl-halo,.pl-shine,.pl-bar,.pl-bar i{animation:none}
  .pl-shine{display:none}
}