/* Sell South FL scroll stage (11/11/2026). Pairs with stage.js. Only acts on .stg-live (big screens, motion allowed). */
.stg-track,.stg-pin,.stg-stack{display:contents}
.stg-hud,.stg-amb,.stg-m,.stg-glare{display:none}
html.stg-snap{scroll-snap-type:y proximity}

.stg-track.stg-live{display:block;position:relative}
.stg-live .stg-pin{display:block;position:sticky;top:var(--stgTop);height:var(--pinH);isolation:isolate}
.stg-live .stg-m{display:block;position:absolute;left:0;width:1px;height:var(--pinH);scroll-snap-align:start;scroll-margin-top:var(--stgTop);pointer-events:none;visibility:hidden}

/* color wash */
.stg-live .stg-amb{display:block;position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;overflow:hidden;pointer-events:none}
.stg-live .stg-amb>b{position:absolute;inset:-12%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease}
.stg-live.home .stg-amb>b{filter:blur(90px) saturate(1.5)}
.stg-live.tour .stg-amb>b{filter:blur(30px)}
.stg-live.home .stg-amb>b.on{opacity:.26}
.stg-live.tour .stg-amb>b.on{opacity:.2}
:root[data-theme="dark"] .stg-live .stg-amb>b.on{opacity:.38}

/* heads-up: rolling number + segmented progress */
.stg-live .stg-hud{display:flex;align-items:flex-end;gap:clamp(14px,1.6vw,24px);margin-bottom:clamp(14px,3vh,34px)}
.stg-live .stg-num{font-size:clamp(76px,8vw,138px);line-height:1;height:1em;overflow:hidden;font-weight:800;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 60%,transparent);font-variant-numeric:tabular-nums;flex:none}
.stg-live .stg-num>i{display:block;font-style:normal;transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.stg-live .stg-num>i>span{display:block;height:1em}
.stg-live .stg-meta{flex:1;min-width:0;padding-bottom:.9em}
.stg-live .stg-cnt{display:block;font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--faint);font-variant-numeric:tabular-nums;margin-bottom:10px}
.stg-live .stg-seg{display:flex;gap:5px}
.stg-live .stg-seg button{flex:1;height:4px;border:0;padding:0;border-radius:4px;background:var(--line);position:relative;cursor:pointer;overflow:visible}
.stg-live .stg-seg button::before{content:"";position:absolute;inset:-10px 0}
.stg-live .stg-seg button i{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--gold-2));transform-origin:left center;transform:scaleX(0)}
.stg-live .stg-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* text: steps sit on top of each other, the current one rises in */
.stg-live .stg-stack{display:grid}
.stg-live .stg-stack>*{grid-area:1/1;visibility:hidden;transition:visibility 0s linear .7s;align-self:start}
.stg-live .stg-stack>.on{visibility:visible;transition-delay:0s}
.stg-live .stg-stack>*>*{opacity:0;translate:0 38px;filter:blur(10px);transition:opacity .45s ease,translate .9s cubic-bezier(.16,1,.3,1),filter .6s ease}
.stg-live[data-dir="1"] .stg-stack>.was>*{translate:0 -30px}
.stg-live .stg-stack>.on>*{opacity:1;translate:0 0;filter:blur(0)}
.stg-live .stg-stack>.on>:nth-child(1){transition-delay:.05s}
.stg-live .stg-stack>.on>:nth-child(2){transition-delay:.12s}
.stg-live .stg-stack>.on>:nth-child(3){transition-delay:.2s}
.stg-live .stg-stack>.on>:nth-child(4){transition-delay:.28s}
.stg-live .stg-stack>.on>:nth-child(5){transition-delay:.34s}

/* ---- home: the photo fills the left of the screen ---- */
.stg-live.home .jr{height:100%;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(40px,5vw,90px);align-items:center;padding-block:clamp(16px,3vh,34px)}
.stg-live.home .jr .stick{position:relative;top:0;height:100%;display:block;align-self:stretch}
.stg-live.home .jphoto{aspect-ratio:auto;height:100%;border-radius:calc(30px + var(--d,0) * 36px);transform:scale(calc(1 - var(--d,0) * .07));transition:transform .35s cubic-bezier(.2,.8,.2,1),border-radius .35s ease;box-shadow:0 40px 90px -30px rgba(6,20,34,.45)}
.stg-live.home .jphoto>div{opacity:1;transform:none;clip-path:inset(100% 0 0 0);scale:1.24;translate:0 calc(var(--sd,0) * -50px);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1),scale 1.9s cubic-bezier(.16,1,.3,1)}
.stg-live.home .jphoto>div.vis{clip-path:inset(0 0 0 0);scale:1.08}
.stg-live.home .jphoto>div span{left:clamp(22px,2.4vw,40px);right:clamp(22px,2.4vw,40px);bottom:clamp(20px,2.4vw,38px);font-size:clamp(20px,1.7vw,30px);letter-spacing:-.02em;opacity:0;translate:0 18px;transition:opacity .6s ease .45s,translate .9s cubic-bezier(.16,1,.3,1) .45s}
.stg-live.home .jphoto>div.cur span{opacity:1;translate:0 0}
.stg-live.home .steps{padding-left:0;display:flex;flex-direction:column;justify-content:center;height:100%}
.stg-live.home .steps::before,.stg-live.home .step::before{display:none}
.stg-live.home .step{padding:0;opacity:1}
.stg-live.home .step h3{font-size:clamp(36px,3.5vw,58px);letter-spacing:-.045em;line-height:1.02;margin:12px 0 18px;color:var(--ink)}
.stg-live.home .step p{font-size:clamp(18px,1.3vw,21px);line-height:1.55;color:var(--muted);max-width:40ch}
.stg-live.home .step .chip{margin-top:20px}

/* ---- tours: the laptop and phone hold the middle, tilt back between steps and come forward when a step settles ---- */
.stg-live.tour .tsg{height:100%;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center;padding-block:clamp(12px,2.4vh,30px) clamp(64px,9vh,96px)}
.stg-live.tour .tsteps{display:flex;flex-direction:column;justify-content:center;height:100%}
.stg-live.tour .tstep{min-height:0;padding:0;border:0;opacity:1;scroll-margin-top:0}
.stg-live.tour .tstep h2{font-size:clamp(30px,2.8vw,46px);line-height:1.04;margin:8px 0 12px;color:var(--ink)}
.stg-live.tour .tstep .lead{font-size:clamp(16px,1.15vw,18px);color:var(--muted)}
.stg-live.tour .tstep .blist{margin-top:14px}
.stg-live.tour .tstep .blist li{opacity:0;translate:0 16px;transition:opacity .45s ease,translate .8s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,color .3s}
.stg-live.tour .tstep.on .blist li{opacity:1;translate:0 0}
.stg-live.tour .tstep.on .blist li:nth-child(1){transition-delay:.32s}
.stg-live.tour .tstep.on .blist li:nth-child(2){transition-delay:.4s}
.stg-live.tour .tstep.on .blist li:nth-child(3){transition-delay:.48s}
.stg-live.tour .tstep.on .blist li:nth-child(4){transition-delay:.56s}
.stg-live.tour .tstep.on .blist li:nth-child(5){transition-delay:.62s}
.stg-live.tour .tstick{position:relative;top:0;align-self:center}
.stg-live.tour .tstick .dev{transform:perspective(2200px) rotateY(calc(var(--d,0) * -16deg)) rotateX(calc(var(--d,0) * 6deg)) scale(calc(1 - var(--d,0) * .08));transform-origin:50% 60%;transition:transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
.stg-live.tour .stg-num{font-size:clamp(64px,6vw,108px)}
.stg-live .laptop .scr{position:relative}
.stg-live .stg-glare{display:block;position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);background-size:260% 100%;background-position:160% 0;opacity:0}
.stg-live .stg-glare.go{animation:stgGlare 1.15s cubic-bezier(.4,0,.2,1)}
@keyframes stgGlare{0%{background-position:160% 0;opacity:0}20%{opacity:1}100%{background-position:-60% 0;opacity:0}}
/* screens inside the device: soft blur cross-fade */
.stg-live.tour .ml .panes>.mn{filter:blur(6px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .6s ease}
.stg-live.tour .ml .panes>.mn.on{filter:blur(0)}

/* tighter version for shorter windows */
.stg-live.stg-tight .stg-num{display:none}
.stg-live.stg-tight .stg-meta{padding-bottom:0}
.stg-live.tour.stg-tight .tstep h2{font-size:clamp(26px,2.3vw,36px)}
.stg-live.tour.stg-tight .tstep .blist li{padding:7px 12px;font-size:14.5px}
.stg-live.home.stg-tight .step h3{font-size:clamp(30px,2.8vw,44px)}

/* fast jumps (tabs, big scrolls): only the step leaving and the step arriving are ever drawn, and the leaving one clears quickly */
.stg-live .stg-stack>.was{transition-delay:.35s}
.stg-live .stg-stack>.was>*{transition:opacity .25s ease,translate .5s cubic-bezier(.16,1,.3,1),filter .3s ease}
.stg-live .stg-stack>:not(.on):not(.was){visibility:hidden;transition:none}
.stg-live .stg-stack>:not(.on):not(.was)>*,.stg-live .stg-stack>:not(.on):not(.was) li{transition:none}

[dir="rtl"] .stg-live .stg-seg button i,.stg-live [dir="rtl"] .stg-seg button i{transform-origin:right center}