/* =========================================================
   CLARITY — WATER THREAD (Phase 2 prototype)
   ---------------------------------------------------------
   Layering model:
     --z-water-back    behind normal section content
     --z-content       normal section content (typography,
                        photography, product SVGs)
     --z-water-front   in front of normal section content,
                        still below persistent UI
     --z-ui            navigation / mobile nav

   Two fixed, full-viewport, pointer-events:none layers
   (#waterBack / #waterFront) are injected by water-thread.js
   as direct children of <body> — outside <header> and <main> —
   so the water is never trapped inside a section's DOM subtree
   and can visually cross section boundaries freely.
   ========================================================= */

:root {
  --z-water-back: 10;
  --z-content: 20;
  --z-water-front: 30;
  --z-ui: 200;
}

/* All homepage content sits on one shared content layer, above
   waterBack and below waterFront. This is the one structural
   change required outside this file: it does not alter layout,
   typography, colour or spacing. */
main {
  position: relative;
  z-index: var(--z-content);
}

.water-thread-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#waterBack { z-index: var(--z-water-back); }
#waterFront { z-index: var(--z-water-front); }

/* ---------- Temporary prototype water elements ---------- */

.wt-stream {
  position: absolute;
  top: 0;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(200, 155, 60, 0) 0%, rgba(214, 226, 232, 0.9) 35%, rgba(214, 226, 232, 0.55) 100%);
  box-shadow: 0 0 12px rgba(214, 226, 232, 0.35);
  opacity: 0;
  transform-origin: top center;
  will-change: transform, opacity, height;
}

.wt-droplet {
  position: absolute;
  width: 13px;
  height: 17px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(214, 226, 232, 0.65) 55%, rgba(148, 168, 176, 0.35) 100%);
  opacity: 0;
  will-change: transform, opacity;
}

.wt-trace {
  position: absolute;
  top: 0;
  width: 2px;
  height: 90px;
  background: linear-gradient(180deg, rgba(200, 155, 60, 0) 0%, rgba(200, 155, 60, 0.55) 50%, rgba(200, 155, 60, 0) 100%);
  opacity: 0;
  will-change: transform, opacity;
}

/* The Reframe hand-off trace reads as water, not brand gold — it is
   still "dramatic moment is over" water, not yet the restrained gold
   accent language used elsewhere on the page. */
.wt-trace--reframe {
  height: 120px;
  background: linear-gradient(180deg, rgba(214, 226, 232, 0) 0%, rgba(180, 196, 202, 0.5) 45%, rgba(200, 155, 60, 0.3) 100%);
}

/* A restrained impact pulse — a thin ring, not a splash of particles.
   transform-origin centered so the scale driven from JS reads as a
   calm expand/contract rather than a jolt. */
.wt-splash {
  position: absolute;
  width: 44px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(232, 200, 121, 0.55);
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
}

/* ---------- Phase 4: per-section water language ---------- */

/* Products — a droplet running down the can's surface. */
.wt-droplet--material {
  width: 10px;
  height: 13px;
}

/* Custom Branding — a soft steady glow behind the can, not a droplet
   shape; it should read as ambient water presence, not an event. */
.wt-trace--branding {
  width: 60px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(214, 226, 232, 0.35) 0%, rgba(214, 226, 232, 0.08) 55%, transparent 80%);
}

/* The boundary-crossing droplet's small trailing companion — slightly
   smaller so the two clearly read as one drop separating, not a pair. */
.wt-droplet--trail {
  width: 8px;
  height: 10px;
}

/* Sustainability — same droplet language as Products, restrained. */
.wt-droplet--sustainability {
  width: 9px;
  height: 12px;
}

/* Process — the connector line the four steps draw along. */
.wt-flow {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, rgba(214, 226, 232, 0.7) 0%, rgba(200, 155, 60, 0.6) 100%);
  opacity: 0;
  transform-origin: left center;
  will-change: transform, opacity;
}


/* ---------- Debug overlay (dev only, never shown by default) ---------- */

.wt-debug {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9999;
  background: rgba(15, 27, 43, 0.92);
  color: #F6F1E7;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid rgba(200, 155, 60, 0.4);
  pointer-events: auto;
  max-width: 260px;
  white-space: pre;
}

.wt-debug strong { color: #C89B3C; }

.wt-debug .wt-bar {
  display: inline-block;
  width: 80px;
  height: 4px;
  background: rgba(246, 241, 231, 0.15);
  margin-left: 6px;
  position: relative;
  top: -1px;
}
.wt-debug .wt-bar span {
  display: block;
  height: 100%;
  background: #C89B3C;
}

@media (prefers-reduced-motion: reduce) {
  .wt-stream, .wt-droplet, .wt-trace, .wt-splash, .wt-flow { display: none; }
}