/* ==========================================================================
   Glassmorphism theme layer — loaded after the Tailwind CDN runtime styles.
   Adds a fixed, glowing scene background (gold glow + grain) behind every
   page, then turns the site's flat "card" surface classes into frosted
   glass panels so they read as translucent over that background.
   ========================================================================== */

:root {
  --glass-bg: rgba(15, 17, 17, 0.5);
  --glass-bg-strong: rgba(9, 10, 10, 0.62);
  --glass-border: rgba(233, 195, 73, 0.16);
  --glass-border-hover: rgba(233, 195, 73, 0.42);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ---------- Base scene: fixed glow + grain behind the whole page ---------- */
html {
  background-color: #0a0c0c;
}

body {
  background-color: #0a0c0c;
  background-image:
    radial-gradient(ellipse 900px 620px at 10% -8%, rgba(233, 195, 73, 0.12), transparent 60%),
    radial-gradient(ellipse 760px 560px at 105% 15%, rgba(233, 195, 73, 0.08), transparent 55%),
    radial-gradient(ellipse 1000px 700px at 50% 105%, rgba(233, 195, 73, 0.06), transparent 60%),
    url("/img/grain.svg");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed, fixed;
  background-size: auto, auto, auto, 220px 220px;
}

/* ---------- Reusable decorative scene-art layers ---------- */
.bg-scene-road {
  background-image: url("/img/bg-road.svg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.bg-scene-skyline {
  background-image: url("/img/bg-skyline.svg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* ---------- Global glassmorphism: turn flat card surfaces into frosted glass ---------- */
.bg-surface-container-lowest,
.bg-\[\#1A1A1A\] {
  background-color: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--glass-shadow);
  border-color: var(--glass-border) !important;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

a.bg-surface-container-lowest:hover,
.bg-surface-container-lowest:hover,
a.bg-\[\#1A1A1A\]:hover,
.bg-\[\#1A1A1A\]:hover {
  border-color: var(--glass-border-hover) !important;
}

/* Section-level surfaces stay solid-ish for readability, but let a hint of
   the glowing scene bleed through so sections don't feel flat. */
.bg-surface-container-low,
.bg-surface-dim {
  background-color: rgba(18, 20, 20, 0.92) !important;
}

/* ---------- Header / nav ---------- */
nav.bg-background\/80 {
  background-color: rgba(10, 12, 12, 0.55) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

#mobile-menu.bg-background {
  background-color: rgba(10, 12, 12, 0.75) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

/* ---------- Footer ---------- */
footer.bg-surface-container-lowest {
  background-color: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  position: relative;
  overflow: hidden;
}

footer.bg-surface-container-lowest > * {
  position: relative;
  z-index: 1;
}

footer .footer-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Responsive foundations ---------- */
html, body {
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; }

/* Tap targets on mobile */
@media (max-width: 767px) {
  nav a, nav button { min-height: 44px; display: inline-flex; align-items: center; }
}