/* ===================================================================
   PLUFFLET — interactive features (v2, additive only)
   Features: hair-strand scroll indicator, cost-per-use calculator,
   hair confessional, humidity villain, micro-interactions.
   =================================================================== */

/* ---- hair-strand scroll indicator (replaces .progress) ---- */
.progress{display:none !important}
.hair-scroll{position:fixed;left:3px;top:0;width:18px;height:100vh;z-index:90;
  pointer-events:none;opacity:.7}
.hair-scroll svg{width:100%;height:100%;overflow:visible}
.hair-scroll .hs-line{fill:none;stroke:url(#hsGrad);stroke-width:2.4;stroke-linecap:round}
@media(max-width:520px){ .hair-scroll{opacity:.5;width:14px} }

/* ---- Cost-Per-Use calculator ---- */
.costuse{background:var(--cream)}
.cu-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.cu-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(26px,4vw,36px);
  box-shadow:0 24px 60px -30px rgba(229,40,44,.25),0 6px 18px -12px rgba(201,164,82,.14)}
.cu-big{display:flex;align-items:flex-start;justify-content:center;gap:3px;line-height:1}
.cu-cur{font-family:var(--disp);font-style:italic;font-weight:600;font-size:clamp(26px,4vw,36px);
  color:var(--red);margin-top:.32em}
.cu-per{font-family:var(--disp);font-style:italic;font-weight:700;font-size:clamp(56px,10vw,86px);
  color:var(--red);letter-spacing:-.02em}
.cu-perlbl{text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:6px}
.cu-slider{margin:28px 0 6px}
.cu-slider label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;color:var(--ink);margin-bottom:14px}
.cu-slider label b{color:var(--red);font-family:var(--disp);font-style:italic;font-size:17px}
.cu-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  border-radius:99px;background:linear-gradient(90deg,var(--red),var(--gold));outline:none;cursor:pointer}
.cu-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  border-radius:50%;background:#fff;border:2.5px solid var(--red);
  box-shadow:0 4px 10px rgba(229,40,44,.4);cursor:grab;transition:transform .15s}
.cu-slider input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15);cursor:grabbing}
.cu-slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;
  border:2.5px solid var(--red);box-shadow:0 4px 10px rgba(229,40,44,.4);cursor:grab}
.cu-out{display:flex;gap:12px;margin-top:24px}
.cu-stat{flex:1;text-align:center;background:var(--cream);border-radius:14px;padding:18px 8px;
  border:1px solid var(--line)}
.cu-v{font-family:var(--disp);font-style:italic;font-weight:700;font-size:clamp(22px,3.4vw,28px);color:var(--ink)}
.cu-k{font-size:10.5px;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.07em}
.cu-foot{text-align:center;font-size:12px;color:#B3A6A4;margin-top:22px;line-height:1.5}
.cu-foot b{color:var(--gold-deep)}
.cu-foot .cu-price{text-decoration:line-through;text-decoration-color:rgba(201,164,82,.7)}
@media(max-width:880px){ .cu-grid{grid-template-columns:1fr} }

/* ---- Hair Confessional ---- */
.confess-btn{position:fixed;right:20px;bottom:20px;z-index:95;display:inline-flex;align-items:center;
  gap:9px;cursor:pointer;border:0;background:var(--ink);color:#fff;font-family:var(--body);font-size:13px;
  font-weight:600;padding:13px 18px;border-radius:999px;box-shadow:0 14px 30px -12px rgba(24,17,19,.55);
  transition:transform .25s var(--spring),box-shadow .25s}
.confess-btn:hover{transform:translateY(-3px);box-shadow:0 20px 38px -12px rgba(24,17,19,.6)}
.confess-btn .cdot{width:8px;height:8px;border-radius:50%;background:var(--gold-light);
  box-shadow:0 0 8px var(--gold);animation:pulse 2s ease-in-out infinite}
@media(max-width:520px){ .confess-btn span.clabel{display:none} .confess-btn{padding:14px;border-radius:50%} }

.confess-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(12,8,9,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.confess-overlay.open{opacity:1;visibility:visible}
.confess-modal{width:min(440px,100%);background:#15100F;color:#fff;border:1px solid rgba(201,164,82,.3);
  border-radius:24px;padding:30px 26px 26px;position:relative;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transform:translateY(16px) scale(.97);transition:transform .4s var(--spring)}
.confess-overlay.open .confess-modal{transform:none}
.confess-modal .cm-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.08);border:0;color:#fff;cursor:pointer;font-size:16px;line-height:1;transition:background .2s}
.confess-modal .cm-x:hover{background:rgba(255,255,255,.16)}
.confess-modal .cm-eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);font-weight:700}
.confess-modal h3{font-family:var(--disp);font-style:italic;font-size:27px;font-weight:700;margin:8px 0 4px;color:#fff}
.confess-modal .cm-sub{font-size:12.5px;color:rgba(255,255,255,.5);margin-bottom:22px}
.cm-card{background:linear-gradient(160deg,rgba(229,40,44,.14),rgba(201,164,82,.08));
  border:1px solid rgba(201,164,82,.22);border-radius:16px;padding:26px 22px;min-height:120px;
  display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.cm-card .quotemark{position:absolute;top:2px;left:14px;font-family:var(--disp);font-style:italic;
  font-size:60px;color:rgba(201,164,82,.3);line-height:1}
.cm-text{font-family:var(--disp);font-style:italic;font-size:20px;line-height:1.35;color:#fff;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cm-text.fade{opacity:0;transform:translateY(8px)}
.cm-meta{text-align:center;font-size:11px;color:rgba(255,255,255,.4);margin:12px 0 20px;letter-spacing:.05em}
.cm-form{display:flex;flex-direction:column;gap:10px}
.cm-form textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;color:#fff;font-family:var(--body);font-size:14px;padding:12px 14px;resize:none;transition:border-color .2s}
.cm-form textarea:focus{outline:none;border-color:var(--gold)}
.cm-form textarea::placeholder{color:rgba(255,255,255,.35)}
.cm-form button{align-self:flex-end;background:linear-gradient(135deg,var(--red),var(--red-deep));
  color:#fff;border:0;border-radius:999px;font-family:var(--body);font-weight:600;font-size:13px;
  padding:11px 20px;cursor:pointer;transition:transform .2s var(--spring)}
.cm-form button:hover{transform:translateY(-2px)}
.cm-thanks{font-size:12px;color:var(--gold-light);text-align:right;height:1em;opacity:0;transition:opacity .3s}
.cm-thanks.show{opacity:1}

/* ---- Humidity Villain ---- */
.humidity-toast{position:fixed;left:20px;bottom:20px;z-index:94;max-width:300px;background:var(--ink);
  color:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 18px 40px -16px rgba(24,17,19,.5);
  display:flex;align-items:flex-start;gap:12px;transform:translateY(140%);opacity:0;
  transition:transform .5s var(--spring),opacity .4s}
.humidity-toast.show{transform:none;opacity:1}
.humidity-toast .ht-ico{font-size:20px;line-height:1.1;flex:none}
.humidity-toast .ht-body{font-size:13.5px;line-height:1.4}
.humidity-toast .ht-body b{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:3px;font-weight:700}
.humidity-toast .ht-x{background:none;border:0;color:rgba(255,255,255,.5);cursor:pointer;font-size:15px;
  line-height:1;padding:2px;flex:none}
.humidity-toast .ht-x:hover{color:#fff}
@media(max-width:520px){ .humidity-toast{left:14px;right:14px;bottom:84px;max-width:none} }

/* ---- micro-interactions + form success celebration (no confetti) ---- */
.btn:active{transform:scale(.96)}
.card:active,.ecard:active,.post:active,.cu-stat:active{transform:translateY(-2px) scale(.99)}
.succ.on .ic{position:relative}
.succ.on .ic::before,.succ.on .ic::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--gold);opacity:0;animation:ringPop 1s var(--ease) forwards}
.succ.on .ic::after{animation-delay:.18s;border-color:var(--gold-light)}
@keyframes ringPop{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
.succ.on .ic svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:checkDraw .5s var(--ease) .15s forwards}
@keyframes checkDraw{to{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){
  .confess-btn .cdot,.hair-scroll{animation:none !important}
  .succ.on .ic::before,.succ.on .ic::after,.succ.on .ic svg path{animation:none !important;
    stroke-dashoffset:0 !important;opacity:0 !important}
}

/* ---- values badges (added) ---- */
.values-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.vbadge{font-size:13px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:10px 18px;display:inline-flex;align-items:center;gap:8px;
  transition:transform .2s var(--spring),border-color .2s}
.vbadge::before{content:"\2713";color:var(--gold-deep);font-weight:700}
.vbadge:hover{transform:translateY(-2px);border-color:var(--gold)}

/* ===== The Living Strand (quiet mythology) ===== */
.strand{position:absolute;pointer-events:none;z-index:6;opacity:0;
  filter:drop-shadow(0 2px 2.5px rgba(24,17,19,.30));
  transition:opacity 2s ease;will-change:transform}
.strand.seen{opacity:.6}
.strand-drift{position:fixed;pointer-events:none;z-index:60;top:-170px;
  filter:drop-shadow(0 3px 3px rgba(24,17,19,.32))}
.whisper{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);
  z-index:70;max-width:300px;text-align:center;
  font-family:var(--disp);font-style:italic;font-size:14.5px;color:var(--muted);
  letter-spacing:.01em;line-height:1.4;opacity:0;pointer-events:none;
  transition:opacity 2.2s ease,transform 2.2s ease}
.whisper.show{opacity:.72;transform:translateX(-50%) translateY(0)}
@media(max-width:520px){ .whisper{bottom:96px;font-size:13.5px;max-width:80vw} }
@media(prefers-reduced-motion:reduce){ .strand{transition:none} }

/* ===== The Blink (the hero breathes) ===== */
.blink-veil{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0}