/* v58 · 2026-11-07 · What we do: the storyline lands on the full stop, no left rail, bloom reveal on the three cards */

/* ---------- 1. The full stop of "than a design agency." ---------- */
.wwd-per{display:inline-block;position:relative;width:.2em;height:0;vertical-align:baseline;pointer-events:none}
.wwd-per::after{content:"";position:absolute;left:.035em;bottom:.005em;width:.13em;height:.13em;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fffbe2 0,#f7dc7e 32%,#d4a238 70%,#8f5f12 100%);
  box-shadow:0 0 .08em rgba(255,233,168,.95),0 0 .3em rgba(227,174,70,.6);
  transition:opacity .45s ease,transform .8s cubic-bezier(.3,1.5,.45,1)}
.wwd-per::before{content:"";position:absolute;left:.1em;bottom:.07em;width:.13em;height:.13em;margin:-.065em 0 0 -.065em;border-radius:50%;
  border:1px solid rgba(255,226,154,.85);opacity:0;pointer-events:none}
/* desktop: the dot only appears once the moving light has reached it, then stays as the full stop */
html.sl-on .wwd:not(.per-on) .wwd-per::after{opacity:0;transform:scale(.3)}
html.sl-on .wwd.per-on .wwd-per::before{animation:wwdRing 1.3s cubic-bezier(.2,.7,.2,1) both}
@keyframes wwdRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(9)}}

/* ---------- 2. No left gold rail on this section (the storyline already does the job) ---------- */
.wwd.lit{box-shadow:none!important}

/* ---------- 3. Bloom reveal for YOU CAN HOLD IT / WATCH IT / USE IT ---------- */
.wwd-js .wwd-grid article{
  opacity:0;translate:0 30px;scale:.95;filter:blur(14px) brightness(.65);
  transition:opacity 1.2s ease,translate 1.4s cubic-bezier(.16,.84,.24,1),scale 1.4s cubic-bezier(.16,.84,.24,1),filter 1.3s ease,box-shadow .9s ease,background .9s ease;
  transition-delay:calc(var(--k,0)*200ms),calc(var(--k,0)*200ms),calc(var(--k,0)*200ms),calc(var(--k,0)*200ms),0s,0s}
.wwd-js .wwd-grid article.in{opacity:1;translate:0 0;scale:1;filter:none;
  animation:wwdBloom 2.1s ease-out backwards;animation-delay:calc(var(--k,0)*200ms + 300ms)}
/* a soft gold glow blooms outward as each card arrives, then settles */
@keyframes wwdBloom{
  0%{box-shadow:0 0 0 0 rgba(255,214,120,0),inset 0 0 0 rgba(255,226,154,0)}
  38%{box-shadow:0 0 70px 4px rgba(255,214,120,.26),inset 0 0 46px rgba(255,226,154,.13)}
  100%{box-shadow:0 0 0 0 rgba(255,214,120,0),inset 0 0 0 rgba(255,226,154,0)}}
/* the little marks pop in just behind their card */
.wwd-js .wwd-grid article .bespoke-site-mark{opacity:0;scale:.6;rotate:-10deg;filter:blur(6px) drop-shadow(0 9px 12px rgba(0,0,0,.55))}
.wwd-js .wwd-grid article.in .bespoke-site-mark{opacity:1;scale:1;rotate:0deg;filter:drop-shadow(0 9px 12px rgba(0,0,0,.55));
  transition:scale .9s cubic-bezier(.3,1.5,.45,1),rotate .9s cubic-bezier(.3,1.5,.45,1),opacity .8s ease,filter .9s ease;
  transition-delay:calc(var(--k,0)*200ms + 420ms)}
@media(prefers-reduced-motion:reduce){
  .wwd-js .wwd-grid article{filter:none;animation:none}
  .wwd-js .wwd-grid article .bespoke-site-mark{filter:drop-shadow(0 9px 12px rgba(0,0,0,.55))}
  html.sl-on .wwd.per-on .wwd-per::before{animation:none}
}

/* ---------- v58b: more air under the eyebrow above "It's Bespoke Glass." ---------- */
#bespoke-glass .gl-head .bespoke-site-identity{margin-bottom:clamp(16px,2.4vw,30px)}

/* ---------- v58b: the glass-stack mark only shows before the layers pull apart ---------- */
.gl-cap .gl-left>.bespoke-site-mark{transition:opacity .55s ease,scale .6s ease,width .7s cubic-bezier(.3,.7,.2,1),margin .7s cubic-bezier(.3,.7,.2,1)}
.s-glass.gl-split .gl-cap .gl-left>.bespoke-site-mark{opacity:0;scale:.7;width:0;min-width:0;overflow:hidden;margin-right:calc(-1*clamp(12px,2vw,22px));pointer-events:none}

/* ---------- v58b: the gold line meets the full-guide bar: bloom + pixels ---------- */
.sl-burst{position:absolute;width:0;height:0;pointer-events:none;z-index:80}
.sl-burst .b{position:absolute;left:-110px;top:-110px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,238,184,.8) 0,rgba(240,196,92,.34) 34%,rgba(227,174,70,0) 70%);animation:slBloom 1.4s cubic-bezier(.2,.7,.2,1) both}
.sl-burst .r{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,226,154,.9);animation:slRing 1.2s cubic-bezier(.2,.7,.2,1) both}
.sl-burst i{position:absolute;left:0;top:0;width:var(--pxs);height:var(--pxs);margin:calc(var(--pxs)/-2) 0 0 calc(var(--pxs)/-2);background:#ffe9a8;box-shadow:0 0 8px rgba(255,214,120,.95);
  animation:slPix 1.15s steps(8,end) both}
@keyframes slBloom{0%{opacity:0;transform:scale(.15)}25%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes slRing{0%{opacity:.95;transform:scale(.4)}100%{opacity:0;transform:scale(6)}}
@keyframes slPix{0%{opacity:1;transform:translate(0,0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.gcol-h.gcol-hit{animation:gcolHit 1.7s ease-out backwards}
@keyframes gcolHit{0%{box-shadow:0 0 0 0 rgba(255,214,120,0)}22%{box-shadow:0 0 46px 2px rgba(255,214,120,.42),inset 0 0 30px rgba(255,226,154,.2)}100%{box-shadow:0 0 0 0 rgba(255,214,120,0)}}
@media(prefers-reduced-motion:reduce){.gcol-h.gcol-hit{animation:none}}