/* ═══════════════════════════════════════════════════════════════════
   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 {
  color-scheme: dark;
  -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:     #9a8878;  /* WCAG AA on #1a1412: 5.4:1 */

  --color-primary:        #E8580C;
  --color-primary-hover:  #FF6A1E;
  --color-primary-active: #C44A0A;
  --color-primary-text:   #FF8A4C;  /* For small text on dark/tinted backgrounds — WCAG AA safe */
  --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);
}

/* ── Skip-to-content link ────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: #120d0b;  /* dark on orange: 4.7:1 — WCAG AA for body */
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top 0.2s;
}
.skip-link:focus {
  top: 1rem;
}

/* ── 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;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

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

/* ── Animated Gradient Border ── */

@keyframes border-rotate {
  to { --border-angle: 360deg; }
}

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ── Fire Sweep (button hover) ── */

@keyframes fire-sweep {
  0% { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}

/* ── Thermal Scan Line ── */

@keyframes thermal-scan {
  0% { top: 100%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: -2px; opacity: 0; }
}

/* ── Icon Flame Flicker ── */

@keyframes flame-flicker {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  25% { transform: scaleY(1.06) scaleX(0.97); }
  50% { transform: scaleY(0.95) scaleX(1.04); }
  75% { transform: scaleY(1.03) scaleX(0.98); }
}

/* ── Icon Pulse Ring ── */

@keyframes icon-ring-pulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 0; }
  100% { transform: scale(0.8); opacity: 0; }
}

/* ── Ember Scatter ── */

@keyframes ember-scatter {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--ex, 30px), var(--ey, -40px)) scale(0); opacity: 0; }
}

/* ── Heat Distortion Text ── */

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

/* ── SVG Icon Definitions (inline via CSS pseudo-elements) ── */

.hw-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.hw-icon svg {
  width: 1.4rem;
  height: 1.4rem;
  position: relative;
  z-index: 1;
}

.hw-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(232, 88, 12, 0.15);
  animation: icon-ring-pulse 2.5s ease-in-out infinite;
}

.hw-icon--flame svg {
  animation: flame-flicker 1.5s ease-in-out infinite;
  transform-origin: bottom center;
}

.hw-icon--handshake svg {
  transition: transform 0.3s ease;
}

.hw-icon--handshake:hover svg {
  transform: rotate(-8deg) scale(1.1);
}

.hw-icon--bolt svg {
  filter: drop-shadow(0 0 4px rgba(232, 88, 12, 0.5));
}

.hw-icon--chat svg {
  transition: transform 0.3s ease;
}

.hw-icon--chat:hover svg {
  transform: scale(1.1);
}

.hw-icon--star svg {
  animation: star-glow 2s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(232, 88, 12, 0.4));
}

.hw-icon--money svg {
  filter: drop-shadow(0 0 3px rgba(232, 88, 12, 0.4));
}

.hw-icon--envelope svg {
  transition: transform 0.3s ease;
}

.hw-icon--megaphone svg {
  filter: drop-shadow(0 0 4px rgba(232, 88, 12, 0.5));
}

/* Inline ticker icon variant — smaller, no ring pulse */
.hw-icon--inline {
  width: 1.1em;
  height: 1.1em;
  display: inline-flex;
  vertical-align: middle;
  margin-right: 0.15em;
}

.hw-icon--inline::before {
  display: none;
}

.hw-icon--inline svg {
  width: 1em;
  height: 1em;
}

@keyframes star-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(232, 88, 12, 0.4)); }
  50% { filter: drop-shadow(0 0 8px rgba(232, 88, 12, 0.7)); }
}

/* ── Page Title Icon (from IconScout SVGs) ── */

/* IconScout <img> icons — tinted to brand orange via CSS filter.
   Replaces the old .hw-icon wrapper + inline SVG pattern. */
.hw-icon-img {
  display: block;
  width: 32px !important;
  height: 32px !important;
  max-width: 32px;
  max-height: 32px;
  min-width: 32px;
  min-height: 32px;
  margin: 0 auto 0.5rem;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(38%) sepia(95%) saturate(1500%) hue-rotate(10deg) brightness(95%);
  /* produces ~#E8580C from black source SVGs */
}

.hw-icon-img--lg {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px;
  max-height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin-bottom: 0.75rem;
}

.page-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.25em;
  margin-right: 0.3em;
  filter: brightness(0) saturate(100%) invert(38%) sepia(95%) saturate(1500%) hue-rotate(10deg) brightness(95%);
  /* produces ~#E8580C from black source SVGs */
}

.page-icon--lg {
  width: 2em;
  height: 2em;
  vertical-align: -0.35em;
}

/* ── Gradient Border Wrapper ── */

.gradient-border {
  position: relative;
  background: clip-content;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 0%,
    rgba(232, 88, 12, 0.6) 10%,
    rgba(255, 106, 30, 0.8) 15%,
    transparent 25%,
    transparent 75%,
    rgba(255, 153, 51, 0.5) 85%,
    rgba(232, 88, 12, 0.6) 90%,
    transparent 100%
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: border-rotate 4s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* ── Thermal Scan on Countdown ── */

.thermal-scan {
  position: relative;
  overflow: hidden;
}

.thermal-scan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 88, 12, 0.7), rgba(255, 153, 51, 0.9), rgba(232, 88, 12, 0.7), transparent);
  filter: blur(1px);
  animation: thermal-scan 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

/* ── Fire Sweep Button ── */

.fire-btn {
  position: relative;
  overflow: hidden;
}

.fire-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: translateX(-100%) skewX(-15deg);
  pointer-events: none;
}

.fire-btn:hover::after {
  animation: fire-sweep 0.8s ease-out;
}

/* ── Heat Shimmer Text ── */

.heat-text {
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    #FF9933 25%,
    var(--color-primary) 50%,
    #FF6A1E 75%,
    var(--color-primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heat-text-shimmer 4s linear infinite;
}

/* ── Ember Particles (button hover) ── */

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

.ember {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #FF9933, #E8580C);
  opacity: 0;
}

.fire-btn:hover .ember {
  animation: ember-scatter 0.8s ease-out forwards;
}

.ember:nth-child(1) { top: 20%; left: 10%; --ex: -20px; --ey: -30px; animation-delay: 0s; }
.ember:nth-child(2) { top: 50%; left: 25%; --ex: -15px; --ey: -45px; animation-delay: 0.05s; }
.ember:nth-child(3) { top: 30%; left: 50%; --ex: 5px; --ey: -40px; animation-delay: 0.1s; }
.ember:nth-child(4) { top: 60%; left: 70%; --ex: 20px; --ey: -35px; animation-delay: 0.07s; }
.ember:nth-child(5) { top: 40%; left: 85%; --ex: 25px; --ey: -30px; animation-delay: 0.12s; }
.ember:nth-child(6) { top: 70%; left: 40%; --ex: -8px; --ey: -50px; animation-delay: 0.03s; }

/* ── Mobile UX: Touch targets (WCAG 2.5.8) ────────────────────────── */

@media (pointer: coarse) {
  button:not(.nav-dot):not(.guest-chip), [role="button"], a.btn, .fire-btn, input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ── Horizontal scroll prevention ──────────────────────────────────── */

html, body {
  overflow-x: hidden;
}

/* ── Print: hide decorative elements ───────────────────────────────── */

@media print {
  .heat-bg, .embers, .heat-waves, .ember-wrap, .heat-orb,
  .gradient-border::before, .skip-link {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
}

/* ── Accessibility: Reduced Motion ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .heat-bg, .embers, .heat-waves, .ember-wrap {
    display: none !important;
  }
}