/* ==========================================================================
   Epileptic.NEWS — design tokens
   Extracted from design/*.dc.html. See docs/DESIGN-TOKENS.md for provenance.

   THE PALETTE HAS TWO TIERS AND THEY NEVER MIX.
   --logo-* strobes at 11.1Hz and appears only on something that is flashing.
   --ui-*   does everything else: sentiment, text, borders, buttons.
   A --logo-* value under body copy is a bug, not a style choice.
   ========================================================================== */

:root {
	/* --- logo tier · FLASH ONLY · measured from design/logo/gif.mp4 --------- */
	--logo-blue:  #1B0FEB;
	--logo-red:   #E40F25;
	--logo-green: #42ED22;

	/* One colour per frame at 33.3fps: 30ms per colour, 90ms per cycle. */
	--flash-step:  30ms;
	--flash-cycle: 90ms;

	/* --- ui tier · everything else ----------------------------------------- */
	--ui-accent:        #2F7DFF;
	--ui-accent-soft:   #8FBAFF;
	--ui-accent-bright: #CCE0FF;
	--ui-bull:          #2FD98A;
	--ui-bear:          #FF4D5E;
	--ui-neut:          #9AA3B8;

	/* --- the mark's own two colours ----------------------------------------
	 * A third, deliberate purpose — not a silent borrow from either tier.
	 *
	 * The cubes rotate rather than flash, so they may not use --logo-*. But a
	 * 32px solid under six levels of face shading loses most of its chroma:
	 * --ui-bull at brightness(0.42) on the bottom face reads as grey. These are
	 * the same two hues pushed to full saturation so the shaded faces still
	 * land somewhere recognisably red and green.
	 *
	 * Used ONLY by .epi-logo__face. Anything else wanting red or green wants
	 * --ui-bear / --ui-bull.
	 */
	--cube-red:       #FF1F3D;
	--cube-red-lit:   #FF6B7E;
	--cube-green:     #00E87E;
	--cube-green-lit: #6BFFC0;

	/* --- surfaces ----------------------------------------------------------- */
	--bg:        #08090C;
	--bg-soft:   #0B0D12;
	--bg-card:   #0C0E13;
	--bg-raised: #101319;
	--bg-footer: #0A0B0F;
	--bg-well:   #191D25;
	--bg-track:  #1A1E27;

	--card-gradient: linear-gradient(180deg, #10131A, #0A0C10);
	--rail-gradient: linear-gradient(180deg, #0E1017, #0A0B10);
	--page-wash:
		radial-gradient(1200px 620px at 12% -8%, rgba(47, 125, 255, 0.10), transparent 60%),
		radial-gradient(900px 520px at 92% -4%, rgba(47, 217, 138, 0.055), transparent 62%),
		#08090C;

	/* Hairline hatch used inside every empty media well. */
	--media-hatch: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 9px);

	/* --- text --------------------------------------------------------------- */
	--fg:       #F2F4F8;
	--fg-soft:  #C9CEDA;
	--fg-body:  #A7AEBE;
	--fg-dim:   #8A90A0;
	--fg-mute:  #7E8698;
	--fg-label: #6B7280;
	--fg-faint: #5A6070;
	--fg-ghost: #4B5160;
	--fg-trace: #363B45;

	/* --- borders are alpha, not colour --------------------------------------- */
	--line:        rgba(255, 255, 255, 0.07);
	--line-soft:   rgba(255, 255, 255, 0.05);
	--line-strong: rgba(255, 255, 255, 0.08);
	--line-hover:  rgba(255, 255, 255, 0.18);
	--line-accent: rgba(47, 125, 255, 0.22);

	/* --- geometry ------------------------------------------------------------ */
	--r-chip:  8px;
	--r-ctrl:  10px;
	--r-card:  13px;
	--r-rail:  14px;
	--r-panel: 16px;
	--r-hero:  18px;

	--shell:      1560px;
	--gutter:     28px;
	--header-h:   66px;
	--ticker-h:   34px;
	--chrome-h:   100px; /* header + ticker; every sticky offset keys off this */
	--rail-w:     340px;

	/* --- type ---------------------------------------------------------------- */
	--font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

	/*
	 * Headings run WIDE, not condensed. This was 84% — Archivo pulled in on its
	 * width axis — which is a newspaper reflex: squeeze the headline so more of
	 * it fits the column. This is not a newspaper column, and condensed type at
	 * 52px reads cramped and generic next to the mark.
	 *
	 * 112% is a deliberately small move on an axis that runs 62–125. Archivo is
	 * already loaded as a variable font across `wdth 62..125`, so widening costs
	 * no extra request and no fallback flash — the axis is simply being used in
	 * the other direction.
	 */
	--stretch-head: 112%;

	/* --- motion -------------------------------------------------------------- */
	--ease-lift: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ==========================================================================
   Keyframes — the first block is carried over verbatim from the design export.
   ========================================================================== */

@keyframes epi-flash-pulse {
	0%, 100% { filter: brightness(1) saturate(1); }
	50%      { filter: brightness(1.85) saturate(1.4); }
}

@keyframes epi-flash-strobe {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0.18; }
}

@keyframes epi-glow {
	0%, 100% { box-shadow: 0 0 18px 0 rgba(47, 125, 255, 0.20); }
	50%      { box-shadow: 0 0 30px 4px rgba(47, 125, 255, 0.34); }
}

@keyframes epi-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes epi-dot {
	0%, 100% { opacity: 1;    transform: scale(1); }
	50%      { opacity: 0.35; transform: scale(0.82); }
}

@keyframes epi-sheen {
	from { transform: translateX(-120%); }
	to   { transform: translateX(320%); }
}

@keyframes epi-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- the real brand cycle: logo tier, BLUE → RED → GREEN, ~11.1Hz ----------- */

@keyframes epi-news-flash {
	0%,   33.32% { color: var(--logo-blue); }
	33.33%, 66.65% { color: var(--logo-red); }
	66.66%, 100%   { color: var(--logo-green); }
}

@keyframes epi-news-flash-bg {
	0%,   33.32% { background: var(--logo-blue); }
	33.33%, 66.65% { background: var(--logo-red); }
	66.66%, 100%   { background: var(--logo-green); }
}

/*
 * The same cycle, the same three colours, as a PLATE behind small type.
 *
 * 🔴 Why the alpha is not 1. `epi-news-flash-bg` paints the logo tier at full
 * chroma, which is correct for a mark and unreadable under a label: the three
 * colours are #1B0FEB (very dark), #E40F25 (mid) and #42ED22 (very light), and
 * no single text colour clears 3:1 against all three. A nav item nobody can
 * read for two frames in every three is worse than a quieter flash, so the
 * fill runs at low alpha over the header ground and the BORDER carries the
 * chroma. Rate, tier and colours are the house strobe exactly; only the
 * opacity is conceded, and it is conceded to legibility.
 */
@keyframes epi-news-flash-plate {
	0%,   33.32% { background: rgba(27, 15, 235, 0.30);  border-color: var(--logo-blue); }
	33.33%, 66.65% { background: rgba(228, 15, 37, 0.30); border-color: var(--logo-red); }
	66.66%, 100%   { background: rgba(66, 237, 34, 0.26); border-color: var(--logo-green); }
}

/*
 * The logo cubes' spin lives with the logo, in main.css, because it is bound to
 * the cube geometry there (the tilt that shows the top face). It used to be
 * duplicated here as a bare rotateY, and two @keyframes of the same name is a
 * landmine — whichever sheet loads last silently wins.
 */

/* ==========================================================================
   Reduced motion. Every flash on this site has to survive this block with a
   readable static state — an 11Hz strobe is a seizure risk, not a preference.
   ========================================================================== */

@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;
	}

	/* The flash animation is frozen above on frame one (blue), which is a
	   logo-tier colour sitting on dark. Repaint it in the UI tier instead. */
	.epi-flash,
	.epi-flash--bg,
	.epi-navpart--plate {
		animation: none !important;
	}

	.epi-flash { color: var(--ui-accent) !important; }

	.epi-flash--bg { background: var(--ui-accent) !important; }

	/* The plate keeps its shape so the label still reads as one chip; it just
	   stops moving. A flashing thing that vanishes under this setting reads as
	   a broken layout rather than a respected preference. */
	.epi-navpart--plate {
		background: rgba(47, 125, 255, 0.18) !important;
		border-color: rgba(47, 125, 255, 0.55) !important;
	}
}