/* Formula D1 / Crimson room
 * The viewport is the lighting coordinate system. Transparent fills and edges
 * sample one continuous, pre-diffused scene, including during scrolling.
 * Only three pre-rasterized light fields move; no per-card JS or animated blur.
 */
:root {
  --fd-room-base: #090b10;
  --fd-room-frost: 18px;
  --fd-room-surface: rgba(17, 20, 27, .61);
  --fd-room-edge: rgba(225, 223, 236, .13);
  --fd-room-shadow: 0 18px 42px -18px #0009, 0 3px 9px #0002;
}
html, body { background: var(--fd-room-base); }
.fd-environment {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: linear-gradient(125deg, #14171f, #090b10 48%, #111117);
}
.fd-environment-light {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.fd-environment-light--far {
  width: 105%; height: 112%; left: 5%; top: -51%;
  background: radial-gradient(ellipse at 55% 48%, #b42b453d 0%, #941b3540 15%, #7211272b 32%, #46102412 49%, transparent 68%);
  transform: translate3d(0, 0, 0) rotate(-17deg);
  animation-name: fd-room-far;
  animation-duration: 47s;
  animation-delay: -19s;
}
.fd-environment-light--near {
  width: 86%; height: 98%; left: -40%; top: 28%;
  background: radial-gradient(ellipse at 50% 50%, #d32b4247 0%, #a11a3838 17%, #71152b1c 37%, transparent 66%);
  transform: translate3d(0, 0, 0) rotate(24deg);
  animation-name: fd-room-near;
  animation-duration: 67s;
  animation-delay: -31s;
}
.fd-environment-light--reflection {
  width: 63%; height: 94%; right: -30%; top: 24%;
  background: radial-gradient(ellipse at 50% 50%, #ec758333, #9b24352b 12%, #57172a13 32%, transparent 61%);
  transform: translate3d(0, 0, 0) rotate(-28deg) scaleX(.72);
  animation-name: fd-room-reflection;
  animation-duration: 83s;
  animation-delay: -53s;
}
.fd-environment-depth {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 46% 43%, transparent 28%, #05070b36 100%),
    linear-gradient(173deg, #d8e3ff05, transparent 23%, #06080d22 70%, #06080d66);
}
@keyframes fd-room-far {
  0% { transform: translate3d(-9%, -2%, 0) rotate(-17deg); opacity: .78; }
  48% { transform: translate3d(8%, 12%, 0) rotate(3deg); opacity: 1; }
  100% { transform: translate3d(-2%, 22%, 0) rotate(15deg); opacity: .86; }
}
@keyframes fd-room-near {
  0% { transform: translate3d(0, 9%, 0) rotate(24deg); opacity: .84; }
  57% { transform: translate3d(22%, -11%, 0) rotate(7deg); opacity: 1; }
  100% { transform: translate3d(11%, -24%, 0) rotate(-9deg); opacity: .72; }
}
@keyframes fd-room-reflection {
  0% { transform: translate3d(0, -18%, 0) rotate(-28deg) scaleX(.72); opacity: .68; }
  39% { transform: translate3d(-15%, 3%, 0) rotate(-12deg) scaleX(.85); opacity: .95; }
  100% { transform: translate3d(-7%, 19%, 0) rotate(9deg) scaleX(.72); opacity: .74; }
}
/* Open the shared shell to the room without changing its layout or hit targets. */
body .app-layout, body .main-wrapper, body .main-content,
body #pageOnboarding.fd-onboarding { background: transparent; }
body #pageSettings::before, body .pd-dashboard::before { content: none; }
body .fd-outreach-studio { background: transparent; }
body .auth-screen { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body .auth-screen::before, body .auth-screen::after { content: none; }
body .auth-screen .auth-card::before, body .auth-screen .auth-card::after { content: none; }
/* Foundation onboarding and profile-edit steps sit over the same persistent
 * room as entry. Keep the scrim and its former photographic backdrop out of
 * the stack so every sport, profile, preference, and review step samples it. */
body .fd-foundation-overlay { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body .fd-foundation-overlay::before { content: none; }

/* Frost transmission: the fill stops at the padding edge, leaving the border
 * more transmissive. Nearby lights consequently brighten the facing glass rim.
 * No blanket opacity on containers: text and all descendants stay fully opaque.
 */
body :is(.pp-glass, .pd-glass, .os-studio-panel, .os-recipients-panel, .os-review-glass, .fd-core-panel, .fd-onboarding-card, .card),
body #pageSettings .pp-identity,
body .auth-screen .auth-card,
body #pageLeadFinder .fd-map-results-panel {
  background: linear-gradient(125deg, #ffffff09, #ffffff01 43%, #ffffff03) padding-box,
    linear-gradient(var(--fd-room-surface), var(--fd-room-surface)) padding-box;
  border-color: var(--fd-room-edge);
  box-shadow: inset 0 1px 0 #ffffff0b, inset 0 -1px 0 #0003, var(--fd-room-shadow);
  /* Large panels only overlap smooth light fields. Blurring those again adds
   * a costly offscreen pass with no visible diffusion benefit. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Overlapping surfaces still need real frost to diffuse foreground content. */
body .auth-screen .auth-card {
  -webkit-backdrop-filter: blur(var(--fd-room-frost)) saturate(115%);
  backdrop-filter: blur(var(--fd-room-frost)) saturate(115%);
}
/* Navigation is denser to keep scrolling text behind it legible. */
body .sidebar, body .topbar, body .mobile-bottom-nav {
  background: rgba(12, 15, 21, .79) !important;
  border-color: #ffffff12 !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
body .sidebar-bottom { background: transparent !important; }
/* The map retains a stable dark ink field for geographic labels and markers. */
body #pageLeadFinder [data-program-panel="map"] .network-stage {
  background: linear-gradient(145deg, #ffffff03, transparent 55%), rgba(10, 13, 19, .84);
  border-color: #ffffff16;
  box-shadow: inset 0 1px #ffffff06, var(--fd-room-shadow);
}
body[data-app-page="LeadFinder"] .fd-environment-depth { background-color: #090b1026; }

@media (max-width: 767px), (pointer: coarse) {
  :root { --fd-room-frost: 10px; --fd-room-surface: rgba(17, 20, 27, .72); }
  .fd-environment-light--far { width: 160%; left: -20%; }
  .fd-environment-light--near { width: 145%; left: -85%; }
  .fd-environment-light--reflection { display: none; }
}
:root[data-environment-quality="economy"] { --fd-room-frost: 8px; }
:root[data-environment-quality="economy"] .fd-environment-light--reflection { display: none; }
:root[data-environment-paused="true"] .fd-environment-light { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .fd-environment-light { animation: none; will-change: auto; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --fd-room-surface: #14171e; --fd-room-frost: 0px; }
  body .sidebar, body .topbar, body .mobile-bottom-nav { background: #101319 !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --fd-room-surface: rgba(17, 20, 27, .92); }
}