main > [hidden] {
  display: none;
}

.transition-page {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

.transition-logo {
  width: min(180px, 45vw, 50svh);
  color: #303030;
  font: 14px Arial, Helvetica, sans-serif;
}

.transition-logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.logo-spectrum {
  display: none;
}

.is-spectrum .logo-spectrum {
  display: inline;
}

.is-spectrum {
  animation: spectrum-exit 500ms linear both;
}

.is-spectrum .transition-logo {
  width: min(90px, 22.5vw, 25svh);
  animation: logo-arrive 500ms linear both;
}

.is-spectrum .transition-logo svg {
  overflow: hidden;
}

.is-spectrum .logo-outline,
.is-spectrum .logo-led-trails {
  display: none;
}

@keyframes logo-arrive {
  0% { opacity: 0; }
  16%, 100% { opacity: 1; }
}

@keyframes spectrum-exit {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

.is-spectrum .logo-base {
  visibility: hidden;
  animation: none;
}

.logo-outline {
  color: #555;
  stroke-width: .55px;
}

.logo-led-trails {
  color: #fff;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgb(255 255 255 / 65%))
    drop-shadow(0 0 8px rgb(255 255 255 / 30%));
}

.is-illuminating .logo-led-trails {
  animation: contour-light 2200ms ease both;
}

.is-illuminating .logo-led-segment {
  animation: contour-circuit 1800ms linear both;
}

.is-illuminating .logo-base {
  animation: logo-illuminate 2200ms ease both;
}

@keyframes contour-circuit {
  from { stroke-dashoffset: var(--trail-start); }
  to { stroke-dashoffset: var(--trail-end); }
}

@keyframes contour-light {
  0% { opacity: 0; }
  10%, 78% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes logo-illuminate {
  0%, 55% { color: #303030; }
  82% { color: #eee; }
  100% { color: #777; }
}

main[data-page="projects"],
main[data-page="transition"] {
  display: block;
  place-items: normal;
  padding: clamp(28px, 4vw, 56px);
}

.projects-page {
  width: 100%;
  margin: 0;
}

.projects-page h1 {
  margin: 0;
  color: #fff;
  font: 400 24px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: -.02em;
  outline: none;
}

.back-to-start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 24px;
  border: 1px solid #454545;
  border-radius: 6px;
  background: #181818;
  color: #eee;
  font: 400 16px/1.4 Arial, Helvetica, sans-serif;
  text-decoration: none;
}

.back-to-start:hover {
  background: #282828;
  border-color: #777;
}

.back-to-start:focus-visible {
  outline: 2px solid #eee;
  outline-offset: 4px;
}

/* Default: 300ms black-to-white, then 200ms crossfade to the page below. */
.is-crossfading {
  animation: transition-crossfade 500ms linear both;
  pointer-events: none;
}

.is-crossfading .logo-base {
  animation: logo-black-white 500ms ease both;
}

.is-crossfading .logo-outline,
.is-crossfading .logo-led-trails {
  display: none;
}

@keyframes logo-black-white {
  0% { color: #000; }
  60%, 100% { color: #fff; }
}

@keyframes transition-crossfade {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .is-illuminating .logo-led-segment {
    animation: none;
    stroke-dasharray: none !important;
  }
}