/* Splash animation — first-load intro: a blue seed dot, construction lines that
   open into a frame, the "neo" logo building inside it, then the frame grows
   into the page while the logo flies to the header.
   Remove this file, js/splash.js and the "Splash animation" blocks in
   home.html to take it out. */

.splash { display: none; }

/* .has-splash is set by an inline script in <head>, so the cover is there from
   the first paint. If js/splash.js never runs, the failsafe fades it out. */
.has-splash .splash {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 500; /* above the header (10) and language menu (20), below the custom cursor (999+) */
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  animation: splash-failsafe 0.5s ease 6s forwards;
}
@keyframes splash-failsafe {
  to { opacity: 0; visibility: hidden; }
}

/* While the timeline runs: no scrolling, and the real header logo waits for the
   flying one to land on it. */
.splash-running { overflow: hidden; }
.splash-running .site-header__logo { visibility: hidden; }

/* The page shows through this hole; the box-shadow paints everything around it. */
.splash__window {
  position: absolute;
  display: none;
  box-shadow: 0 0 0 200vmax var(--bg);
}

.splash__guide {
  position: absolute;
  background: rgba(10, 10, 10, 0.14);
  will-change: transform, opacity;
}
.splash__guide--v {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  transform: scaleY(0);
}
.splash__guide--h {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  transform: scaleX(0);
}

/* Same blue dot as the custom cursor. */
.splash__seed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
}

.splash__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: clamp(150px, 24vw, 300px);
  height: auto;
  overflow: visible;
  color: #000; /* matches assets/logo.svg */
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  will-change: transform;
}
.splash__letter {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}