/* =============================================
   HOLY DOGS — Glitch Effects
   Something is wrong with this website.
   ============================================= */

/* Full-screen glitch flash */
.glitch-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0;
}
.glitch-flash.active {
  animation: screen-flash 0.15s linear;
}
@keyframes screen-flash {
  0% { opacity: 0; background: transparent; }
  20% { opacity: 0.4; background: rgba(107,20,20,0.3); }
  40% { opacity: 0; }
  60% { opacity: 0.3; background: rgba(45,10,78,0.4); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

/* VHS horizontal tear */
.vhs-tear {
  position: fixed;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.4);
  pointer-events: none;
  z-index: 9996;
  opacity: 0;
  transform: translateY(-100px);
}
.vhs-tear.active {
  animation: vhs-scan 0.4s ease-in;
}
@keyframes vhs-scan {
  0% { opacity: 0; transform: translateY(-10px); }
  20% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(110vh); }
}

/* Element-level glitch effect */
.glitch-element {
  position: relative;
}
.glitch-element.glitching::before,
.glitch-element.glitching::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.glitch-element.glitching::before {
  color: #FF003C;
  animation: glitch-before 0.15s linear;
  clip-path: inset(30% 0 50% 0);
  opacity: 0.7;
}
.glitch-element.glitching::after {
  color: #00F3FF;
  animation: glitch-after 0.15s linear;
  clip-path: inset(60% 0 10% 0);
  opacity: 0.7;
}
@keyframes glitch-before {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px) skewX(2deg); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px) skewX(-1deg); }
  100% { transform: translateX(0); }
}
@keyframes glitch-after {
  0% { transform: translateX(0); }
  25% { transform: translateX(4px) skewX(-2deg); }
  50% { transform: translateX(-3px); }
  75% { transform: translateX(2px) skewX(1deg); }
  100% { transform: translateX(0); }
}

/* Konami / triggered full glitch mode */
body.full-glitch {
  animation: body-glitch 0.5s linear 2;
}
@keyframes body-glitch {
  0% { filter: none; }
  10% { filter: hue-rotate(90deg) saturate(3); transform: skewX(1deg); }
  20% { filter: none; transform: none; }
  30% { filter: brightness(2) contrast(0.5); }
  40% { filter: none; }
  50% { filter: invert(0.2) hue-rotate(180deg); transform: skewX(-1deg); }
  60% { filter: none; transform: none; }
  70% { filter: saturate(5) hue-rotate(45deg); }
  80% { filter: none; }
  90% { filter: brightness(0.3); }
  100% { filter: none; transform: none; }
}

/* Text swap glitch */
[data-glitch-alt] {
  position: relative;
  display: inline;
}
[data-glitch-alt].glitching {
  animation: text-swap-glitch 0.2s step-end;
}
@keyframes text-swap-glitch {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.3; }
  50% { opacity: 0; }
  75% { opacity: 0.6; }
}

/* Horizontal shift lines (scan artifact) */
.scan-artifact {
  position: relative;
  overflow: hidden;
}
.scan-artifact::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.03) 3px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  animation: scan-drift 8s linear infinite;
}
@keyframes scan-drift {
  from { background-position: 0 0; }
  to { background-position: 0 100px; }
}

/* Corner artifacts */
.static-corner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.8' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.static-corner:hover::before {
  opacity: 1;
}

/* Watcher eyes hover */
.watcher-hover {
  position: relative;
}
.watcher-hover .eyes-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  background: rgba(8,4,16,0.7);
  border-radius: inherit;
}
.watcher-hover:hover .eyes-overlay {
  opacity: 1;
}
.eye-svg {
  width: 32px;
  height: 20px;
}

/* RGB split on hover */
.rgb-split:hover {
  animation: rgb-hover 0.3s ease;
}
@keyframes rgb-hover {
  0%, 100% { text-shadow: none; }
  50% {
    text-shadow:
      -2px 0 rgba(255,0,0,0.5),
      2px 0 rgba(0,255,255,0.5);
  }
}

/* Shake effect */
.shake {
  animation: shake-anim 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake-anim {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* Color drain effect */
.draining {
  animation: color-drain 3s ease forwards;
}
@keyframes color-drain {
  from { filter: none; }
  to { filter: grayscale(1) brightness(0.6); }
}

/* Typewriter effect for hidden text reveals */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  width: 0;
}
.typewriter.typing {
  animation: typewriter-reveal 2s steps(40) forwards;
  width: auto;
  max-width: 100%;
  white-space: normal;
}

/* Flicker overlay for hidden pages */
.dark-flicker {
  animation: dark-page-flicker 0.1s step-end infinite;
}
@keyframes dark-page-flicker {
  0%, 90%, 95%, 100% { opacity: 1; }
  92% { opacity: 0.9; }
  93% { opacity: 0.7; }
  97% { opacity: 0.95; }
}

/* Signal lost overlay */
.signal-lost-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 9995;
  background: linear-gradient(90deg, var(--burgundy), transparent, var(--burgundy));
  opacity: 0;
  transition: opacity 0.5s;
}
.signal-lost-bar.visible {
  opacity: 1;
  animation: signal-bar 2s ease-in-out infinite;
}
@keyframes signal-bar {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}