/* ==========================================================================
   FILE          assets/edgelit-splash.css
   UPLOAD TO     public_html/assets/edgelit-splash.css
   WHAT IT IS    The splash screen's layout: the navy plate, the orbital
                 canvas behind the logo, the logo, and the strobe canvas
                 over it. Every movement is driven by edgelit-splash.js,
                 so nothing here animates.
   VERSION       EL02  —  2026-10-23

   EL02: every rule now starts "html body". The AES sheet assets/aes-atom.css
   is loaded on every page for the mouseover atom, and its section 5 styles
   the AES splash with rules starting "html #aesSplash" (marble plate and
   vignette, a centred 734px logo, collapse to the centre). At EL01 those won
   wherever both sheets were loaded, so the plate fell back to AES teal and
   the lockup shrank and collapsed to its middle, not into the CV page.
   "html body" outranks them, so this sheet decides, as in the approved film.
   ========================================================================== */

html body #aesSplash{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

/* The navy plate, in the logo's own navy, lit a little at the centre as the
   logo film is. No marble, and no AES vignette over it. */
html body #aesSplash .s-plate{
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 72% 66% at 50% 50%, #0A1A36 0%, #07122A 52%, #030A1C 100%);
}
html body #aesSplash .s-plate::after{ content:none }

/* The circle. A transparent hole is punched at the page mark's centre and
   grown outward, so the page beneath is uncovered the way a lens opens. */
html body #aesSplash.iris .s-plate{
  -webkit-mask-image:radial-gradient(circle at var(--ix) var(--iy),
      rgba(0,0,0,0) 0 var(--iris), #000 calc(var(--iris) + 3px));
          mask-image:radial-gradient(circle at var(--ix) var(--iy),
      rgba(0,0,0,0) 0 var(--iris), #000 calc(var(--iris) + 3px));
}

/* The orbital sits BEHIND the logo, so the CV page is backlit by it and the
   rings pass behind the letters, never over them. */
html body #aesSplash .s-atom { position:absolute; inset:0; z-index:2; pointer-events:none }
html body #aesSplash .s-light{ position:absolute; inset:0; z-index:4; pointer-events:none }

/* The lockup. It collapses into the CV page: the transform origin is the
   page's centre (52 of 528 units across, 78 of 156 down). Hidden until the
   script fades it up, so it never shows unlit first. */
html body #aesSplash .s-logo{
  position:relative; z-index:3;
  width:min(1180px, 84vw);
  transform-origin:9.848% 50%;
  opacity:0;
}
html body #aesSplash .s-logo svg{ display:block; width:100%; height:auto; overflow:visible }

/* Narrow screens: the rings reach further left than the lockup does, so the
   lockup steps right and narrows a little to keep the whole orbital on
   screen. */
@media (max-width:700px){
  html body #aesSplash .s-logo{ width:72vw; margin-left:14vw }
}

html body #aesSplash.exit{ opacity:0; transition:opacity .6s ease }
body.splashing{ overflow:hidden }

@media (prefers-reduced-motion:reduce){ html body #aesSplash{ display:none } }