/* ---------- Fixed render layers: water → chamber video → grains → captions ---------- */
      .layer {
        position: fixed; top: 0; left: 0;
        width: 100%; height: 100vh; height: 100lvh;
        display: block; pointer-events: none;
      }
      #water {
        z-index: 0;
        /* Painted before WebGL starts, and kept as the no-WebGL backdrop */
        background:
          radial-gradient(120% 90% at 85% 95%, rgba(205,232,246,.55) 0%, rgba(205,232,246,0) 45%),
          radial-gradient(90% 70% at 10% 35%, #f6ebe1 0%, rgba(246,235,225,0) 60%),
          linear-gradient(142deg, #93b4cc 0%, #d6e3ea 22%, #4ea3de 46%, #0b52c2 64%, #1a78d6 78%, #bfe0ef 100%);
      }
      .chamber-video {
        z-index: 1; object-fit: cover; opacity: 0;
        -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 55%, transparent 100%);
                mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 55%, transparent 100%);
      }
      #grains { z-index: 2; }

      .thats-it {
        position: fixed; left: 0; right: 0; top: var(--top, 64%);
        z-index: 3; text-align: center; pointer-events: none;
        font-size: 13px; font-weight: 500; letter-spacing: .08em;
        color: rgba(255, 255, 255, .78); opacity: 0;
      }

      .formula-ticker {
        position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
        transform: translateX(-50%); z-index: 3; pointer-events: none;
        display: flex; align-items: center; gap: 10px; white-space: nowrap;
        font-size: 12px; font-weight: 500; letter-spacing: .04em;
        color: rgba(255, 255, 255, .32); opacity: 0; transition: opacity .5s ease;
      }
      .formula-ticker.show { opacity: 1; }
      .formula-ticker span { transition: color .4s ease; }
      .formula-ticker span.on { color: rgba(255, 255, 255, .95); }
      .formula-ticker b { font-weight: 400; opacity: .7; }

      /* Caption for the bubble phase, centred over the rising bubbles */
      .chamber-copy {
        position: fixed; left: 50%; top: 50%; z-index: 3; pointer-events: none; opacity: 0;
        width: min(620px, calc(100% - 48px)); text-align: center;
        transform: translate(-50%, calc(-50% + var(--rise, 0px)));
        text-shadow: 0 2px 28px rgba(10, 40, 120, .35);
      }
      .chamber-copy span {
        font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
        color: rgba(255, 255, 255, .78);
      }
      .chamber-copy h3 {
        margin-top: 14px; font-size: clamp(34px, 4.4vw, 60px); font-weight: 600; line-height: 1.04; letter-spacing: -.03em;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
      }
      .chamber-copy p { margin-top: 14px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .86); }

      /* ---------- Hero ---------- */
      /* wave-intro.js feathers the top edge of the stage while the section rises into view. The first screen is painted in
         the gallery's cream, so the water fades up out of the section above instead of meeting it at a line */
      .wave-story {
        position: relative; z-index: 2; isolation: isolate; margin-top: -1px;
        background: linear-gradient(to bottom, #f7f2ea 0, #f7f2ea 100vh, #06112e 100vh);
      }
      .no-gl .wave-story { background: #06112e; }
      .wave-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh; overflow: hidden; pointer-events: none; }
      .wave-story .wave-hero, .wave-story .formula { position: relative; z-index: 4; }
      .wave-story .layer, .wave-story .thats-it, .wave-story .formula-ticker, .wave-story .chamber-copy { position: absolute; }
      .no-gl .wave-stage { display: none; }
      .wave-hero, .formula { color: #fff; }

      .wave-hero { position: relative; height: 100vh; height: 100svh; }
      .hero-overlay { position: absolute; inset: 0; pointer-events: none; }
      .hero-title { /* Drawn in glass by the shader; this is the real text for readers and the no-WebGL fallback */
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
      }
      .hero-title span, .hero-title strong { display: block; }
      .hero-sub {
        position: absolute; left: 16px; right: 16px; top: var(--sub-top, 72%);
        text-align: center; font-size: clamp(16px, 1.45vw, 20px); font-weight: 500; letter-spacing: -.01em;
        color: rgba(255, 255, 255, .94); text-shadow: 0 1px 20px rgba(10, 30, 90, .4);
        opacity: 0; transform: translateY(10px);
        transition: opacity 1.2s ease 1.9s, transform 1.2s ease 1.9s;
      }
      .is-ready .hero-sub { opacity: 1; transform: none; }
      .scroll-cue {
        position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
        display: flex; flex-direction: column; align-items: center; gap: 10px;
        font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
        color: rgba(255, 255, 255, .8); opacity: 0; transition: opacity 1s ease 2.6s;
      }
      .is-ready .scroll-cue { opacity: 1; }
      .scroll-cue i {
        width: 1px; height: 38px; background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,0));
        transform-origin: top; animation: cue 2.2s cubic-bezier(.6, 0, .3, 1) infinite;
      }
      @keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

      /* ---------- Formula: a tall scroll track; everything visible happens in the fixed layers ---------- */
      .formula { position: relative; height: 900vh; }
      .formula-words { /* Screen-reader text; becomes the visible sequence when WebGL is unavailable */
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
      }

      /* ---------- No WebGL: plain gradient, real text ---------- */
      .no-gl #grains, .no-gl .chamber-video, .no-gl .thats-it, .no-gl .formula-ticker, .no-gl .chamber-copy { display: none; }
      .no-gl .hero-title {
        width: auto; height: auto; clip: auto; overflow: visible; white-space: normal;
        left: 0; right: 0; top: 50%; transform: translateY(-58%); text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; font-weight: 600;
        color: rgba(255, 255, 255, .92); text-shadow: 0 2px 30px rgba(10, 30, 90, .3);
      }
      .no-gl .hero-title span { font-size: clamp(22px, 4vw, 52px); }
      .no-gl .hero-title strong { font-size: clamp(88px, 20vw, 260px); line-height: 1; letter-spacing: -.02em; }
      .no-gl .formula { height: auto; padding: 24vh 16px; background: linear-gradient(#0a1f55, #06112e); }
      .no-gl .formula-words {
        position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal;
        display: grid; gap: 34vh; text-align: center; list-style: none;
        font-family: 'Clash Display', 'Inter', sans-serif; font-weight: 600; font-size: clamp(44px, 11vw, 180px); line-height: 1;
      }
      .no-gl .formula-words small { display: block; margin-top: 24px; font: 500 14px/1 -apple-system, 'Inter', sans-serif; letter-spacing: .08em; opacity: .8; }
    
      /* ---------- Science: cream glass over the resurfaced water ---------- */
      .science { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 120px max(16px, 4vw) 80px; }
      .science-panel {
        width: min(1320px, 100%); padding: clamp(28px, 4.5vw, 64px); border-radius: clamp(28px, 3vw, 40px);
        color: #fff;
        /* Liquid glass: a faint blue tint keeps white text readable over the pale parts of the wave */
        background:
          linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04) 60%),
          linear-gradient(135deg, rgba(40, 100, 225, .42), rgba(30, 90, 220, .26) 55%, rgba(25, 80, 210, .3));
        border: 1px solid rgba(255, 255, 255, .34);
        -webkit-backdrop-filter: blur(28px) saturate(1.5) brightness(.9);
                backdrop-filter: blur(28px) saturate(1.5) brightness(.9);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 30px 80px rgba(8, 30, 90, .22);
        text-shadow: 0 1px 18px rgba(10, 40, 120, .18);
      }
      .science-kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
      .science-panel h2 {
        margin-top: 16px; max-width: 780px; font-size: clamp(40px, 4.6vw, 76px); line-height: 1; font-weight: 600; letter-spacing: -.035em;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
      }
      .science-lede { max-width: 690px; margin-top: 22px; color: rgba(255, 255, 255, .88); font-size: clamp(17px, 1.45vw, 22px); line-height: 1.6; }
      .science-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 5vh, 52px); }
      .science-cards article {
        min-height: clamp(210px, 22vh, 250px); padding: clamp(26px, 2.6vw, 32px); border-radius: 26px;
        background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07));
        -webkit-backdrop-filter: blur(20px) saturate(1.6);
                backdrop-filter: blur(20px) saturate(1.6);
        border: 1px solid rgba(255, 255, 255, .3);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 30px rgba(8, 30, 90, .12);
      }
      .science-cards span { display: block; color: rgba(255, 255, 255, .72); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
      .science-cards strong {
        display: block; margin-top: 18px; color: #fff; font-size: clamp(32px, 4vw, 62px); line-height: .95; font-weight: 400; letter-spacing: -.04em;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
      }
      .science-cards b { font: inherit; }
      .science-cards .is-ph strong { font-size: clamp(30px, 3.4vw, 54px); letter-spacing: -.06em; white-space: nowrap; }
      .science-cards p { margin-top: 20px; color: rgba(255, 255, 255, .8); font-size: 16px; line-height: 1.55; }
      .js .science .reveal {
        opacity: 0; transform: translateY(24px);
        transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
        transition-delay: calc(var(--i, 0) * 90ms);
      }
      .js .science.in .reveal { opacity: 1; transform: none; }
      @media (prefers-reduced-motion: reduce) { .js .science .reveal { transform: none; transition-duration: .01s; } }
      @media (max-width: 1120px) { .science-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      @media (max-width: 640px) {
        .science { padding-top: 96px; }
        .science-cards { grid-template-columns: 1fr; gap: 12px; }
        .science-cards article { min-height: 170px; padding: 26px; }
      }


      .wave-story .science { z-index: 4; }
      .wave-story .science-panel h2 { color: #fff; }
      .wave-story .chamber-copy, .wave-story .chamber-copy h3,
      .wave-story .chamber-copy span, .wave-story .chamber-copy p { color: #fff; }
      @media (max-width: 640px) {
        .wave-story .formula-ticker { gap: 6px; font-size: 10.5px; letter-spacing: .02em; }
        .wave-story .science-panel { padding: 26px 20px; }
      }

      .salt-note {
        position: fixed; left: 50%; top: var(--salt-top, 67%); z-index: 3;
        width: min(620px, calc(100% - 48px)); margin: 0; transform: translateX(-50%);
        color: rgba(255, 255, 255, .78); font: 400 10px/1.5 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
        text-align: center; letter-spacing: .01em; opacity: 0; pointer-events: none;
      }
      .no-gl .salt-note { display: none; }
      .no-gl .formula-words .salt-note-fallback {
        max-width: 620px; margin: 20px auto 0; font-size: 10px; line-height: 1.5; letter-spacing: .01em;
      }
      .no-gl .hero-title { color: #fff; }

      .wave-story .salt-note { position: absolute; }