/* ============================================================
   EXTREME.CSS — OVERDRIVE: RGB Split, Holo Scan, Fire Borders
              + Energy Beam, Plasma Glow, Hyper Pulse
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   RGB SPLIT GLITCH — on hover, text splits into RGB channels
   ════════════════════════════════════════════════════════════ */
.rgb-split {
  transition: text-shadow 0.15s ease;
}
.rgb-split:hover {
  animation: rgb-split-anim 0.25s steps(1) infinite;
}

@keyframes rgb-split-anim {
  0%   { text-shadow:  -3px 0  rgba(255,0,100,0.7),  3px 0  rgba(0,200,255,0.7); }
  25%  { text-shadow:   3px 0  rgba(255,0,100,0.7), -3px 0  rgba(0,200,255,0.7); }
  50%  { text-shadow:  -2px -2px rgba(255,0,100,0.7), 2px 2px rgba(0,200,255,0.7); }
  75%  { text-shadow:   2px 2px rgba(255,0,100,0.7), -2px -2px rgba(0,200,255,0.7); }
  100% { text-shadow:  -3px 0  rgba(255,0,100,0.7),  3px 0  rgba(0,200,255,0.7); }
}

/* ════════════════════════════════════════════════════════════
   HOLOGRAPHIC SCAN LINE — sweeping horizontal beam
   ════════════════════════════════════════════════════════════ */
.holo-scan {
  position: relative;
  overflow: hidden;
}
.holo-scan::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 40%,
    rgba(100, 200, 255, 0.06) 45%,
    rgba(180, 220, 255, 0.25) 48%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(180, 220, 255, 0.25) 52%,
    rgba(100, 200, 255, 0.06) 55%,
    transparent 60%,
    transparent 100%
  );
  background-size: 100% 200%;
  animation: holo-sweep 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}

@keyframes holo-sweep {
  0%   { background-position: 0% -100%; }
  100% { background-position: 0% 200%; }
}

/* ════════════════════════════════════════════════════════════
   ENERGY BEAM SWEEP — full-screen diagonal laser sweep
   ════════════════════════════════════════════════════════════ */
.energy-beam-sweep {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 35%,
    rgba(100, 200, 255, 0.03) 40%,
    rgba(180, 220, 255, 0.12) 45%,
    rgba(255, 255, 255, 0.2) 47%,
    rgba(180, 220, 255, 0.12) 50%,
    rgba(255, 92, 176, 0.06) 53%,
    rgba(100, 200, 255, 0.03) 55%,
    transparent 60%,
    transparent 100%
  );
  animation: energy-beam 8s ease-in-out infinite;
}

@keyframes energy-beam {
  0%, 100% {
    opacity: 0;
    transform: translateX(-100%) skewX(-15deg);
  }
  5% {
    opacity: 0.8;
  }
  20% {
    opacity: 0.8;
    transform: translateX(200%) skewX(-15deg);
  }
  21% {
    opacity: 0;
    transform: translateX(200%) skewX(-15deg);
  }
}

/* ════════════════════════════════════════════════════════════
   FIRE / PLASMA BORDER — molten energy ring
   ════════════════════════════════════════════════════════════ */
.plasma-border {
  position: relative;
}
.plasma-border::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    #ff0040, #ff5c00, #ffcc00, #00ff88, #0080ff, #a000ff, #ff0040
  );
  background-size: 200% 200%;
  animation: plasma-rotate 1s linear infinite, plasma-breathe 2s ease-in-out infinite;
  filter: blur(8px);
  opacity: 0.7;
  z-index: -1;
}
.plasma-border::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from 180deg,
    #ff2060, #ff8040, #ffe040, #40ffa0, #40a0ff, #c040ff, #ff2060
  );
  background-size: 200% 200%;
  animation: plasma-rotate 0.7s linear infinite reverse;
  z-index: -1;
  opacity: 0.5;
}

@keyframes plasma-rotate {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes plasma-breathe {
  0%, 100% { filter: blur(8px); opacity: 0.7; }
  50%      { filter: blur(16px); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   HYPER PULSE — extremely fast, intense glow breathing
   ════════════════════════════════════════════════════════════ */
.hyper-pulse {
  animation: hyper-pulse-anim 0.4s ease-in-out infinite;
}

@keyframes hyper-pulse-anim {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 10px currentColor);
  }
  30% {
    filter: brightness(2.5) drop-shadow(0 0 30px currentColor) drop-shadow(0 0 60px currentColor);
  }
  60% {
    filter: brightness(0.6) drop-shadow(0 0 2px currentColor);
  }
}

/* ════════════════════════════════════════════════════════════
   NEON FLICKER — random on/off like a failing neon sign
   ════════════════════════════════════════════════════════════ */
.neon-flicker {
  animation: neon-flicker-anim 5s infinite;
}

@keyframes neon-flicker-anim {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #0fa,
      0 0 82px #0fa,
      0 0 92px #0fa,
      0 0 102px #0fa,
      0 0 151px #0fa;
  }
  20%, 24%, 55% {
    opacity: 0.3;
    text-shadow: none;
  }
}

/* ════════════════════════════════════════════════════════════
   WARP SPEED STARS — background layer for sections
   ════════════════════════════════════════════════════════════ */
.warp-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.warp-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: warp-star-move linear infinite;
}

@keyframes warp-star-move {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--wdx), var(--wdy)) scale(0.2);
    opacity: 0;
  }
}

/* ════════════════════════════════════════════════════════════
   DATA CORRUPTION GLITCH — whole element glitches out
   ════════════════════════════════════════════════════════════ */
.data-corrupt {
  animation: data-corrupt-anim 4s steps(1) infinite;
}

@keyframes data-corrupt-anim {
  0%, 92%, 94%, 96%, 100% {
    transform: translate(0, 0);
    filter: none;
    clip-path: none;
  }
  93% {
    transform: translate(-4px, 2px);
    filter: hue-rotate(90deg) saturate(3);
    clip-path: inset(20% 0 60% 0);
  }
  95% {
    transform: translate(3px, -1px);
    filter: hue-rotate(-45deg) saturate(2);
    clip-path: inset(60% 0 15% 0);
  }
  97% {
    transform: translate(-2px, -3px);
    filter: hue-rotate(180deg) brightness(2);
    clip-path: inset(10% 0 70% 0);
  }
}

/* ════════════════════════════════════════════════════════════
   LIQUID METAL SHIMMER — flowing metallic reflection
   ════════════════════════════════════════════════════════════ */
.liquid-metal {
  position: relative;
  overflow: hidden;
}
.liquid-metal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.15) 45%,
    rgba(255, 255, 255, 0.3) 47%,
    rgba(255, 255, 255, 0.15) 49%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation: liquid-metal-flow 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes liquid-metal-flow {
  0%   { background-position: 200% 200%; }
  100% { background-position: -200% -200%; }
}

/* ════════════════════════════════════════════════════════════
   STATIC BURST — white noise flash overlay
   ════════════════════════════════════════════════════════════ */
.static-burst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: static-burst-anim 8s steps(1) infinite;
}

@keyframes static-burst-anim {
  0%, 93%, 95%, 97%, 100% { opacity: 0; }
  94%  { opacity: 0.06; }
  96%  { opacity: 0.04; }
}

/* ════════════════════════════════════════════════════════════
   GLITCH BLOCK — offset duplicate for corruption effect
   ════════════════════════════════════════════════════════════ */
.glitch-block {
  position: relative;
}
.glitch-block::before,
.glitch-block::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.glitch-block:hover::before {
  animation: glitch-block-anim 0.3s infinite;
  color: #0ff;
  opacity: 0.8;
  z-index: -1;
}
.glitch-block:hover::after {
  animation: glitch-block-anim 0.3s infinite reverse;
  color: #f0f;
  opacity: 0.8;
  z-index: -2;
}

@keyframes glitch-block-anim {
  0%   { transform: translate(0); }
  20%  { transform: translate(-3px, 2px); }
  40%  { transform: translate(3px, -1px); }
  60%  { transform: translate(-2px, -3px); }
  80%  { transform: translate(1px, 3px); }
  100% { transform: translate(0); }
}

/* ════════════════════════════════════════════════════════════
   PARTICLE RING — orbiting ring around target element
   ════════════════════════════════════════════════════════════ */
.particle-ring {
  position: relative;
}
.particle-ring::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(100, 200, 255, 0.6),
    transparent 40%,
    rgba(255, 100, 180, 0.6),
    transparent 80%,
    rgba(100, 200, 255, 0.6),
    transparent
  ) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: particle-ring-spin 2s linear infinite;
  filter: blur(1px);
  pointer-events: none;
  z-index: -1;
}

@keyframes particle-ring-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ════════════════════════════════════════════════════════════
   EXPLOSIVE REVEAL — scale + blur + glow entrance
   ════════════════════════════════════════════════════════════ */
.explosive-reveal {
  animation: explosive-reveal-anim 0.6s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

@keyframes explosive-reveal-anim {
  0% {
    transform: scale(0.3);
    filter: blur(12px) brightness(2);
    opacity: 0;
  }
  60% {
    filter: blur(0px) brightness(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    filter: blur(0px) brightness(1);
    opacity: 1;
  }
}

/* ════════════════════════════════════════════════════════════
   GLOBAL ENERGY FIELD — floating ambient particles
   ════════════════════════════════════════════════════════════ */
#energy-field {
  mix-blend-mode: screen;
}

/* ════════════════════════════════════════════════════════════
   SCROLL STREAMS CANVAS
   ════════════════════════════════════════════════════════════ */
#scroll-streams {
  mix-blend-mode: screen;
}

/* ════════════════════════════════════════════════════════════
   ENERGY NODES — pulsing boundary markers
   ════════════════════════════════════════════════════════════ */
.energy-node {
  will-change: transform, opacity;
}

/* ════════════════════════════════════════════════════════════
   SECTION GLOW ENHANCEMENT — stronger ambient orbs
   ════════════════════════════════════════════════════════════ */
.section-glow-ambient {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.12;
  animation: ambient-orb-drift 8s ease-in-out infinite;
}

.section-glow-ambient--blue  { background: #4da6ff; top: 10%; left: -15%; animation-delay: 0s; }
.section-glow-ambient--purple { background: #b44dff; top: 60%; right: -10%; animation-delay: 2s; }
.section-glow-ambient--green  { background: #00ffa0; bottom: 5%; left: 10%; animation-delay: 4s; }
.section-glow-ambient--orange { background: #ff9040; top: 30%; right: 5%; animation-delay: 6s; }

@keyframes ambient-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(30px, -20px) scale(1.1); }
  50%      { transform: translate(-20px, 30px) scale(0.9); }
  75%      { transform: translate(-30px, -10px) scale(1.05); }
}

/* ════════════════════════════════════════════════════════════
   GLOW BURST — triggered by extreme.js text decode
   ════════════════════════════════════════════════════════════ */
@keyframes glow-burst-flash {
  0%   { filter: brightness(1) drop-shadow(0 0 5px currentColor); }
  50%  { filter: brightness(3) drop-shadow(0 0 40px currentColor) drop-shadow(0 0 80px currentColor); }
  100% { filter: brightness(1) drop-shadow(0 0 5px currentColor); }
}