/* ==========================================================================
   ODYSSEY II / ULTRAMARINE WARRIOR DESIGN SYSTEM
   La Gazzetta di Kyiv — Master Color, Kinematics & Frameless Elevation Engine
   ========================================================================== */

@property --lift {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  /* ── 1. Metallic White — Dominant (60–65%) ────────────────────────── */
  --mw-000: #FFFFFF;   /* Specular highlight, crisp focus               */
  --mw-050: #FDFCFA;   /* Page field base                               */
  --mw-100: #F7F5F1;   /* Canonical metallic white — primary surface    */
  --mw-200: #EFEBE4;   /* Raised panel surface                          */
  --mw-300: #E2DCD2;   /* Subtle divider boundary                       */
  --mw-400: #CFC7BA;   /* Disabled / muted tone                         */

  /* ── 1b. Limestone — Card Surfaces (Rock from Spartan pic) ──────── */
  --lm-100: #EFEBE4;   /* Light limestone — card hover                   */
  --lm-200: #E7E1D8;   /* Mid limestone                                  */
  --lm-300: #E2DCD2;   /* Canonical limestone — card surface             */
  --lm-400: #D5CEC3;   /* Darker limestone — pressed                     */


  /* ── 2. Deep Charcoal — Substrate (20–25%) ────────────────────────── */
  --ch-900: #1C1B1A;   /* Deep void substrate                           */
  --ch-800: #232220;   /* Canonical charcoal — dark backdrop, body type */
  --ch-700: #33312E;   /* Elevated dark container                       */
  --ch-600: #46433F;   /* Dark surface boundary                         */
  --ch-500: #55524E;   /* Secondary ink                                 */

  /* ── 3. Ultramarine — Primary Interactive Voice (8–10%) ───────────── */
  --um-700: #06346F;   /* Pressed state                                 */
  --um-600: #09479E;   /* Canonical ultramarine — primary CTA, active   */
  --um-500: #1560C4;   /* Hover highlight                               */
  --um-400: #4A8FE0;   /* Dark-mode text contrast variant               */
  --um-100: #E6EEF9;   /* Subtle interactive wash                       */
  --um-glow: rgba(9, 71, 158, 0.35);

  /* ── 4. Crimson — Oxblood Alert & Invalidation (3–4%) ─────────────── */
  --cr-700: #A80302;   /* Deep oxblood                                  */
  --cr-600: #DE0403;   /* Canonical crimson — invalidation stop         */
  --cr-400: #F2564E;   /* Dark-mode contrast alert                      */
  --cr-100: #FBE7E6;   /* Alert wash                                    */
  --cr-glow: rgba(222, 4, 3, 0.30);

  /* ── 5. Bronze — Armor Plating & Telemetry Accents (2–3%) ─────────── */
  --bz-700: #6E5A46;   /* Bronze ink legible on light white             */
  --bz-500: #B8A390;   /* Canonical bronze — armor bar, chips           */
  --bz-200: #E7DED4;   /* Bronze wash pill fill                         */
  --bz-glow: rgba(184, 163, 144, 0.25);

  /* ── Elevation Tokens (Zero 1px Borders) ─────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(35, 34, 32, 0.08);
  --shadow-md: 0 8px 24px -6px rgba(35, 34, 32, 0.16), 0 2px 6px rgba(35, 34, 32, 0.08);
  --shadow-lg: 0 16px 48px -12px rgba(35, 34, 32, 0.28), 0 4px 12px rgba(35, 34, 32, 0.12);
  --shadow-dark: 0 16px 40px -12px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.40);
  
  --glass-light: rgba(247, 245, 241, 0.90);
  --glass-dark: rgba(35, 34, 32, 0.85);
  --glass-blur: saturate(160%) blur(20px);

  /* ── Kinematics Curves (Emil Kowalski Physics) ────────────────────── */
  --spring-swift: cubic-bezier(0.22, 1, 0.36, 1);
  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   Zero Borders & Structural Reset
   ========================================================================== */
.border-none, .frameless {
  border: none !important;
  outline: none !important;
}

/* ==========================================================================
   Spartan Navigation Bar — Ultramarine Blue (Sky from Greek pic)
   ========================================================================== */
.gk-nav {
  background: var(--um-600) !important;
  color: var(--mw-000) !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(9, 71, 158, 0.25);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

.gk-nav a, .gk-nav span, .gk-nav .nav-text {
  color: rgba(255, 255, 255, 0.92) !important;
}

.gk-nav a:hover {
  color: #FFFFFF !important;
}

/* Stage Card — Limestone Background */
.stage-card-limestone {
  background: var(--lm-300) !important;
  border: none !important;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Dynamic Light Sheen Keyframe
   ========================================================================== */
@keyframes button-shimmer {
  0% { transform: translateX(-200%) rotate(30deg); }
  35%, 100% { transform: translateX(350%) rotate(30deg); }
}

.btn-dynamic-highlight {
  position: relative;
  overflow: hidden;
}

.btn-dynamic-highlight::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-200%) rotate(30deg);
  animation: button-shimmer 3.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

/* ==========================================================================
   Single-Word Action Button Standards
   ========================================================================== */
.gk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: transform 140ms var(--spring-swift), box-shadow 180ms ease, background 140ms ease;
  will-change: transform;
}

.gk-btn:hover {
  transform: scale(1.03);
}

.gk-btn:active {
  transform: scale(0.96);
}

.gk-btn-primary {
  background: var(--cr-600);
  color: var(--mw-000);
  box-shadow: 0 4px 14px var(--cr-glow);
}

.gk-btn-primary:hover {
  background: var(--cr-700);
  box-shadow: 0 6px 20px var(--cr-glow);
}

.gk-btn-dark {
  background: var(--ch-800);
  color: var(--mw-100);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.gk-btn-dark:hover {
  background: var(--ch-700);
}

/* ==========================================================================
   Compact 4x Smaller Card (190px × 120px)
   ========================================================================== */
.horizon-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 190px;
  height: 120px;
  margin-left: -95px;
  padding: 14px 12px 10px 20px;
  background: var(--lm-300);
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.15);
  transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, 0deg)) scale(var(--s, 1)) translateY(var(--lift, 0));
  transition: --lift 180ms ease, box-shadow 180ms ease;
  will-change: transform, opacity;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
}

/* 3px Bronze Armor Bar */
.horizon-card::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  width: 3px;
  height: 32px;
  background: var(--bz-500);
  border-radius: 2px;
}

/* Optical Scrim */
.horizon-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(35, 34, 32, 0), rgba(35, 34, 32, 0.05));
  pointer-events: none;
}

.horizon-card:hover, .horizon-card:focus-visible {
  --lift: -5px;
  box-shadow: 0 12px 32px -8px var(--um-glow), 0 0 0 2px var(--um-500);
  outline: none;
}

.horizon-card-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: -0.01em;
  color: var(--ch-800);
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.horizon-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.horizon-card-metric {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  color: var(--bz-700);
  letter-spacing: 0.02em;
}

.horizon-card-action {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cr-600);
}

.horizon-card-action::after {
  content: " ▸";
}

/* ==========================================================================
   Apple Scroll Progressive Sentence Engine (reveal.css)
   ========================================================================== */
[data-reveal] {
  --rv-focal: 0.42;
  --rv-glow: 0 0 16px rgba(9, 71, 158, 0.18);
  contain: layout style paint;
  content-visibility: auto;
}

[data-reveal] .rv-s {
  display: inline;
  opacity: var(--o, 0.20);
  text-shadow: var(--g, none);
  transition: opacity 90ms linear, text-shadow 140ms ease;
  will-change: opacity;
}

[data-reveal] .rv-s[data-st="active"]    { --o: 1.00; --g: var(--rv-glow); }
[data-reveal] .rv-s[data-st="passed"]    { --o: 0.45; --g: none; }
[data-reveal] .rv-s[data-st="unreached"] { --o: 0.20; --g: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] .rv-s { opacity: 1 !important; text-shadow: none !important; }
}

/* ==========================================================================
   2px Crimson Invalidation Rule
   ========================================================================== */
.invalidation-rule {
  width: 48px;
  height: 2px;
  background: var(--cr-600);
  margin-bottom: 8px;
  border-radius: 1px;
}

/* ==========================================================================
   Bronze Telemetry Chip
   ========================================================================== */
.gk-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--bz-200);
  color: var(--bz-700);
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* ==========================================================================
   Open Horizon Parabolic Stage & Track
   ========================================================================== */
.horizon-stage {
  position: relative;
  width: 100%;
  height: 520px;
  background: var(--ch-900);
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  cursor: grab;
}

.horizon-stage.is-dragging {
  cursor: grabbing;
}

.horizon__ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.horizon-ribbon-path {
  fill: none;
  stroke: var(--bz-500);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  opacity: 0.35;
}

.horizon-cards-track {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  height: 400px;
  pointer-events: none;
}

.horizon-cards-track .horizon-card {
  pointer-events: auto;
}

/* ==========================================================================
   Unlabelled Rail with Bronze Ticks (6 Gates)
   ========================================================================== */
.stage-rail {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 12px 0;
  z-index: 30;
  pointer-events: auto;
}

.rail-track {
  width: 1px;
  height: 100%;
  background: var(--mw-300);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.rail-tick {
  position: relative;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mw-300);
  transition: all 200ms var(--spring-swift);
  cursor: pointer;
}

.rail-tick:hover, .rail-tick.is-active {
  background: var(--um-600);
  transform: scale(1.6);
  box-shadow: 0 0 10px var(--um-glow);
}

.rail-tick.is-invalidation {
  background: var(--cr-600);
  box-shadow: 0 0 10px var(--cr-glow);
}

/* ==========================================================================
   10:1 Spatial Rhythm & Typographic Contrast
   ========================================================================== */
.stage-space {
  margin-bottom: 200px;
}

@media (max-width: 768px) {
  .stage-space {
    margin-bottom: 110px;
  }
}

.p-space {
  margin-bottom: 20px;
}

.display-contrast {
  font-family: Anton, sans-serif;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ch-800);
}

.lead-contrast {
  font-family: Newsreader, serif;
  font-size: 26px;
  line-height: 1.35;
  color: var(--ch-800);
}

.body-contrast {
  font-family: Newsreader, serif;
  font-size: 18px;
  line-height: 1.68;
  color: var(--ch-800);
}