/* ============================================================
   RETRO CRT / GLITCH EFFECT - Hypejet
   Applied to: .crt-effect elements (logo, key buttons)
   ============================================================ */

:root {
  --crt-scanline-opacity: 0.12;
  --crt-scanline-size: 3px;
  --crt-glow-color: rgba(124, 92, 255, 0.2);
  --crt-phosphor-color: #a78bfa;
  --crt-rgb-offset: 2px;
  --crt-noise-opacity: 0.04;
  --crt-vignette-strength: 0.45;
  --crt-glitch-color-r: rgba(236, 72, 153, 0.75);
  --crt-glitch-color-b: rgba(124, 92, 255, 0.75);
}

.crt-effect {
  position: relative;
  display: inline-block;
  overflow: hidden;
  isolation: isolate;
}

/* Scanlines */
.crt-effect::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent calc(var(--crt-scanline-size) - 1px),
    rgba(0,0,0,var(--crt-scanline-opacity)) calc(var(--crt-scanline-size) - 1px),
    rgba(0,0,0,var(--crt-scanline-opacity)) var(--crt-scanline-size)
  );
  animation: crt-scan-flicker 0.12s steps(1) infinite;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* Vignette */
.crt-effect::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,var(--crt-vignette-strength)) 100%);
  border-radius: inherit;
  mix-blend-mode: multiply;
}

@keyframes crt-scan-flicker {
  0%   { opacity: 1; }
  33%  { opacity: 0.96; }
  66%  { opacity: 1; }
  100% { opacity: 0.98; }
}

/* RGB Split text */
.crt-rgb {
  position: relative;
  display: inline-block;
}
.crt-rgb::before,
.crt-rgb::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.65;
}
.crt-rgb::before {
  color: var(--crt-glitch-color-r);
  left: calc(-1 * var(--crt-rgb-offset));
  mix-blend-mode: screen;
  animation: crt-r 2.4s steps(1) infinite;
}
.crt-rgb::after {
  color: var(--crt-glitch-color-b);
  left: var(--crt-rgb-offset);
  mix-blend-mode: screen;
  animation: crt-b 2.4s steps(1) infinite;
}
@keyframes crt-r {
  0%,80%,100% { transform: translate(-2px,0); opacity:0.65; }
  20%  { transform: translate(-3px,1px); opacity:0.5; }
  50%  { transform: translate(-1px,-1px); opacity:0.7; }
}
@keyframes crt-b {
  0%,80%,100% { transform: translate(2px,0); opacity:0.65; }
  20%  { transform: translate(3px,-1px); opacity:0.5; }
  50%  { transform: translate(1px,1px); opacity:0.7; }
}

/* Glitch overlays (injected by JS) */
.crt-ol1, .crt-ol2 {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
}
.crt-ol1 { mix-blend-mode: screen; filter: hue-rotate(-30deg) saturate(3); }
.crt-ol2 { mix-blend-mode: screen; filter: hue-rotate(120deg) saturate(3); }

/* Static sweep line */
.crt-static-line {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  z-index: 13;
  pointer-events: none;
  background: linear-gradient(to right, transparent 0%, rgba(167,139,250,0.3) 30%, rgba(167,139,250,0.6) 50%, rgba(167,139,250,0.3) 70%, transparent 100%);
  opacity: 0;
  animation: crt-sweep 5s linear infinite;
}
@keyframes crt-sweep {
  0%   { top: -5%; opacity: 0; }
  5%   { opacity: 0.5; }
  95%  { opacity: 0.5; }
  100% { top: 105%; opacity: 0; }
}

/* Noise canvas */
.crt-noise {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: var(--crt-noise-opacity);
  mix-blend-mode: overlay;
  border-radius: inherit;
}

.crt-effect:hover {}

/* Active glitch state */
.crt-glitching {
  animation: crt-hard-flicker 0.25s steps(1) forwards;
}
@keyframes crt-hard-flicker {
  0%,100% { opacity:1; }
  15%  { opacity:0.8; }
  30%  { opacity:1; }
  60%  { opacity:0.85; }
  75%  { opacity:1; }
}

@keyframes crt-slice1 {
  0%   { clip-path:inset(20% 0 60% 0); transform:translateX(-5px); }
  40%  { clip-path:inset(50% 0 30% 0); transform:translateX(5px); }
  80%  { clip-path:inset(70% 0 10% 0); transform:translateX(-3px); }
  100% { clip-path:inset(70% 0 10% 0); transform:translateX(0); }
}
@keyframes crt-slice2 {
  0%   { clip-path:inset(55% 0 30% 0); transform:translateX(6px); }
  40%  { clip-path:inset(10% 0 75% 0); transform:translateX(-6px); }
  80%  { clip-path:inset(35% 0 50% 0); transform:translateX(3px); }
  100% { clip-path:inset(35% 0 50% 0); transform:translateX(0); }
}
.crt-glitching .crt-ol1 { animation: crt-slice1 0.25s steps(2) forwards !important; opacity:0.8 !important; }
.crt-glitching .crt-ol2 { animation: crt-slice2 0.25s steps(2) forwards !important; opacity:0.8 !important; }