/* Starfield */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.star{position:absolute;border-radius:50%;opacity:.7;animation:twinkle 2s infinite alternate}
@keyframes twinkle{from{opacity:.2} to{opacity:1}}

/* Announcer */
#announcer{position:fixed;top:0;left:0;right:0;z-index:5;background:rgba(0,0,0,.75);border-bottom:2px solid var(--neon-cyan)}
#announcer .row{display:flex;gap:12px;align-items:center;padding:6px 10px}
#announcer .blink{animation:blink 1.1s steps(2,start) infinite;color:var(--neon-yellow);font-family:'Press Start 2P', monospace;font-size:12px}
@keyframes blink{50%{opacity:.3}}
#news{white-space:nowrap;overflow:hidden}
#news span{display:inline-block;animation:marq 22s linear infinite}
@keyframes marq{from{transform:translateX(100%)} to{transform:translateX(-100%)}}

/* CRT / Glow variables */
:root {
  --crt-brightness: 0.3;   /* 1 = normal, <1 darker, >1 brighter */
  --crt-contrast: -;    /* color punch */
  --crt-saturation: 2.3;   /* vividness */
  --crt-bloom: 0.7px;      /* blur glow (0px = none, >0px softer bloom) */
  --crt-glow: 0 0 30px rgba(203, 255, 82, 0.3), inset 0 0 40px #000;
}

/* ===========================================================
   GIF Window with CRT Effects (IMG-based version)
=========================================================== */
#gifBox {
  position: absolute;
  transition: opacity 0.4s ease-in-out;
  width: 245px;
  height: 190px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--crt-glow);

  z-index: 1;
  transform-origin: top left;
  transform: scale(calc(1 / var(--page-zoom)));
  animation: crtJitter 3s infinite alternate,
             crtGlitch 12s infinite;
}

/* The actual GIF <img> */
#gifBoxImg {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* fills box, keeps aspect ratio (no squish) */
  image-rendering: pixelated;
  transition: opacity 0ms ease-in-out;
  display: block;
  border-radius: inherit;
  object-fit: fill;
  background: #000;          /* hides gaps if aspect ratio mismatched */
}

/* Depth shading overlay */
#gifBox::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.08) 0%,
    rgba(0,0,0,0.35) 75%
  );
  mix-blend-mode: overlay;
}

/* Moving scanline overlay */
#gifBox::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(255, 0, 0, 0.08) 2px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: multiply;
  animation: scanMove 12s linear infinite;
}

/* Gentle jitter */
@keyframes crtJitter {
  0%   { transform: translate(0px, 0px) scale(1.002, 0.998); }
  25%  { transform: translate(-1px, 0px) scale(0.999, 1.001); }
  50%  { transform: translate(1px, 1px) scale(1.001, 0.999); }
  75%  { transform: translate(0px, -1px) scale(1.0005, 0.9995); }
  100% { transform: translate(0px, 0px) scale(1.002, 0.998); }
}

/* Scanline roll */
@keyframes scanMove {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

/* Optional glitch bursts */
@keyframes crtGlitch {
  0%, 95%, 100% { transform: none; filter: none; }
  96% { transform: translate(-5px, 3px) scale(1, 0.9); filter: hue-rotate(20deg) saturate(2); }
  97% { transform: translate(4px, -2px) scale(0.92, 1); filter: hue-rotate(-20deg) saturate(1.8); }
  98% { transform: translate(-2px, 1px) scale(1, 0.97); filter: none; }
}

/* Screensaver */
#screensaver{position:fixed;inset:0;background:#000;display:none;z-index:100;align-items:center;justify-content:center}
#dvd{position:absolute;width:120px;height:60px;background:#222;border:3px solid #fff;color:#fff;display:grid;place-items:center;font-family:'Press Start 2P'}

/* Cursor trails */
.trail{
  position: fixed;
  pointer-events: none;
  font-size: 16px;
  opacity: .95;
  transform: translate(-50%,-50%);
  animation: trailfade .9s forwards;
  z-index: 9;              /* above windows (z=6) and taskbar (z=8) */
  will-change: transform, opacity;
}
@keyframes trailfade{to{opacity:0;transform:translate(-50%,-50%) scale(.5)}}

/* Animated GIF Cursor overlay */
body.cursor-custom {
  cursor: none;           /* hide system cursor when custom cursor is on */
}
body.cursor-custom,
body.cursor-custom * ,
body.cursor-custom *::before,
body.cursor-custom *::after {
  cursor: none !important;
}
/* Best-effort for iframes */
body.cursor-custom iframe {
  cursor: none !important;
}
#gifCursor {
  
  position: fixed;
  left:-6; top: 0;
  width:60px;            /* will be overridden per-mode via JS */
  height:100px;           /* will be overridden per-mode via JS */
  pointer-events: none;   /* never block clicks */
  z-index: 9999;          /* above trails (z=9) and taskbar (z=8) */
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  image-rendering: pixelated; /* keep that crunchy vibe */
  display: none;          /* shown only when in a GIF mode */
}

/* Theme-specific GIF cursors */
body.theme-retro {
  cursor: none; /* hide system cursor */
}
body.theme-retro #gifCursor {
  background: url("Assets/GIFS/icons/retro-pointer.gif") no-repeat center/contain;
  width: 32px;
  height: 32px;
}
body.theme-xp {
  cursor: none; /* hide system cursor */
}
body.theme-xp #gifCursor {
  background: url("Assets/GIFS/icons/dino.gif") no-repeat center/contain;
  width: 64px;
  height: 64px;
}