/* ==========================================================
   IRIS — animations / shaders / transitions
   ========================================================== */

@keyframes pulseEye{
  0%, 100%{ transform: scale(1); filter: drop-shadow(0 0 30px rgba(126,200,255,0.5)); }
  50%{ transform: scale(1.04); filter: drop-shadow(0 0 60px rgba(126,200,255,0.85)); }
}

@keyframes titleBreathe{
  0%, 100%{ text-shadow: 0 0 30px rgba(126,200,255,0.4), 0 0 80px rgba(126,200,255,0.2); }
  50%{ text-shadow: 0 0 50px rgba(126,200,255,0.7), 0 0 120px rgba(126,200,255,0.4); }
}

@keyframes overlayIn{
  from{ opacity: 0; transform: scale(0.96); }
  to{ opacity: 1; transform: scale(1); }
}

@keyframes viewIn{
  from{ opacity: 0; transform: translateY(8px) scale(0.99); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes endIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes takeoverIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes notifIn{
  from{ opacity: 0; transform: translateY(-10px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes swipeBob{
  0%, 100%{ transform: translateY(0); opacity: 0.5; }
  50%{ transform: translateY(-6px); opacity: 1; }
}

@keyframes iconGlitch{
  0%, 100%{ transform: translateX(0); filter: none; }
  25%{ transform: translateX(-2px); filter: hue-rotate(20deg); }
  50%{ transform: translateX(2px); filter: hue-rotate(-20deg) saturate(1.4); }
  75%{ transform: translateX(-1px); filter: brightness(1.3); }
}

@keyframes msgGlitch{
  0%, 100%{ transform: translateX(0); }
  20%{ transform: translateX(-1px); }
  40%{ transform: translateX(2px); }
  60%{ transform: translateX(-2px); }
  80%{ transform: translateX(1px); }
}

@keyframes dotBounce{
  0%, 60%, 100%{ transform: translateY(0); opacity: 0.4; }
  30%{ transform: translateY(-6px); opacity: 1; }
}

@keyframes artPulse{
  0%, 100%{ opacity: 0.4; }
  50%{ opacity: 0.9; }
}

@keyframes pinPulse{
  0%, 100%{ box-shadow: 0 0 0 8px rgba(126,200,255,0.2), 0 0 30px var(--accent); }
  50%{ box-shadow: 0 0 0 16px rgba(126,200,255,0), 0 0 50px var(--accent); }
}

@keyframes noiseShift{
  0%, 100%{ transform: translate(0, 0); }
  50%{ transform: translate(2px, -2px); }
}

@keyframes toastIn{
  from{ opacity: 0; transform: translateY(-30px) scale(0.95); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut{
  to{ opacity: 0; transform: translateY(-12px); }
}

/* ============================================================
   Glitch / horror / takeover effects
   ============================================================ */

@keyframes systemFlicker{
  0%, 100%{ filter: none; }
  3%{ filter: brightness(1.4) saturate(2) hue-rotate(20deg); }
  6%{ filter: brightness(0.7); }
  10%{ filter: none; }
  50%{ filter: none; }
  52%{ filter: invert(1) hue-rotate(180deg); }
  54%{ filter: none; }
}

.flicker{ animation: systemFlicker 3s linear infinite; }

@keyframes screenShake{
  0%, 100%{ transform: translate(0,0); }
  10%{ transform: translate(-2px, 1px); }
  20%{ transform: translate(3px, -1px); }
  30%{ transform: translate(-1px, 2px); }
  40%{ transform: translate(2px, 1px); }
  50%{ transform: translate(-2px, -2px); }
  60%{ transform: translate(1px, 2px); }
  70%{ transform: translate(-2px, 1px); }
  80%{ transform: translate(2px, -1px); }
  90%{ transform: translate(-1px, 1px); }
}

.shake{ animation: screenShake 0.4s linear; }
.shake-long{ animation: screenShake 0.4s linear 4; }

@keyframes chromaShift{
  0%, 100%{ text-shadow: 0 0 0 transparent; }
  50%{ text-shadow: -1px 0 var(--red), 1px 0 var(--accent); }
}

.chroma{ animation: chromaShift 0.15s linear infinite; }

@keyframes rgbSplit{
  0%, 100%{ filter: none; }
  50%{
    filter:
      drop-shadow(-2px 0 0 rgba(255,0,80,0.7))
      drop-shadow(2px 0 0 rgba(0,180,255,0.7));
  }
}

.rgb-split{ animation: rgbSplit 0.3s linear infinite; }

@keyframes glitchSlice{
  0%, 100%{ clip-path: inset(0 0 0 0); }
  20%{ clip-path: inset(20% 0 40% 0); }
  40%{ clip-path: inset(60% 0 10% 0); }
  60%{ clip-path: inset(10% 0 70% 0); }
  80%{ clip-path: inset(40% 0 30% 0); }
}

.slice{ animation: glitchSlice 0.4s steps(2) infinite; }

@keyframes invertBlink{
  0%, 100%{ filter: none; }
  50%{ filter: invert(1) hue-rotate(180deg); }
}

.invert-blink{ animation: invertBlink 0.18s steps(2) infinite; }

@keyframes wallpaperWarp{
  0%, 100%{ transform: scale(1); filter: hue-rotate(0deg); }
  50%{ transform: scale(1.05); filter: hue-rotate(40deg) saturate(1.4); }
}

.wallpaper-warp{ animation: wallpaperWarp 8s ease-in-out infinite; }

/* ============================================================
   Lag / overheating
   ============================================================ */

@keyframes overheat{
  0%, 100%{ filter: hue-rotate(0deg); }
  50%{ filter: hue-rotate(15deg) brightness(1.1); }
}

.overheat{ animation: overheat 2s ease-in-out infinite; }

@keyframes lagSpike{
  0%{ opacity: 1; }
  50%{ opacity: 0.6; transform: translateY(2px); }
  100%{ opacity: 1; transform: translateY(0); }
}

.lag{ animation: lagSpike 0.6s ease; }

/* ============================================================
   Inertia scroll feel
   ============================================================ */

.iris-log, .messages-list, .gallery-grid, .settings-list,
.notes-list, .browser-body, .store-list, .updater-body, .music-player{
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(126,200,255,0.2) transparent;
}
.iris-log::-webkit-scrollbar,
.messages-list::-webkit-scrollbar,
.gallery-grid::-webkit-scrollbar,
.settings-list::-webkit-scrollbar,
.notes-list::-webkit-scrollbar,
.browser-body::-webkit-scrollbar,
.store-list::-webkit-scrollbar,
.updater-body::-webkit-scrollbar,
.music-player::-webkit-scrollbar{
  width: 3px;
}
.iris-log::-webkit-scrollbar-thumb,
.messages-list::-webkit-scrollbar-thumb,
.gallery-grid::-webkit-scrollbar-thumb,
.settings-list::-webkit-scrollbar-thumb,
.notes-list::-webkit-scrollbar-thumb,
.browser-body::-webkit-scrollbar-thumb,
.store-list::-webkit-scrollbar-thumb,
.updater-body::-webkit-scrollbar-thumb,
.music-player::-webkit-scrollbar-thumb{
  background: rgba(126,200,255,0.25);
  border-radius: 2px;
}

/* typing cursor */
.typing-cursor{
  display: inline-block;
  width: 6px;
  height: 12px;
  background: var(--accent-2);
  vertical-align: middle;
  margin-left: 2px;
  animation: cursorBlink 0.7s steps(2) infinite;
}
@keyframes cursorBlink{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0; }
}