/* ============================================================
   SHIZU UI Kit — global water atmosphere + home water styling
   ------------------------------------------------------------
   Two concerns live here:
   1. THE GLOBAL WATER LAYER (always on, every page). One fixed, full-viewport
      WebGL field (GlobalWaterAtmosphere.jsx) painted BEHIND all content and
      ABOVE the base page colour, so the same calm water flows continuously
      across the whole site with no per-section seams. Colours come from the
      always-on --gwa-* variables below and ease on the day/night toggle.
   2. HOME-ONLY ENHANCEMENTS gated to html[data-water="on"] (HomeScreen sets
      this while mounted): the ritual + newsletter "deep water" bands (now
      translucent, so the global water shows through them) and the calm scroll
      entrance reveals. Nothing functional — no buttons, forms, links or layout
      are altered anywhere.
   ============================================================ */

/* ============================================================
   GLOBAL WATER ATMOSPHERE — always-on, theme-aware palette
   Day = clean spa daylight · Night = deep cinematic water.
   GlobalWaterAtmosphere.jsx parses the --gwa-* vars on mount and again on
   every data-theme change, easing its uniforms across so the switch is smooth
   and needs no refresh. --gwa-base is the page colour behind the water canvas.
   ============================================================ */
:root {                                   /* DAY — clean spa daylight */
  --gwa-base:        #F7FAFA;             /* base page colour behind the water */
  --gwa-top:         #f1fafa;
  --gwa-bottom:      #d8efef;
  --gwa-caustic:     #6fc4c4;
  --gwa-spec:        #ffffff;
  --gwa-gold:        #c7a76a;
  --gwa-caustic-amt: 0.24;
  --gwa-spec-amt:    0.05;
  --gwa-glow-amt:    0.08;
  --gwa-gold-amt:    0.05;               /* gold stays a whisper in daylight */
  --gwa-vignette:    0.06;
  --gwa-daymix:      1;
  --gwa-opacity:     0.95;
}
[data-theme="night"] {                    /* NIGHT — deep cinematic water */
  --gwa-base:        #07111F;
  --gwa-top:         #102134;
  --gwa-bottom:      #060d18;
  --gwa-caustic:     #2abfbf;
  --gwa-spec:        #f7f5ee;
  --gwa-gold:        #D6B76A;
  --gwa-caustic-amt: 0.30;              /* visible, refined veins (was 0.12 = imperceptible) */
  --gwa-spec-amt:    0.07;
  --gwa-glow-amt:    0.10;              /* broad surface sheen reads as light on glass */
  --gwa-gold-amt:    0.09;               /* 5–10% champagne glint at night */
  --gwa-vignette:    0.16;              /* eased (was 0.22) so the field doesn't read as a dark blur at the edges */
  --gwa-daymix:      0;
  --gwa-opacity:     1;
}

/* The base page colour transitions with the theme; the body is made
   transparent so the fixed water canvas (behind all content) shows through
   every transparent section. Opaque sections / cards / the footer simply sit
   on top of the water — that is the intended "behind content" layering. */
/* Base swaps instantly (no transition) so it is always the correct theme
   colour underneath the water — including when the layer is disabled. The
   smooth day/night feel is carried by the water canvas + .gwa gradient. */
html { background-color: var(--gwa-base); transition: none; }
body { background: transparent !important; }

/* ── The single global water layer ──────────────────────────────────────
   Fixed to the viewport, BEHIND all content (z-index:-1, above the html base
   colour), never intercepts input, never scrolls — so it is one continuous
   atmosphere across sections and page transitions, with no hard start/end. */
.gwa {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;          /* isolate paint/layout — pure background layer */
  /* Static fallback gradient: shows if WebGL is ever unavailable, underpins
     the canvas otherwise, and eases between themes — so the water identity is
     never lost even where the live shader cannot run. */
  background:
    radial-gradient(115% 72% at 50% -8%, var(--gwa-top) 0%, transparent 56%),
    linear-gradient(to bottom, var(--gwa-top) 0%, var(--gwa-bottom) 100%);
  transition: background 0.6s cubic-bezier(0.22,0.61,0.36,1);
}
.gwa-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 0.5s ease;
}
/* One-flag kill switch via the DOM (mirrors WATER_ATMOSPHERE.enabled in JS):
   document.documentElement.dataset.waterAtmosphere = "off" */
html[data-water-atmosphere="off"] .gwa { display: none; }

/* ============================================================
   HOME "RITUAL" + "NEWSLETTER" BANDS  (html[data-water="on"], home only)
   These are kept as gently "deeper" water zones, but their fills are now
   TRANSLUCENT so the one global water field shows through them and the whole
   page reads as a single body of water. Text + surfaces stay fully readable.
   ============================================================ */
html[data-water="on"] {                   /* DAY band veils */
  --w-ritual-top:  rgba(238,247,247,0.42);
  --w-seam:        rgba(227,243,243,0.55);
  --w-news-bottom: rgba(212,237,237,0.66);
  --w-fg:          #152438;
  --w-fg-soft:     rgba(21,36,56,0.74);
  --w-fg-dim:      rgba(21,36,56,0.56);
  --w-step-bg:     rgba(255,255,255,0.55);
  --w-step-bg-h:   rgba(255,255,255,0.82);
  --w-step-bd:     rgba(21,36,56,0.10);
  --w-accent:      #138a8a;
  --w-gold:        #9c7322;
  --w-input-bg:    rgba(255,255,255,0.62);
  --w-input-bd:    rgba(21,36,56,0.16);
  --w-input-ph:    rgba(21,36,56,0.5);
}
html[data-water="on"][data-theme="night"] {  /* NIGHT band veils */
  --w-ritual-top:  rgba(14,30,51,0.40);
  --w-seam:        rgba(8,17,32,0.58);
  --w-news-bottom: rgba(6,13,24,0.74);
  --w-fg:          #ffffff;
  --w-fg-soft:     rgba(255,255,255,0.78);
  --w-fg-dim:      rgba(255,255,255,0.6);
  --w-step-bg:     rgba(255,255,255,0.04);
  --w-step-bg-h:   rgba(255,255,255,0.07);
  --w-step-bd:     rgba(255,255,255,0.08);
  --w-accent:      var(--teal-accent);
  --w-gold:        var(--gold);
  --w-input-bg:    rgba(255,255,255,0.08);
  --w-input-bd:    rgba(255,255,255,0.18);
  --w-input-ph:    rgba(255,255,255,0.55);
}

/* "RITUAL" band — NO veil. The one global water field flows straight through.
   Its scroll-driven depth (in the shader) makes this read as "deeper" water
   with no hard top/bottom edge — so there is no seam to begin with. Only the
   text + step surfaces stay themed for readability over the water. */
html[data-water="on"] .ritual-section {
  position: relative;
  /* Frosted veil (Nika): a subtle per-theme translucent tint over the water so
     the ritual band reads as premium frosted glass — lighter/less pronounced
     than the hero. The backdrop-blur + feathered top/bottom edges are inherited
     from the base .ritual-section, so there is no blunt seam either way. */
  background: linear-gradient(180deg, var(--w-ritual-top) 0%, var(--w-seam) 100%);
  color: var(--w-fg);
  transition: color 0.45s cubic-bezier(0.22,0.61,0.36,1),
              background 0.45s cubic-bezier(0.22,0.61,0.36,1);
}
html[data-water="on"] .ritual-section > .container { position: relative; z-index: 1; }

/* ---- day/night text, surfaces + accents for the ritual + newsletter bands ---- */
html[data-water="on"] .ritual-title,
html[data-water="on"] .ritual-step-body h4,
html[data-water="on"] .newsletter-box h2,
html[data-water="on"] .newsletter-box p { color: var(--w-fg) !important; }
html[data-water="on"] .ritual-title em { color: var(--w-gold) !important; }
html[data-water="on"] .ritual-eyebrow { color: var(--w-accent) !important; }
html[data-water="on"] .ritual-lede { color: var(--w-fg-soft) !important; }
html[data-water="on"] .ritual-step { background: var(--w-step-bg); border-color: var(--w-step-bd); transition: background 0.45s cubic-bezier(0.22,0.61,0.36,1), border-color 0.45s cubic-bezier(0.22,0.61,0.36,1), transform 0.25s var(--ease); }
html[data-water="on"] .ritual-step:hover { background: var(--w-step-bg-h); }
html[data-water="on"] .ritual-step-body p { color: var(--w-fg-dim) !important; }
html[data-water="on"] .ritual-step-time { color: var(--w-gold) !important; }
html[data-water="on"] .newsletter-form input { background: var(--w-input-bg) !important; border-color: var(--w-input-bd) !important; color: var(--w-fg) !important; }
html[data-water="on"] .newsletter-form input::placeholder { color: var(--w-input-ph); }

/* ============================================================
   NEWSLETTER over water  (the page's deepest point)
   Continues exactly at the seam colour the ritual band ended on, then keeps
   descending into the deepest navy — one unbroken, translucent gradient over
   the global water, so the footer/newsletter stays part of the same
   atmosphere. White text + the form sit above it untouched.
   ============================================================ */
html[data-water="on"] .newsletter-section {
  position: relative;
  /* No veil and NO overlay — the one continuous water field animates across the
     WHOLE section (an earlier build accidentally covered the lower half with a
     static footer-colour fade; the footer now dissolves its own top edge
     instead — see .footer below — so the animation fills the entire box). */
  background: transparent;
  color: var(--w-fg);
  transition: color 0.45s cubic-bezier(0.22,0.61,0.36,1);
}
/* Keep the teal accent glow low so it never re-draws a bright line where the
   two sections meet; ease it back so the water reads. */
html[data-water="on"] .newsletter-section::before {
  opacity: 0.42; z-index: 1;
  background-image: radial-gradient(circle at 82% 80%, rgba(127,217,217,0.16) 0%, transparent 55%);
}
html[data-water="on"] .newsletter-box { position: relative; z-index: 2; }

/* ============================================================
   DISSOLVE THE REMAINING OPAQUE EDGES  (home, html[data-water="on"])
   After the veils are gone, the only opaque blocks left in the home scroll are
   the hero photo, the statement strip and the footer. Instead of cutting hard
   against the water, they now either pass it straight through (statement strip)
   or fade their edge into --gwa-base (the water's own resting tone) so they
   rise out of / sink into the one field with no horizontal seam.
   ============================================================ */
/* Statement strip: let the one field flow through it (text stays themed,
   readable in both themes — dark teal by day, light by night). */
html[data-water="on"] .statement-strip { background: transparent; }

/* Hero: soft-dissolve its bottom edge down into the water's base tone, so the
   photographic hero settles into the field rather than ending on a hard line.
   Sits above the photo but below the hero content (z-index:1). */
/* Hero → water MERGE. The slab is a floating glass card (styles.css); here its
   photographic surface is feathered into the shader on ALL FOUR edges so it
   dissolves into the field instead of ending on hard lines. The centre stays
   fully opaque (headline + product panel readable); only the outer band fades,
   the bottom hardest — the slab appears to sink into the water. Because the
   .hero base wash also fades to transparent at the corners, the live shader
   (not a teal block) is what shows through every feathered edge. */
html[data-water="on"] .hero { position: relative; }
html[data-water="on"] .hero-photo,
html[data-water="on"] .hero-photo-overlay,
html[data-water="on"] .hero-bg-pattern {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 6.5%, #000 93.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 6.5%, #000 93.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 76%, transparent 100%);
  mask-composite: intersect;
}
/* A faint aqua waterline glancing across the sunken lower edge — the reflection
   where glass meets the field. No opaque band; the shader shows straight through. */
html[data-water="on"] .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 46%; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(127,217,217,0.045) 58%,
    rgba(127,217,217,0.13) 100%);
}
/* A refractive glass frame: a soft blurred ring just inside the rounded edge so
   the water read through the feathered border looks bent by the slab's glass. */
html[data-water="on"] .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 46px 2px rgba(224,248,248,0.10);
}

/* Footer: dissolve its OWN top edge into the water above it. Fading the
   footer's top strip (the padding zone, above any text) to transparent lets
   the animated field show through and melt into the dark footer — with NO
   overlay sitting on the newsletter, so that section keeps its full animation. */
html[data-water="on"] .footer {
  background: linear-gradient(to bottom, transparent 0, var(--footer-bg) 56px);
}

/* ============================================================
   ENTRANCE REVEALS  (home, visual only)
   Hidden state applies ONLY with JS + motion enabled, so no-JS and
   reduced-motion users always see fully-visible content.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js[data-water="on"] .w-reveal {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(8px);
    transition: opacity 0.9s cubic-bezier(0.22,0.61,0.36,1),
                transform 0.9s cubic-bezier(0.22,0.61,0.36,1),
                filter 0.9s ease;
    will-change: opacity, transform;
  }
  html.js[data-water="on"] .w-reveal.is-in {
    opacity: 1; transform: none; filter: none;
  }

  /* staggered children (benefit cards, ritual steps) — transform-safe targets */
  html.js[data-water="on"] .w-reveal-stagger > * {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(6px);
    transition: opacity 0.8s cubic-bezier(0.22,0.61,0.36,1),
                transform 0.8s cubic-bezier(0.22,0.61,0.36,1),
                filter 0.8s ease;
  }
  html.js[data-water="on"] .w-reveal-stagger.is-in > * { opacity: 1; transform: none; filter: none; }
  html.js[data-water="on"] .w-reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.09s; }
  html.js[data-water="on"] .w-reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.18s; }
  html.js[data-water="on"] .w-reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.27s; }
  html.js[data-water="on"] .w-reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.36s; }

  /* fade-only group (featured product cards) — never touch transform so the
     cards' own hover/tilt is untouched */
  html.js[data-water="on"] .w-reveal-fade > * {
    opacity: 0;
    filter: blur(4px);
    transition: opacity 1s ease, filter 1s ease;
  }
  html.js[data-water="on"] .w-reveal-fade.is-in > * { opacity: 1; filter: none; }
  html.js[data-water="on"] .w-reveal-fade.is-in > *:nth-child(2) { transition-delay: 0.12s; }
  html.js[data-water="on"] .w-reveal-fade.is-in > *:nth-child(3) { transition-delay: 0.24s; }
}

/* ============================================================
   PHASE 1 LAUNCH FIXES (2026-07-07) — day-hero re-grade.
   Rollback: delete this block.
   ============================================================ */
/* Day: tighten the photo feather so the hero reads as a crisp glass card.
   The wide dissolve mixed the pale day field into the photo edges (murk +
   visible seam). Night keeps the full dissolve. */
html[data-water="on"][data-theme="day"] .hero-photo,
html[data-water="on"][data-theme="day"] .hero-photo-overlay,
html[data-water="on"][data-theme="day"] .hero-bg-pattern {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 2%, #000 98%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 2.5%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 2%, #000 98%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 2.5%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
/* Day: deeper, cleaner duotone behind the headline — white type stays crisp
   at every width; the warm bathroom clears through on the right */
html[data-theme="day"] .hero-photo-overlay {
  background:
    linear-gradient(102deg,
      rgba(8, 34, 36, 0.96) 0%,
      rgba(10, 52, 54, 0.90) 36%,
      rgba(11, 62, 62, 0.60) 60%,
      rgba(11, 62, 62, 0.30) 80%,
      rgba(11, 62, 62, 0.16) 100%),
    linear-gradient(to top, rgba(6, 28, 30, 0.55) 0%, transparent 34%);
}