/* v67 · story fixes (2026-11-08). Separate file so it doesn't collide with the header-lens v66 work. */

/* no widows / orphans: headlines balance, short side copy balances, body copy avoids a lonely last word */
h1,h2,h3,.giant{text-wrap:balance}
.section-head>p,.gu-head p,.try-head p,.gx-head p,.mp-s{text-wrap:balance}
p,li{text-wrap:pretty}

/* "Today is the day / you start your next masterpiece." — the gold gradient now lives on each part of the line instead of
   the whole <em>, so "next masterpiece" can gather (fade + unblur) as the gold line comes in. --mpk (0..1) is set by
   bbb-scenes-r58.js from how far the line still has to travel to the full stop. The printed "." is hidden while the
   storyline runs: the travelling dot lands there and stays as the full stop. */
.mp-say h2 em{background:none!important;animation:none!important}
.mp-say h2 em>span{background:linear-gradient(100deg,#ffd98a,#f6dc98,#e3b04a,#ffd98a);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gelHue 8s linear infinite}
html.sl-on .mp-say .mp-nw{display:inline-block;opacity:calc(.04 + .96*var(--mpk,1));filter:blur(calc((1 - var(--mpk,1))*10px))}
/* the full stop is the real glyph (same gold as the word), hidden until the travelling dot lands on it; the dot holds there
   for a beat (bbb-scenes-r58.js), the stop appears with a short flash, then the dot moves on to draw the O */
html.sl-on .mp-say h2 em>.mp-per{opacity:0!important;transition:opacity .3s ease}
html.sl-on .mp-say.per-on h2 em>.mp-per{opacity:1!important}
.mp-say.per-on .mp-per::after{width:.42em!important;height:.42em!important;box-shadow:0 0 .5em .14em rgba(255,214,120,.8)!important;animation:mpPerFlash 1.4s cubic-bezier(.2,.7,.2,1) both!important}
.mp-say.per-on .mp-per::before{content:"";position:absolute;left:46%;top:80%;width:.3em;height:.3em;translate:-50% -50%;border-radius:50%;border:1.5px solid rgba(255,226,154,.9);pointer-events:none;animation:mpPerRing 1.2s cubic-bezier(.2,.7,.2,1) .05s both}
@keyframes mpPerFlash{0%{opacity:0;scale:.4}20%{opacity:1;scale:1.25}100%{opacity:0;scale:1.8}}
@keyframes mpPerRing{0%{opacity:.95;scale:.6}100%{opacity:0;scale:4.2}}
@media(prefers-reduced-motion:reduce){.mp-say.per-on .mp-per::after,.mp-say.per-on .mp-per::before{animation:none!important;opacity:0}}
@media(prefers-reduced-motion:reduce){html.sl-on .mp-say .mp-nw{opacity:1;filter:none}}

/* "Real photos. Polished characters." — 01 shows the real photo from the shoot, 02 the AI angles (the six-photo grid),
   03 the stickers fanning out. Same scroll variables bbb-v55.js already sets: --sh (step 1), --ss (step 2), --st (step 3),
   --shp (entry), --mq (step-2 progress). The old character-sheet layer is no longer part of the sequence. */
.stk .sk-sheet{display:none!important}
.sk-real{--e:clamp(0,calc(var(--shp)*1.6),1);position:absolute;top:50%;left:50%;height:min(100cqh,150cqw);aspect-ratio:768/1376;margin:0;border-radius:18px;overflow:hidden;background:#000;z-index:2;
  opacity:calc(var(--sh)*var(--e));transform:translate(-50%,-50%) translateY(calc((1 - var(--e))*40px)) scale(calc(.86 + .14*var(--sh)));
  box-shadow:0 30px 60px -30px #000,inset 0 0 0 1px rgba(246,220,152,.35)}
.sk-real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.sk-real figcaption{position:absolute;left:12px;bottom:12px;font:800 9.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.18em;color:#fff6dd;padding:7px 10px;border-radius:99px;background:rgba(8,6,14,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.stk-world .sk-shoot{opacity:var(--ss);transform:scale(calc(.94 + .06*var(--ss)))}
.stk-world .sk-ph{--t:calc((var(--ss) + var(--mq))/2);--pi:clamp(0,calc(var(--t)*3.2 - var(--i)*.44),1)}
.stk.static .sk-real{display:none}
.stk.static .sk-shoot{display:grid!important;position:relative;inset:auto;height:auto;aspect-ratio:3/2;opacity:1;transform:none;margin-bottom:20px}
.stk.static .sk-ph{--pi:1}

/* the gold line builds the guide bar out of pixels (bbb-v67-story.js drives --gr while .gpx-run is on), then the open
   button pops with two gold rings */
@media(min-width:761px){html.sl-on #gcolH.gpx-run{animation:none!important;opacity:1!important;filter:none!important}}
#gcolH.gpx-pop .gcol-ch{animation:gpxPop 1s cubic-bezier(.3,1.5,.45,1) 2!important}
#gcolH.gpx-pop .gcol-ch::after{animation:gpxRing 1s ease-out 2!important}
@keyframes gpxPop{0%,100%{scale:1;box-shadow:0 8px 20px -8px rgba(227,174,70,.8),0 0 0 0 rgba(255,226,154,0)}35%{scale:1.22;box-shadow:0 10px 34px -4px rgba(255,214,120,1),0 0 34px 10px rgba(255,226,154,.6)}}
@keyframes gpxRing{0%{opacity:.95;transform:scale(.9)}100%{opacity:0;transform:scale(2.4)}}

/* timeline beats: the left text column clears the gold rail that runs down its left edge */
@media(min-width:761px){html.sl-on .s-flow .beat.k0 .bt{padding-left:clamp(30px,2.8vw,46px);box-sizing:border-box}}

/* Real photos section: shorter (it took too many scrolls), and the bottom row of the headline is the whole gold line */
.stk{height:600vh!important}
.stk-copy .h em{display:block}

/* packaging background: the Atmosphere bottle film, close and dark, light sweeping over the label */
.pkg-bg video{object-position:50% 42%;opacity:.6;filter:blur(2.5px) saturate(1.1) contrast(1.05)}

/* the Bruce "two moods" drag slider is retired from the home page (kept in the markup, hidden, so it can come back) */
.rb-why{display:none!important}

/* client logos: grand scroll-linked fade in and out; --pin/--pout from bbb-v67-story.js, --k = distance from the centre */
.pc-row.pcx img{--a:clamp(0,calc(var(--pin,1)*1.7 - var(--k,0)*.7),1);--o:clamp(0,calc(var(--pout,0)*1.6 - (1 - var(--k,0))*.6),1);
  opacity:calc(var(--a)*(1 - var(--o)))!important;
  transform:translateY(calc((1 - var(--a))*40px - var(--o)*30px)) scale(calc(.8 + .2*var(--a) - .08*var(--o)))!important;
  filter:blur(calc((1 - var(--a))*14px + var(--o)*12px)) brightness(calc(1 + (1 - var(--a))*1.4)) drop-shadow(0 0 14px rgba(227,194,122,.35))!important;
  transition:none!important;animation:none!important}
.pc-row.pcx.pc-bloom img{animation:pcBloom 1.5s cubic-bezier(.2,.7,.2,1) both!important;animation-delay:calc(var(--k,0)*300ms)!important}
@keyframes pcBloom{0%,100%{filter:brightness(1) drop-shadow(0 0 14px rgba(227,194,122,.35))}30%{filter:brightness(1.9) drop-shadow(0 0 30px rgba(255,214,120,.95))}}
@media(prefers-reduced-motion:reduce){.pc-row.pcx img{transform:none!important;filter:drop-shadow(0 0 14px rgba(227,194,122,.35))!important}.pc-row.pcx.pc-bloom img{animation:none!important}}

/* Bespoke OS introduction */
.bos-intro .bos-lead b{color:#f6dc98}
.bos-intro .bos-list{list-style:none;margin:16px 0 18px;padding:0;display:grid;gap:12px}
.bos-intro .bos-list li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:#cfc6ae}
.bos-intro .bos-list li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe2,#f7dc7e 45%,#d4a238 80%);box-shadow:0 0 10px rgba(255,214,120,.55)}
.bos-intro .bos-list b{display:block;color:#fff6dd;font-weight:700}

/* phones: slim gold rail + dot (bbb-v67-story.js) */
.m-rail{position:fixed;left:7px;top:78px;bottom:18px;width:2px;z-index:6;pointer-events:none;opacity:0;transition:opacity .4s}
.m-rail i{position:absolute;inset:0;border-radius:2px;background:linear-gradient(#e3c27a,#f6dc98);transform-origin:top;transform:scaleY(var(--p,0));box-shadow:0 0 8px rgba(246,214,120,.5)}
.m-rail b{position:absolute;left:50%;top:calc(var(--p,0)*100%);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe2,#f7dc7e 45%,#d4a238 80%);box-shadow:0 0 12px 3px rgba(255,214,120,.55)}
@media(min-width:700px){.m-rail{display:none}}

/* packaging cards: real Bespoke glass icons in place of the line icons (no box behind them, like the other glass icons) */
.pcap>i.pcap-gl{width:64px!important;height:64px!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;display:block}
.pcap>i.pcap-gl::before,.pcap>i.pcap-gl::after{display:none!important}
.pcap>i.pcap-gl img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}