/* sireninfo.net shared effects: cinematic black/red atmosphere, hovers, toasts, ticker.
   Everything here is decorative and pointer-events: none unless it's a control. */

::selection { background: rgba(255,59,48,.85); color: #fff; }

/* ---------- Atmosphere layers ---------- */
.fx-scan, .fx-vignette, .fx-glow { position: fixed; inset: 0; pointer-events: none; }
.fx-vignette {
  z-index: 40;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* CRT scanlines + a slow, faint flicker (opacity only, so it stays on the compositor) */
.fx-scan {
  z-index: 41;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity: .55;
  animation: fx-flicker 7s infinite steps(1, end);
}
@keyframes fx-flicker {
  0%, 100% { opacity: .55; } 41% { opacity: .55; } 42% { opacity: .38; } 43% { opacity: .6; }
  44% { opacity: .5; } 77% { opacity: .55; } 78% { opacity: .42; } 79% { opacity: .55; }
}
/* Red light that follows the pointer (desktop only; positioned by fx.js) */
.fx-glow {
  z-index: -1;
  inset: auto;
  left: 0; top: 0;
  width: 46rem; height: 46rem; margin: -23rem 0 0 -23rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,59,48,.16) 0%, rgba(255,59,48,.06) 35%, transparent 65%);
  opacity: 0;
  transition: opacity .6s;
  will-change: transform;
}
.fx-glow.on { opacity: 1; }

/* ---------- HUD targeting frame ---------- */
.hud { position: relative; }
.hud::before, .hud::after {
  content: ""; position: absolute; pointer-events: none;
  width: clamp(14px, 3vw, 34px); height: clamp(14px, 3vw, 34px);
  border: 2px solid var(--siren, #ff3b30);
  filter: drop-shadow(0 0 6px rgba(255,59,48,.8));
  transition: transform .35s cubic-bezier(.2,.9,.3,1.4);
}
.hud::before { top: -.35em; left: -.45em; border-right: 0; border-bottom: 0; }
.hud::after { bottom: -.25em; right: -.45em; border-left: 0; border-top: 0; }
.hud > .hud-c { position: absolute; inset: 0; pointer-events: none; }
.hud > .hud-c::before, .hud > .hud-c::after {
  content: ""; position: absolute;
  width: clamp(14px, 3vw, 34px); height: clamp(14px, 3vw, 34px);
  border: 2px solid var(--siren, #ff3b30);
  filter: drop-shadow(0 0 6px rgba(255,59,48,.8));
  transition: transform .35s cubic-bezier(.2,.9,.3,1.4);
}
.hud > .hud-c::before { top: -.35em; right: -.45em; border-left: 0; border-bottom: 0; }
.hud > .hud-c::after { bottom: -.25em; left: -.45em; border-right: 0; border-top: 0; }
.hud:hover::before { transform: translate(-6px, -6px); }
.hud:hover::after { transform: translate(6px, 6px); }
.hud:hover > .hud-c::before { transform: translate(6px, -6px); }
.hud:hover > .hud-c::after { transform: translate(-6px, 6px); }

/* ---------- Glitch (RGB split) ---------- */
.glitch-hover:hover, .glitching { animation: fx-glitch .38s steps(2, end) 1; }
@keyframes fx-glitch {
  0%   { text-shadow: 2px 0 rgba(0,255,255,.55), -2px 0 rgba(255,0,60,.75); transform: translate(0); }
  25%  { text-shadow: -3px 1px rgba(0,255,255,.55), 3px -1px rgba(255,0,60,.75); transform: translate(-1px, 1px); }
  50%  { text-shadow: 3px -1px rgba(0,255,255,.5), -3px 1px rgba(255,0,60,.7); transform: translate(1px, -1px) skewX(-2deg); }
  75%  { text-shadow: -1px 0 rgba(0,255,255,.4), 1px 0 rgba(255,0,60,.6); transform: translate(0); }
  100% { text-shadow: none; transform: none; }
}
/* For background-clipped text (the grain number) use a drop-shadow split instead */
.glitch-clip { animation: fx-glitch-clip .45s steps(3, end) 1; }
@keyframes fx-glitch-clip {
  0%   { filter: drop-shadow(4px 0 rgba(0,255,255,.6)) drop-shadow(-4px 0 rgba(255,0,60,.8)); transform: translate(0); }
  33%  { filter: drop-shadow(-5px 2px rgba(0,255,255,.6)) drop-shadow(5px -2px rgba(255,0,60,.8)); transform: translate(-3px, 1px) skewX(-4deg); }
  66%  { filter: drop-shadow(3px -1px rgba(0,255,255,.5)) drop-shadow(-3px 1px rgba(255,0,60,.7)); transform: translate(2px, -1px); }
  100% { filter: none; transform: none; }
}

/* ---------- Links: red underline sweeps in ---------- */
.fx-links a:not(.cta):not(.fx-btn):not(.chip-link) {
  text-decoration: none;
  background: linear-gradient(var(--siren, #ff3b30), var(--siren, #ff3b30)) left bottom / 0 1px no-repeat,
              linear-gradient(rgba(255,59,48,.45), rgba(255,59,48,.45)) left bottom / 100% 1px no-repeat;
  transition: background-size .3s ease, color .2s;
  padding-bottom: 1px;
}
.fx-links a:not(.cta):not(.fx-btn):not(.chip-link):hover { background-size: 100% 1px, 100% 1px; color: #fff; }

/* ---------- Buttons: shine sweep + glow ---------- */
.fx-btn, .cta {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background .2s, border-color .2s, box-shadow .25s, transform .2s;
}
.fx-btn::after, .cta::after {
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.fx-btn:hover::after, .cta:hover::after, .fx-btn:focus-visible::after, .cta:focus-visible::after { transform: translateX(120%); }
.cta:hover, .cta:focus-visible { box-shadow: 0 0 34px rgba(255,59,48,.55), 0 0 0 1px rgba(255,59,48,.6) inset; }
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 44px; padding: .55rem 1rem;
  font: inherit; font-size: .85rem; font-weight: 600; letter-spacing: .02em;
  color: var(--fg, #f4f1ee); text-decoration: none; cursor: pointer;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line, #26242a); border-radius: 999px;
}
.fx-btn:hover, .fx-btn:focus-visible { border-color: var(--siren, #ff3b30); background: rgba(255,59,48,.1); box-shadow: 0 0 22px rgba(255,59,48,.35); }
.fx-btn:active { transform: scale(.96); }
.fx-btn svg { width: 1.05em; height: 1.05em; flex: none; }
.fx-btn.ok { border-color: #34c759; color: #34c759; box-shadow: 0 0 20px rgba(52,199,89,.3); }

/* Clickable / copyable values */
[data-copy] { cursor: copy; }
.copy-hint {
  display: block; margin-top: .2rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted, #8d8a87); opacity: 0; transform: translateY(-3px); transition: opacity .2s, transform .2s;
}
[data-copy]:hover .copy-hint, [data-copy]:focus-visible .copy-hint { opacity: 1; transform: none; }
@media (hover: none) { .copy-hint { opacity: .7; transform: none; } }

/* ---------- Toast ---------- */
.fx-toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1.1rem; border-radius: 12px;
  background: rgba(14,13,16,.94); color: var(--fg, #f4f1ee);
  border: 1px solid var(--siren, #ff3b30);
  box-shadow: 0 0 30px rgba(255,59,48,.35), 0 12px 40px rgba(0,0,0,.6);
  font-size: .9rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transition: opacity .25s, transform .35s cubic-bezier(.2,.9,.3,1.3);
  max-width: calc(100vw - 32px);
}
.fx-toast.show { opacity: 1; transform: translate(-50%, 0); }
.fx-toast::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #34c759; box-shadow: 0 0 10px #34c759; flex: none; }

/* ---------- Ticker ---------- */
.fx-ticker {
  position: relative; overflow: hidden; width: 100%;
  border-block: 1px solid var(--line, #26242a);
  background: linear-gradient(90deg, rgba(255,59,48,.08), rgba(255,59,48,.02) 30%, rgba(255,59,48,.02) 70%, rgba(255,59,48,.08));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #8d8a87);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fx-ticker-track { display: flex; width: max-content; animation: fx-marquee 48s linear infinite; }
.fx-ticker:hover .fx-ticker-track { animation-play-state: paused; }
.fx-ticker span { padding: .55rem 1.4rem; white-space: nowrap; }
.fx-ticker b { color: var(--siren, #ff3b30); font-weight: 700; }
.fx-ticker span::before { content: "▲"; color: var(--siren, #ff3b30); margin-right: .7rem; font-size: .7em; vertical-align: .1em; }
@keyframes fx-marquee { to { transform: translateX(-50%); } }

/* ---------- Heading anchors (article pages) ---------- */
.anchor {
  margin-left: .4rem; opacity: 0; font-size: .75em; text-decoration: none !important; background: none !important;
  color: var(--siren, #ff3b30) !important; cursor: pointer; border: 0; padding: 0 .2rem; font-family: inherit;
  transition: opacity .2s;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }
@media (hover: none) { .anchor { opacity: .55; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-scan { animation: none; }
  .fx-glow { display: none; }
  .glitch-hover:hover, .glitching, .glitch-clip { animation: none; }
  .fx-ticker { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .fx-ticker-track { animation: none; }
  .hud::before, .hud::after, .hud > .hud-c::before, .hud > .hud-c::after, .fx-btn::after, .cta::after { transition: none; }
}