/* PIP-OS CRT effects */

/* Scanline + vignette overlay — single div, never per-panel.
   absolute (not fixed) so it tracks #app-shell's actual box — fixed+inset:0
   sizes against the layout viewport on mobile Safari, which can be smaller
   than #app-shell's real height and leave an untextured strip at the bottom. */
#fx-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  border-radius: inherit;
}

/* scanlines */
[data-fx="HIGH"] #fx-overlay,
[data-fx="MODERATE"] #fx-overlay {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 2px,
      rgba(0,0,0,0.15) 2px,
      rgba(0,0,0,0.15) 4px
    );
}

/* rolling scan bar — HIGH only */
@keyframes scan-roll {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}
[data-fx="HIGH"] #fx-overlay {
  animation: scan-roll 8s linear infinite;
}

/* vignette */
#fx-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 501;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.5) 100%);
}
[data-fx="OFF"] #fx-vignette,
[data-fx="LIGHT"] #fx-vignette { opacity: 0; }

/* phosphor glow on text */
[data-fx="HIGH"] { --glow-text: 0 0 8px var(--glow-strong), 0 0 2px var(--glow); }
[data-fx="MODERATE"] { --glow-text: 0 0 4px var(--glow); }
[data-fx="LIGHT"], [data-fx="OFF"] { --glow-text: none; }

[data-fx="HIGH"] .panel-header,
[data-fx="HIGH"] .tab-btn.active,
[data-fx="MODERATE"] .panel-header {
  text-shadow: var(--glow-text);
}

/* global flicker — HIGH only */
@keyframes flicker {
  0%,100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.97; }
  94% { opacity: 1; }
  96% { opacity: 0.98; }
}
[data-fx="HIGH"] #app-shell {
  animation: flicker 6s infinite;
}

/* per-panel flicker on update */
@keyframes panel-flicker {
  0% { opacity: 0.85; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}
.panel-flash {
  animation: panel-flicker 0.25s ease-out forwards;
}

/* interference glitch on nav */
@keyframes glitch-h {
  0% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}
.glitch-active {
  animation: glitch-h 0.12s linear forwards;
}

/* boot screen */
#boot-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  color: var(--fg);
  padding: 2rem;
  text-align: left;
}
#boot-screen pre {
  white-space: pre;
  font-size: clamp(8px,1vmin,12px);
  line-height: 1.2;
  text-align: center;
  margin-bottom: 1.5rem;
}
#boot-log {
  width: min(480px, 90vw);
  font-size: var(--fs-sm);
  line-height: 1.8;
}
#boot-skip {
  margin-top: 1rem;
  font-size: var(--fs-sm);
  color: var(--dim);
}

/* typewriter cursor */
.cursor::after {
  content: '█';
  animation: cursor-blink 0.8s step-end infinite;
}
@keyframes cursor-blink {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ASCII spinner */
.spinner::before {
  content: attr(data-spin);
}

/* wipe transition */
@keyframes wipe-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.wipe-enter {
  animation: wipe-in 0.18s linear forwards;
}

/* reduced-motion: force LIGHT */
@media (prefers-reduced-motion: reduce) {
  [data-fx="HIGH"] #app-shell,
  [data-fx="HIGH"] #fx-overlay,
  [data-fx="MODERATE"] #fx-overlay { animation: none !important; }
}