/* =============================================================
   LEGION UNITED — Digitale Receptioniste · premium stylesheet
   Builds on the repo design tokens (navy / brand / teal).
   ============================================================= */

:root {
  --navy: oklch(0.18 0.04 264);
  --brand: oklch(0.55 0.21 264);
  --brand-2: oklch(0.6 0.15 230);
  --teal: oklch(0.72 0.13 188);
  --warm: oklch(0.985 0.005 250);
  --border: oklch(0.92 0.012 250);

  /* tweakable decorative glow hue (accent) — does NOT touch the token system */
  --glow-a: oklch(0.55 0.21 264 / 0.5);
  --glow-b: oklch(0.72 0.13 188 / 0.42);

  --gradient-brand: linear-gradient(135deg, oklch(0.55 0.21 264), oklch(0.6 0.15 230));
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Epilogue', ui-sans-serif, system-ui, sans-serif;
  background: oklch(1 0 0);
  color: oklch(0.18 0.04 264);
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: 'Urbanist', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}
::selection { background: oklch(0.55 0.21 264 / 0.18); }

.font-display { font-family: 'Urbanist', ui-sans-serif, system-ui, sans-serif; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* ---- Backgrounds / gradients ---- */
.bg-gradient-brand { background: var(--gradient-brand); }
.bg-gradient-warm { background: linear-gradient(180deg, oklch(1 0 0) 0%, oklch(0.985 0.005 250) 100%); }

/* Richer hero mesh — multiple radials in brand + teal, higher coverage */
.bg-mesh {
  background:
    radial-gradient(58% 50% at 12% -5%, oklch(0.55 0.21 264 / 0.16), transparent 60%),
    radial-gradient(46% 46% at 96% 12%, oklch(0.72 0.13 188 / 0.18), transparent 62%),
    radial-gradient(40% 40% at 78% 96%, oklch(0.6 0.2 295 / 0.10), transparent 60%),
    linear-gradient(180deg, oklch(1 0 0) 0%, oklch(0.985 0.005 250) 100%);
}

/* Tinted "warm" sections — soft blue→teal wash instead of near-white */
.bg-warm-tint {
  background:
    radial-gradient(60% 80% at 100% 0%, oklch(0.72 0.13 188 / 0.06), transparent 55%),
    linear-gradient(180deg,
      color-mix(in oklch, oklch(0.95 0.04 260), white 38%) 0%,
      color-mix(in oklch, oklch(0.96 0.04 188), white 45%) 100%);
}

.grid-bg {
  background-image:
    linear-gradient(to right, oklch(0.55 0.21 264 / 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.55 0.21 264 / 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ---- "Glass" panels — solid translucent (NO backdrop-filter, for scroll perf) ---- */
.glass {
  background: oklch(1 0 0 / 0.88);
}
.glass-dark {
  background: oklch(0.18 0.04 264 / 0.72);
}

/* ---- Decorative blobs (use the tweakable glow vars) ---- */
.glow-a { background: var(--glow-a); }
.glow-b { background: var(--glow-b); }

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal-x { transform: translateX(34px); }
.reveal-x.in { transform: none; }
.no-motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
/* Calm mode keeps reveals but stops ambient looping motion */
.calm .drift, .calm .float-slow, .calm .ping-soft, .calm .pulse-ring, .calm .eq-bar { animation: none !important; }

/* ---- Keyframes ---- */
@keyframes pulse-ring { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(2.2); opacity: 0; } }
.pulse-ring { animation: pulse-ring 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.float-slow { animation: float 6s ease-in-out infinite; }

@keyframes ping-soft { 75%, 100% { transform: scale(2); opacity: 0; } }
.ping-soft { animation: ping-soft 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }

@keyframes drift { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(18px,-14px,0); } 100% { transform: translate3d(0,0,0); } }
.drift { animation: drift 18s ease-in-out infinite; }

@keyframes eq { 0%,100% { height: 18%; } 50% { height: 95%; } }
.eq-bar { animation: eq 1.1s ease-in-out infinite; transform-origin: bottom; }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ---- Lucide icon wrapper ---- */
.lu-ico { display: inline-flex; align-items: center; justify-content: center; }
.lu-ico svg { display: block; }

/* ---- Day-story scene placeholder ---- */
.scene-ph {
  background-image:
    repeating-linear-gradient(135deg,
      oklch(1 0 0 / 0.05) 0px, oklch(1 0 0 / 0.05) 2px,
      transparent 2px, transparent 11px);
}
.scene-ph .ph-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.04em;
}

/* sky tint behind day-story scenes — driven inline by JS via background */
.day-sky { transition: background 0.6s linear; }

/* ---- Misc ---- */
.tabular { font-variant-numeric: tabular-nums; }
.track-tight { letter-spacing: -0.02em; }

/* Hide scrollbars on horizontal rails */
.no-bar { scrollbar-width: none; }
.no-bar::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .float-slow, .pulse-ring, .ping-soft, .drift, .eq-bar { animation: none !important; }
  html { scroll-behavior: auto; }
}