/* ==========================================================================
   ATMOSPHERE — grain, vignette, scanlines, flicker, glitch, boot screen
   All layers are pointer-events:none and sit above the wallpaper.
   ========================================================================== */

.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90000;
}

/* film grain (animated) */
#fx-grain {
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.6s steps(2) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-4%, 3%); }
  100% { transform: translate(3%, -2%); }
}

/* vignette */
#fx-vignette {
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
  mix-blend-mode: multiply;
}

/* CRT scanlines + a slow moving scan bar */
#fx-scan {
  opacity: var(--scan-opacity);
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.35) 3px,
    rgba(0, 0, 0, 0) 4px
  );
}
#fx-scan::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, rgba(217, 118, 43, 0.05), transparent);
  animation: scanbar 7s linear infinite;
}
@keyframes scanbar {
  from { top: -140px; }
  to { top: 100%; }
}

/* whole-screen flicker */
#fx-flicker {
  background: #000;
  opacity: 0;
  animation: flicker 6s infinite steps(1);
}
@keyframes flicker {
  0%, 96%, 100% { opacity: 0; }
  97% { opacity: 0.06; }
  98% { opacity: 0; }
  99% { opacity: 0.09; }
}

/* reusable glitch text effect */
.glitch {
  position: relative;
  animation: glitch-skew 4s infinite steps(1);
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 0);
}
.glitch::before {
  color: var(--ember);
  transform: translate(-2px, 0);
  animation: glitch-a 3.2s infinite steps(2);
  opacity: 0.7;
}
.glitch::after {
  color: var(--bone);
  transform: translate(2px, 0);
  animation: glitch-b 2.6s infinite steps(2);
  opacity: 0.4;
}
@keyframes glitch-a {
  0%, 90%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  92% { clip-path: inset(10% 0 60% 0); transform: translate(-3px, -1px); }
  95% { clip-path: inset(50% 0 20% 0); transform: translate(2px, 1px); }
}
@keyframes glitch-b {
  0%, 88%, 100% { clip-path: inset(100% 0 0 0); transform: translate(0); }
  90% { clip-path: inset(70% 0 10% 0); transform: translate(3px, 1px); }
  93% { clip-path: inset(20% 0 55% 0); transform: translate(-2px, -1px); }
}
@keyframes glitch-skew {
  0%, 97%, 100% { transform: skew(0deg); }
  98% { transform: skew(0.4deg); }
}

/* ---- BOOT / LOGIN SCREEN ---- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 99000;
  background: var(--void);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6vh 8vw;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.55;
  overflow: hidden;
}
#boot.done {
  animation: boot-out 0.7s ease forwards;
}
@keyframes boot-out {
  to { opacity: 0; visibility: hidden; filter: blur(6px); }
}
#boot-log { white-space: pre-wrap; max-width: 820px; }
#boot-log .ok { color: var(--ok); }
#boot-log .em { color: var(--ember); }
#boot-log .muted { color: var(--dust); }
#boot .cursor-blink {
  display: inline-block;
  width: 9px; height: 1.05em;
  background: var(--ember);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

#boot-brand {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 5rem);
  letter-spacing: 0.14em;
  margin-bottom: 24px;
  color: var(--bone);
  text-shadow: 0 0 30px var(--ember-glow);
}
#boot-skip {
  position: absolute;
  bottom: 26px; right: 32px;
  color: var(--faint);
  font-size: 0.78rem;
}
#boot-skip b { color: var(--dust); }

/* motion-reduced users get calm */
@media (prefers-reduced-motion: reduce) {
  #fx-grain, #fx-scan, #fx-scan::after, #fx-flicker,
  .glitch, .glitch::before, .glitch::after,
  #wallpaper { animation: none !important; }
  .glitch::before, .glitch::after { display: none; }
  #fx-scan { opacity: 0.12; }
}

/* Settings toggles add classes on <html> */
html.no-grain #fx-grain { display: none; }
html.no-scan #fx-scan { display: none; }
html.no-flicker #fx-flicker { display: none; }
html.no-glitch .glitch::before,
html.no-glitch .glitch::after { display: none; }