/* Fixed video backdrop: the page scrolls over it, the video never moves. */
html { background:#050505; }
body { background:transparent !important; }

.bg-video {
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:#050505 url(/assets/bg/bg-poster.jpg) center / cover no-repeat;
  pointer-events:none;
}
.bg-video video {
  width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:center; will-change:transform;
  animation:bg-zoom 10s ease-in-out infinite;
}
/* Slow push-in to 115%, hold, ease back out, hold. Cycle matches the 10s clip. */
@keyframes bg-zoom {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.15); }
  50%  { transform:scale(1.15); }
  90%  { transform:scale(1); }
  100% { transform:scale(1); }
}
/* Scrim keeps text readable over the bright collage. */
.bg-video::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(5,5,5,.35), rgba(5,5,5,.55));
}

/* Let the video show through the old solid section backgrounds. */
.hero, .page-header { background:transparent !important; }
.features, .sticker-section, .gas-preview, .mission, .donate-section, .stats-bar,
.site-footer, footer { background:rgba(5,5,5,.78) !important; }
.site-nav { background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-bottom:none !important; }
.site-nav a { text-shadow:0 1px 10px rgba(0,0,0,.9); }
.site-nav .nav-links a { color:#e5e5e5; }
@media (max-width:768px) { .site-nav .nav-links.open { background:rgba(5,5,5,.92) !important; } }

@media (prefers-reduced-motion:reduce) {
  .bg-video video { display:none; }
}

/* Hero: soft dark pool behind the copy so it stays legible over the bill. */
.hero::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 52%, rgba(5,5,5,.7), transparent 75%);
}
.hero > * { position:relative; z-index:1; }
.hero h1, .hero-sub { text-shadow:0 2px 18px rgba(0,0,0,.85); }
.hero-sub { color:#d4d4d4; }

/* Nav dropdown: Fake Facts */
.has-dd { position:relative; }
.dd-toggle {
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  font:inherit; line-height:inherit; color:#e5e5e5;
  text-shadow:0 1px 10px rgba(0,0,0,.9); transition:color .2s;
  display:inline-flex; align-items:center; gap:7px;
}
.dd-toggle:hover, .has-dd:has(:focus-visible) .dd-toggle { color:var(--gold); }
.dd-toggle.active { color:var(--gold); }
.dd-arrow {
  width:6px; height:6px; margin-top:-3px; font-size:0; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .2s;
}
.dd-menu {
  display:none; list-style:none; position:absolute; top:100%; left:50%;
  transform:translateX(-50%); margin-top:12px; min-width:170px; padding:8px;
  background:rgba(5,5,5,.9); backdrop-filter:blur(12px);
  border:1px solid #2a2a2a; border-radius:10px; z-index:1100;
}
.dd-menu::before { content:""; position:absolute; left:0; right:0; top:-14px; height:14px; } /* hover bridge */
.dd-menu a { display:block; padding:10px 14px; border-radius:6px; white-space:nowrap; }
.dd-menu a:hover { background:rgba(255,255,255,.08); }

/* Mouse: open on hover/keyboard focus only, never pinned by a click. */
@media (hover:hover) {
  .has-dd:hover .dd-menu, .has-dd:has(:focus-visible) .dd-menu { display:block; }
  .has-dd:hover .dd-toggle { color:var(--gold); }
  .has-dd:hover .dd-arrow, .has-dd:has(:focus-visible) .dd-arrow { transform:rotate(-135deg); margin-top:3px; }
}
/* Touch: tap toggles. */
@media (hover:none) {
  .has-dd.open .dd-menu { display:block; }
  .has-dd.open .dd-toggle { color:var(--gold); }
  .has-dd.open .dd-arrow { transform:rotate(-135deg); margin-top:3px; }
}
@media (max-width:768px) {
  .dd-menu { position:static; transform:none; margin:8px 0 0; background:transparent; border:none; backdrop-filter:none; padding:0 0 0 14px; }
  .dd-menu::before { display:none; }
}

/* Rock Salt runs wide: scale the display type down a bit. */
.hero h1 { font-size:clamp(1.8rem,4.8vw,3.5rem) !important; line-height:1.25 !important; }
.hero h1 .gold { color:var(--red); }
.hero h1 .red { color:var(--gold); }
.nav-brand, .footer-brand { font-size:1.05rem !important; letter-spacing:0 !important; }
.section-title { font-size:clamp(1.5rem,3.2vw,2.3rem) !important; line-height:1.3; }
.page-header h1 { font-size:clamp(1.6rem,4vw,2.8rem) !important; line-height:1.3; }

/* Nav stays clear at the top; once the page scrolls, a soft dark fade keeps links legible over content. */
.site-nav { transition:background .25s; }
.site-nav.scrolled { background:linear-gradient(rgba(5,5,5,.94) 0%, rgba(5,5,5,.94) 88%, rgba(5,5,5,0) 100%) !important; backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important; }
.nav-brand { color:var(--gold) !important; }
.nav-brand span { color:#fff !important; }

/* Menu: Rock Salt, Title Case */
.nav-links a, .dd-toggle, .dd-menu a {
  font-family:'Rock Salt',cursive !important; text-transform:none !important;
  font-size:.82rem !important; font-weight:400 !important; letter-spacing:0 !important;
}
.nav-links { gap:22px !important; }

/* Tracker is a dense dashboard: give the content a solid-ish panel over the video. */
main { background:rgba(5,5,5,.84); }

/* Both "Trump On A Pump" titles are all white. */
.nav-brand, .nav-brand b, .nav-brand span { color:#fff !important; }
.hero h1 .gold, .hero h1 .red, .hero h1 .white { color:#fff; }

/* Flag blue (Old Glory Blue #0A3161) for fills; a lighter tint of it for blue text. */
.btn-gold { background:#0A3161 !important; color:#fff !important; border:1px solid rgba(255,255,255,.35); }
.btn-gold:hover { background:#1b4f94 !important; box-shadow:0 4px 20px rgba(10,49,97,.6); }

/* Buttons: red / white / blue. White button = white outline + white text over a faint dark tint. */
.btn-red { background:#dc2626 !important; color:#fff !important; }
.btn-outline { background:rgba(5,5,5,.45) !important; color:#fff !important; border:2px solid #fff !important; text-shadow:none; }
.btn-outline:hover { background:rgba(255,255,255,.16) !important; color:#fff !important; border-color:#fff !important; }

/* Hero copy starts below the face (face sits at the vertical centre of the video). */
.hero { justify-content:flex-start !important; padding-top:max(56vh, 350px) !important; }
.hero::before { background:radial-gradient(ellipse 60% 45% at 50% 72%, rgba(5,5,5,.7), transparent 75%); }