/* Glitch, jitter, blue strip, scanlines, dots, keyframes */

@keyframes caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes lightDrift {
  0%, 100% { transform: translateX(0) rotate(-32deg); }
  50% { transform: translateX(30px) rotate(-32deg); }
}

@keyframes stripGlow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}

@keyframes glitchA {
  0%, 88%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
  89% { opacity: 1; clip-path: inset(18% 0 62% 0); transform: translate(-7px, 0); }
  91% { opacity: 1; clip-path: inset(58% 0 20% 0); transform: translate(6px, 0); }
  93% { opacity: 1; clip-path: inset(34% 0 48% 0); transform: translate(-3px, 0); }
  94% { opacity: 0; }
}

@keyframes glitchB {
  0%, 90%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
  91% { opacity: 1; clip-path: inset(66% 0 10% 0); transform: translate(8px, 0); }
  93% { opacity: 1; clip-path: inset(8% 0 76% 0); transform: translate(-5px, 0); }
  95% { opacity: 0; }
}

@keyframes jitter {
  0%, 89%, 100% { transform: translate(0, 0); }
  90% { transform: translate(3px, 0); }
  92% { transform: translate(-2px, 0); }
  94% { transform: translate(0, 0); }
}

@keyframes qrScan {
  0% { top: 6%; opacity: 1; }
  17% { top: 90%; opacity: 1; }
  34% { top: 6%; opacity: 1; }
  36%, 100% { top: 6%; opacity: 0; }
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

/* Glitch layers: absolutely positioned copies of a word, aria-hidden */
.gl {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.gl-a { animation: glitchA 5.2s steps(1) infinite; }
.gl-b { animation: glitchB 5.2s steps(1) -0.15s infinite; }
.gl-a2 { animation: glitchA 7.4s steps(1) -2.6s infinite; }
.jitter { animation: jitter 5.2s steps(1) infinite; }

.gl--cyan { color: var(--cyan); }
.gl--blue { color: var(--dark-blue); }
.gl--outline {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--accent);
}

.light-drift { animation: lightDrift 14s ease-in-out infinite; }
.strip-glow { animation: stripGlow 6s ease-in-out infinite; }
.caret { animation: caret 1s steps(1) infinite; }
.qr-scan { animation: qrScan 4.8s ease-in-out infinite; }
.spin-slow { animation: spinSlow 24s linear infinite; }

/* The blue strip: slanted shape that fades out at the bottom */
.strip {
  left: var(--strip-x);
  top: 0;
  width: var(--strip-w);
  height: var(--strip-h);
  clip-path: var(--strip-clip);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

.strip--code {
  background: var(--strip);
}

.strip--lens {
  pointer-events: none;
}

.strip-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(30, 111, 255, 0.5), transparent 62%);
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.2) 0px,
    rgba(0, 0, 0, 0.2) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

/* Code that scrolls with the pointer's vertical position.
   --py is 0..1 (pointer.js). --code-travel is code height minus strip height. */
.code {
  position: absolute;
  left: var(--code-x);
  top: 0;
  font-size: var(--code-fs);
  line-height: var(--code-lh);
  transform: translateY(calc(var(--py, 0.5) * var(--code-travel, 0px) * -1));
  transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.code-line {
  height: var(--code-lh);
  white-space: pre;
}

.code-num {
  display: inline-block;
  width: var(--code-num-w);
  color: #4d6296;
}

.tk-plain { color: #c8d6f5; }
.tk-kw { color: #7fb0ff; }
.tk-str { color: #86f0d6; }
.tk-tag { color: #9fc2ff; }
.tk-type { color: #ffd98a; }
.tk-comment { color: #5d72a6; }

.prompt {
  position: absolute;
  left: 262px;
  top: 520px;
  font-size: 12px;
  color: #8fc0ff;
}

.prompt .caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 4px;
  vertical-align: middle;
  background: #8fc0ff;
}

/* Dots shift opposite to the pointer, 18px each way at most */
.dots {
  position: absolute;
  inset: -30px;
  background-image: radial-gradient(rgba(143, 192, 255, 0.26) 1px, transparent 1.3px);
  background-size: 16px 16px;
  transform: translate(
    calc((0.5 - var(--px, 0.5)) * 36px),
    calc((0.5 - var(--py, 0.5)) * 36px)
  );
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Phone and tablet tweaks */
@media (max-width: 1023.98px) {
  .bg-streak--a {
    left: -200px;
    top: -90px;
    width: var(--streak-w);
    height: 120px;
    filter: blur(50px);
  }

  .bg-streak--b {
    left: -160px;
    top: 120px;
    width: var(--streak-w);
    height: 70px;
    filter: blur(44px);
  }

  .bg-shade {
    display: none;
  }

  .blob {
    filter: blur(90px);
  }

  @keyframes lightDrift {
    0%, 100% { transform: translateX(0) rotate(-32deg); }
    50% { transform: translateX(24px) rotate(-32deg); }
  }

  .dots {
    background-size: 14px 14px;
  }
}

/* Reduced motion: no glitch, no jitter, no drifting, no pointer follow */
@media (prefers-reduced-motion: reduce) {
  .gl-a,
  .gl-b,
  .gl-a2,
  .jitter,
  .light-drift,
  .strip-glow,
  .caret,
  .qr-scan,
  .spin-slow {
    animation: none;
  }

  .gl {
    display: none;
  }

  .code,
  .dots {
    transition: none;
    transform: none;
  }
}