/* Glitch Aesthetics - Windows 2K Edition */

/* Performance optimizations */
.gallery-page {
  transform: translateZ(0); /* Force hardware acceleration */
}

.noise-overlay,
.gallery-page::before,
.gallery-page::after {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* CRT Monitor Effects - Only on gallery page */
.gallery-page {
  position: relative;
  overflow: hidden;
}

/* Scan lines disabled for performance testing */
/*
.gallery-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 9998;
  animation: scan-lines 12s linear infinite;
}

@keyframes scan-lines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 10px;
  }
}
*/

/* Screen flicker - Disabled for performance */
/*
.gallery-page::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
  z-index: 9997;
  animation: flicker 2s infinite;
}
*/

@keyframes flicker {
  0% {
    opacity: 0.97;
  }
  10% {
    opacity: 0.98;
  }
  20% {
    opacity: 0.97;
  }
  30% {
    opacity: 0.99;
  }
  40% {
    opacity: 0.98;
  }
  50% {
    opacity: 0.96;
  }
  60% {
    opacity: 0.97;
  }
  70% {
    opacity: 0.98;
  }
  80% {
    opacity: 0.97;
  }
  90% {
    opacity: 0.99;
  }
  100% {
    opacity: 0.98;
  }
}

/* Chromatic Aberration */
.glitch-text {
  position: relative;
  /* animation: text-glitch 3s infinite; */
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  /* animation: glitch-1 0.5s infinite; */
  color: #00ffff;
  z-index: -1;
}

.glitch-text::after {
  /* animation: glitch-2 0.5s infinite; */
  color: #ff00ff;
  z-index: -2;
}

@keyframes glitch-1 {
  0% {
    clip-path: inset(20% 0 30% 0);
    transform: translate(-2px, 0);
  }
  20% {
    clip-path: inset(65% 0 5% 0);
    transform: translate(2px, 0);
  }
  40% {
    clip-path: inset(10% 0 85% 0);
    transform: translate(-1px, 0);
  }
  60% {
    clip-path: inset(40% 0 40% 0);
    transform: translate(1px, 0);
  }
  80% {
    clip-path: inset(80% 0 10% 0);
    transform: translate(-2px, 0);
  }
  100% {
    clip-path: inset(20% 0 30% 0);
    transform: translate(0);
  }
}

@keyframes glitch-2 {
  0% {
    clip-path: inset(65% 0 5% 0);
    transform: translate(2px, 0);
  }
  20% {
    clip-path: inset(10% 0 85% 0);
    transform: translate(-1px, 0);
  }
  40% {
    clip-path: inset(40% 0 40% 0);
    transform: translate(1px, 0);
  }
  60% {
    clip-path: inset(80% 0 10% 0);
    transform: translate(-2px, 0);
  }
  80% {
    clip-path: inset(20% 0 30% 0);
    transform: translate(2px, 0);
  }
  100% {
    clip-path: inset(65% 0 5% 0);
    transform: translate(0);
  }
}

/* Image Glitch on Hover - Only on gallery page */
.gallery-page .media-item:hover img {
  animation: image-glitch 0.3s;
  filter: saturate(3) hue-rotate(5deg);
}

.gallery-page .media-item:nth-child(3n):hover img {
  animation: rgb-split 0.2s;
}

.gallery-page .media-item:nth-child(5n):hover img {
  animation: distortion 0.4s;
}

@keyframes image-glitch {
  0%, 100% {
    filter: hue-rotate(0deg) saturate(1);
    transform: scale(1) translateX(0);
  }
  20% {
    filter: hue-rotate(90deg) saturate(3);
    transform: scale(1.02) translateX(-2px);
  }
  40% {
    filter: hue-rotate(-90deg) saturate(0.5);
    transform: scale(0.98) translateX(2px);
  }
  60% {
    filter: hue-rotate(45deg) saturate(2);
    transform: scale(1.01) translateX(-1px);
  }
  80% {
    filter: hue-rotate(-45deg) saturate(1.5);
    transform: scale(0.99) translateX(1px);
  }
}

@keyframes rgb-split {
  0%, 100% {
    filter: none;
  }
  25% {
    filter: drop-shadow(2px 0 red) drop-shadow(-2px 0 cyan);
  }
  50% {
    filter: drop-shadow(-2px 0 red) drop-shadow(2px 0 cyan);
  }
  75% {
    filter: drop-shadow(1px 0 yellow) drop-shadow(-1px 0 magenta);
  }
}

@keyframes distortion {
  0%, 100% {
    transform: skew(0deg);
  }
  15% {
    transform: skew(-0.5deg) scale(1.02);
  }
  30% {
    transform: skew(0.8deg) scale(0.98);
  }
  45% {
    transform: skew(-0.3deg) scale(1.01);
  }
  60% {
    transform: skew(0.4deg) scale(0.99);
  }
  75% {
    transform: skew(-0.2deg) scale(1.005);
  }
  90% {
    transform: skew(0.1deg) scale(0.995);
  }
}

/* Digital Noise Overlay */
.noise-overlay {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200%;
  background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj4KICA8ZmlsdGVyIGlkPSJub2lzZSI+CiAgICA8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSI0IiAvPgogIDwvZmlsdGVyPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNub2lzZSkiIG9wYWNpdHk9IjAuMDIiLz4KPC9zdmc+') repeat;
  /* animation: noise 1s infinite; */
  opacity: 0.03;
  pointer-events: none;
  z-index: 9999;
}

@keyframes noise {
  0%, 100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 25%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}

/* VHS Tracking Lines - Removed */

/* Corrupted Window Borders */
.window-corrupt {
  /* animation: window-glitch 15s infinite; */
}

@keyframes window-glitch {
  0%, 95%, 100% {
    transform: none;
    filter: none;
  }
  96% {
    transform: translateX(2px);
    filter: brightness(1.2);
  }
  97% {
    transform: translateX(-2px) translateY(1px);
    filter: contrast(1.5);
  }
  98% {
    transform: translateY(-1px);
    filter: saturate(2);
  }
  99% {
    transform: translateX(1px);
    filter: hue-rotate(30deg);
  }
}

/* Blue Screen Flash - Removed */
/* .bsod-flash {
  animation: bsod 20s infinite;
}

@keyframes bsod {
  0%, 94%, 100% {
    background: transparent;
  }
  95%, 96% {
    background: #0000aa !important;
    color: #ffffff !important;
  }
} */

/* Random Pixel Corruption */
.pixel-corrupt {
  position: relative;
}

.pixel-corrupt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 1deg,
    rgba(255, 0, 255, 0.1) 1deg,
    rgba(0, 255, 255, 0.1) 2deg
  );
  animation: pixel-shift 15s infinite;
  pointer-events: none;
  opacity: 0;
}

@keyframes pixel-shift {
  0%, 90%, 100% {
    opacity: 0;
  }
  92%, 93% {
    opacity: 1;
  }
}

/* Cursor Trail Effect - Removed */

/* System Error States - Removed */

/* Theme-Specific Glitches - Only on gallery page */
.gallery-page [data-theme="Hot Rat Summer"] .media-content {
  /* animation: melt 20s infinite; */
}

@keyframes melt {
  0%, 85%, 100% {
    transform: none;
    filter: none;
  }
  90% {
    transform: translateY(2px) scaleY(1.02);
    filter: blur(0.5px) contrast(1.2);
  }
  95% {
    transform: translateY(4px) scaleY(1.04);
    filter: blur(1px) saturate(2);
  }
}

.gallery-page [data-theme="Abstract August"] .media-content {
  /* animation: channel-split 15s infinite; */
}

@keyframes channel-split {
  0%, 88%, 100% {
    filter: none;
  }
  90% {
    filter: drop-shadow(3px 0 red) drop-shadow(-3px 0 cyan);
  }
  92% {
    filter: drop-shadow(-2px 0 yellow) drop-shadow(2px 0 magenta);
  }
  94% {
    filter: drop-shadow(1px 0 lime) drop-shadow(-1px 0 blue);
  }
}

/* Glitched Loading State */
@keyframes glitch-load {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(0);
  }
  5% {
    clip-path: polygon(0 10%, 100% 10%, 100% 90%, 0 90%);
    transform: translateX(-5px);
  }
  10% {
    clip-path: polygon(0 20%, 100% 20%, 100% 60%, 0 60%);
    transform: translateX(5px);
  }
  15% {
    clip-path: polygon(0 40%, 100% 40%, 100% 80%, 0 80%);
    transform: translateX(-3px);
  }
  20% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(0);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(0);
  }
}

.glitch-loading {
  animation: glitch-load 2s infinite;
}

/* Memory Leak Simulation - Removed */

/* Theme-based artist name styling */
.gallery-page .media-item[data-theme="Hot Rat Summer"] .window > div[style*="background: #c0c0c0"] {
  background: linear-gradient(45deg, #ff6b35, #f7931e) !important;
  color: #fff !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7) !important;
  font-weight: bold !important;
  /* No animation for performance */
}

.gallery-page .media-item[data-theme="Abstract August"] .window > div[style*="background: #c0c0c0"] {
  background: linear-gradient(45deg, #667eea, #764ba2) !important;
  color: #fff !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7) !important;
  font-weight: bold !important;
  /* No animation for performance */
}

@keyframes heat-shimmer {
  0% {
    filter: hue-rotate(0deg) saturate(1.2);
    transform: scaleY(1);
  }
  50% {
    filter: hue-rotate(15deg) saturate(1.5);
    transform: scaleY(1.02);
  }
  100% {
    filter: hue-rotate(-10deg) saturate(1.3);
    transform: scaleY(1);
  }
}

@keyframes abstract-shift {
  0% {
    background: linear-gradient(45deg, #667eea, #764ba2);
  }
  33% {
    background: linear-gradient(45deg, #f093fb, #f5576c);
  }
  66% {
    background: linear-gradient(45deg, #4facfe, #00f2fe);
  }
  100% {
    background: linear-gradient(45deg, #667eea, #764ba2);
  }
}