@font-face {
  font-family: "8BIT WONDER";
  src: url("../fonts/8-bit-wonder/8-BIT WONDER.TTF") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.site-logo {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-text, #ffffff);
  /* Pad the shared CRT surface around the offset tagline and edge glow. */
  padding: 4px 16px 4px 4px;
  margin: -4px;
  text-shadow: 0 0 1px #ffffff40, 0 0 9px #68d39124;
  transform-origin: center;
}

.site-logo__wordmark {
  display: block;
  font: 400 clamp(27px, 6vw, 49px) / 1.6 "8BIT WONDER", monospace;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* A shared CRT surface covers both lines and never intercepts clicks. */
.site-logo::before,
.site-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.site-logo::before {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #cbffe512 45%,
    #ffffff1c 50%,
    #cbffe512 55%,
    transparent 100%
  );
  opacity: 0;
  transform: translateY(-100%);
}

.site-logo::after {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    #09121b 2px 3px
  );
  opacity: 0.27;
}

.site-logo__accent {
  position: relative;
  display: inline-block;
  color: var(--color-accent, #68d391);
}

.site-logo__accent::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 45%;
  height: 2px;
  background: var(--color-text, #ffffff);
  opacity: 0;
}

.site-logo__tagline {
  margin-block-start: 6px;
  align-self: flex-end;
  max-inline-size: min(30ch, 75vw);
  overflow-wrap: anywhere;
  text-align: right;
  transform: translateX(12px);
  color: var(--color-text-secondary, #cbd5e1);
  font: 500 clamp(14px, 2.5vw, 18px) / 1.4 system-ui, sans-serif;
  letter-spacing: 0.04em;
}

/* Reduced motion keeps the phosphor glow and static scanlines only. */
@media (prefers-reduced-motion: no-preference) {
  .site-logo {
    animation: logo-crt-warp 7.5s ease-in-out infinite;
  }

  .site-logo::before {
    animation: logo-crt-sweep 7.5s linear infinite;
  }

  .site-logo__accent {
    animation: logo-accent-glitch 3s steps(1, end) infinite;
  }

  .site-logo__accent::after {
    animation: logo-accent-line 3s steps(1, end) infinite;
  }
}

/* Small perspective/skew changes suggest an analog tube without reflow. */
@keyframes logo-crt-warp {
  0%, 100% {
    transform: perspective(420px) rotateX(2deg) rotateY(-1.5deg) skewX(-0.5deg) scaleX(1.006);
  }
  35% {
    transform: perspective(420px) rotateX(-1.2deg) rotateY(1.7deg) skewX(0.65deg) scaleX(0.998);
  }
  70% {
    transform: perspective(420px) rotateX(1deg) rotateY(-0.6deg) skewX(-0.35deg) scaleX(1.003);
  }
}

@keyframes logo-crt-sweep {
  0% { opacity: 0; transform: translateY(-100%); }
  8%, 82% { opacity: 0.65; }
  90%, 100% { opacity: 0; transform: translateY(100%); }
}

@keyframes logo-accent-glitch {
  0%, 16%, 100% { transform: none; text-shadow: none; }
  2%, 9% {
    transform: translateX(3px);
    text-shadow: -3px 0 #cbd5e180;
  }
  5%, 13% {
    transform: translateX(-2px);
    text-shadow: 2px 0 #68d39188;
  }
}

@keyframes logo-accent-line {
  0%, 16%, 100% { opacity: 0; }
  2%, 9% { opacity: 0.8; top: 38%; }
  5%, 13% { opacity: 0.6; top: 64%; }
}