#hero {
    position: relative;
    overflow: hidden;
}
#hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.1) 0%, transparent 80%);
    transform: scaleY(0.5);
    transform-origin: bottom; 
    filter: blur(20px);
    pointer-events: none;
}

#hero.glitch-overload {
  filter: url(#glitch-filter);
  background-blend-mode: difference;
  opacity: 0.95;
}

#hero.glitch-overload h1,
#hero.glitch-overload p,
#hero.glitch-overload a {
  animation:
    glitch-intense 0.15s steps(2, end) infinite,
    glitch-flicker 0.15s steps(2, end) infinite,
    rgbSplit-intense 0.6s infinite;
  color: #ff0055;
  transform-origin: center;
  position: relative;
}

#hero.glitch-overload .glitch-image-wrapper {
  position: relative;
  display: inline-block;
  overflow: visible;
  animation:
    glitch-intense-img 0.15s steps(2, end) infinite,
    glitch-flicker 0.15s steps(2, end) infinite,
    rgbSplit-intense 0.6s infinite,
    glitch-color-shift 0.1s infinite alternate;
  transform-origin: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: none;
}

#hero.glitch-overload .glitch-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 0 4px cyan) drop-shadow(0 0 4px magenta);
  animation: image-jitter 0.15s infinite alternate ease-in-out;
}

@keyframes image-jitter {
  0%   { transform: translate(0, 0); filter: drop-shadow(0 0 4px cyan) drop-shadow(0 0 4px magenta); }
  25%  { transform: translate(-6px, 4px); filter: drop-shadow(0 0 8px cyan) drop-shadow(0 0 8px magenta); }
  50%  { transform: translate(6px, -4px); filter: drop-shadow(0 0 10px cyan) drop-shadow(0 0 10px magenta); }
  75%  { transform: translate(-4px, 6px); filter: drop-shadow(0 0 8px cyan) drop-shadow(0 0 8px magenta); }
  100% { transform: translate(0, 0); filter: drop-shadow(0 0 4px cyan) drop-shadow(0 0 4px magenta); }
}

@keyframes glitch-intense {
  0%   { transform: translate(0, 0) scale(1) skew(0deg, 0deg); }
  20%  { transform: translate(-3px, 3px) scale(1.1) skew(7deg, 4deg); }
  40%  { transform: translate(4px, -4px) scale(0.9) skew(-7deg, -4deg); }
  60%  { transform: translate(-2px, 2px) scale(1.15) skew(10deg, 6deg); }
  80%  { transform: translate(3px, -3px) scale(0.85) skew(-10deg, -6deg); }
  100% { transform: translate(0, 0) scale(1) skew(0deg, 0deg); }
}

@keyframes glitch-intense-img {
  0%   { transform: translate(0, 0) scale(1) skew(0deg, 0deg); }
  10%  { transform: translate(-6px, 4px) scale(1.05) skew(5deg, 3deg); }
  25%  { transform: translate(6px, -5px) scale(0.9) skew(-6deg, -3deg); }
  40%  { transform: translate(-4px, 6px) scale(1.15) skew(7deg, 4deg); }
  60%  { transform: translate(5px, -4px) scale(0.85) skew(-8deg, -5deg); }
  80%  { transform: translate(-3px, 5px) scale(1.1) skew(6deg, 3deg); }
  100% { transform: translate(0, 0) scale(1) skew(0deg, 0deg); }
}

@keyframes glitch-flicker {
  0%   { opacity: 1; transform: translate(0, 0) blur(0); }
  20%  { opacity: 0.6; transform: translate(-2px, 2px) blur(1px); }
  40%  { opacity: 0.4; transform: translate(3px, -3px) blur(2px); }
  60%  { opacity: 0.7; transform: translate(-3px, 3px) blur(1px); }
  80%  { opacity: 1; transform: translate(2px, -2px) blur(0); }
  100% { opacity: 0.8; transform: translate(0, 0) blur(0); }
}

@keyframes rgbSplit-intense {
  0%   { text-shadow: -4px 0 red, 4px 0 blue; }
  20%  { text-shadow: -5px 0 red, 5px 0 green; }
  40%  { text-shadow: 4px -4px blue, -4px 4px red; }
  60%  { text-shadow: 5px 5px green, -5px -5px red; }
  80%  { text-shadow: -4px 0 blue, 4px 0 red; }
  100% { text-shadow: 0 0 transparent; }
}

@keyframes glitch-color-shift {
  0%   { filter: hue-rotate(0deg) brightness(1) contrast(1); }
  25%  { filter: hue-rotate(20deg) brightness(1.2) contrast(1.2); }
  50%  { filter: hue-rotate(-20deg) brightness(0.8) contrast(0.8); }
  75%  { filter: hue-rotate(15deg) brightness(1.1) contrast(1.1); }
  100% { filter: hue-rotate(0deg) brightness(1) contrast(1); }
}

.flicker-text {
    animation: flicker 0.3s linear infinite;
}

@keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}