/* Nouscraft WebGL background — site stylesheet.
 *
 * Loads AFTER styles.css, codex-styles.css, amazon-styles.css and
 * author-styles.css, and does exactly two jobs: open a hole through the opaque
 * section backgrounds so the canvas is visible, and put a legibility scrim back
 * under the copy that needs one.
 *
 * Everything is scoped to body.webgl-bg, so a page without that class is
 * completely unaffected.
 *
 * Fallback order matters: 100vh before 100svh and long-hand offsets before
 * inset, because a browser that doesn't understand the newer value drops the
 * whole declaration and the layout collapses. See docs/threejs-compatibility.md.
 */

body.webgl-bg {
  --wg-panel: rgba(12, 12, 14, 0.34);
  /* Long-form prose needs more floor than a card on a landing page does. */
  --wg-panel-read: rgba(12, 12, 14, 0.62);
  --wg-panel-solid: rgba(14, 14, 16, 0.86);
  /* Stays opaque and dark. Making the body transparent lets the browser's own
     white through, and a half-opacity #131313 over white is mid-grey — which
     washes an additively-blended scene out to nothing. */
  background-color: #0d0d0f;
}

/* ---- The WebGL layer ------------------------------------------------- */

body.webgl-bg #lattice {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Ground the page even with no WebGL at all: this gradient is the rung every
   fallback lands on, and it is plain CSS that never depended on the script. */
body.webgl-bg .bg-fallback {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 45% at 22% 18%, rgba(255, 193, 10, 0.10), transparent 70%),
    radial-gradient(55% 50% at 80% 72%, rgba(177, 18, 37, 0.14), transparent 70%),
    #131313;
}
body.webgl-bg.webgl-ok .bg-fallback { opacity: 0.35; }

/* Vignette as a fixed DOM layer rather than an EffectComposer pass: visually
   equivalent here, zero draw calls, and no extra files to ship. */
body.webgl-bg .grade {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
body.webgl-bg .grade::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 62%, rgba(0, 0, 0, 0.42) 100%);
}

/* ---- Open the page up ------------------------------------------------ */

body.webgl-bg main {
  position: relative;
  z-index: 2;
  background: transparent;
}

body.webgl-bg main > section,
body.webgl-bg .series-carousel-section,
body.webgl-bg .books-section,
body.webgl-bg .packages-section,
body.webgl-bg .free-chapter-section,
body.webgl-bg .audiobook-preview-section,
body.webgl-bg .media-mentions-section,
body.webgl-bg .about-section,
body.webgl-bg .testimonials-section,
body.webgl-bg .hero,
/* book pages + author page */
body.webgl-bg .codex-main,
body.webgl-bg .codex-hero,
body.webgl-bg .codex-layout,
body.webgl-bg .author-main,
body.webgl-bg .author-container,
body.webgl-bg .author-faq,
body.webgl-bg footer {
  background: transparent;
  background-color: transparent;
}

body.webgl-bg footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 193, 10, 0.18);
}

/* The decorative section washes fight the scene for the same pixels. */
body.webgl-bg .series-carousel-section::before,
body.webgl-bg .series-carousel-section::after,
body.webgl-bg .books-section::before,
body.webgl-bg .about-section::before,
body.webgl-bg .testimonials-section::before {
  opacity: 0.25;
}

/* ---- Put legibility back --------------------------------------------- */

/* These are the card-level elements carrying an opaque `var(--base)`. Scrimming
   `.book-content` alone does nothing, because its parent `.book-card` is the
   opaque one — the world gets hidden a layer up. */
body.webgl-bg .book-card,
body.webgl-bg .feature-card,
body.webgl-bg .testimonial-card,
body.webgl-bg .review-card,
body.webgl-bg .about-quote,
body.webgl-bg .media-mentions-container,
body.webgl-bg .preview-details,
body.webgl-bg .bundle-card,
body.webgl-bg .free-chapter-form,
/* book pages */
body.webgl-bg .codex-content,
body.webgl-bg .codex-sidebar-left,
body.webgl-bg .codex-sidebar-right,
body.webgl-bg .codex-entry,
body.webgl-bg .bestiary-entry,
body.webgl-bg .codex-index-card,
body.webgl-bg .character-card,
body.webgl-bg .codex-newsletter,
/* author page */
body.webgl-bg .author-profile,
body.webgl-bg .author-bio,
body.webgl-bg .faq-item,
body.webgl-bg .author-book-item,
body.webgl-bg .author-newsletter,
/* The book pages put every word inside one UNCLASSED
   `<div style="max-width:800px">` in `.codex-main` — none of the selectors
   above match it, so that copy was sitting straight on the world with nothing
   behind it at all. Each of the three pages has exactly one such child. */
body.webgl-bg .codex-main > div {
  background: var(--wg-panel);
  background-color: var(--wg-panel);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
  border-radius: 4px;
  /* The three cues that make a tinted rectangle read as glass: a hairline
     edge, a highlight along the top where light would catch it, and a soft
     drop so it sits *in front of* the scene rather than being part of it.
     inset box-shadow rather than a border, so nothing reflows. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
    0 14px 40px rgba(0, 0, 0, 0.45);
}

/* The content column is 1000–1200px wide, so on a 1440 screen the scene only
   gets a narrow gutter either side. The panels have to be thin enough for the
   world to read *through* the copy, not just around it — which is the whole
   reason a per-book background is worth having. Blur plus a text shadow does
   the legibility work that opacity was doing. */
body.webgl-bg .book-content p,
body.webgl-bg .book-content h3,
body.webgl-bg .testimonial-card p,
body.webgl-bg .feature-card p,
body.webgl-bg .feature-card h3,
body.webgl-bg .codex-content p,
body.webgl-bg .codex-content li,
body.webgl-bg .bio-text,
body.webgl-bg .faq-answer p,
body.webgl-bg .codex-main > div p,
body.webgl-bg .codex-main > div li {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

/* A page of prose, not a card: heavier scrim, and room to breathe so the
   panel does not crop tight to the text. */
body.webgl-bg .codex-main > div {
  background: var(--wg-panel-read);
  background-color: var(--wg-panel-read);
  padding: 2.25rem 2rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 3rem !important;
}

/* Forms and modals stay opaque — a half-transparent input is unusable. */
body.webgl-bg .notification-modal .modal-content,
body.webgl-bg .review-popup,
body.webgl-bg input,
body.webgl-bg select,
body.webgl-bg textarea {
  background-color: var(--wg-panel-solid);
}

body.webgl-bg .about-intro,
body.webgl-bg .testimonials-subtitle,
body.webgl-bg .preview-availability,
body.webgl-bg .codex-subtitle,
body.webgl-bg .author-tagline {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9);
}

/* ---- Mobile ----------------------------------------------------------- */

@media (max-width: 767px) {
  /* Panels go heavier on a phone: less screen, more text per square inch. */
  body.webgl-bg {
    --wg-panel: rgba(12, 12, 14, 0.72);
  }
}