/* The holding screen: dark, with the logo in the middle. The logo plays a short entrance, holds, and then the whole
   screen lifts away to show the page (js/main.js adds .is-lifting, and removes .is-holding when it is done). */

.hold {
  position: fixed;
  inset: 0;
  z-index: var(--z-hold);
  display: grid;
  place-items: center;
  background: var(--dark);
  will-change: transform;
  transition: transform var(--dur-lift) var(--ease-in-out);
}
html.is-lifting .hold { transform: translateY(-100%); }

/* the logo: a paper disc with an orange dot that is clipped by it (the same mark as the old site's header) */
.logo {
  position: relative;
  width: clamp(72px, 9vw, 112px);
  aspect-ratio: 1;
  transition: transform var(--dur-lift) var(--ease-in-out), opacity var(--dur-base) var(--ease-out);
}
html.is-lifting .logo { transform: translateY(24vh) scale(0.9); opacity: 0; }   /* it stays behind a little as the screen goes */

.logo-disc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--paper);
  opacity: 0;
  transform: scale(0.8);
  animation: disc-in 0.8s var(--ease-out) 0.15s forwards;
}
.logo-dot {
  position: absolute;
  width: 70%;
  height: 70%;
  left: 42%;
  top: -12%;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-95%, 130%);   /* starts out of sight, low and to the left */
  animation: dot-in 0.9s var(--ease-out) 0.4s forwards;
}

@keyframes disc-in { to { opacity: 1; transform: none; } }
@keyframes dot-in {
  0%   { transform: translate(-95%, 130%); }
  72%  { transform: translate(5%, -5%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-disc { opacity: 1; transform: none; animation: none; }
  .logo-dot { transform: none; animation: none; }
  html.is-lifting .hold { transform: none; opacity: 0; transition: opacity var(--dur-lift) linear; }
  html.is-lifting .logo { transform: none; }
}