/* ============================================================
   BERUNDA — The Roast Slider ("Slide to Select Your Roast")
   Sits on the collection's own parchment crest-letterhead — no band
   of its own, just two gold rules holding it.

   The spectrum is POURED: a tapered ribbon of coffee runs across the
   page, ghosted ahead of the seal and full-strength behind it, with a
   slow specular flow travelling through it. Every roast rides the
   stream as a full-size bean disc; the only thing selection changes is
   the struck GOLD RIM that closes around the chosen one. At rest the
   rim holds the house emblem and picks up the beans on leaving rest.
   Ribbon geometry + the spectrum gradient: roast-slider.js.
   ============================================================ */

.rs{position:relative;isolation:isolate;padding:clamp(44px,5.8vh,62px) 0 clamp(38px,5vh,54px);color:var(--espresso-900);background:linear-gradient(180deg,#faf4e7 0%,#faf4e7 38%,rgba(250,244,231,.94) 54%,rgba(250,244,231,.8) 66%,rgba(250,244,231,.58) 77%,rgba(250,244,231,.34) 86%,rgba(250,244,231,.14) 94%,rgba(250,244,231,0) 100%);--rs-f:#b8905c;--rs-bri:2.4;--rs-sheen:.1;--rs-lx:7.5%}
/* a soft parchment halo, so every mark in this section lifts off the crest ground */
.rs-halo{display:none}
.rs::before{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(147,98,18,.4) 24%,rgba(147,98,18,.4) 76%,transparent);z-index:3;pointer-events:none}
.rs::before{top:0}

/* ---- head: the instruction IS the headline ---- */
.rs-head{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,32px)}
.rs-head::before,.rs-head::after{content:"";height:1px;width:clamp(40px,7vw,104px);background:linear-gradient(90deg,transparent,rgba(147,98,18,.55))}
.rs-head::after{background:linear-gradient(90deg,rgba(147,98,18,.55),transparent)}
.rs-eyebrow{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.3em;font-size:clamp(15px,1.5vw,21px);line-height:1.1;color:var(--espresso-800);padding-left:.3em;white-space:nowrap}

/* ---- the rail ---- */
.rs-rail{position:relative;height:112px;margin:clamp(54px,6.6vh,74px) auto 0;max-width:1000px;touch-action:pan-y}

/* the stream — a straight pour, coloured end to end, soft-edged like liquid */
.rs-stream{position:absolute;left:2%;right:2%;top:13px;height:34px;cursor:pointer;border-radius:17px;overflow:hidden;box-shadow:0 7px 16px rgba(66,40,23,.24)}
.rs-stream>span{position:absolute;inset:0;display:block;pointer-events:none;border-radius:17px}
.rs-body{background:var(--rs-grad)}
/* volume — light gathers along the crown of the pour, shadow pools beneath it */
.rs-depth{background:linear-gradient(180deg,rgba(255,247,229,.28),rgba(255,247,229,.06) 30%,rgba(58,33,19,.06) 58%,rgba(42,24,16,.32))}
/* a wide, feathered warm drift travelling through the liquid — no edges anywhere */
.rs-stream>span.rs-flow{left:-40%;right:auto;width:40%;background:linear-gradient(90deg,rgba(255,240,214,0),rgba(255,240,214,.22) 50%,rgba(255,240,214,0));filter:blur(9px);animation:rs-flow 8.5s linear infinite}
@keyframes rs-flow{from{transform:translateX(0)}to{transform:translateX(350%)}}

/* the roast bloom — a warm halo the stream throws behind the seal */
.rs-bloom{position:absolute;left:var(--rs-lx);top:30px;width:300px;height:160px;transform:translate(-50%,-50%);z-index:0;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,var(--rs-f),transparent 66%);opacity:.26;filter:blur(18px);transition:left .5s var(--ease-entrance),background .16s linear}
.rs[data-dragging="true"] .rs-bloom{transition:background .16s linear}

/* ---- roast marks: every roast is a full-size disc riding the stream ---- */
.rs-stop{position:absolute;top:30px;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;padding:0;border:0;background:none;cursor:pointer;z-index:3;transition:opacity .3s var(--ease-standard),transform .35s var(--ease-entrance)}
.rs-stop:hover{transform:translate(-50%,-50%) scale(1.07)}
.rs-stop.is-current{opacity:0;pointer-events:none}
.rs-disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--f);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 3px 8px rgba(66,40,23,.34)}
.rs-disc i{position:absolute;inset:0;background:url("coffee-beans.webp") center/152% no-repeat;mix-blend-mode:luminosity;filter:brightness(var(--bri)) contrast(1.03)}
.rs-disc b{position:absolute;inset:0;background:radial-gradient(44% 38% at 32% 26%,rgba(255,242,214,.5),transparent 66%);mix-blend-mode:screen;opacity:var(--sh)}
/* the rest mark reads exactly as the seal does at rest: the house on navy */
.rs-disc--home{background:#01143c}
.rs-disc--home img{position:absolute;left:50%;top:50%;width:30px;transform:translate(-50%,-50%);opacity:.94}

/* ---- labels ---- */
.rs-lab{position:absolute;top:74px;transform:translateX(-50%);text-align:center;z-index:3;border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.rs-lab:focus-visible{outline:2px solid var(--gold-600);outline-offset:4px}
.rs-lab-line{display:block;width:1px;height:11px;margin:0 auto;background:linear-gradient(rgba(147,98,18,.5),rgba(147,98,18,.12))}
.rs-lab-t{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:15px;line-height:1;padding-left:.16em;padding-top:11px;color:var(--espresso-900);white-space:nowrap;transition:color .3s var(--ease-standard)}
/* selection is marked by a gold rule, not by contrast — no layout shift */
.rs-lab-t::after{content:"";display:block;height:1px;margin-top:7px;background:var(--gold-600);opacity:0;transition:opacity .3s var(--ease-standard)}
.rs-lab:hover .rs-lab-t{color:var(--navy-800)}
.rs-lab.is-current .rs-lab-t{color:var(--navy-900)}
.rs-lab.is-current .rs-lab-t::after{opacity:1}

/* Below 820px the five labels start colliding — the stops sit closer together
   than a single word is wide, so no type size fits all five. Name only the
   roast that is selected, centred: the seal already shows the position.
   `left` needs !important because roast-slider.js sets it inline per stop. */
@media (max-width:820px){
  .rs-lab{opacity:0;pointer-events:none;transition:opacity .32s var(--ease-standard)}
  .rs-lab.is-current{opacity:1;left:50% !important}
  .rs-lab.is-current .rs-lab-line{opacity:0}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .rs-lab{transition:none}
}

/* ---- the seal: the gold rim, and the only thing that travels ---- */
.rs-seal{position:absolute;top:30px;left:var(--rs-lx);width:62px;height:62px;transform:translate(-50%,-50%);z-index:6;cursor:grab;border-radius:50%;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
.rs:not([data-dragging="true"]) .rs-seal{transition:left .5s var(--ease-entrance)}
.rs[data-dragging="true"] .rs-seal{cursor:grabbing}
.rs-seal:focus-visible{outline:2px solid var(--gold-600);outline-offset:6px}
.rs-seal-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px rgba(147,98,18,.95),0 7px 20px rgba(66,40,23,.4);background:conic-gradient(from 214deg,#8a5c14,#c99b45 24%,#a1701c 48%,#dcb96f 64%,#8f5f16 84%,#b0761a)}
.rs-seal-ring::after{content:"";position:absolute;inset:6px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.rs-seal-field{position:absolute;inset:7px;border-radius:50%;overflow:hidden;background:var(--rs-f);box-shadow:inset 0 0 0 1px rgba(0,0,0,.34);transition:background .16s linear}
.rs-seal-beans{position:absolute;inset:7px;border-radius:50%;background:url("coffee-beans.webp") center/152% no-repeat;mix-blend-mode:luminosity;filter:brightness(var(--rs-bri)) contrast(1.03);transition:filter .16s linear,opacity .3s var(--ease-standard)}
.rs-seal-sheen{position:absolute;inset:7px;border-radius:50%;background:radial-gradient(44% 38% at 32% 26%,rgba(255,242,214,.6),transparent 66%),radial-gradient(60% 50% at 72% 78%,rgba(255,226,178,.22),transparent 70%);mix-blend-mode:screen;opacity:var(--rs-sheen);transition:opacity .16s linear}
.rs-seal-crest{position:absolute;left:50%;top:50%;width:30px;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s var(--ease-standard);pointer-events:none}
.rs[data-home="true"] .rs-seal-field{background:#01143c}
.rs[data-home="true"] .rs-seal-beans,.rs[data-home="true"] .rs-seal-sheen{opacity:0}
.rs[data-home="true"] .rs-seal-crest{opacity:.94}
/* struck: one ceremonial ripple on commit */
.rs-seal-ripple{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px var(--gold-500);opacity:0;pointer-events:none}
.rs-seal.is-struck .rs-seal-ripple{animation:rs-strike .72s var(--ease-exit) both}
@keyframes rs-strike{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.46)}}

/* the count plate — what this roast will hand you */
.rs-badge{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);display:block;white-space:nowrap;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.2em;font-size:9px;line-height:1;color:var(--parchment);padding:5px 10px 5px calc(10px + .2em);background:var(--navy-800);box-shadow:0 0 0 1px rgba(147,98,18,.5)}
.rs-badge::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:7px;background:rgba(147,98,18,.5)}

/* grip cues — two hairline chevrons; they retire after first use */
.rs-grip{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;line-height:1;color:var(--espresso-800);opacity:.7;pointer-events:none;transition:opacity .5s var(--ease-standard)}
.rs-grip--l{right:calc(100% + 10px)}
.rs-grip--r{left:calc(100% + 10px)}
.rs[data-touched="true"] .rs-grip{opacity:0}
/* and the seal nudges itself, twice, until touched */
.rs[data-touched="false"] .rs-seal{animation:rs-nudge 2.8s var(--ease-standard) 1s 2}
@keyframes rs-nudge{0%,58%,100%{transform:translate(-50%,-50%)}22%{transform:translate(calc(-50% + 8px),-50%)}40%{transform:translate(calc(-50% - 3px),-50%)}}

/* ---- result ---- */
.rs-result{margin:clamp(38px,4.8vh,56px) auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;min-height:24px}
.rs-see{position:relative;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:var(--espresso-900);text-decoration:none;padding-left:0;display:inline-flex;flex-direction:column;align-items:center;gap:0;transition:color .35s var(--ease-standard)}
/* the glyph is 8x15; an invisible expander brings the hit area to 44px */
.rs-see::before{content:"";position:absolute;inset:-15px -18px}
.rs-see-arrow{font-size:15px;line-height:1;letter-spacing:0;padding-left:0;transition:transform .4s var(--ease-entrance)}
.rs-see:hover{color:var(--navy-900);gap:12px}
.rs-see:hover .rs-see-arrow{transform:translateY(3px)}
.rs-see:focus-visible{outline:2px solid var(--gold-600);outline-offset:5px}

/* ---- mosaic coupling ----
   Scoped to .col-mosaic to clear collection.css's `.col-mosaic a.col-card
   {display:flex}` (0,2,1); unscoped this is (0,2,0) and loses, which left
   every card on screen no matter which roast was selected. */
.col-mosaic .col-card.is-roastout{display:none}
.col-card.is-roastmatch{animation:rs-answer .9s var(--ease-standard) both}
@keyframes rs-answer{0%{box-shadow:0 0 0 0 rgba(198,135,27,0)}34%{box-shadow:0 0 0 2px rgba(198,135,27,.55)}100%{box-shadow:0 0 0 0 rgba(198,135,27,0)}}

@media (prefers-reduced-motion:reduce){
  .rs-flow{animation:none}
  .rs-bloom,.rs-seal,.rs-seal-field,.rs-seal-beans,.rs-seal-sheen{transition:none}
  .rs[data-touched="false"] .rs-seal{animation:none}
  .rs-seal.is-struck .rs-seal-ripple{animation:none}
  .col-card.is-roastmatch{animation:none}
}

/* roasts the estate has not released yet — on the scale, selectable, quieter */
.rs-stop.is-unstocked .rs-disc{opacity:.66}
.rs-lab.is-unstocked .rs-lab-t{opacity:.6}
.rs-lab.is-unstocked.is-current .rs-lab-t{opacity:1}