/* ============================================================
   Neuro / water living background — TEMPORARY SEASONAL LAYER.
   Every rule is scoped under html.neuro-live, a class added by an
   inline date-gate script ONLY between 2026-07-14 and 2026-08-15.
   Outside that window the class is absent, none of this applies,
   and the site renders exactly as normal. Nothing to undo.
   ============================================================ */

/* The background host is inert unless the seasonal layer is live. */
#neuro-bg { display: none; }

html.neuro-live,
html.neuro-live body { background: transparent !important; }

html.neuro-live #neuro-bg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
html.neuro-live #neuro-bg canvas { width: 100% !important; height: 100% !important; display: block; }

/* keep main content above the fixed background. The navbar (z-index 2000),
   .write-link (fixed, z-index 1000) and .section-dots (fixed, z-index 1500)
   are already above the z-index:0 background in the root stacking context —
   do NOT reposition them (that broke the fixed WRITE link and nav dots). */
html.neuro-live main { position: relative; z-index: 1; }

/* the living water replaces the fog and the stock practice-area photography */
html.neuro-live #fog-canvas { display: none !important; }
html.neuro-live .hero-image { display: none !important; }
html.neuro-live #services1::before,
html.neuro-live #services3::before,
html.neuro-live #services5::before,
html.neuro-live #services7::before { display: none !important; }
html.neuro-live #services1,
html.neuro-live #services3,
html.neuro-live #services5,
html.neuro-live #services7 { background-color: transparent !important; position: relative; isolation: isolate; }

/* translucent near-white keeps dark reading text clear while the monochrome water shows through */
html.neuro-live #about,
html.neuro-live #services2,
html.neuro-live #services4,
html.neuro-live #services6,
html.neuro-live #bio { background-color: rgba(252,251,249,0.88) !important; }

/* Philosophy blockquote: per-word inline-block spans collapse whitespace under its
   text-indent / hanging-punctuation, so render its word-spans inline (keeps the
   hanging guillemet and proper spacing; it simply skips the per-letter ripple). */
html.neuro-live #services7 blockquote span { display: inline !important; }

/* the generated child that carries the text-wave motion */
html.neuro-live .neuro-wave-inner {
  transform-origin: 50% 58%;
  backface-visibility: hidden;
  will-change: transform;
}
html.neuro-live .hero-content > .neuro-wave-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
html.neuro-live .about-content > .neuro-wave-inner,
html.neuro-live .services-content > .neuro-wave-inner,
html.neuro-live .portrait-contact-inner > .neuro-wave-inner { width: 100%; }

/* a soft scrim on the dark (now photo-less) sections keeps white text crisp over the glimmer */
html.neuro-live #services1::after,
html.neuro-live #services3::after,
html.neuro-live #services5::after,
html.neuro-live #services7::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, rgba(4,18,26,0.40) 0%, rgba(4,14,21,0.68) 100%);
}

/* hero vignette retains the open-water center while protecting the title */
html.neuro-live #home::after {
  background: radial-gradient(ellipse at center, rgba(4,16,22,0.14) 30%, rgba(4,16,22,0.56) 100%) !important;
}

/* last section: the monochrome living water reads over the portrait */
html.neuro-live #portrait .portrait-content img {
  opacity: 0.60 !important;
  filter: grayscale(1) contrast(1.05) brightness(1.03);
}

/* mobile: size the last section to the SMALL viewport so the contact/address
   at its bottom is never hidden behind the browser toolbar, and clear the
   home-indicator safe area. */
@media (max-width: 991px) {
  html.neuro-live #portrait { min-height: 100svh; }
  html.neuro-live #portrait .portrait-content { height: 100svh; }
  html.neuro-live #portrait .portrait-contact {
    padding-bottom: calc(clamp(32px, 6vh, 64px) + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.neuro-live .neuro-wave-inner { transform: none !important; will-change: auto; }
}
@media print {
  html.neuro-live #neuro-bg { display: none !important; }
  html.neuro-live .neuro-wave-inner { transform: none !important; }
}