/* v67 (2026-11-08) · Gel section: a living gel mark, "Press it." you can press, a real Gel nav bar + toggle,
   tighter "One material, every control." · Packaging: the 66% glows while it counts, pulses when it lands, then breathes. */

/* ---------- 1. The gel mark: a thick glossy gel pebble with the Bespoke O inside ---------- */
.gel-head .bespoke-site-mark.g67-mark{pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.g67-mark .g67-drop{transform-origin:50% 100%}
.g67-drop{position:absolute;left:4%;right:4%;top:14%;bottom:6%;display:block;transform-origin:50% 100%;will-change:transform;
  animation:g67Breathe 5.2s ease-in-out infinite}
.g67-body{position:absolute;inset:0;border-radius:47% 47% 45% 45% / 52% 52% 48% 48%;
  background:
    radial-gradient(70% 46% at 50% 108%,rgba(255,200,98,.62),rgba(255,186,80,.16) 58%,transparent 78%),
    radial-gradient(90% 70% at 50% 30%,rgba(255,246,222,.07),transparent 70%),
    linear-gradient(180deg,rgba(255,238,200,.22),rgba(214,160,62,.10) 46%,rgba(110,70,18,.42));
  box-shadow:
    inset 0 2px 1px rgba(255,252,240,.78),
    inset 0 0 0 1px rgba(255,232,180,.42),
    inset 0 -12px 18px -8px rgba(255,196,92,.62),
    inset 0 10px 18px -12px rgba(255,255,255,.38),
    0 16px 20px -12px rgba(0,0,0,.78),
    0 6px 12px -6px rgba(170,112,30,.5);
  -webkit-backdrop-filter:blur(2px) saturate(1.5);backdrop-filter:blur(2px) saturate(1.5)}
.g67-o{position:absolute;left:50%;top:50%;width:62%;height:auto;aspect-ratio:1;translate:-50% -52%;
  filter:drop-shadow(0 3px 3px rgba(40,22,0,.55)) saturate(1.08);pointer-events:none;-webkit-user-drag:none}
/* specular: a long soft highlight top-left and a sharp glint top-right; a caustic line where light leaves the gel */
.g67-spec{position:absolute;left:13%;top:7%;width:52%;height:24%;border-radius:50%;pointer-events:none;rotate:-9deg;
  background:radial-gradient(closest-side,rgba(255,255,255,.88),rgba(255,255,255,.32) 55%,rgba(255,255,255,0));filter:blur(.4px);opacity:.82}
.g67-spec::after{content:"";position:absolute;left:118%;top:70%;width:13%;height:34%;border-radius:50%;background:#fff;opacity:.85;filter:blur(.3px)}
.g67-caus{position:absolute;left:22%;right:22%;bottom:7%;height:9%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,236,170,.9),rgba(255,200,90,.25) 60%,transparent);mix-blend-mode:screen;opacity:.8}
.g67-mark.g67-down .g67-spec{opacity:.55}
.g67-mark.g67-down .g67-caus{opacity:1;scale:1.25 1.1}
.g67-spec,.g67-caus{transition:opacity .18s ease,scale .25s ease}
@keyframes g67Breathe{0%,100%{scale:1 1}30%{scale:1.022 .978}62%{scale:.988 1.016}}

/* ---------- 2. "Press it." presses, swooshes and blooms ---------- */
#pressH{cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#pressH .pr-a{
  background:linear-gradient(100deg,#eef1f8 0 38%,#fffdf6 45%,#ffe3a0 50%,#fffdf6 55%,#eef1f8 62% 100%);
  background-size:280% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  transition:filter .55s ease}
#pressH .pr-a,#pressH .pr-b{will-change:transform}
#pressH.g67-sw .pr-a{animation:g67Swoosh .8s cubic-bezier(.3,.6,.2,1) both}
@keyframes g67Swoosh{from{background-position:100% 0}to{background-position:0% 0}}
#pressH.g67-bl .pr-a{filter:drop-shadow(0 .08em .2em #d5dfff35) drop-shadow(0 0 .22em rgba(255,214,120,.62))}
#pressH .pr-b{transition:filter .6s ease}
#pressH.g67-bk .pr-b{filter:brightness(1.18) drop-shadow(0 0 .16em rgba(255,214,120,.45))}

/* ---------- 3. A real Gel nav bar and toggle ---------- */
.g67-demo{position:relative;margin:clamp(18px,3vw,30px) auto 0;max-width:820px}
.g67-row{position:relative;isolation:isolate;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;padding:clamp(30px,3.6vw,42px) 12px}
/* the rails sit over real marble so the glass has something to bend; it fades out on every side (a wash, not a box) */
.g67-row::before{content:"";position:absolute;inset:0 -4%;z-index:-1;pointer-events:none;
  background:url(assets/marble.jpg) 50% 46%/cover no-repeat;opacity:.6;filter:saturate(1.05) brightness(.88);
  -webkit-mask:radial-gradient(50% 50% at 50% 50%,#000 38%,transparent 100%);mask:radial-gradient(50% 50% at 50% 50%,#000 38%,transparent 100%)}
.g67-rail{--bgl-tint:227,174,70;--bgl-hi:255,240,200;position:relative;display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;isolation:isolate;
  border:1px solid rgba(239,217,168,.46);
  background:radial-gradient(ellipse at 22% -25%,rgba(255,235,190,.2),transparent 66%),
             linear-gradient(155deg,rgba(142,117,80,.24),rgba(18,18,20,.5) 54%,rgba(103,81,50,.26));
  box-shadow:inset 0 1px 1px rgba(255,244,213,.36),inset 0 -3px 6px rgba(7,7,8,.4),0 10px 26px -12px rgba(0,0,0,.75);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  transition:background .5s ease,box-shadow .5s ease,border-color .5s ease}
.g67-rail>button{position:relative;z-index:1;appearance:none;-webkit-appearance:none;border:0;background:transparent;margin:0;cursor:pointer;
  padding:11px 19px;border-radius:999px;font:700 14.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.005em;color:#e9e1cc;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;touch-action:pan-y}
.g67-rail>button[aria-pressed="true"]{color:#fff3d2}
.g67-rail>button:focus-visible{outline:2px solid rgba(255,226,154,.85);outline-offset:1px}
/* before the lens script runs (or if it cannot), the pressed slot still shows as a soft gel pill */
.g67-rail:not(.bgl-on)>button[aria-pressed="true"]{background:linear-gradient(180deg,rgba(255,240,200,.2),rgba(227,174,70,.08));box-shadow:inset 0 0 0 1px rgba(245,217,148,.4),inset 0 1px 1px rgba(255,245,216,.5)}
.g67-seg>button{padding-inline:17px}
.gel-head .g67-cap{margin:4px auto 0;max-width:none;text-align:center;font:500 15px/1.5 "BBB Sans",Arial,sans-serif;color:#cfc6af;text-wrap:balance}
.g67-cap b{color:#f3d98c;font-weight:700}
/* the toggle changes what the bar is made of */
.g67-demo[data-look="gel"] .g67-rail{--bgl-tint:255,176,64;--bgl-hi:255,236,186;border-color:rgba(255,214,140,.6);
  background:radial-gradient(70% 120% at 50% 130%,rgba(255,180,70,.34),transparent 70%),
             radial-gradient(ellipse at 22% -25%,rgba(255,240,200,.3),transparent 66%),
             linear-gradient(170deg,rgba(186,128,46,.42),rgba(70,44,14,.5) 60%,rgba(140,92,30,.44));
  box-shadow:inset 0 2px 2px rgba(255,248,226,.5),inset 0 -6px 10px -2px rgba(255,190,90,.38),inset 0 0 0 1px rgba(255,226,170,.18),0 12px 26px -12px rgba(120,70,10,.8)}
.g67-demo[data-look="deep"] .g67-rail{--bgl-tint:186,160,255;--bgl-hi:236,228,255;border-color:rgba(214,196,255,.5);
  background:radial-gradient(ellipse at 22% -30%,rgba(230,220,255,.22),transparent 64%),
             linear-gradient(160deg,rgba(70,52,130,.55),rgba(12,10,26,.72) 58%,rgba(54,40,104,.55));
  box-shadow:inset 0 1px 1px rgba(240,232,255,.5),inset 0 -8px 14px -4px rgba(10,6,30,.8),inset 0 0 0 1px rgba(200,180,255,.14),0 18px 34px -14px rgba(20,10,60,.95)}
.g67-demo[data-look="deep"] .g67-rail>button[aria-pressed="true"]{color:#f1ecff}

@media (max-width:640px){
  .g67-row{flex-direction:column;gap:12px;padding:30px 0}
  .g67-row::before{inset:0 -16px}
  .g67-rail>button{padding:10px 13px;font-size:13.5px}
  .g67-seg>button{padding-inline:15px}
  .gel-head .g67-cap{font-size:13.5px;padding:0 6px}
}
@media (max-width:360px){.g67-rail>button{padding:10px 10px;font-size:13px}}

/* ---------- 4. "One material, every control." reads as one headline ---------- */
.gel-ph .gel-h{line-height:1.02!important;margin:8px 0 12px}
.gel-ph .gel-h em{display:block;line-height:1.04;margin-top:.02em;padding:0 .06em .1em 0}
.gel-ph .gel-h em .sq{line-height:1.04}

/* ---------- 5. 66%: glow builds with the count, a pulse when it lands, then a slow breath ---------- */
.ps-n{--g:0;transform-origin:50% 62%;
  filter:drop-shadow(0 0 calc(var(--g)*.07em) rgba(255,226,150,calc(var(--g)*.7))) drop-shadow(0 0 calc(var(--g)*.34em) rgba(234,178,64,calc(var(--g)*.55)))}
.ps-n.g67-land{animation:g67Land 1.25s cubic-bezier(.25,.9,.3,1) both}
.ps-n.g67-live{animation:g67Breath 3.8s ease-in-out infinite}
@keyframes g67Land{
  0%{transform:scale(1);filter:drop-shadow(0 0 .07em rgba(255,226,150,.7)) drop-shadow(0 0 .34em rgba(234,178,64,.55))}
  20%{transform:scale(1.08);filter:drop-shadow(0 0 .14em rgba(255,244,200,1)) drop-shadow(0 0 .7em rgba(246,196,84,.9)) brightness(1.22)}
  46%{transform:scale(.982);filter:drop-shadow(0 0 .1em rgba(255,236,170,.85)) drop-shadow(0 0 1.05em rgba(234,178,64,.45)) brightness(1.06)}
  70%{transform:scale(1.014)}
  100%{transform:scale(1);filter:drop-shadow(0 0 .07em rgba(255,226,150,.7)) drop-shadow(0 0 .34em rgba(234,178,64,.55))}}
@keyframes g67Breath{
  0%,100%{filter:drop-shadow(0 0 .07em rgba(255,226,150,.7)) drop-shadow(0 0 .34em rgba(234,178,64,.55))}
  50%{filter:drop-shadow(0 0 .11em rgba(255,236,176,.88)) drop-shadow(0 0 .58em rgba(240,186,70,.72)) brightness(1.07)}}

@media (prefers-reduced-motion:reduce){
  .g67-drop{animation:none}
  #pressH.g67-sw .pr-a{animation:none}
  .ps-n,.ps-n.g67-land,.ps-n.g67-live{animation:none;transform:none;filter:drop-shadow(0 0 .07em rgba(255,226,150,.6)) drop-shadow(0 0 .3em rgba(234,178,64,.48))}
}