/* ==========================================================================
   scene3d.css — "Live 3D background" theme.
   Applies ONLY when the WebGL scene has initialised (html.has-scene3d added by
   scene3d.js). If WebGL is unavailable, none of this applies and the site keeps
   its normal light theme — graceful fallback.
   Content floats on frosted-glass panels above the fixed 3D scene.
   ========================================================================== */

/* Fixed full-viewport canvas behind everything */
#scene3d { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
#scene3d canvas { display: block; width: 100vw !important; height: 100vh !important; }

/* Dark base + readability scrim (only with the live scene) */
html.has-scene3d { background: #120d09; }
html.has-scene3d body { background: transparent; color: #e4dccf; }
html.has-scene3d body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,13,9,.5) 0%, rgba(18,13,9,.66) 100%);
}

/* Sections become transparent windows to the 3D world */
html.has-scene3d .section { background: transparent !important; }
html.has-scene3d .marquee { background: rgba(20,15,11,.42) !important; border-color: rgba(217,164,65,.18) !important; }
html.has-scene3d .stall3d-section { background: transparent !important; }

/* Typography -> light */
html.has-scene3d h1, html.has-scene3d h2, html.has-scene3d h3, html.has-scene3d h4,
html.has-scene3d .statement { color: #f6f0e6 !important; }
html.has-scene3d p, html.has-scene3d .lead, html.has-scene3d li { color: #d7cec1; }
html.has-scene3d .muted { color: rgba(224,216,204,.66) !important; }
html.has-scene3d .price, html.has-scene3d .eyebrow { color: var(--color-accent-soft) !important; }

/* Frosted-glass panels for readable content over the moving scene */
html.has-scene3d .card,
html.has-scene3d .finish,
html.has-scene3d .tslider,
html.has-scene3d .faq,
html.has-scene3d .stall3d,
html.has-scene3d .contact-form,
html.has-scene3d form.card,
html.has-scene3d .feature-media,
html.has-scene3d .wood-frame {
  background: rgba(28,21,15,.52) !important;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  border: 1px solid rgba(217,164,65,.16);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
}
html.has-scene3d .card h3, html.has-scene3d .finish__body h4 { color: #f6f0e6 !important; }
html.has-scene3d .card p, html.has-scene3d .finish__body p { color: #cfc5b7 !important; }
html.has-scene3d .card__num { color: rgba(217,164,65,.35); }

/* Navbar glass (both states legible on the dark scene) */
html.has-scene3d .nav.is-solid { background: rgba(18,13,9,.6) !important; box-shadow: 0 8px 30px -12px rgba(0,0,0,.6); }
html.has-scene3d .nav.is-solid .nav__logo,
html.has-scene3d .nav.is-solid .nav__links a { color: #f6f0e6 !important; }
html.has-scene3d .nav.is-solid .nav__links a:hover { color: #fff !important; }
/* The 3D scene makes the solid navbar dark too, so the logo stays knocked out. */
html.has-scene3d .nav.is-solid .nav__logo--img img { filter: brightness(0) invert(1); }
html.has-scene3d .nav__logo span { color: var(--color-accent-soft) !important; }
html.has-scene3d .nav.is-solid .btn-ghost { color: #f6f0e6 !important; border-color: rgba(255,255,255,.4) !important; }

/* Hero + inner banners: hide the static wood image so the LIVE 3D shows through */
html.has-scene3d .hero__bg { opacity: 0 !important; }
html.has-scene3d .hero::after { background: linear-gradient(180deg, rgba(18,13,9,.35), rgba(18,13,9,.62)) !important; }
html.has-scene3d .pageheader__bg { opacity: 0 !important; }
html.has-scene3d .pageheader::after { background: linear-gradient(180deg, rgba(18,13,9,.42), rgba(18,13,9,.66)) !important; }

/* Chips / filters */
html.has-scene3d .chip { background: rgba(28,21,15,.5) !important; color: #e4dccf !important; border-color: rgba(255,255,255,.16) !important; }
html.has-scene3d .chip.active { background: var(--color-accent) !important; color: #1a1109 !important; border-color: var(--color-accent) !important; }

/* Ghost buttons -> light */
html.has-scene3d .btn-ghost { color: #f0e9df !important; border-color: rgba(255,255,255,.32) !important; }
html.has-scene3d .btn-ghost:hover { border-color: #fff !important; background: rgba(255,255,255,.08) !important; }

/* Form fields */
html.has-scene3d input, html.has-scene3d textarea, html.has-scene3d select {
  background: rgba(18,13,9,.5) !important; color: #f0e9df !important;
  border-color: rgba(255,255,255,.16) !important;
}
html.has-scene3d input::placeholder, html.has-scene3d textarea::placeholder { color: rgba(224,216,204,.5) !important; }
html.has-scene3d label { color: #d7cec1 !important; }

/* Dark bands (stats, cta) already suit the theme — let the scene show */
html.has-scene3d .stats, html.has-scene3d .cta-band { background: transparent !important; }
html.has-scene3d .cta-band::after { opacity: .5; }

/* FAQ dividers */
html.has-scene3d .faq__item { border-color: rgba(255,255,255,.12); }
html.has-scene3d .faq__q { color: #f2ece2 !important; }

/* Footer transparent (sits on the scene) */
html.has-scene3d .footer { background: transparent !important; border-top: 1px solid rgba(255,255,255,.08); }

/* Testimonials text */
html.has-scene3d .tslide blockquote { color: #efe8dc !important; }
html.has-scene3d .tslide cite { color: var(--color-accent-soft) !important; }

/* Perf: drop the heavy blur on small screens */
@media (max-width: 768px) {
  html.has-scene3d .card, html.has-scene3d .finish, html.has-scene3d .tslider,
  html.has-scene3d .faq, html.has-scene3d .wood-frame, html.has-scene3d .feature-media {
    backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(24,18,13,.82) !important;
  }
}

/* Stats & counters brighter on the dark scene */
html.has-scene3d .inline-stats .n, html.has-scene3d .stat__num { color: #f6f0e6 !important; }
html.has-scene3d .inline-stats .l, html.has-scene3d .stat__label { color: rgba(226,218,206,.72) !important; }
html.has-scene3d .pageheader__crumbs, html.has-scene3d .pageheader__crumbs span { color: rgba(232,224,212,.7) !important; }
html.has-scene3d .marquee__item { color: rgba(226,218,206,.6) !important; }