/*
 * Grabann opening animation (Mohit, 13 Oct 2026). Plain CSS so it shows at once, before
 * any script: the G pops in, glides to its place in the wordmark, and the rest of the
 * name sweeps out from it. About 1.2 seconds.
 * The app removes it (lib/splash.ts) once it is ready and the animation has played.
 */
#splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #f3f5f4;
  transition: opacity 0.25s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) #splash {
    background: #0a0e0c;
  }
}
:root[data-theme='dark'] #splash {
  background: #0a0e0c;
}
.no-splash #splash,
#splash.gone {
  display: none;
}
#splash.leaving {
  opacity: 0;
}
#splash > svg {
  grid-area: 1 / 1;
}
.splash-g {
  width: 88px;
  height: 88px;
  animation:
    splash-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    splash-glide 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.45s forwards;
}
/* 240 px wide: the G inside it sits 94 px left of centre at 0.56 of the big G's size. */
.splash-word {
  width: 240px;
  height: auto;
  clip-path: inset(0 82% 0 0);
  opacity: 0;
  animation: splash-sweep 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.78s forwards;
}
@keyframes splash-pop {
  from {
    transform: scale(0.4) rotate(-25deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes splash-glide {
  80% {
    transform: translateX(-94px) scale(0.56);
    opacity: 1;
  }
  to {
    transform: translateX(-94px) scale(0.56);
    opacity: 0;
  }
}
@keyframes splash-sweep {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
/* Less motion asked for: the wordmark simply appears. */
@media (prefers-reduced-motion: reduce) {
  .splash-g {
    display: none;
  }
  .splash-word {
    animation: none;
    clip-path: none;
    opacity: 1;
  }
}