/* ============================================================
   LIMINAL TIMES — v2 design system
   "Broadcasting from the threshold."
   A ground-up rebuild: editorial serif display, broadcast-OSD
   metadata, a persistent screen frame, and deliberate motion.
   ============================================================ */

:root {
  /* — Canvas / surfaces ———————————————————————————— */
  --black:    #070509;
  --black-2:  #0c0910;
  --surface:  rgba(154, 115, 212, 0.035);
  --surface-2:rgba(154, 115, 212, 0.06);

  /* — Violet system (structure, links, signal) ——————— */
  --violet:        #9a73d4;
  --violet-bright: #c0a0ef;
  --violet-deep:   #6a4a93;
  --phosphor:      rgba(154, 115, 212, 0.45);
  --phosphor-soft: rgba(154, 115, 212, 0.22);

  /* — Ink (raised contrast for real legibility) ——————— */
  --ink:   #efe9f6;   /* headlines */
  --ink-2: #cabfdc;   /* body */
  --ink-3: #8d7fa6;   /* muted meta */

  /* — Signal accents (sparingly) ————————————————————— */
  --hot:  #ff3d7f;    /* live / REC */
  --cyan: #45e0e6;    /* rare misregistration */
  --ember:      #e9b87a;             /* CH 03 only: the one warm thing — the light it keeps */
  --ember-soft: rgba(233, 184, 122, 0.5);

  /* — Lines ——————————————————————————————————————— */
  --line:   rgba(154, 115, 212, 0.14);
  --line-2: rgba(154, 115, 212, 0.26);

  /* — Type ——————————————————————————————————————— */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:  'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --t-meta:    clamp(0.68rem, 0.64rem + 0.18vw, 0.78rem);
  --t-small:   clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
  --t-body:    clamp(1.05rem, 1rem + 0.32vw, 1.22rem);
  --t-lead:    clamp(1.35rem, 1.1rem + 1.05vw, 2rem);
  --t-h3:      clamp(1.45rem, 1.2rem + 1.3vw, 2.1rem);
  --t-h2:      clamp(2rem, 1.4rem + 2.7vw, 3.5rem);
  --t-h1:      clamp(2.7rem, 1.5rem + 5vw, 5.4rem);
  --t-display: clamp(3rem, 0.6rem + 11.5vw, 9.5rem);

  /* — Space / layout ————————————————————————————— */
  --bar-h: 40px;
  --pad-x: clamp(1.25rem, 0.5rem + 4vw, 4.5rem);
  --wrap:  1280px;
  --measure: 40rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* — Reset / base ———————————————————————————————— */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 380;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, canvas { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: rgba(154, 115, 212, 0.3); color: var(--ink); }

* { scrollbar-width: thin; scrollbar-color: rgba(154,115,212,0.5) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(154,115,212,0.4); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(154,115,212,0.65); }

/* ============================================================
   ATMOSPHERE — the deep layer (drifting glow + grain + vignette)
   ============================================================ */
/* — Atmosphere parallax (––px/––py set by lt.js on fine pointers) — */
.lt-atmos {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 0.6s var(--ease);
  will-change: transform;
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(106, 74, 147, 0.16) 0%, transparent 60%),
    radial-gradient(55% 55% at 85% 88%, rgba(154, 115, 212, 0.12) 0%, transparent 60%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(3, 2, 6, 0.6) 100%),
    var(--black);
}
.lt-atmos::after {
  content: ''; position: absolute; inset: -10%;
  background:
    radial-gradient(40% 40% at 65% 25%, rgba(154, 115, 212, 0.08), transparent 60%),
    radial-gradient(40% 40% at 25% 75%, rgba(106, 74, 147, 0.09), transparent 60%);
  animation: ltDrift 38s ease-in-out infinite;
}
@keyframes ltDrift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
}

/* Fine film grain baked over everything (static, cheap). */
.lt-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}

/* Live TV-snow overlay (subtle; motion-gated by JS) */
.lt-snow {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;
  opacity: 0.05; mix-blend-mode: screen; image-rendering: pixelated;   /* canvas is a replaced element: needs explicit size to fill, not just inset:0 */
}

/* Cursor lens-glow — a soft pool of phosphor that follows the pointer
   (fine pointers only; positioned via --mx/--my from lt.js). */
.lt-glow {
  position: fixed; top: 0; left: 0; width: 440px; height: 440px;
  margin: -220px 0 0 -220px; pointer-events: none; z-index: 4;
  background: radial-gradient(circle, rgba(154, 115, 212, 0.09) 0%, transparent 65%);
  transform: translate3d(var(--mx, -9999px), var(--my, -9999px), 0);
  mix-blend-mode: screen; opacity: 0; transition: opacity 0.5s ease;
}
.lt-glow.is-active { opacity: 1; }

/* Rare signal-glitch tear — the picture briefly slips into colour
   channels (every ~25–45s, motion-gated, driven by lt.js). */
.lt-tear {
  position: fixed; inset: 0; z-index: 36; pointer-events: none; opacity: 0;
  background: linear-gradient(rgba(69, 224, 230, 0.04), rgba(255, 61, 127, 0.04));
  mix-blend-mode: screen;
}
.lt-tear.is-on { animation: ltTear 0.38s steps(2) 1; }
@keyframes ltTear {
  0%   { opacity: 0; transform: translateX(0); clip-path: inset(0 0 0 0); }
  20%  { opacity: 1; transform: translateX(-5px); clip-path: inset(42% 0 38% 0); }
  40%  { opacity: 1; transform: translateX(6px);  clip-path: inset(8% 0 78% 0); }
  65%  { opacity: 1; transform: translateX(-3px); clip-path: inset(68% 0 14% 0); }
  100% { opacity: 0; transform: translateX(0); clip-path: inset(0 0 0 0); }
}
body.is-glitching .page {
  animation: ltPageGlitch 0.38s steps(2) 1;
}
@keyframes ltPageGlitch {
  0%, 100% { transform: translateX(0); filter: none; }
  30% { transform: translateX(-2px); filter: drop-shadow(2px 0 0 rgba(255, 61, 127, 0.45)) drop-shadow(-2px 0 0 rgba(69, 224, 230, 0.45)); }
  60% { transform: translateX(2px);  filter: drop-shadow(-2px 0 0 rgba(255, 61, 127, 0.45)) drop-shadow(2px 0 0 rgba(69, 224, 230, 0.45)); }
}

/* Scanlines + a slow sweeping scan beam */
.lt-scan {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.45;
  mix-blend-mode: multiply;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.10) 3px, rgba(0,0,0,0.10) 4px);
}
.lt-scan::after {
  content: ''; position: absolute; left: 0; right: 0; height: 30vh; top: 0;
  background: linear-gradient(to bottom, transparent,
    rgba(154,115,212,0.05) 46%, rgba(192,160,239,0.08) 50%,
    rgba(154,115,212,0.05) 54%, transparent);
  mix-blend-mode: screen;
  animation: ltBeam 11s linear infinite;
}
@keyframes ltBeam {
  0% { transform: translateY(-32vh); opacity: 0; }
  10% { opacity: 1; } 90% { opacity: 1; }
  100% { transform: translateY(132vh); opacity: 0; }
}

/* ============================================================
   SCREEN FRAME — bezel, corner ticks, persistent OSD bars
   ============================================================ */
.lt-bezel {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(154,115,212,0.08),
    inset 0 0 140px 24px rgba(0,0,0,0.6);
}
.lt-ticks { position: fixed; inset: 0; z-index: 31; pointer-events: none; }
.lt-ticks i {
  position: absolute; width: 13px; height: 13px;
  border: 1px solid var(--line-2);
}
.lt-ticks i:nth-child(1) { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.lt-ticks i:nth-child(2) { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.lt-ticks i:nth-child(3) { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.lt-ticks i:nth-child(4) { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* OSD bars (top + bottom) */
.lt-bar {
  position: fixed; left: 0; right: 0; z-index: 34;
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--pad-x) - 0.5rem);
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  background: linear-gradient(var(--black), rgba(7,5,9,0.6));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.lt-bar--top { top: 0; border-bottom: 1px solid var(--line); }
.lt-bar--bottom { bottom: 0; border-top: 1px solid var(--line); background: linear-gradient(rgba(7,5,9,0.6), var(--black)); }
.lt-bar a, .lt-bar button { pointer-events: auto; }
.lt-bar__l, .lt-bar__r { display: flex; align-items: center; gap: 1.1em; white-space: nowrap; }
.lt-bar strong { color: var(--ink-2); font-weight: 400; }

/* Masthead — the station name links home */
.lt-mast { color: var(--ink-2); text-decoration: none; transition: color 0.25s var(--ease), text-shadow 0.25s var(--ease); }
.lt-mast:hover, .lt-mast:focus-visible { color: var(--violet-bright); text-shadow: 0 0 12px var(--phosphor); outline: none; }

/* External link in the OSD (GitHub) */
.lt-gh { color: var(--ink-3); text-decoration: none; transition: color 0.25s var(--ease); }
.lt-gh:hover, .lt-gh:focus-visible { color: var(--violet-bright); outline: none; }

/* Reading-progress line (long-form pages; injected by lt.js) */
.lt-progress {
  position: fixed; left: 0; right: 0; top: var(--bar-h); height: 2px; z-index: 35;
  background: linear-gradient(90deg, var(--violet), var(--violet-bright));
  box-shadow: 0 0 10px var(--phosphor);
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}
.lt-tc { color: var(--violet-bright); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }
.lt-tc .ff { color: var(--violet); opacity: 0.7; }

.lt-onair { display: inline-flex; align-items: center; gap: 0.6em; color: var(--ink-2); }
.lt-onair i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--hot);
  box-shadow: 0 0 9px rgba(255,61,127,0.9); animation: ltRec 1.5s steps(1) infinite;
}
@keyframes ltRec { 0%,54%{opacity:1} 55%,100%{opacity:0.15} }

.lt-motion {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--ink-3); background: none; border: 0; cursor: pointer;
  padding: 0.5em 0; transition: color 0.25s var(--ease);
}
.lt-motion:hover { color: var(--violet-bright); }
.lt-motion b { color: var(--violet); font-weight: 400; }

@media (max-width: 720px) {
  :root { --bar-h: 33px; }                /* slimmer broadcast chrome reclaims vertical space on phones */
  .lt-bar { font-size: 0.6rem; letter-spacing: 0.08em; padding: 0 0.9rem; }
  .lt-hide-sm { display: none; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.page {
  position: relative; z-index: 10;
  padding: calc(var(--bar-h) + clamp(2rem, 1rem + 4vw, 4.5rem)) var(--pad-x)
           calc(var(--bar-h) + clamp(3rem, 2rem + 5vw, 6rem));
  max-width: var(--wrap); margin: 0 auto;
}
.wrap-read { max-width: var(--measure); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule-2 { height: 1px; background: var(--line-2); border: 0; margin: 0; }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.kicker {
  display: inline-flex; align-items: center; gap: 0.85ch;
  font-family: var(--mono); font-size: var(--t-meta); font-weight: 400;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--violet);
}
.kicker::before {
  content: ''; width: 1.8em; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--violet), transparent);
}
.kicker--bare::before { display: none; }
.kicker--center { justify-content: center; }

.meta { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); }

.display {
  font-family: var(--serif); font-weight: 350; font-size: var(--t-display);
  line-height: 0.92; letter-spacing: -0.015em; color: var(--ink);
  margin: 0; text-wrap: balance;
}
.h1 { font-family: var(--serif); font-weight: 360; font-size: var(--t-h1);
  line-height: 1; letter-spacing: -0.012em; color: var(--ink); margin: 0; text-wrap: balance; }
.h2 { font-family: var(--serif); font-weight: 380; font-size: var(--t-h2);
  line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin: 0; text-wrap: balance; }
.h3 { font-family: var(--serif); font-weight: 420; font-size: var(--t-h3);
  line-height: 1.12; color: var(--ink); margin: 0; }
.lead { font-size: var(--t-lead); line-height: 1.4; color: var(--ink-2);
  font-weight: 360; text-wrap: pretty; }
.it { font-style: italic; }
.dim { color: var(--ink-3); }
.glow { text-shadow: 0 0 26px var(--phosphor), 0 0 8px var(--phosphor-soft); }

p { text-wrap: pretty; }

/* In-prose links read like lit signal */
.link, .prose a {
  color: var(--violet-bright); text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), text-shadow 0.25s var(--ease);
}
.link:hover, .prose a:hover { color: var(--ink); border-color: var(--violet); text-shadow: 0 0 14px var(--phosphor); }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* — Schedule rows (nav / channel index / listings) ————————— */
.sched { border-top: 1px solid var(--line-2); }
.sched__row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; position: relative;
  transition: padding-left 0.45s var(--ease-out);
}
.sched__row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, rgba(154,115,212,0.10), transparent 70%);
  opacity: 0; transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.sched__row:hover, .sched__row:focus-visible { outline: none; padding-left: clamp(0.75rem, 0.3rem + 1.5vw, 1.75rem); }
.sched__row:hover::before, .sched__row:focus-visible::before { opacity: 1; }

.sched__num { font-family: var(--mono); font-size: var(--t-small); color: var(--violet);
  letter-spacing: 0.12em; align-self: start; padding-top: 0.5em; }
.sched__body { min-width: 0; display: block; }
.sched__title { display: block; font-family: var(--serif); font-size: var(--t-h2); font-weight: 360;
  line-height: 1; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 0.6rem;
  transition: color 0.3s var(--ease), transform 0.45s var(--ease-out); }
.sched__row:hover .sched__title { color: var(--violet-bright); }
.sched__desc { display: block; font-size: var(--t-small); color: var(--ink-3); margin: 0; max-width: 42ch; line-height: 1.5; }
.sched__meta { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3);
  letter-spacing: 0.14em; text-align: right; white-space: nowrap; align-self: start; padding-top: 0.6em; }
.sched__go { display: inline-block; margin-left: 0.8em; color: var(--violet);
  transition: transform 0.4s var(--ease-out), color 0.3s; }
.sched__row:hover .sched__go { transform: translateX(6px); color: var(--violet-bright); }

/* — Monitor: a framed generative ident canvas ————————————— */
.monitor {
  position: relative; overflow: hidden; background: var(--black-2);
  border: 1px solid var(--line-2); border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), inset 0 0 34px rgba(0,0,0,0.7),
    0 24px 60px -28px rgba(0,0,0,0.9);
}
.monitor canvas { width: 100%; height: 100%; }
.monitor::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.16) 3px, rgba(0,0,0,0.16) 4px),
    radial-gradient(ellipse at 50% 0%, rgba(192,160,239,0.10), transparent 70%);
  mix-blend-mode: multiply;
}
.monitor[data-ch]::after {
  content: attr(data-ch); position: absolute; bottom: 0.55rem; right: 0.7rem; z-index: 3;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; color: var(--violet-bright);
  opacity: 0.7; text-shadow: 0 0 8px var(--phosphor), 0 1px 2px rgba(0,0,0,0.9);
}

/* Interactive monitors pick up the misregistration edge on hover —
   the signal “can’t quite converge” when you reach for it. */
a:hover .monitor, a:focus-visible .monitor, .sched__row:hover .monitor {
  border-color: rgba(192, 160, 239, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 34px rgba(0, 0, 0, 0.6),
    -3px 0 18px -6px rgba(69, 224, 230, 0.4),
    3px 0 18px -6px rgba(255, 61, 127, 0.4),
    0 24px 60px -28px rgba(0, 0, 0, 0.9);
}

/* — Entry list (blog/editorial) ————————————————————————— */
.entry {
  display: block; text-decoration: none; color: inherit;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.entry__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; }
.entry__lead { flex: 1; align-self: center; height: 0; border-bottom: 1px dotted var(--line-2); opacity: 0.6; }
.entry__run { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3);
  letter-spacing: 0.14em; white-space: nowrap; }
.entry__title { font-family: var(--serif); font-size: var(--t-h2); font-weight: 360;
  line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 0.8rem;
  transition: color 0.3s var(--ease); }
.entry:hover .entry__title { color: var(--violet-bright); }
.entry__excerpt { font-size: var(--t-small); color: var(--ink-2); margin: 0; max-width: var(--measure); line-height: 1.6; }
.entry__foot { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.entry__date { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3); letter-spacing: 0.14em; }

.tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tag {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--violet); padding: 0.28rem 0.7rem; border: 1px solid var(--line-2);
  border-radius: 2px; transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.tag:hover { color: var(--violet-bright); border-color: var(--violet-deep); background: var(--surface); }

/* — Buttons / CTAs ——————————————————————————————————— */
.cta {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
  padding: 0.9em 1.4em; border: 1px solid var(--line-2); border-radius: 2px;
  background: var(--surface); transition: all 0.3s var(--ease);
}
.cta:hover { border-color: var(--violet); color: var(--violet-bright); background: var(--surface-2);
  box-shadow: 0 0 24px -6px var(--phosphor); }
.cta--ghost { background: none; border-color: var(--line); }

/* — Sign-off horizon — the shared full-bleed grid that closes a page.
   Bleeds edge-to-edge out of any column and dissolves at both sides;
   the negative bottom margin lets it settle onto the bottom OSD bar. */
.signal-horizon {
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  height: clamp(150px, 20vw, 260px);
  margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  margin-bottom: calc(-1 * clamp(3rem, 2rem + 5vw, 6rem));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  pointer-events: none;
}
.signal-horizon canvas { width: 100%; height: 100%; display: block; }

/* ============================================================
   CHANNEL-CUT transition (between pages)
   ============================================================ */
.lt-cut { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: var(--black); opacity: 0; }
.lt-cut::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  transform: translateY(-50%) scaleX(0); background: var(--ink);
  box-shadow: 0 0 20px var(--violet-bright), 0 0 70px rgba(154,115,212,0.85);
}
.lt-cut.is-cutting { animation: ltCutFade 0.3s linear forwards; }
.lt-cut.is-cutting::before { animation: ltCutLine 0.3s ease forwards; }
@keyframes ltCutFade { 0%{opacity:0} 16%{opacity:1} 100%{opacity:1} }
@keyframes ltCutLine {
  0%{transform:translateY(-50%) scaleX(0);opacity:0}
  26%{transform:translateY(-50%) scaleX(1);opacity:1}
  62%{transform:translateY(-50%) scaleX(1);height:2px;opacity:1}
  100%{transform:translateY(-50%) scaleX(0.03);height:1px;opacity:1}
}
body.is-tuning .lt-snow { opacity: 0.7 !important; transition: opacity 0.12s linear; }

/* — Station sign-on (once per session): the picture opens like a CRT
   warming up — black halves part from a bright center line. */
.lt-signon { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.lt-signon i { position: absolute; left: 0; right: 0; height: 51%; background: #050308; }
.lt-signon i:first-child { top: 0; transform-origin: 50% 0; }
.lt-signon i:last-child { bottom: 0; transform-origin: 50% 100%; }
.lt-signon.is-on i { animation: ltSignOpen 0.7s var(--ease-out) 0.18s forwards; }
@keyframes ltSignOpen { to { transform: scaleY(0); } }
.lt-signon::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  transform: translateY(-50%) scaleX(0); background: #ece1f6;
  box-shadow: 0 0 24px #c9a8e8, 0 0 80px rgba(154, 115, 212, 0.9);
  animation: ltSignLine 0.95s ease forwards;
}
@keyframes ltSignLine {
  0%   { transform: translateY(-50%) scaleX(0); opacity: 1; }
  22%  { transform: translateY(-50%) scaleX(1); opacity: 1; }
  60%  { opacity: 0.9; }
  100% { transform: translateY(-50%) scaleX(1); opacity: 0; }
}

/* ============================================================
   ENTRANCE — reveal on load / scroll (gentle, fast)
   ============================================================ */
[data-rise] { opacity: 0; transform: translateY(18px); }
[data-rise].is-in { opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }

/* ============================================================
   MOTION OFF + REDUCED MOTION
   ============================================================ */
html.motion-off .lt-scan::after,
html.motion-off .lt-atmos::after { animation: none; }
html.motion-off .lt-onair i { animation: none; opacity: 1; }
html.motion-off .lt-glow, html.motion-off .lt-tear { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  [data-rise] { opacity: 1 !important; transform: none !important; }
}