/* =====================================================================
   HighPur Water Express — water-FX atmosphere layers
   Caustics (dancing light net) + ocean-descent depth grade.
   Driven by --descent (0..1, set on scroll) and Tweak vars
   --caustics-strength and --dive.
   ===================================================================== */

:root{ --caustics-strength:.42; --dive:1; }

/* ---- caustics: surface light, strongest near the top, fading as you sink ---- */
.caustics{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  opacity: calc(var(--caustics-strength) * (1 - var(--descent,0) * .8));
  transition:opacity .4s ease;
}
.caustics::before, .caustics::after{
  content:""; position:absolute; inset:-20%;
  background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc3MDAnIGhlaWdodD0nNzAwJz48ZmlsdGVyIGlkPSdjJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC4wMTYnIG51bU9jdGF2ZXM9JzInIHNlZWQ9JzYnIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jQSB0eXBlPSdnYW1tYScgYW1wbGl0dWRlPScxJyBleHBvbmVudD0nNycgb2Zmc2V0PScwJy8+PC9mZUNvbXBvbmVudFRyYW5zZmVyPjxmZUNvbG9yTWF0cml4IHR5cGU9J21hdHJpeCcgdmFsdWVzPScwIDAgMCAwIDAuNTUgIDAgMCAwIDAgMC45NiAgMCAwIDAgMCAwLjkyICAwIDAgMCAxIDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCglMjNjKScvPjwvc3ZnPg==") repeat;
  mix-blend-mode:screen; will-change:transform;
}
.caustics::before{ background-size:620px 620px; animation:caustA 26s ease-in-out infinite alternate; }
.caustics::after{ background-size:450px 450px; opacity:.65; animation:caustB 34s ease-in-out infinite alternate; }
@keyframes caustA{ from{ transform:translate3d(-4%,-2%,0) scale(1.05); } to{ transform:translate3d(6%,5%,0) scale(1.13); } }
@keyframes caustB{ from{ transform:translate3d(3%,4%,0) scale(1.10) rotate(.6deg); } to{ transform:translate3d(-5%,-4%,0) scale(1.0) rotate(-.6deg); } }

/* ---- ocean-descent grade: god rays fade + water deepens as --descent rises ---- */
.godrays{ opacity: calc(.55 * (1 - var(--descent,0) * .92 * var(--dive))); animation:rays 18s ease-in-out infinite alternate; }
@keyframes rays{ 0%{ transform:translateX(-3%) skewX(-2deg); } 100%{ transform:translateX(3%) skewX(2deg); } }
.depth-tint{
  background:linear-gradient(180deg,
    rgba(4,20,28,0) 0%,
    rgba(3,16,23, calc(var(--descent,0) * .60 * var(--dive))) 45%,
    rgba(2,12,18, calc(var(--descent,0) * .85 * var(--dive))) 100%);
}

@media (prefers-reduced-motion: reduce){
  .caustics::before, .caustics::after{ animation:none; }
}

/* =====================================================================
   TWEAKS PANEL
   ===================================================================== */
.tweaks-panel{
  position:fixed; right:20px; bottom:20px; z-index:200; width:280px;
  background:rgba(6,29,39,.82); border:1px solid var(--glass-line-2); border-radius:18px;
  padding:18px 18px 16px; color:var(--white);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:0 30px 70px rgba(2,12,18,.6), inset 0 1px 0 rgba(127,246,234,.12);
  font-family:var(--font-body);
}
.tweaks-panel[hidden]{ display:none; }
.tweaks-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.tweaks-title{ font-size:.7rem; letter-spacing:.22em; color:var(--aqua); }
.tweaks-close{ background:none; border:0; color:var(--mist); font-size:1.4rem; line-height:1; cursor:pointer; padding:0 2px; transition:color .2s; }
.tweaks-close:hover{ color:var(--white); }
.tweaks-sub{ font-size:.92rem; color:var(--mist); margin:0 0 14px; }
.tweak-row{ display:flex; flex-direction:column; gap:8px; padding:11px 0; border-top:1px solid var(--glass-line); }
.tweak-row > label{ font-size:.84rem; color:var(--mist); }
.tweak-row input[type=range]{ width:100%; accent-color:var(--aqua); cursor:pointer; }
.tweak-row input[type=range]:disabled{ opacity:.4; cursor:not-allowed; }

/* toggle row */
.tweak-toggle{ flex-direction:row; align-items:center; justify-content:space-between; }
.tweak-toggle > span:first-child{ font-size:.94rem; color:var(--white); font-weight:500; }
.tweak-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.tweak-switch{ position:relative; width:42px; height:23px; border-radius:999px; background:rgba(127,246,234,.14); border:1px solid var(--glass-line-2); transition:background .25s var(--ease); flex:none; }
.tweak-switch::after{ content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--mist); transition:transform .25s var(--ease), background .25s var(--ease); }
.tweak-toggle input:checked ~ .tweak-switch{ background:rgba(51,232,214,.4); }
.tweak-toggle input:checked ~ .tweak-switch::after{ transform:translateX(19px); background:var(--aqua); box-shadow:0 0 10px rgba(51,232,214,.7); }
.tweak-toggle input:focus-visible ~ .tweak-switch{ outline:2px solid var(--aqua); outline-offset:2px; }
.tweaks-foot{ margin:14px 0 0; font-size:.6rem; letter-spacing:.06em; color:var(--mist-dim); line-height:1.5; }

@media (max-width:560px){
  .tweaks-panel{ right:12px; left:12px; bottom:12px; width:auto; }
}