/* Service visuals. Each .sc lives inside .media (5:4). Animations start when .media gets .in */
.sc{position:absolute;inset:0;padding:7%;font-family:var(--sans);color:var(--ink)}
.sc *{box-sizing:border-box}
.g-bg{background:var(--gold-grad)}
.chipf{position:absolute;z-index:2;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:clamp(11px,1vw,13px);white-space:nowrap;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);opacity:0;transform:translateY(12px);transition:opacity .7s,transform .8s var(--ease)}
.chipf b{color:var(--gold-hi);font-weight:600}
.in .chipf{opacity:1;transform:none}
.in .chipf.d2{transition-delay:.35s}.in .chipf.d3{transition-delay:.7s}
.win{position:relative;height:100%;border-radius:16px;border:1px solid var(--line-soft);background:var(--bg);overflow:hidden}
.tb{height:28px;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--card-2);border-bottom:1px solid var(--line-soft);font-size:11px;color:var(--muted)}
.tb i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.tb .url{margin-left:10px;background:var(--bg);border-radius:6px;padding:2px 10px;flex:1;max-width:60%;white-space:nowrap;overflow:hidden}
.bar{height:10px;border-radius:6px;background:var(--card-2)}
@keyframes floaty{50%{transform:translateY(-8px)}}
@keyframes pulseg{0%{box-shadow:0 0 0 0 rgba(212,175,95,.5)}100%{box-shadow:0 0 0 18px rgba(212,175,95,0)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* browser */
.s-browser .pg{padding:7% 8%}
.s-browser .nv{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:12%}
.s-browser .nv b{font-family:var(--serif);font-size:15px;color:var(--ink);font-weight:500;letter-spacing:.1em}
.s-browser h4{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,40px);line-height:1;margin:0;max-width:10em}
.s-browser .p{font-size:12px;color:var(--ink-2);margin:10px 0 16px;max-width:24em}
.s-browser .cta{display:inline-block;font-size:11px;font-weight:600;padding:7px 14px;border-radius:999px;color:#15110a}
.s-browser .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9%}
.s-browser .cards i{aspect-ratio:1.2;border-radius:10px;background:var(--card-2);transform-origin:bottom;transform:scaleY(0)}
.in .s-browser .cards i{animation:rise .9s var(--ease) forwards}
.in .s-browser .cards i:nth-child(2){animation-delay:.15s}.in .s-browser .cards i:nth-child(3){animation-delay:.3s}
.s-browser .cards i:first-child{background:linear-gradient(140deg,rgba(212,175,95,.35),rgba(212,175,95,.05))}

/* phones */
.s-phones{display:flex;justify-content:center;align-items:center}
.ph{position:relative;width:34%;aspect-ratio:9/19;border-radius:26px;border:5px solid #050505;background:var(--bg);overflow:hidden;box-shadow:0 40px 70px -30px rgba(0,0,0,.8)}
.ph + .ph{margin-left:-6%;transform:translateY(8%) rotate(5deg)}
.ph:first-child{transform:rotate(-4deg)}
.ph .in-ph{padding:22% 9% 0;font-size:10px}
.ph .hd{font-family:var(--serif);font-size:clamp(14px,1.6vw,20px);line-height:1;margin-bottom:10px}
.ph .card{border-radius:12px;padding:10px;margin-bottom:8px;color:#15110a;font-weight:600}
.ph .row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.ph .row i{width:22px;height:22px;border-radius:7px;background:var(--card-2);flex:none}
.ph .row span{flex:1;height:7px;border-radius:4px;background:var(--card-2)}
.ph .tabs{position:absolute;left:0;right:0;bottom:0;height:12%;border-top:1px solid var(--line-soft);display:flex;justify-content:space-around;align-items:center}
.ph .tabs i{width:14px;height:14px;border-radius:5px;background:var(--line)}
.ph .tabs i:first-child{background:var(--gold)}
.in .s-phones .ph:last-child{animation:floaty 5s ease-in-out infinite}

/* chatbot widget on site */
.s-widget .win .pg{padding:8%;opacity:.45}
.s-widget .wd{position:absolute;right:9%;bottom:9%;width:56%;border-radius:18px;border:1px solid var(--line);background:var(--card);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);overflow:hidden}
.s-widget .wd .h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line-soft);font-size:12px}
.s-widget .wd .h i{width:18px;height:18px;border-radius:50%}
.s-widget .wd .b{padding:12px;display:grid;gap:7px}
.bub{font-size:clamp(10px,.95vw,12.5px);padding:8px 11px;border-radius:12px;max-width:88%;line-height:1.4;opacity:0}
.bub.u{justify-self:end;background:var(--card-2)}
.bub.a{border:1px solid var(--line-soft);color:var(--ink-2)}
.bub.a b{color:var(--gold-hi);font-weight:600}
.in .bub{animation:pop .6s var(--ease) forwards}
.in .bub:nth-child(2){animation-delay:.6s}.in .bub:nth-child(3){animation-delay:1.2s}.in .bub:nth-child(4){animation-delay:1.8s}
.s-widget .launcher{position:absolute;right:9%;bottom:calc(9% - 0px);transform:translateY(130%);width:44px;height:44px;border-radius:50%}
.in .s-widget .launcher{animation:pulseg 2s infinite}

/* AI chat (GEO) */
.s-chat .win{display:flex;flex-direction:column}
.s-chat .b{flex:1;padding:6%;display:grid;align-content:start;gap:10px}
.s-chat .bub{font-size:clamp(11px,1.05vw,14px)}
.s-chat .src{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.s-chat .src span{font-size:10.5px;border:1px solid var(--line-soft);border-radius:5px;padding:2px 7px;color:var(--muted)}
.s-chat .src span:first-child{border-color:var(--gold);color:var(--gold-hi)}
.s-chat .inp{margin:0 5% 5%;border:1px solid var(--line-soft);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--muted)}

/* serp */
.s-serp .q{display:flex;align-items:center;gap:8px;border:1px solid var(--line-soft);border-radius:999px;padding:9px 14px;font-size:12.5px;margin-bottom:6%}
.s-serp .res{display:grid;gap:9px}
.s-serp .r{border-radius:12px;background:var(--card);border:1px solid var(--line-soft);padding:10px 14px}
.s-serp .r b{display:block;font-size:13px;color:var(--ink-2);font-weight:600}
.s-serp .r span{display:block;height:7px;width:70%;border-radius:4px;background:var(--card-2);margin-top:7px}
.s-serp .r.you{border-color:var(--line);background:linear-gradient(90deg,rgba(212,175,95,.18),rgba(212,175,95,.03))}
.s-serp .r.you b{color:var(--gold-hi)}
.s-serp .r:not(.you){opacity:.6}
.in .s-serp .r.you{animation:pop .8s var(--ease) both}

/* business profile */
.s-profile{display:grid;grid-template-columns:1fr 1fr;gap:4%}
.map{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line-soft);background:linear-gradient(var(--line-soft) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,var(--line-soft) 1px,transparent 1px) 0 0/28px 28px,var(--bg)}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--muted)}
.pin.y{width:20px;height:20px;margin:-10px 0 0 -10px}
.in .pin.y{animation:pulseg 1.8s infinite}
.s-profile .pc{border-radius:16px;border:1px solid var(--line);background:var(--card);padding:8%;display:flex;flex-direction:column;gap:8px}
.s-profile .pc .img{aspect-ratio:16/9;border-radius:10px;background:linear-gradient(140deg,rgba(212,175,95,.35),rgba(212,175,95,.04))}
.s-profile .pc b{font-family:var(--serif);font-size:clamp(17px,1.8vw,24px);font-weight:500;line-height:1.1}
.stars{color:var(--gold);letter-spacing:2px;font-size:12px}
.s-profile .pc small{font-size:11px;color:var(--muted)}
.s-profile .acts{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto}
.s-profile .acts span{font-size:10.5px;border:1px solid var(--line-soft);border-radius:999px;padding:4px 9px}

/* reviews / presence */
.s-reviews .map{position:absolute;inset:7%}
.s-reviews .rv{position:absolute;width:46%;border-radius:14px;background:var(--card);border:1px solid var(--line-soft);padding:12px;font-size:clamp(10px,.95vw,12.5px);color:var(--ink-2);box-shadow:0 20px 40px -20px rgba(0,0,0,.7);opacity:0}
.s-reviews .rv b{display:block;color:var(--ink);font-size:12px;margin-bottom:2px}
.in .s-reviews .rv{animation:pop .7s var(--ease) forwards}
.s-reviews .rv:nth-of-type(2){animation-delay:.4s!important}.s-reviews .rv:nth-of-type(3){animation-delay:.8s!important}

/* funnel */
.s-funnel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.s-funnel .lv{height:15%;border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:clamp(11px,1.1vw,14px);border:1px solid var(--line-soft);background:var(--card);transform-origin:center;transform:scaleX(0)}
.s-funnel .lv b{font-family:var(--serif);font-size:clamp(16px,1.7vw,22px);font-weight:500}
.s-funnel .lv:nth-child(1){width:92%}.s-funnel .lv:nth-child(2){width:76%}.s-funnel .lv:nth-child(3){width:58%}.s-funnel .lv:nth-child(4){width:40%;background:var(--gold-grad);color:#15110a;border:0}
.in .s-funnel .lv{animation:grow .8s var(--ease) forwards}
.in .s-funnel .lv:nth-child(2){animation-delay:.2s}.in .s-funnel .lv:nth-child(3){animation-delay:.4s}.in .s-funnel .lv:nth-child(4){animation-delay:.6s}

/* social grid */
.s-social .prof{display:flex;align-items:center;gap:12px;margin-bottom:5%}
.s-social .prof i{width:46px;height:46px;border-radius:50%;flex:none}
.s-social .prof b{display:block;font-size:13px}
.s-social .prof small{color:var(--muted);font-size:11px}
.s-social .gridp{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.s-social .gridp i{aspect-ratio:1;border-radius:8px;opacity:0}
.in .s-social .gridp i{animation:pop .5s var(--ease) forwards}
.s-social .gridp i:nth-child(1){background:linear-gradient(140deg,#3b2a1a,#120d08)}.s-social .gridp i:nth-child(2){background:var(--gold-grad);animation-delay:.08s!important}
.s-social .gridp i:nth-child(3){background:linear-gradient(140deg,#1f2a33,#0b0f12);animation-delay:.16s!important}.s-social .gridp i:nth-child(4){background:linear-gradient(140deg,#2a1f2e,#0f0a11);animation-delay:.24s!important}
.s-social .gridp i:nth-child(5){background:linear-gradient(140deg,#20301f,#0a110a);animation-delay:.32s!important}.s-social .gridp i:nth-child(6){background:linear-gradient(140deg,#3a301c,#141008);animation-delay:.4s!important}

/* email */
.s-email .win{display:grid;grid-template-columns:38% 1fr}
.s-email .list{border-right:1px solid var(--line-soft);padding:8% 7%;display:grid;align-content:start;gap:8px}
.s-email .list div{border-radius:9px;padding:8px;background:var(--card)}
.s-email .list div b{display:block;font-size:10.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-email .list div span{display:block;height:5px;border-radius:3px;background:var(--card-2);margin-top:6px}
.s-email .list div.on{border:1px solid var(--line)}
.s-email .list div.on b{color:var(--gold-hi)}
.s-email .mail{padding:8%}
.s-email .mail .hero{aspect-ratio:2/1;border-radius:12px;display:flex;align-items:flex-end;padding:8%;color:#15110a;font-family:var(--serif);font-size:clamp(16px,1.9vw,26px);line-height:1}
.s-email .mail .bar{margin-top:10px}
.s-email .mail .bar.s{width:70%}
.s-email .mail .btnm{display:inline-block;margin-top:14px;font-size:11px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--gold);color:var(--gold-hi)}

/* sms */
.s-sms{display:flex;justify-content:center}
.s-sms .ph{width:42%}
.s-sms .ph .in-ph{padding:20% 7% 0;display:grid;gap:7px}
.s-sms .bub{font-size:clamp(9.5px,.9vw,11.5px)}
.s-sms .bub.u{background:var(--gold-grad);color:#15110a}
.s-sms .bub.a{background:var(--card-2);border:0}

/* flow (automation) */
.s-flow{display:flex;flex-direction:column;justify-content:center;gap:0}
.node{position:relative;align-self:center;width:62%;border-radius:14px;border:1px solid var(--line-soft);background:var(--card);padding:11px 14px;font-size:clamp(11px,1.05vw,13.5px);display:flex;align-items:center;gap:10px;opacity:0}
.node i{width:24px;height:24px;border-radius:8px;flex:none;background:var(--card-2)}
.node.t{border-color:var(--line)}
.node.t i{background:var(--gold-grad)}
.node small{margin-left:auto;color:var(--muted);font-size:11px}
.link{align-self:center;width:1px;height:22px;background:linear-gradient(var(--gold),var(--line));opacity:0}
.in .node,.in .link{animation:pop .5s var(--ease) forwards}
.in .s-flow > :nth-child(2){animation-delay:.2s}.in .s-flow > :nth-child(3){animation-delay:.35s}.in .s-flow > :nth-child(4){animation-delay:.55s}.in .s-flow > :nth-child(5){animation-delay:.7s}.in .s-flow > :nth-child(6){animation-delay:.9s}.in .s-flow > :nth-child(7){animation-delay:1.05s}.in .s-flow > :nth-child(8){animation-delay:1.25s}.in .s-flow > :nth-child(9){animation-delay:1.4s}

/* cart recovery */
.s-cart{display:flex;flex-direction:column;justify-content:center}
.s-cart .track{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;position:relative}
.s-cart .track::before{content:"";position:absolute;left:10%;right:10%;top:30px;height:1px;background:var(--line)}
.s-cart .st{text-align:center;font-size:clamp(10px,1vw,12.5px);color:var(--ink-2);opacity:0}
.s-cart .st i{display:grid;place-items:center;margin:0 auto 10px;width:60px;height:60px;border-radius:50%;border:1px solid var(--line);background:var(--card);position:relative;z-index:1;font-style:normal;font-family:var(--serif);font-size:20px;color:var(--gold-hi)}
.s-cart .st b{display:block;color:var(--ink);font-weight:600}
.s-cart .st:last-child i{background:var(--gold-grad);color:#15110a;border:0}
.in .s-cart .st{animation:pop .6s var(--ease) forwards}
.in .s-cart .st:nth-child(2){animation-delay:.3s}.in .s-cart .st:nth-child(3){animation-delay:.6s}.in .s-cart .st:nth-child(4){animation-delay:.9s}
.s-cart .bag{margin:0 auto 8%;width:70%;border-radius:16px;border:1px solid var(--line-soft);background:var(--card);padding:14px;display:flex;align-items:center;gap:12px;font-size:12.5px}
.s-cart .bag i{width:46px;height:46px;border-radius:10px;flex:none}
.s-cart .bag small{display:block;color:var(--muted)}

/* calendar */
.s-cal .hd{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4%}
.s-cal .cal{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.s-cal .cal i{aspect-ratio:1.5;border-radius:8px;background:var(--card-2);transition:background .5s}
.in .s-cal .cal i.f{background:var(--gold-grad)}
.s-cal .chipf{right:7%;bottom:7%}

/* analytics */
.s-analytics .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:5%}
.s-analytics .kpis div{border-radius:12px;border:1px solid var(--line-soft);background:var(--card);padding:10px 12px;font-size:11px;color:var(--muted)}
.s-analytics .kpis b{display:block;font-family:var(--serif);font-size:clamp(18px,2vw,28px);color:var(--ink);font-weight:500;line-height:1.1}
.s-analytics .kpis div:first-child b{color:var(--gold-hi)}
.s-analytics .chart{border-radius:14px;border:1px solid var(--line-soft);background:var(--card);padding:4%}
.s-analytics svg path.l{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:900;stroke-dashoffset:900}
.s-analytics svg path.a{fill:url(#scArea);opacity:0;transition:opacity 1s .9s}
.in .s-analytics svg path.l{animation:draw 2s var(--ease) forwards}
.in .s-analytics svg path.a{opacity:1}

/* kpi dashboard */
.s-dash{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto 1fr;gap:10px}
.s-dash .p{border-radius:14px;border:1px solid var(--line-soft);background:var(--card);padding:12px;font-size:11px;color:var(--muted)}
.s-dash .bars{display:flex;align-items:flex-end;gap:7px;height:110px;margin-top:10px}
.s-dash .bars i{flex:1;border-radius:6px 6px 2px 2px;background:var(--card-2);transform-origin:bottom;transform:scaleY(0)}
.s-dash .bars i.g{background:var(--gold-grad)}
.in .s-dash .bars i{animation:rise .9s var(--ease) forwards}
.in .s-dash .bars i:nth-child(2){animation-delay:.08s}.in .s-dash .bars i:nth-child(3){animation-delay:.16s}.in .s-dash .bars i:nth-child(4){animation-delay:.24s}.in .s-dash .bars i:nth-child(5){animation-delay:.32s}.in .s-dash .bars i:nth-child(6){animation-delay:.4s}
.s-dash .donut{width:62%;margin:10px auto 0}
.s-dash .donut circle.v{stroke:var(--gold);stroke-dasharray:251;stroke-dashoffset:251;transition:stroke-dashoffset 1.6s var(--ease)}
.in .s-dash .donut circle.v{stroke-dashoffset:80}
.s-dash .tbl{grid-column:1/-1}
.s-dash .tbl div{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--line-soft);color:var(--ink-2)}
.s-dash .tbl div b{color:var(--gold-hi);font-weight:500}

/* graphic design artboard */
.s-design{display:grid;grid-template-columns:1.25fr 1fr;gap:4%}
.s-design .art{position:relative;border-radius:14px;overflow:hidden;background:#0d0c0a;border:1px solid var(--line-soft)}
.s-design .art .sun{position:absolute;width:62%;aspect-ratio:1;left:19%;top:12%;border-radius:50%;background:var(--gold-grad)}
.in .s-design .art .sun{animation:floaty 6s ease-in-out infinite}
.s-design .art .t{position:absolute;left:8%;bottom:8%;right:8%;font-family:var(--serif);color:#F4EFE4;font-size:clamp(22px,3vw,42px);line-height:.9;mix-blend-mode:difference}
.s-design .side{display:flex;flex-direction:column;gap:10px}
.s-design .sw{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.s-design .sw i{aspect-ratio:1;border-radius:8px}
.s-design .spec{flex:1;border-radius:14px;border:1px solid var(--line-soft);background:var(--card);padding:12px;display:flex;flex-direction:column;justify-content:space-between}
.s-design .spec b{font-family:var(--serif);font-size:clamp(40px,5vw,72px);font-weight:500;line-height:.9}
.s-design .spec small{font-size:10.5px;color:var(--muted)}
.s-design .grid-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(240,216,153,.08) 1px,transparent 1px) 0 0/25% 100%;pointer-events:none}

/* amazon listing */
.s-amazon{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:10px}
.s-amazon .main{grid-row:1;border-radius:14px;background:#fff;position:relative;display:grid;place-items:center;overflow:hidden}
.s-amazon .thumbs{display:grid;grid-template-rows:repeat(3,1fr);gap:8px}
.s-amazon .tile{border-radius:12px;position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:clamp(10px,1vw,12px);color:#2b2418}
.s-amazon .tile.i1{background:#F7F2E7}.s-amazon .tile.i2{background:linear-gradient(140deg,#e9dcc0,#cdb68a)}.s-amazon .tile.i3{background:#F3EFE8}
.s-amazon .tile b{display:block;font-size:12px}
.s-amazon .tile .ic{width:26px;height:26px;border-radius:50%;border:2px solid #A47B2F;flex:none}
.s-amazon .aplus{grid-column:1/-1;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:10px;align-items:center;padding:10px 14px;font-size:11px;color:var(--muted)}
.s-amazon .aplus b{font-family:var(--serif);font-size:18px;color:var(--gold-hi);font-weight:500}
.s-amazon .aplus i{height:34px;border-radius:7px;background:var(--card-2)}
.s-amazon .aplus i:nth-of-type(1){background:linear-gradient(140deg,rgba(212,175,95,.4),rgba(212,175,95,.06))}
.bottle{width:34%;height:auto}
.in .s-amazon .bottle,.in .s-product .bottle{animation:floaty 5s ease-in-out infinite}

/* e-commerce product */
.s-product{display:grid;place-items:center;background:radial-gradient(60% 55% at 50% 45%,rgba(212,175,95,.22),transparent 70%)}
.s-product .stage{position:relative;width:70%;height:80%;display:flex;align-items:flex-end;justify-content:center}
.s-product .ped{position:absolute;bottom:4%;left:15%;right:15%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
.s-product .bottle{width:38%;position:relative;z-index:1;margin-bottom:8%}
.s-product .chipf.c1{left:7%;top:12%}.s-product .chipf.c2{right:7%;top:30%}.s-product .chipf.c3{left:9%;bottom:12%}
.s-product .sws{position:absolute;right:8%;bottom:10%;display:flex;gap:6px}
.s-product .sws i{width:20px;height:20px;border-radius:50%;border:2px solid var(--bg)}

/* storyboard (video creation) */
.s-story .frames{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s-story .fr{border-radius:10px;overflow:hidden;border:1px solid var(--line-soft);background:var(--card);opacity:0}
.s-story .fr .im{aspect-ratio:16/10;position:relative}
.s-story .fr p{margin:0;padding:7px 9px;font-size:10px;color:var(--muted)}
.s-story .fr b{display:block;color:var(--ink-2);font-size:10.5px}
.in .s-story .fr{animation:pop .6s var(--ease) forwards}
.in .s-story .fr:nth-child(2){animation-delay:.12s}.in .s-story .fr:nth-child(3){animation-delay:.24s}.in .s-story .fr:nth-child(4){animation-delay:.36s}.in .s-story .fr:nth-child(5){animation-delay:.48s}.in .s-story .fr:nth-child(6){animation-delay:.6s}
.s-story .script{margin-top:4%;border-radius:12px;border:1px solid var(--line);background:var(--card);padding:10px 14px;font-size:11.5px;color:var(--ink-2)}
.s-story .script b{color:var(--gold-hi);font-weight:600}

/* timeline (video editing) */
.s-edit{display:flex;flex-direction:column;gap:10px}
.s-edit .prev{flex:1;border-radius:14px;position:relative;overflow:hidden;background:linear-gradient(160deg,#2c2215,#0b0907)}
.s-edit .prev .play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;display:grid;place-items:center}
.s-edit .prev .play::after{content:"";border-left:14px solid #15110a;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.s-edit .prev .cap{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:4px 10px;border-radius:6px;white-space:nowrap}
.s-edit .prev .tc{position:absolute;right:10px;top:10px;font-size:10.5px;color:#cfc7b6;font-variant-numeric:tabular-nums}
.s-edit .tl{position:relative;border-radius:12px;border:1px solid var(--line-soft);background:var(--card);padding:10px 12px;display:grid;gap:6px}
.s-edit .trk{display:flex;gap:4px;height:16px}
.s-edit .trk i{border-radius:4px;background:var(--card-2)}
.s-edit .trk.v i{background:linear-gradient(90deg,rgba(212,175,95,.55),rgba(212,175,95,.25))}
.s-edit .trk.a i{background:repeating-linear-gradient(90deg,rgba(240,216,153,.35) 0 2px,transparent 2px 4px)}
.s-edit .head{position:absolute;top:6px;bottom:6px;left:12%;width:2px;background:var(--gold-hi);box-shadow:0 0 10px var(--gold)}
@keyframes scrub{to{left:88%}}
.in .s-edit .head{animation:scrub 6s linear infinite}

/* youtube thumbnails */
.s-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center}
.s-thumbs .th{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;opacity:0}
.in .s-thumbs .th{animation:pop .6s var(--ease) forwards}
.in .s-thumbs .th:nth-child(2){animation-delay:.12s}.in .s-thumbs .th:nth-child(3){animation-delay:.24s}.in .s-thumbs .th:nth-child(4){animation-delay:.36s}
.s-thumbs .th .face{position:absolute;right:6%;bottom:0;width:38%;aspect-ratio:1/1.1;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#c9a272,#6f5232)}
.s-thumbs .th .tx{position:absolute;left:7%;top:12%;font-weight:800;font-size:clamp(12px,1.6vw,22px);line-height:.95;color:#fff;text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 2px 0 rgba(0,0,0,.4);max-width:58%}
.s-thumbs .th .tx em{font-style:normal;color:#F0D899}
.s-thumbs .th .dur{position:absolute;right:6px;bottom:6px;font-size:9.5px;background:rgba(0,0,0,.75);color:#fff;padding:1px 5px;border-radius:4px}
.s-thumbs .th .tag{position:absolute;left:6px;bottom:6px;font-size:9.5px;font-weight:600;background:var(--gold-grad);color:#15110a;padding:2px 7px;border-radius:999px}
.s-thumbs .th:nth-child(1){background:linear-gradient(130deg,#1c2b3c,#0b1018)}.s-thumbs .th:nth-child(2){background:linear-gradient(130deg,#3a1d14,#120806)}
.s-thumbs .th:nth-child(3){background:linear-gradient(130deg,#1e3324,#09120c)}.s-thumbs .th:nth-child(4){background:linear-gradient(130deg,#30243e,#0e0a13)}

/* real estate before/after */
.s-estate .ba{position:relative;height:100%;border-radius:16px;overflow:hidden;border:1px solid var(--line-soft)}
.s-estate .ba svg{position:absolute;inset:0;width:100%;height:100%}
.s-estate .after{clip-path:inset(0 0 0 50%)}
@keyframes wipe{0%,15%{clip-path:inset(0 0 0 80%)}50%,65%{clip-path:inset(0 0 0 20%)}100%{clip-path:inset(0 0 0 80%)}}
.in .s-estate .after{animation:wipe 7s var(--ease) infinite}
.s-estate .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold-hi);box-shadow:0 0 12px var(--gold)}
@keyframes handle{0%,15%{left:80%}50%,65%{left:20%}100%{left:80%}}
.in .s-estate .handle{animation:handle 7s var(--ease) infinite}
.s-estate .handle::after{content:"";position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px;border-radius:50%;background:var(--gold-grad)}
.s-estate .lab{position:absolute;top:12px;font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.s-estate .lab.l{left:12px}.s-estate .lab.r{right:12px;background:var(--gold-grad);color:#15110a}

/* clips (long to short) */
.s-clips{display:flex;flex-direction:column;justify-content:center;gap:6%}
.s-clips .long{position:relative;height:46px;border-radius:10px;border:1px solid var(--line-soft);background:repeating-linear-gradient(90deg,var(--card) 0 18px,var(--card-2) 18px 20px);overflow:hidden}
.s-clips .long i{position:absolute;top:0;bottom:0;border:2px solid var(--gold);border-radius:8px;background:rgba(212,175,95,.18);opacity:0}
.in .s-clips .long i{animation:pop .5s var(--ease) forwards}
.s-clips .long i:nth-child(2){animation-delay:.3s!important}.s-clips .long i:nth-child(3){animation-delay:.6s!important}
.s-clips .shorts{display:flex;justify-content:center;gap:4%}
.s-clips .sh{position:relative;width:24%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);opacity:0}
.in .s-clips .sh{animation:pop .6s var(--ease) forwards}
.in .s-clips .sh:nth-child(1){animation-delay:.9s}.in .s-clips .sh:nth-child(2){animation-delay:1.05s}.in .s-clips .sh:nth-child(3){animation-delay:1.2s}
.s-clips .sh:nth-child(1){background:linear-gradient(170deg,#2c2215,#0b0907)}.s-clips .sh:nth-child(2){background:linear-gradient(170deg,#1c2b3c,#0b1018);transform:translateY(-8%)}.s-clips .sh:nth-child(3){background:linear-gradient(170deg,#2a1f2e,#0f0a11)}
.s-clips .sh .cp{position:absolute;left:8%;right:8%;top:55%;font-weight:800;font-size:clamp(9px,1vw,13px);line-height:1.05;color:#fff;text-align:center;text-transform:uppercase}
.s-clips .sh .cp em{font-style:normal;color:#F0D899}
.s-clips .sh .pb{position:absolute;left:8%;right:8%;top:6%;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.s-clips .sh .pb::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(.4)}
.s-clips .lab{font-size:11px;color:var(--muted);text-align:center}