/* ============================================================
   LOOMSTATE — cinema layer
   New hero (weave-cam), interactive drag modules, parallax
   ============================================================ */

/* ---------- parallax helpers ---------- */
[data-px]{will-change:transform}
body.grabbing,body.grabbing *{cursor:grabbing !important;user-select:none}

/* ============================================================
   HERO — WEAVE-CAM (generated video loop)
   ============================================================ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) clamp(48px,8vh,96px);position:relative;overflow:hidden;isolation:isolate}
.hero__film{position:absolute;inset:0;z-index:0;overflow:hidden;background:#020308;will-change:transform}
#weaveCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* cinematic depth + legibility scrim */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(125% 90% at 50% 8%,rgba(2,3,8,.05),rgba(2,3,8,.55) 62%,rgba(2,3,8,.86) 100%),
  linear-gradient(180deg,rgba(2,3,8,.62) 0%,rgba(2,3,8,.12) 26%,transparent 46%,var(--ink) 97%)}
/* letterbox bars */
.hero__bars{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero__bars::before,.hero__bars::after{content:"";position:absolute;left:0;right:0;height:clamp(26px,5.5vh,64px);
  background:#000;opacity:.92}
.hero__bars::before{top:0;border-bottom:1px solid rgba(120,150,255,.18)}
.hero__bars::after{bottom:0;border-top:1px solid rgba(120,150,255,.18)}
.hero.nobars .hero__bars{display:none}

/* camera HUD overlay */
.hero__cam{position:absolute;z-index:4;left:0;right:0;top:clamp(58px,7vh,84px);
  display:flex;justify-content:space-between;align-items:center;padding:0 clamp(18px,3vw,40px);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim);pointer-events:none}
.hero__cam .rec{display:flex;align-items:center;gap:.6em;color:#ff5a6a}
.hero__cam .rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff5a6a;box-shadow:0 0 10px #ff5a6a;animation:recBlink 1.4s steps(1) infinite}
@keyframes recBlink{50%{opacity:.25}}
.hero__cam .mid{color:var(--accent)}
.hero__cam .tc{color:var(--text);font-variant-numeric:tabular-nums}
.hero__camfoot{position:absolute;z-index:4;left:clamp(18px,3vw,40px);bottom:clamp(58px,7vh,84px);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);pointer-events:none;
  display:flex;align-items:center;gap:.7em}
.hero__camfoot::before{content:"";width:18px;height:1px;background:var(--accent)}

.hero__inner{position:relative;z-index:5}
/* keep hero typography from existing styles.css; just ensure stacking */
.hero__eyebrow,.wordmark,.hero__row{position:relative}

@media(prefers-reduced-motion:reduce){.hero__cam .rec::before{animation:none}}

/* ============================================================
   INTERACTIVE MODULE — shared shell
   ============================================================ */
.lab{padding:clamp(70px,12vh,150px) 0;position:relative}
.lab__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(30px,5vh,56px)}
.lab__head h2{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;
  font-size:clamp(2.2rem,6vw,5.4rem);letter-spacing:-.005em;color:#fff;margin-top:14px}
.lab__head h2 span{background:var(--holo);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.lab__head p{max-width:34ch;color:var(--text-dim)}
.tag-live{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:.7em}
.tag-live::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--accent);
  background:radial-gradient(circle,var(--accent) 40%,transparent 42%);animation:pulse 1.8s infinite}
.hint-drag{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:.6em;margin-top:14px}
.hint-drag::before{content:"⇆";color:var(--accent);font-size:1.1em}

/* generic thumb / track look */
.dragtrack{position:relative;height:6px;border-radius:30px;background:rgba(120,150,255,.14);cursor:pointer;touch-action:none}
.dragfill{position:absolute;left:0;top:0;height:100%;border-radius:30px;background:var(--holo);background-size:200% 100%;
  box-shadow:0 0 14px -2px var(--accent)}
.dragthumb{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);cursor:grab;box-shadow:0 4px 18px rgba(0,0,0,.5),0 0 0 1px var(--accent);
  transition:box-shadow .25s,transform .12s;touch-action:none}
.dragthumb::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--accent)}
.dragthumb:hover,.dragthumb:focus-visible{box-shadow:0 4px 22px rgba(0,0,0,.6),0 0 0 6px rgba(61,123,255,.25),0 0 0 1px var(--accent);outline:none}
.dragthumb:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.08)}

/* ============================================================
   1 · COMPARE  (greige ⇄ finished)
   ============================================================ */
.compare .cmp{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  --cx:50%;user-select:none;touch-action:none;box-shadow:0 40px 120px -50px rgba(61,123,255,.45);cursor:ew-resize}
.cmp__pane{position:absolute;inset:0}
.cmp__pane img{width:100%;height:100%;object-fit:cover}
.cmp__after img{filter:saturate(1.18) contrast(1.05) brightness(.96)}
.cmp__before{clip-path:inset(0 calc(100% - var(--cx)) 0 0)}
.cmp__before img{filter:grayscale(.92) brightness(.66) contrast(1.22) sepia(.1)}
.cmp__label{position:absolute;bottom:16px;z-index:4;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;padding:6px 12px;background:rgba(2,3,8,.7);border:1px solid var(--line);border-radius:30px;backdrop-filter:blur(6px)}
.cmp__label.l{left:16px;color:var(--text-dim)}
.cmp__label.r{right:16px;color:#fff;border-color:var(--accent)}
.cmp__handle{position:absolute;top:0;bottom:0;left:var(--cx);width:2px;background:var(--accent);z-index:5;
  transform:translateX(-50%);box-shadow:0 0 18px var(--accent);cursor:ew-resize;touch-action:none}
.cmp__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(2,3,8,.7);border:1px solid var(--accent);backdrop-filter:blur(6px);display:grid;place-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.5)}
.cmp__grip::before{content:"⇆";color:#fff;font-size:1.1rem}
.cmp__cam{position:absolute;top:16px;left:16px;z-index:4;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-dim)}
.cmp__cam .rec{color:#ff5a6a}

/* ============================================================
   2 · BLEND mixer
   ============================================================ */
.blend__layout{display:grid;grid-template-columns:1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:880px){.blend__layout{grid-template-columns:1fr}}
.bl-fibre{margin-bottom:26px}
.bl-fibre__hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,2rem);color:#fff}
.bl-fibre__pct{font-family:var(--mono);font-weight:400;font-size:.9rem;color:var(--accent)}
.bl-track{position:relative;height:6px;border-radius:30px;background:rgba(120,150,255,.14);cursor:pointer;touch-action:none}
.bl-fill{position:absolute;left:0;top:0;height:100%;border-radius:30px;background:var(--holo);background-size:200% 100%;box-shadow:0 0 14px -2px var(--accent)}
.bl-thumb{position:absolute;top:50%;left:0;width:24px;height:24px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);
  cursor:grab;box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 0 1px var(--accent);touch-action:none}
.bl-thumb::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--accent)}
.bl-thumb:hover,.bl-thumb:focus-visible{box-shadow:0 4px 20px rgba(0,0,0,.6),0 0 0 6px rgba(61,123,255,.25),0 0 0 1px var(--accent);outline:none}
.bl-thumb:active{cursor:grabbing}

.blend__out{display:flex;flex-direction:column;gap:22px}
.blend__swatch{position:relative;aspect-ratio:5/3;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  --sheen:.2;--soft:.4;--dense:.7;
  background:
    repeating-linear-gradient(92deg,rgba(255,255,255,calc(.05*var(--soft))) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px calc(3px + 4px*var(--dense))),
    linear-gradient(120deg,color-mix(in oklab,var(--accent) 70%,#000) 0%,color-mix(in oklab,var(--accent) 40%,#11141d) 60%,#0a0c12 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.blend__swatch::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;opacity:var(--sheen);
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);background-size:240% 100%;
  animation:sheen 5s ease-in-out infinite}
.blend__swatch b{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:400}
.blend__name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.4rem);line-height:.95;color:#fff}
.blend__desc{color:var(--text-dim);max-width:38ch;font-size:.96rem;min-height:2.6em}
.blend__props{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin-top:4px}
.prop__l{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);
  display:flex;justify-content:space-between;margin-bottom:7px}
.prop__l b{color:var(--text);font-weight:400}
.prop__bar{height:4px;border-radius:30px;background:rgba(120,150,255,.14);overflow:hidden}
.prop__bar i{display:block;height:100%;width:0;background:var(--holo);background-size:200% 100%;border-radius:30px;
  transition:width .55s cubic-bezier(.16,1,.3,1)}

/* ============================================================
   3 · CAPACITY
   ============================================================ */
.capacity .cap__display{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;margin-bottom:clamp(34px,5vh,56px)}
@media(max-width:880px){.capacity .cap__display{grid-template-columns:1fr}}
.cap__big{font-family:var(--display);font-weight:900;line-height:.86;font-size:clamp(4rem,13vw,11rem);letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 0 50px rgba(61,123,255,.4)}
.cap__unit{display:block;font-family:var(--mono);font-weight:400;font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:10px}
.cap__meta{display:flex;gap:clamp(24px,4vw,48px)}
.cap__meta div span{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:8px}
.cap__meta div b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2.1rem);color:#fff;line-height:1}
.cap__units{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:30px}
.cap-dot{width:13px;height:13px;border-radius:50%;background:rgba(120,150,255,.12);transition:background .4s,box-shadow .4s,transform .4s}
.cap-dot.on{background:var(--accent);box-shadow:0 0 8px -1px var(--accent)}
.cap__slider{position:relative;padding:18px 0 6px}
.cap__ticks{display:flex;justify-content:space-between;margin-top:16px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--text-dim)}

/* ============================================================
   4 · WASH
   ============================================================ */
.washer__layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:880px){.washer__layout{grid-template-columns:1fr}}
.wash__frame{position:relative;aspect-ratio:5/4;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 30px 90px -50px rgba(61,123,255,.45)}
#washSwatch{width:100%;height:100%;object-fit:cover;transition:filter .5s ease}
.wash__frame .cmp__cam{z-index:3}
.wash__out h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,3.6vw,3rem);line-height:.95;color:#fff;margin-bottom:14px}
.wash__out p{color:var(--text-dim);max-width:40ch;min-height:3em;margin-bottom:30px}
.wash__slider{position:relative;padding:8px 0}
.wash__stops{position:relative;height:18px;margin-top:16px}
.wash-stop{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);transition:color .3s,transform .3s;white-space:nowrap}
.wash-stop.on{color:var(--accent);transform:translateX(-50%) translateY(-2px)}

@media(max-width:760px){.lab__head h2{font-size:clamp(2rem,9vw,3rem)}}