/* g-site front page — teletext / CRT chrome.
 *
 * Type is the G Design Language (Silka Mono, golden-ratio display scale, --s-*
 * spacing, ::selection) loaded via /css/design.css. This file keeps the
 * teletext palette + CRT effects the G colour palette deliberately leaves
 * alone: scanline/RGB overlay, power-on loader, palette blocks + bevel, streaks.
 * Geometry is character-cell based (--cols fraction × --row-h); pockets and
 * streaks are positioned from CSS custom properties emitted by the renderer.
 * Requires design.css to load first (for --font-*, --s-*, --t-*, --bw).
 */

:root {
  --crt-red: rgb(218, 49, 49);
  --crt-green: rgb(112, 159, 115);
  --crt-blue: rgb(40, 129, 206);

  --cols: 96;        /* grid width in cells; overridden inline on .front */
  --cell-w: 1ch;     /* character-cell width for in-pocket text sizing */
  --row-h: 1.2em;
  --pocket-alpha: 90%;  /* teletext blocks stay near-solid; photo tints through */

  --streak: #bfeaff;

  --pal-blue-bg: #0b1cc4;   --pal-blue-fg: #ffe94a;
  --pal-red-bg: #cc1f1f;    --pal-red-fg: #f5f5f5;
  --pal-green-bg: #12a52f;  --pal-green-fg: #04140a;
  --pal-magenta-bg: #b81fb8;--pal-magenta-fg: #f8f8f8;
  --pal-cyan-bg: #12b6b6;   --pal-cyan-fg: #04140a;
  --pal-yellow-bg: #c9c211; --pal-yellow-fg: #100f04;
  --pal-white-bg: #d8d8d8;  --pal-white-fg: #050505;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: var(--font-body);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- page + bands ---------- */

.front {
  position: relative;
  z-index: 1;            /* above the fixed photo backdrop */
  width: 100%;           /* board fills the viewport — no dead margins */
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.2;
}

/* Fixed, dimmed photography backdrop (populated by front.js). The teletext
   board sits on top; the photo shows through the near-solid pockets and the
   footer margin. */
#photo-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  filter: brightness(0.4) saturate(1.1);
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
#photo-bg.ready { opacity: 1; }

.band {
  position: relative;
  width: 100%;
  height: calc(var(--rows) * var(--row-h));
}

/* ---------- pockets ---------- */

.pocket {
  position: absolute;
  /* Columns are a fraction of the full-width board; rows stay in row-height
     units so text keeps a stable line rhythm. */
  left: calc(var(--c) / var(--cols) * 100%);
  width: calc(var(--cs) / var(--cols) * 100%);
  top: calc(var(--r) * var(--row-h));
  height: calc(var(--rs) * var(--row-h));
  padding: var(--s-3);   /* 12px — on the G lattice */
  overflow: hidden;
}

/* Teletext block base + bevel (blog-new :503–519). */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);       /* 4px */
  text-decoration: none;
  font-family: var(--font-body);
  background: color-mix(in srgb, #0a0a0a var(--pocket-alpha), transparent);
  color: #e8e8e8;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.28),
    inset -2px -2px 0 rgba(0, 0, 0, 0.55);
  transition: filter 0.12s ease, transform 0.12s ease;
}

a.card:hover { filter: brightness(1.12); }
a.card:active { transform: translate(1px, 1px); }

/* Palette backgrounds keep a touch of transparency so the photo backdrop
   shows through without hurting legibility. */
.pal-blue    { background: color-mix(in srgb, var(--pal-blue-bg) var(--pocket-alpha), transparent);    color: var(--pal-blue-fg); }
.pal-red     { background: color-mix(in srgb, var(--pal-red-bg) var(--pocket-alpha), transparent);     color: var(--pal-red-fg); }
.pal-green   { background: color-mix(in srgb, var(--pal-green-bg) var(--pocket-alpha), transparent);   color: var(--pal-green-fg); }
.pal-magenta { background: color-mix(in srgb, var(--pal-magenta-bg) var(--pocket-alpha), transparent); color: var(--pal-magenta-fg); }
.pal-cyan    { background: color-mix(in srgb, var(--pal-cyan-bg) var(--pocket-alpha), transparent);    color: var(--pal-cyan-fg); }
.pal-yellow  { background: color-mix(in srgb, var(--pal-yellow-bg) var(--pocket-alpha), transparent);  color: var(--pal-yellow-fg); }
.pal-white   { background: color-mix(in srgb, var(--pal-white-bg) var(--pocket-alpha), transparent);   color: var(--pal-white-fg); }

/* Card titles/heroes ride the golden-ratio display scale, weight-shouted in
   Silka Mono. clamp() keeps them from clipping the smaller overflow:hidden
   pockets while letting big pockets breathe. */
.card__title {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(1.05rem, 3.2vw, var(--t-d4));  /* ≤ 26px */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.card__name {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(1.6rem, 6vw, var(--t-d3));      /* ≤ 42px */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: #00ffff;
}
.card__line {
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: #cfeae0;
}
/* Kickers, labels, dates → G microtype (the .g-label caption). */
.card__kicker, .card__date {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: 0.85;
}
.card__label { font-size: var(--t-md); }
.card__blurb {
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  opacity: 0.94;
  overflow: hidden;
}
.card__thumb {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  margin: 0.3em 0;
  filter: contrast(1.1) saturate(1.15);
  pointer-events: none;
}

.card--identity {
  background: color-mix(in srgb, #050505 var(--pocket-alpha), transparent);
  align-items: flex-start;
  justify-content: center;
}
.card--social .card__label { color: #00ffff; }

/* Small teletext corner chip — G microtype, subtle, upright, no rotation. */
.chip {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: var(--s-1) var(--s-2);
  color: #0a0a0a;
  background: #9aa4ad;
  pointer-events: none;
}
.chip--fossil { background: #b7bcc0; color: #101216; }
.chip--dead { background: #d98a8a; color: #180505; }

/* Deprecated: greyed + inert. Fossil: greyed but clickable. */
.card.deprecated { filter: grayscale(1) brightness(0.55); cursor: default; }
.card.fossil { filter: grayscale(1) brightness(0.7); background: #161616; color: #b8b8b8; }
a.card.fossil:hover { filter: grayscale(0.6) brightness(0.9); }

/* ---------- fillers (non-interactive) ---------- */

.filler { pointer-events: none; overflow: hidden; }
.filler--colour_block { padding: 0; }
.filler__swatch { display: block; width: 100%; height: 100%; opacity: 0.9; }
.mosaic {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1em;
  line-height: 1;
  color: #2f7d4a;
  white-space: pre;
  opacity: 0.5;
}
.filler--page_number, .filler--test_card {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a5560;
}
.filler__ref { font-family: var(--font-mono); font-size: 1.4em; letter-spacing: var(--ls-label); opacity: 0.6; }

/* ---------- streaks (cut lines as CRT beams) ---------- */

.streak {
  position: absolute;
  color: var(--streak);
  pointer-events: none;
  z-index: 6;
}
.streak--h {
  top: calc(var(--pos) * var(--row-h));
  left: calc(var(--start) / var(--cols) * 100%);
  width: calc(var(--len) / var(--cols) * 100%);
  height: var(--th);
  transform: translateY(-50%);
  background: linear-gradient(90deg, currentColor 0%, currentColor 97%,
              transparent 100%);
  box-shadow: 0 0 calc(6px * var(--glow)) rgba(191, 234, 255, calc(0.9 * var(--glow)));
}
.streak--v {
  left: calc(var(--pos) / var(--cols) * 100%);
  top: calc(var(--start) * var(--row-h));
  height: calc(var(--len) * var(--row-h));
  width: var(--th);
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, currentColor 12%,
              currentColor 88%, transparent 100%);
  box-shadow: 0 0 calc(6px * var(--glow)) rgba(191, 234, 255, calc(0.9 * var(--glow)));
}
.streak.seam {
  top: 0; left: 0; width: 100%; height: 2px;
  transform: none;
  background: linear-gradient(90deg, transparent, var(--streak) 8%,
              var(--streak) 92%, transparent);
  box-shadow: 0 0 8px rgba(191, 234, 255, 0.7);
  z-index: 6;
}

/* Chromatic aberration: red/blue ghosts offset ±--ab, screen-blended. */
.streak--ab::before,
.streak--ab::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}
.streak--h.streak--ab::before { transform: translateY(calc(-1 * var(--ab))); background: var(--crt-red); }
.streak--h.streak--ab::after  { transform: translateY(var(--ab)); background: var(--crt-blue); }
.streak--v.streak--ab::before { transform: translateX(calc(-1 * var(--ab))); background: var(--crt-red); }
.streak--v.streak--ab::after  { transform: translateX(var(--ab)); background: var(--crt-blue); }

.streak--flicker { animation: streak-flicker 3.2s steps(1) infinite; animation-delay: var(--fdelay); }
@keyframes streak-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.3; }
  95% { opacity: 0.9; }
  97% { opacity: 0.45; }
}

/* ---------- edition stamp ---------- */

.edition-stamp {
  text-align: center;
  padding: var(--s-5) var(--s-3) var(--s-6);
  color: #7fd6c0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

/* ---------- CRT overlay (blog-new :971–1028) ---------- */

.crt::before,
.crt::after {
  content: "";
  transform: translateZ(0);
  pointer-events: none;
  position: fixed;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
  z-index: 9998;
}
.crt::before {
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1px,
    transparent 1px, transparent 2px);
}
.crt::after {
  background:
    repeating-linear-gradient(0deg, var(--crt-red) 0px, var(--crt-red) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(0deg, var(--crt-green) 1px, var(--crt-green) 2px, transparent 2px, transparent 3px),
    repeating-linear-gradient(0deg, var(--crt-blue) 2px, var(--crt-blue) 3px, transparent 3px, transparent 3px);
  opacity: 0.08;
  mix-blend-mode: screen;
}

/* ---------- power-on loader (blog-new :742–822) ---------- */

#loading-screen {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background-color 0.25s ease-out 0.55s;
}
.crt-dot {
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 3px 1px rgba(255,255,255,0.95),
              0 0 10px 3px rgba(220,255,230,0.55),
              0 0 28px 8px rgba(170,220,195,0.22);
  animation: crt-dot-pulse 1.6s ease-in-out infinite;
  will-change: width, height, opacity, border-radius;
}
@keyframes crt-dot-pulse {
  0%, 100% { opacity: 0.85; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
#loading-screen.hidden { pointer-events: none; background: transparent; }
#loading-screen.hidden .crt-dot { animation: crt-power-on 1s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes crt-power-on {
  0%   { width: 5px;   height: 5px;   border-radius: 50%; opacity: 1; }
  28%  { width: 100vw; height: 3px;   border-radius: 0;   opacity: 1; }
  58%  { width: 100vw; height: 100vh; border-radius: 0;   opacity: 1; }
  100% { width: 100vw; height: 100vh; border-radius: 0;   opacity: 0; }
}

/* ---------- mobile reflow ≤720px ---------- */

@media (max-width: 720px) {
  .front { max-width: 100%; padding: 0 2vw; font-size: 20px; }
  .band {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 1ch;
    padding: 1ch 0;
  }
  .pocket {
    /* relative (not static) so absolutely-positioned stamps still anchor to
       their own card; left/top nulled so it sits in normal flow. */
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 7em;
    order: var(--ord);
  }
  .card__thumb { height: 40vw; flex: none; }
  .streak, .seam { display: none; }
  /* Imitate the cut lines with a hairline rule between stacked pockets. */
  .band > .card { border-top: var(--bw-strong) solid var(--border-strong); }
  /* Drop noisy fillers on mobile; keep page-number ticks as texture. */
  .filler { display: none; }
  .filler--page_number { display: flex; order: var(--ord); min-height: 3em; }
}