/* ============================================================
   FONTS
   Avionic: licensed via MyFonts — verify your license covers
   the jet-boy.com domain before deploying.
   VCR OSD Mono: free / public domain.
   ============================================================ */

@font-face {
  font-family: "AvionicExWideObliqueBold-Regular";
  src: url("fonts/avionic/font.woff2") format("woff2"),
       url("fonts/avionic/font.woff")  format("woff");
  font-display: swap;
}

@font-face {
  font-family: "VCR OSD Mono";
  src: url("fonts/vcr_osd_mono/VCR_OSD_MONO_1.001.ttf") format("truetype");
  font-display: swap;
}

/* ============================================================
   RESET
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   BASE — matches jet-boy root.css
   ============================================================ */

html {
  height: 100dvh;
  overflow: hidden;
}

body {
  position: fixed;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;

  font-family: "Asap", sans-serif;
  -webkit-tap-highlight-color: transparent;
  background-color: black;

  /* CRT scanline grid */
  background-image: repeating-linear-gradient(
    0deg,
    #0e0d0e 25%,
    #0e0d0e 50%,
    #171819 50%,
    #171819 75%
  );
  background-size: 10px 10px;
}

/* SVG phosphor dot colors */
.p-red   { fill: rgb(255, 0, 0); }
.p-green { fill: rgb(0, 255, 0); }
.p-blue  { fill: rgb(0, 0, 255); }

/* ============================================================
   GLITCH — matches jet-boy glitch.css + glitch__svg.css
   ============================================================ */

.glitch {
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 44%;
  z-index: 1;

  width: min(96vw, 820px);
  max-width: 96vw;

  transform: translateX(-50%);
  overflow: visible;
  user-select: none;
  pointer-events: none;
}

/* Japanese text SVG */
.glitch__svg {
  width: 100%;
  min-height: 80px;
  height: auto;
  display: block;
  aspect-ratio: 320 / 80;
  overflow: visible;
  opacity: 0.2;
  transition: opacity 0.5s ease-in-out;
}

@media (max-width: 1499px) {
  .glitch__svg { opacity: 0; }
}

.glitch__text {
  font-family: "Dela Gothic One", sans-serif;
  font-size: clamp(2rem, 10dvw, 80px);
  fill: #8e629c;
  stroke: #928796;
  stroke-width: 1px;
  stroke-opacity: 0.5;
  fill-opacity: 0.5;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation:
    glitch-draw 10s ease-in forwards,
    glitch-paths 10s step-end infinite 3s forwards;
}

.glitch__layer {
  font-family: "Dela Gothic One", sans-serif;
  font-size: 80px;
  opacity: 0;
}

.glitch__layer--magenta {
  fill: #e0287d;
  opacity: 0.5;
  animation:
    glitch-reveal 10s forwards,
    glitch-paths-paused 15s step-end infinite 3s backwards,
    glitch-opacity-paused 15s step-end infinite 3s backwards,
    glitch-font-svg-paused-21 21s step-end infinite 3s backwards,
    glitch-movement-magenta-paused 25s step-end infinite 3s backwards;
}

.glitch__layer--cyan {
  fill: #1bc7fb;
  opacity: 0.5;
  animation:
    glitch-reveal 10s forwards,
    glitch-paths-paused 15s step-end infinite 3s backwards,
    glitch-opacity-paused 15s step-end infinite 3s backwards,
    glitch-font-svg-paused-17 17s step-end infinite 3s backwards,
    glitch-movement-cyan-paused 21s step-end infinite 3s backwards;
}

/* "jet-boy" neon title */
.glitch__logo {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);

  font-family: "AvionicExWideObliqueBold-Regular", sans-serif;
  font-size: clamp(3.5rem, 8vw, 90px);
  color: #b894d4;
  white-space: nowrap;
  opacity: 0;

  text-shadow:
    0 0 4px  #fff,
    0 0 8px  #8e629c,
    0 0 12px #8e629c,
    0 0 24px #8e629c,
    0 0 48px #6b4a7a,
    0 0 72px rgba(142, 98, 156, 0.8);
  filter: drop-shadow(0 0 6px rgba(142, 98, 156, 0.9));

  animation:
    blink 1s 1s ease-in-out forwards,
    glitch-logo-crt-flicker 2s 2.5s ease-in-out infinite;
}

/* CRT scanlines overlay on logo */
.glitch__logo::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   TAPE — matches jet-boy tape.css + lobby.css fade-in
   ============================================================ */

#tape {
  position: absolute;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;

  background: linear-gradient(
    to bottom,
    hsl(240, 15%, 30%) 0%,
    hsl(240, 10%, 25%) 40%,
    hsl(255, 0%,  15%) 100%
  );
  filter: url(#crt-filter);
  mask: url(#crt-mask);
  clip-path: inset(0 3px 0 3px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  opacity: 0;
  animation: lobby-fade-in 1.5s 1s ease-in-out forwards;
}

/* Ambient purple stripe that drifts down */
#stripe {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 20vmin;
  background-color: purple;
  filter: blur(40px);
  opacity: 0.1;
  top: -10%;
  animation: stripeAnim 10s linear infinite;
}

/* ============================================================
   CTA — matches lobby-menu button style
   ============================================================ */

#lobby-menu {
  position: absolute;
  bottom: 25dvh;
  z-index: 50;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tagline {
  font-family: "VCR OSD Mono", monospace;
  font-size: clamp(12px, 1.5vw, 18px);
  color: #d5d3d1;
  opacity: 0.55;
  letter-spacing: 0.08em;
  user-select: none;
}

.cta-btn {
  display: block;
  font-family: "VCR OSD Mono", monospace;
  font-size: 40px;
  color: #d5d3d1;
  text-decoration: none;
  background: transparent;
  border: none;
  user-select: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.cta-btn:hover {
  opacity: 0.75;
}

/* ============================================================
   FOOTER — matches lobby.css #lobby-footer
   ============================================================ */

#lobby-footer {
  position: absolute;
  bottom: 10px;
  right: 2%;

  font-family: "VCR OSD Mono", monospace;
  font-size: 25px;
  color: #d5d3d1;
  user-select: none;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* Neon phosphor blink-on */
@keyframes blink {
  0%   { opacity: 0;   }
  10%  { opacity: 0.3; }
  15%  { opacity: 0;   }
  25%  { opacity: 0.5; }
  30%  { opacity: 0.2; }
  40%  { opacity: 0.8; }
  50%  { opacity: 1;   }
  55%  { opacity: 0.9; }
  60%  { opacity: 1;   }
  100% { opacity: 1;   }
}

/* Tape fade-in */
@keyframes lobby-fade-in {
  0%   { opacity: 0;   }
  100% { opacity: 0.9; }
}

/* Ambient stripe drift */
@keyframes stripeAnim {
  50%  { top: 80%; }
  100% { top: 80%; }
}

/* Logo CRT phosphor flicker */
@keyframes glitch-logo-crt-flicker {
  0%, 90%, 100% {
    opacity: 1;
    text-shadow:
      0 0 4px  #fff,
      0 0 8px  #8e629c,
      0 0 12px #8e629c,
      0 0 24px #8e629c,
      0 0 48px #6b4a7a,
      0 0 72px rgba(142, 98, 156, 0.8);
  }
  92% {
    opacity: 0.9;
    text-shadow:
      0 0 2px  #fff,
      0 0 6px  #8e629c,
      0 0 10px #8e629c,
      0 0 20px #8e629c,
      0 0 40px #6b4a7a,
      0 0 64px rgba(142, 98, 156, 0.7);
  }
  95% {
    opacity: 1;
    text-shadow:
      0 0 5px  #fff,
      0 0 10px #8e629c,
      0 0 14px #8e629c,
      0 0 26px #8e629c,
      0 0 50px #6b4a7a,
      0 0 76px rgba(142, 98, 156, 0.85);
  }
}

/* SVG text draw */
@keyframes glitch-draw {
  0%  { fill-opacity: 0;   stroke-opacity: 0.8; }
  50% { fill-opacity: 0.5; stroke-dashoffset: 0; stroke-opacity: 1; }
  65% { stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: 0; }
}

/* SVG glitch clip-path distortion (10s, then looping) */
@keyframes glitch-paths {
  0% {
    clip-path: polygon(0% 43%,83% 43%,83% 22%,23% 22%,23% 24%,91% 24%,91% 26%,18% 26%,
      18% 83%,29% 83%,29% 17%,41% 17%,41% 39%,18% 39%,18% 82%,54% 82%,54% 88%,19% 88%,
      19% 4%,39% 4%,39% 14%,76% 14%,76% 52%,23% 52%,23% 35%,19% 35%,19% 8%,36% 8%,
      36% 31%,73% 31%,73% 16%,1% 16%,1% 56%,50% 56%,50% 8%);
  }
  5% {
    clip-path: polygon(0% 29%,44% 29%,44% 83%,94% 83%,94% 56%,11% 56%,11% 64%,94% 64%,
      94% 70%,88% 70%,88% 32%,18% 32%,18% 96%,10% 96%,10% 62%,9% 62%,9% 84%,68% 84%,
      68% 50%,52% 50%,52% 55%,35% 55%,35% 87%,25% 87%,25% 39%,15% 39%,15% 88%,52% 88%);
  }
  30% {
    clip-path: polygon(0% 53%,93% 53%,93% 62%,68% 62%,68% 37%,97% 37%,97% 89%,13% 89%,
      13% 45%,51% 45%,51% 88%,17% 88%,17% 54%,81% 54%,81% 75%,79% 75%,79% 76%,38% 76%,
      38% 28%,61% 28%,61% 12%,55% 12%,55% 62%,68% 62%,68% 51%,0% 51%,0% 92%,63% 92%,
      63% 4%,65% 4%);
  }
  45% {
    clip-path: polygon(0% 33%,2% 33%,2% 69%,58% 69%,58% 94%,55% 94%,55% 25%,33% 25%,
      33% 85%,16% 85%,16% 19%,5% 19%,5% 20%,79% 20%,79% 96%,93% 96%,93% 50%,5% 50%,
      5% 74%,55% 74%,55% 57%,96% 57%,96% 59%,87% 59%,87% 65%,82% 65%,82% 39%,63% 39%,
      63% 92%,4% 92%,4% 36%,24% 36%,24% 70%,1% 70%,1% 43%,15% 43%,15% 28%,23% 28%,
      23% 71%,90% 71%,90% 86%,97% 86%,97% 1%,60% 1%,60% 67%,71% 67%,71% 91%,17% 91%,
      17% 14%,39% 14%,39% 30%,58% 30%,58% 11%,52% 11%,52% 83%,68% 83%);
  }
  76% {
    clip-path: polygon(0% 26%,15% 26%,15% 73%,72% 73%,72% 70%,77% 70%,77% 75%,8% 75%,
      8% 42%,4% 42%,4% 61%,17% 61%,17% 12%,26% 12%,26% 63%,73% 63%,73% 43%,90% 43%,
      90% 67%,50% 67%,50% 41%,42% 41%,42% 46%,50% 46%,50% 84%,96% 84%,96% 78%,49% 78%,
      49% 25%,63% 25%,63% 14%);
  }
  90% {
    clip-path: polygon(0% 41%,13% 41%,13% 6%,87% 6%,87% 93%,10% 93%,10% 13%,89% 13%,
      89% 6%,3% 6%,3% 8%,16% 8%,16% 79%,0% 79%,0% 99%,92% 99%,92% 90%,5% 90%,5% 60%,
      0% 60%,0% 48%,89% 48%,89% 13%,80% 13%,80% 43%,95% 43%,95% 19%,80% 19%,80% 85%,
      38% 85%,38% 62%);
  }
  1%, 7%, 33%, 47%, 78%, 93% { clip-path: none; }
}

/* glitch-paths with 5s pause (15s total) */
@keyframes glitch-paths-paused {
  0% {
    clip-path: polygon(0% 43%,83% 43%,83% 22%,23% 22%,23% 24%,91% 24%,91% 26%,18% 26%,
      18% 83%,29% 83%,29% 17%,41% 17%,41% 39%,18% 39%,18% 82%,54% 82%,54% 88%,19% 88%,
      19% 4%,39% 4%,39% 14%,76% 14%,76% 52%,23% 52%,23% 35%,19% 35%,19% 8%,36% 8%,
      36% 31%,73% 31%,73% 16%,1% 16%,1% 56%,50% 56%,50% 8%);
  }
  0.67%,4.67%,22%,31.33%,52%,62%,66.67%,100% { clip-path: none; }
  3.33% {
    clip-path: polygon(0% 29%,44% 29%,44% 83%,94% 83%,94% 56%,11% 56%,11% 64%,94% 64%,
      94% 70%,88% 70%,88% 32%,18% 32%,18% 96%,10% 96%,10% 62%,9% 62%,9% 84%,68% 84%,
      68% 50%,52% 50%,52% 55%,35% 55%,35% 87%,25% 87%,25% 39%,15% 39%,15% 88%,52% 88%);
  }
  20% {
    clip-path: polygon(0% 53%,93% 53%,93% 62%,68% 62%,68% 37%,97% 37%,97% 89%,13% 89%,
      13% 45%,51% 45%,51% 88%,17% 88%,17% 54%,81% 54%,81% 75%,79% 75%,79% 76%,38% 76%,
      38% 28%,61% 28%,61% 12%,55% 12%,55% 62%,68% 62%,68% 51%,0% 51%,0% 92%,63% 92%,
      63% 4%,65% 4%);
  }
  30% {
    clip-path: polygon(0% 33%,2% 33%,2% 69%,58% 69%,58% 94%,55% 94%,55% 25%,33% 25%,
      33% 85%,16% 85%,16% 19%,5% 19%,5% 20%,79% 20%,79% 96%,93% 96%,93% 50%,5% 50%,
      5% 74%,55% 74%,55% 57%,96% 57%,96% 59%,87% 59%,87% 65%,82% 65%,82% 39%,63% 39%,
      63% 92%,4% 92%,4% 36%,24% 36%,24% 70%,1% 70%,1% 43%,15% 43%,15% 28%,23% 28%,
      23% 71%,90% 71%,90% 86%,97% 86%,97% 1%,60% 1%,60% 67%,71% 67%,71% 91%,17% 91%,
      17% 14%,39% 14%,39% 30%,58% 30%,58% 11%,52% 11%,52% 83%,68% 83%);
  }
  50.67% {
    clip-path: polygon(0% 26%,15% 26%,15% 73%,72% 73%,72% 70%,77% 70%,77% 75%,8% 75%,
      8% 42%,4% 42%,4% 61%,17% 61%,17% 12%,26% 12%,26% 63%,73% 63%,73% 43%,90% 43%,
      90% 67%,50% 67%,50% 41%,42% 41%,42% 46%,50% 46%,50% 84%,96% 84%,96% 78%,49% 78%,
      49% 25%,63% 25%,63% 14%);
  }
  60% {
    clip-path: polygon(0% 41%,13% 41%,13% 6%,87% 6%,87% 93%,10% 93%,10% 13%,89% 13%,
      89% 6%,3% 6%,3% 8%,16% 8%,16% 79%,0% 79%,0% 99%,92% 99%,92% 90%,5% 90%,5% 60%,
      0% 60%,0% 48%,89% 48%,89% 13%,80% 13%,80% 43%,95% 43%,95% 19%,80% 19%,80% 85%,
      38% 85%,38% 62%);
  }
}

/* Glitch layer reveal (appears only after draw phase) */
@keyframes glitch-reveal {
  0%, 99.9% { opacity: 0; }
  100%       { opacity: 1; }
}

/* Layer opacity flicker (15s with pause) */
@keyframes glitch-opacity-paused {
  0%     { opacity: 0.1; }
  3.33%  { opacity: 0.7; }
  20%    { opacity: 0.4; }
  30%    { opacity: 0.6; }
  50.67% { opacity: 0.4; }
  60%    { opacity: 0.8; }
  0.67%,4.67%,22%,31.33%,52%,62%,66.67%,100% { opacity: 0; }
}

/* Layer font/fill mutation (17s) */
@keyframes glitch-font-svg-paused-17 {
  0%            { font-weight: 100; fill: #e0287d; filter: blur(3px); }
  14.12%        { font-weight: 500; fill: #fff;    filter: blur(0);   }
  35.29%        { font-weight: 300; fill: #1bc7fb; filter: blur(2px); }
  42.35%        { font-weight: 700; fill: #fff;    filter: blur(0);   }
  63.53%, 100%  { font-weight: 500; fill: #e0287d; filter: blur(6px); }
}

/* Layer font/fill mutation (21s) */
@keyframes glitch-font-svg-paused-21 {
  0%            { font-weight: 100; fill: #e0287d; filter: blur(3px); }
  15.24%        { font-weight: 500; fill: #fff;    filter: blur(0);   }
  38.1%         { font-weight: 300; fill: #1bc7fb; filter: blur(2px); }
  45.71%        { font-weight: 700; fill: #fff;    filter: blur(0);   }
  68.57%, 100%  { font-weight: 500; fill: #e0287d; filter: blur(6px); }
}

/* Magenta layer drift (25s with pause) */
@keyframes glitch-movement-magenta-paused {
  0%        { transform: translate(-5px,  10px); }
  12%       { transform: translate(25px,  20px); }
  48%       { transform: translate(5px,   15px); }
  60%       { transform: translate(35px,  5px);  }
  80%, 100% { transform: translate(20px,  20px); }
}

/* Cyan layer drift (21s with pause) */
@keyframes glitch-movement-cyan-paused {
  0%        { transform: translate(-30px,  5px); }
  11.43%    { transform: translate(0px,   15px); }
  45.71%    { transform: translate(-20px, 10px); }
  57.14%    { transform: translate(10px,  0px);  }
  76.19%, 100% { transform: translate(-5px, 15px); }
}