/* ═══════════════════════════════════════════════════════════════════
   RDU Heatwave — Shared Design Tokens & Reset
   Canonical brand values. Page-specific overrides go in each HTML.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Design Tokens ────────────────────────────────────────────────── */
:root, [data-theme="dark"] {
  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Fluid type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.5vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Colors — canonical brand palette */
  --color-bg:             #1a1412;
  --color-surface:        #231c18;
  --color-surface-2:      #2c2420;
  --color-divider:        rgba(232, 88, 12, 0.12);
  --color-border:         rgba(232, 88, 12, 0.2);

  --color-text:           #f0e6dc;
  --color-text-muted:     #a89585;
  --color-text-faint:     #6b5c4e;

  --color-primary:        #E8580C;
  --color-primary-hover:  #FF6A1E;
  --color-primary-active: #C44A0A;
  --gradient-fire:        linear-gradient(135deg, #E8580C 0%, #FF6A1E 50%, #FF9933 100%);

  --color-success:        #5BA847;
  --color-error:          #D94444;

  /* Radii */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.25rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 80px rgba(232, 88, 12, 0.12), 0 0 160px rgba(232, 88, 12, 0.06);
}

/* ── Base element resets ──────────────────────────────────────────── */
img, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

::selection {
  background: rgba(232, 88, 12, 0.3);
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Noscript banner ──────────────────────────────────────────────── */
.noscript-banner {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg, #1a1412);
  color: var(--color-text, #f0e6dc);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.125rem;
  text-align: center;
  padding: 2rem;
}

/* ── Shared Keyframes ── */

@keyframes heat-drift {
  0% { transform: translateX(-25%) scaleY(1); }
  25% { transform: translateX(0%) scaleY(2); }
  50% { transform: translateX(25%) scaleY(1); }
  75% { transform: translateX(0%) scaleY(1.5); }
  100% { transform: translateX(-25%) scaleY(1); }
}

@keyframes orb-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.6; }
}

@keyframes ember-float {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 0.6; }
  60% { opacity: 0.3; }
  100% { transform: translateY(-65vh) scale(0.4); opacity: 0; }
}

@keyframes check-draw { to { stroke-dashoffset: 0; } }

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes glow-pulse {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

@keyframes wave-undulate {
  0% { transform: translateX(0) scaleY(1); }
  100% { transform: translateX(-30%) scaleY(1.2); }
}

/* ── Heat Background ── */

.heat-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.heat-line {
  position: absolute;
  width: 200%;
  height: 1px;
  left: -50%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 88, 12, 0.06) 20%,
    rgba(232, 88, 12, 0.1) 50%,
    rgba(232, 88, 12, 0.06) 80%,
    transparent 100%
  );
  animation: heat-drift linear infinite;
}

.heat-line:nth-child(1) { top: 15%; animation-duration: 18s; }
.heat-line:nth-child(2) { top: 30%; animation-duration: 22s; animation-delay: -4s; opacity: 0.7; }
.heat-line:nth-child(3) { top: 50%; animation-duration: 16s; animation-delay: -8s; }
.heat-line:nth-child(4) { top: 70%; animation-duration: 20s; animation-delay: -12s; opacity: 0.5; }
.heat-line:nth-child(5) { top: 85%; animation-duration: 24s; animation-delay: -6s; opacity: 0.6; }

/* Heat waves at bottom — used by meet + kiosk */
.heat-waves {
  position: fixed;
  bottom: 0; left: 0; width: 100%; height: 35vh;
  z-index: 2; pointer-events: none; overflow: hidden;
}

.hw-wave {
  position: absolute; bottom: -10vh; left: 0; width: 200%; height: 120%;
  background: radial-gradient(ellipse at bottom, rgba(232, 88, 12, 0.4) 0%, rgba(255, 106, 30, 0.1) 40%, transparent 70%);
  transform-origin: bottom center;
  animation: wave-undulate linear infinite alternate;
  mix-blend-mode: screen;
}

.hw-wave:nth-child(1) { animation-duration: 6s; opacity: 0.8; }
.hw-wave:nth-child(2) { animation-duration: 9s; opacity: 0.6; animation-delay: -2s; transform: scaleY(1.3) translateX(-10%); }
.hw-wave:nth-child(3) { animation-duration: 12s; opacity: 0.4; animation-delay: -5s; transform: scaleY(0.9) translateX(10%); background: radial-gradient(ellipse at bottom, rgba(255, 106, 30, 0.3) 0%, transparent 60%); }
.hw-wave:nth-child(4) { animation-duration: 15s; opacity: 0.3; animation-delay: -8s; transform: scaleY(1.5); }

.hw-shimmer {
  position: absolute; bottom: 10vh; width: 200%; height: 4px;
  background: linear-gradient(90deg, transparent, rgba(255, 153, 51, 0.6), transparent);
  animation: wave-undulate 8s linear infinite;
  filter: blur(2px);
  mix-blend-mode: screen;
}