/* Shared design tokens + utility classes for the Tailwind-augmented pages
 * (index.html, townhall.html, conferences.html).
 * Used alongside the Tailwind CDN. The rl-* classes for the shared menu and
 * footer continue to live in web-reactlive.css.
 */

:root {
  --bg: #ffffff;
  --bg-2: #fafaf9;
  --bg-3: #f4f3f0;
  --ink: #0a0a0a;
  --ink-2: #18181b;
  --muted: #71717a;
  --muted-2: #a1a1aa;
  --line: #e7e5e4;
  --line-strong: #d4d4d8;
  --signal: #ff4a1c;
  --signal-soft: #fff1ec;
  --mint: #059669;
  --mint-soft: #ecfdf5;
  --live: #ef4444;
}

.font-display { font-family: 'Geist', sans-serif; letter-spacing: -0.04em; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "zero"; }
.hairline { border-color: var(--line); }
.hairline-strong { border-color: var(--line-strong); }

.card-shadow {
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 4px 12px rgba(10, 10, 10, 0.04),
    0 16px 40px -12px rgba(10, 10, 10, 0.08);
}
.card-shadow-lg {
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 8px 24px rgba(10, 10, 10, 0.06),
    0 32px 64px -16px rgba(10, 10, 10, 0.12);
}

.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 3rem; flex-shrink: 0; min-width: 100%; animation: scroll 48s linear infinite; }
@keyframes scroll { to { transform: translateX(-100%); } }

.dot-live { width: 8px; height: 8px; border-radius: 999px; background: var(--live); box-shadow: 0 0 0 0 rgba(239,68,68,.45); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.45);} 70% { box-shadow: 0 0 0 10px rgba(239,68,68,0);} 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0);} }

.caret::after { content: '▍'; margin-left: 2px; color: var(--signal); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.answer-card { animation: slide-up 0.9s cubic-bezier(.2,.8,.2,1) both; animation-delay: 0.6s; }
@keyframes slide-up { from { opacity: 0; transform: translateY(16px);} to { opacity: 1; transform: none;} }
.slide-up { animation: slide-up 0.5s ease-out both; }

.bar { display:inline-block; width:3px; margin:0 1.5px; background:var(--signal); border-radius:2px; animation: wave 1.1s ease-in-out infinite; }
.bar:nth-child(2){ animation-delay:.1s } .bar:nth-child(3){ animation-delay:.2s }
.bar:nth-child(4){ animation-delay:.3s } .bar:nth-child(5){ animation-delay:.4s }
.bar:nth-child(6){ animation-delay:.5s } .bar:nth-child(7){ animation-delay:.6s }
@keyframes wave { 0%,100%{ height:6px } 50%{ height:22px } }

.kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}

.under-hover { background-image: linear-gradient(var(--ink),var(--ink)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s ease; }
.under-hover:hover { background-size: 100% 1px; }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  transition: transform .2s ease, background .2s ease;
}
.btn-primary:hover { background: #27272a; transform: translateY(-1px); }
.btn-secondary {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  transition: border-color .2s ease, background .2s ease;
}
.btn-secondary:hover { background: var(--bg-2); border-color: var(--ink); }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(45deg); }
.chev { transition: transform .3s ease; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

.meter { height: 3px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.meter > span { display:block; height:100%; background: var(--mint); width: 94%; animation: fill 1.6s ease forwards; }
@keyframes fill { from { width: 0% } to { width: 94% } }

.grid-paper {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center;
}
.grid-fade {
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}

.dot-pattern {
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size: 20px 20px;
}

.signal-dot { color: var(--signal); }

.dark-section { background: var(--ink); color: var(--bg); }
.dark-section .kicker { color: var(--muted-2); }
.dark-section .hairline { border-color: rgba(255,255,255,0.1); }
.dark-section .hairline-strong { border-color: rgba(255,255,255,0.18); }

/* Conferences page extras */
@keyframes scan-line {
  0%, 100% { transform: translateY(0); opacity: 0; }
  10%, 90%  { opacity: 1; }
  50% { transform: translateY(110px); opacity: 1; }
}
.scan-line { animation: scan-line 2.4s ease-in-out infinite; }

.phone-frame {
  background: var(--ink);
  border-radius: 36px;
  padding: 8px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 30px 60px -20px rgba(10,10,10,0.25),
    0 60px 120px -40px rgba(10,10,10,0.15);
}
.phone-screen {
  background: var(--bg-2);
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 9/19;
}

.tab-active {
  background: var(--ink);
  color: var(--bg);
}

/* ---- Sticky nav + Solutions mega-menu ---- */
.nav-blur {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: rgba(255,255,255,0.8);
}

.mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.mega-trigger .chev-down { transition: transform .25s ease; }
.mega-trigger[aria-expanded="true"] .chev-down { transform: rotate(180deg); }

.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 24px -8px rgba(10,10,10,0.06), 0 32px 64px -16px rgba(10,10,10,0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  pointer-events: none;
}
.mega-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.menu-item { transition: background .15s ease; }
.menu-item:hover { background: var(--bg-2); }
.menu-item:hover .menu-icon { background: var(--signal-soft); color: var(--signal); }
.menu-item-active .menu-icon { background: var(--signal); color: var(--bg); }
.menu-item-active .menu-title { color: var(--signal); }