/* ════════════════════════════════════════════════════════════════════════
   StyLens landing — phone mockups, ported from the app's Compose code:
     glow ............ SplashScreen.kt (rotating light pools)
     hero ............ ResultsScreen.kt FILTERING → filtered, cropper, chips
     s1 .............. share-link import (SharedLink), GalleryMockup.kt, HomeScreen hero card, ScanCameraAnimation.kt
     s2 .............. DetectMockup.kt crop part + StyLensImageCropper.kt
     s3 .............. AIAnalyzingScreen.kt (scan band, chips, status copy)
     s4 .............. ResultsMockup.kt (favourite → product → store page)
     .sa-* ........... ShortcutAnimation.kt (share sheet, voice wave, scan line, quick tile)
     .ring ........... RewardProgressRing.kt
   Every element inside one scene loops on that scene's period so it stays in
   sync. Sizes use cqw of the phone screen (or of .hero-visual in the hero).
   Base styles hold the static frame shown with prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Phone frame ─── */
.phone {
    --pw: min(290px, 74vw);
    position: relative; z-index: 1;
    width: var(--pw); aspect-ratio: 11 / 20;
    padding: calc(var(--pw) * .032);
    border-radius: calc(var(--pw) * .158);
    background: linear-gradient(180deg, #0A0E17, #11182A);
    box-shadow:
        0 0 0 1.5px rgba(255, 255, 255, .16),
        inset 0 0 0 1px rgba(255, 255, 255, .06),
        0 40px 80px -24px rgba(0, 0, 0, .75),
        0 24px 64px -32px rgba(46, 91, 255, .45);
}
.screen {
    position: relative; height: 100%; overflow: hidden; isolation: isolate;
    border-radius: calc(var(--pw) * .128);
    background: #11131C; color: #E2E1EF;
    container-type: inline-size;
    line-height: 1.3;
}
.status {
    position: absolute; inset: 0 0 auto; z-index: 30; height: 11cqw;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.2cqw 8.5cqw 0 9.5cqw;
    font-size: 3.5cqw; font-weight: 700; color: #E2E1EF; pointer-events: none;
}
.status::before {
    content: ''; position: absolute; left: 50%; top: 2.6cqw; width: 27cqw; height: 7.4cqw;
    transform: translateX(-50%); border-radius: 99px; background: #000;
}
.status .sys { width: 9.5cqw; height: 3.4cqw; }

/* ─── Shared pieces ─── */
.scene { position: absolute; inset: 0; }
.m-appbar { position: absolute; left: 4cqw; right: 4cqw; top: 11cqw; height: 11cqw; display: flex; align-items: center; gap: 3cqw; }
.m-back {
    display: grid; place-items: center; flex: none; width: 8.4cqw; height: 8.4cqw;
    border-radius: 50%; background: rgba(226, 225, 239, .07);
}
.m-back svg { width: 4.6cqw; height: 4.6cqw; }
.m-bar { display: block; height: 2.6cqw; border-radius: 1.3cqw; background: rgba(226, 225, 239, .22); }
.m-bar.dim { background: rgba(226, 225, 239, .12); }

.garment { display: block; width: 100%; height: auto; aspect-ratio: 1; color: rgba(255, 255, 255, .9); }
.photo { position: absolute; inset: 0; background: linear-gradient(135deg, var(--p1), var(--p2)); }
.p-dress { --p1: #423552; --p2: #5D4A73; }
.p-photo { --p1: #1D2B4A; --p2: #2E4470; }
.gx-dress, .gx-scarf, .gx-sneaker { position: absolute; transform: translate(-50%, -50%); }
.gx-dress { left: 42%; top: 50%; width: 95%; }
.gx-scarf { left: 80%; top: 20%; width: 38%; color: rgba(255, 255, 255, .75); }
.gx-sneaker { left: 77%; top: 85%; width: 44%; color: rgba(255, 255, 255, .75); }

/* tap hand — left/top place the fingertip (37%, 7% of the hand box) */
.hand {
    position: absolute; left: 0; top: 0; z-index: 25;
    width: 15cqw; height: 15cqw; color: rgba(255, 255, 255, .96);
    opacity: 0; transform-origin: 37% 7%; transform: translate(-37%, -7%);
    filter: drop-shadow(0 1cqw 1.6cqw rgba(0, 0, 0, .4));
    pointer-events: none;
}

/* attribute chip (AIAnalyzingScreen) — em based so it scales per context */
.attr-chip {
    display: inline-flex; align-items: center; gap: .45em;
    padding: .5em .95em; border-radius: 999px;
    border: .1em solid transparent;
    background:
        linear-gradient(rgba(51, 52, 62, .94), rgba(51, 52, 62, .94)) padding-box,
        linear-gradient(90deg, #B8C3FF, #D8B9FF) border-box;
    font-weight: 600; line-height: 1.2; white-space: nowrap; color: #E2E1EF;
}
.attr-chip b { font-size: .72em; font-weight: 800; letter-spacing: .06em; color: #8E90A2; }
.swatch { display: inline-block; flex: none; width: .8em; height: .8em; border-radius: 50%; background: #C9B6E8; }

/* viewfinder corners */
.vf { position: absolute; pointer-events: none; }
.vf i { position: absolute; width: 8cqw; height: 8cqw; border: 0 solid rgba(124, 200, 255, .7); }
.vf i:nth-child(1) { top: 0; left: 0; border-top-width: .8cqw; border-left-width: .8cqw; }
.vf i:nth-child(2) { top: 0; right: 0; border-top-width: .8cqw; border-right-width: .8cqw; }
.vf i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: .8cqw; border-left-width: .8cqw; }
.vf i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: .8cqw; border-right-width: .8cqw; }

/* crop frame (StyLensImageCropper.drawCropFrame): dimmed outside, thirds, L handles */
.crop {
    --hs: 5cqw; --hw: 1.2cqw;
    position: absolute; z-index: 2; top: 26.5%; left: 11.5%; right: 27.5%; bottom: 21.3%;
    border: 2px solid #B8C3FF;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, .55);
    background:
        linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .3) 0 calc(33.33% + .5px), transparent 0 calc(66.67% - .5px), rgba(255, 255, 255, .3) 0 calc(66.67% + .5px), transparent 0),
        linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .3) 0 calc(33.33% + .5px), transparent 0 calc(66.67% - .5px), rgba(255, 255, 255, .3) 0 calc(66.67% + .5px), transparent 0);
    pointer-events: none;
}
.crop .hd { position: absolute; width: var(--hs); height: var(--hs); border: var(--hw) solid #D8B9FF; }
.crop .tl { top: calc(var(--hw) * -.8); left: calc(var(--hw) * -.8); border-right: 0; border-bottom: 0; border-top-left-radius: var(--hw); }
.crop .tr { top: calc(var(--hw) * -.8); right: calc(var(--hw) * -.8); border-left: 0; border-bottom: 0; border-top-right-radius: var(--hw); }
.crop .bl { bottom: calc(var(--hw) * -.8); left: calc(var(--hw) * -.8); border-right: 0; border-top: 0; border-bottom-left-radius: var(--hw); }
.crop .br { bottom: calc(var(--hw) * -.8); right: calc(var(--hw) * -.8); border-left: 0; border-top: 0; border-bottom-right-radius: var(--hw); }

/* AI detection dot */
.det {
    --dot: 6.4cqw;
    position: absolute; z-index: 3;
    width: var(--dot); height: var(--dot); margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
    border-radius: 50%; background: rgba(255, 255, 255, .85);
    border: calc(var(--dot) * .11) solid #11131C;
}
.dt-dress { left: 42%; top: 61%; background: #B8C3FF; border-width: calc(var(--dot) * .16); }
.dt-scarf { left: 80%; top: 20%; }
.dt-sneaker { left: 77%; top: 86%; }

/* ─── Splash glow: core static, inner pools 7s clockwise, outer 11s counter ─── */
.glow { position: absolute; left: 50%; top: 50%; z-index: 0; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.glow svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.glow-in { animation: spin 7s linear infinite; }
.glow-out { animation: spin 11s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════
   HERO — photo in, filtered results out (12s)
   ════════════════════════════════════════════════════════════════════════ */
.hero-visual {
    position: relative; width: 100%; max-width: 580px; aspect-ratio: 1 / 1.02; margin-inline: auto;
    container-type: inline-size;
    animation: hv-in 1.2s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes hv-in { from { opacity: 0; transform: translateY(24px); } }
.hero-visual .glow { width: 118cqw; left: 64%; top: 47%; }
.hv-phone { --pw: 52cqw; position: absolute; top: 0; right: 1cqw; }

.hv-photo {
    position: absolute; left: 0; top: 18cqw; z-index: 2;
    width: 43cqw; aspect-ratio: 92 / 134; border-radius: 4.6cqw; overflow: hidden;
    transform: rotate(-6deg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 4cqw 9cqw -2cqw rgba(0, 0, 0, .7);
    animation: hv-float 7s ease-in-out infinite alternate;
}
@keyframes hv-float { from { transform: rotate(-6deg); } to { transform: rotate(-4.5deg) translateY(-1.6cqw); } }
.hv-photo .crop { --hs: 3.2cqw; --hw: .75cqw; }
.hv-photo .det { --dot: 3.4cqw; }

.hv-chips {
    position: absolute; left: 11cqw; bottom: 9cqw; z-index: 3;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.8cqw;
    animation: hv-bob 6s ease-in-out infinite alternate;
}
@keyframes hv-bob { to { transform: translateY(-1.4cqw); } }
.hv-chips .attr-chip { font-size: 2.8cqw; box-shadow: 0 2cqw 5cqw -1cqw rgba(0, 0, 0, .55); }
.hv-chips .attr-chip:nth-child(2) { margin-left: 5cqw; }

/* results screen (shared with s4) */
.res-head { position: absolute; left: 4cqw; right: 4cqw; top: 23.5cqw; height: 11.5cqw; }
.res-banner {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2cqw;
    border-radius: 99px; border: .75cqw solid transparent;
    background: linear-gradient(#1D1F29, #1D1F29) padding-box, linear-gradient(90deg, #2E5BFF, #B8C3FF, #D8B9FF) border-box;
    font-size: 3.2cqw; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.res-banner svg { width: 3.4cqw; height: 3.4cqw; color: #B8C3FF; }
.res-tabs {
    position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr;
    padding: 1.2cqw; border-radius: 99px; background: #1D1F29;
    font-size: 3.1cqw; font-weight: 600;
}
.res-tabs .ind {
    position: absolute; top: 1.2cqw; bottom: 1.2cqw; left: 1.2cqw; width: calc(50% - 1.2cqw);
    border-radius: 99px; background: #33343E; transform: translateX(100%);
}
.res-tabs .tab-a, .res-tabs .tab-b { position: relative; display: grid; place-items: center; white-space: nowrap; }
.res-tabs .tab-a { color: #8E90A2; }
.res-tabs .tab-b { color: #E2E1EF; }
.res-chips {
    position: absolute; left: 4cqw; right: 4cqw; top: 37.5cqw;
    display: flex; align-items: center; gap: 1.6cqw;
    font-size: 2.3cqw; font-weight: 700; letter-spacing: .1em; white-space: nowrap;
}
.res-chips .lbl { color: #8E90A2; }
.res-chips .chip {
    display: inline-flex; align-items: center; gap: 1.2cqw; padding: .9cqw 2.4cqw; border-radius: 99px;
    background: #33343E; border: .25cqw solid rgba(67, 70, 86, .5); color: #C4C5D9;
}
.res-grid { position: absolute; left: 4cqw; right: 4cqw; top: 46cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; }

.pcard { position: relative; aspect-ratio: 3 / 4; border-radius: 5cqw; overflow: hidden; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.pcard .garment { position: absolute; left: 50%; top: 40%; width: 95%; transform: translate(-50%, -50%); }
.pcard::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .87)); }
.pcard .fav {
    position: absolute; z-index: 2; top: 2.4cqw; right: 2.4cqw; width: 8cqw; height: 8cqw;
    display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .15);
}
.pcard .fav svg { grid-area: 1 / 1; width: 4.4cqw; height: 4.4cqw; color: #fff; }
.pcard .fav .h1 { color: #4D9AFF; opacity: 1; }
.pcard .pb { position: absolute; z-index: 2; left: 3cqw; border-radius: 1cqw; }
.pcard .b { bottom: 13cqw; width: 34%; height: 1.6cqw; background: #D8B9FF; }
.pcard .t { bottom: 8.6cqw; width: 72%; height: 2.2cqw; background: rgba(255, 255, 255, .92); }
.pcard .p { bottom: 3.6cqw; width: 40%; height: 2.8cqw; background: #fff; }

.res-glowborder {
    position: absolute; inset: 0; z-index: 20; border-radius: inherit; padding: 1.3cqw;
    background: linear-gradient(135deg, #B8C3FF, #D8B9FF, #B8C3FF);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0; pointer-events: none;
}

/* hero timeline: crop (0–15%) → chips (16–23%) → refining banner → filtered (33%) → tabs → AI Filtered (55–61%) */
.hero-res .b1, .hero-res .b2, .hero-res .raw { opacity: 0; }
.hero-res .res-glowborder { animation: hr-glow 12s linear infinite; }
.hero-res .b1 { animation: hr-b1 12s cubic-bezier(.4, 0, .2, 1) infinite; }
.hero-res .b2 { animation: hr-b2 12s cubic-bezier(.4, 0, .2, 1) infinite; }
.hero-res .res-tabs { animation: hr-tabs 12s linear infinite; }
.hero-res .ind { animation: hr-ind 12s cubic-bezier(.4, 0, .2, 1) infinite; }
.hero-res .tab-a { animation: hr-ta 12s linear infinite; }
.hero-res .tab-b { animation: hr-tb 12s linear infinite; }
.hero-res .raw { animation: hr-raw 12s linear infinite; }
.hero-res .filtered { animation: hr-fil 12s cubic-bezier(.4, 0, .2, 1) infinite; }
.hero-res .faved { animation: hr-pulse 12s cubic-bezier(.4, 0, .2, 1) infinite; }
.hero-res .faved .h1 { animation: hr-heart 12s linear infinite; }
.hv-crop { animation: hv-crop 12s cubic-bezier(.4, 0, .2, 1) infinite; }
.hv-photo .dt-dress { animation: hv-dot 12s linear infinite; }
.hv-chips .attr-chip:nth-child(1) { animation: hv-chip1 12s cubic-bezier(.4, 0, .2, 1) infinite; }
.hv-chips .attr-chip:nth-child(2) { animation: hv-chip2 12s cubic-bezier(.4, 0, .2, 1) infinite; }

@keyframes hr-glow { 0% { opacity: 1; } 6% { opacity: .4; } 12% { opacity: 1; } 18% { opacity: .4; } 24% { opacity: 1; } 30% { opacity: .5; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hr-b1 { 0%, 30% { opacity: 1; transform: none; } 33% { opacity: 0; transform: translateY(-2.5cqw); } 94% { opacity: 0; transform: translateY(2.5cqw); } 100% { opacity: 1; transform: none; } }
@keyframes hr-b2 { 0%, 30% { opacity: 0; transform: translateY(2.5cqw); } 33%, 45% { opacity: 1; transform: none; } 49%, 100% { opacity: 0; transform: none; } }
@keyframes hr-tabs { 0%, 47% { opacity: 0; } 51%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hr-ind { 0%, 55% { transform: none; } 60%, 96% { transform: translateX(100%); } 100% { transform: none; } }
@keyframes hr-ta { 0%, 55% { color: #E2E1EF; } 60%, 96% { color: #8E90A2; } 100% { color: #E2E1EF; } }
@keyframes hr-tb { 0%, 55% { color: #8E90A2; } 60%, 96% { color: #E2E1EF; } 100% { color: #8E90A2; } }
@keyframes hr-raw { 0%, 56% { opacity: 1; } 61%, 93% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes hr-fil { 0%, 56% { opacity: 0; transform: scale(.97); } 61%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hr-pulse { 0%, 72% { transform: scale(1); } 74% { transform: scale(1.3); } 77%, 100% { transform: scale(1); } }
@keyframes hr-heart { 0%, 72% { opacity: 0; } 73.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hv-crop {
    0%, 7% { top: 10%; left: 10%; right: 10%; bottom: 10%; }
    15%, 93% { top: 26.5%; left: 11.5%; right: 27.5%; bottom: 21.3%; }
    99%, 100% { top: 10%; left: 10%; right: 10%; bottom: 10%; }
}
@keyframes hv-dot {
    0%, 5% { background: rgba(255, 255, 255, .85); border-width: calc(var(--dot) * .11); transform: scale(1); }
    6.5% { transform: scale(1.3); }
    8%, 93% { background: #B8C3FF; border-width: calc(var(--dot) * .16); transform: scale(1); }
    97%, 100% { background: rgba(255, 255, 255, .85); border-width: calc(var(--dot) * .11); transform: scale(1); }
}
@keyframes hv-chip1 { 0%, 16% { opacity: 0; transform: translateX(3cqw); } 20%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes hv-chip2 { 0%, 19% { opacity: 0; transform: translateX(3cqw); } 23%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

/* ════════════════════════════════════════════════════════════════════════
   STEP 1 — shared post link → share sheet → loading → crop, then source sheet → gallery pick (15s)
   ════════════════════════════════════════════════════════════════════════ */
.home-bar { gap: 1.4cqw; }
.home-bar .wordmark { font-size: 5.4cqw; margin-right: auto; }
.home-bar .ib { display: grid; place-items: center; width: 8.6cqw; height: 8.6cqw; color: #B8C3FF; }
.home-bar .ib svg { width: 5.6cqw; height: 5.6cqw; }

.hero-card {
    position: absolute; left: 4cqw; right: 4cqw; top: 24cqw;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 5cqw 5cqw 5.5cqw; border-radius: 8cqw; background: #1D1F29;
}
.cam-anim { width: 17cqw; height: 17cqw; overflow: visible; }
.hc-title { margin-top: 1.4cqw; font-size: 7.4cqw; font-weight: 400; letter-spacing: -.01em; }
.hc-sub { margin-top: 1.6cqw; max-width: 62cqw; font-size: 3cqw; line-height: 1.55; color: #C4C5D9; }
.hc-btn {
    display: inline-flex; align-items: center; gap: 1.6cqw; margin-top: 4cqw;
    padding: 2.6cqw 4.6cqw; border-radius: 99px; background: #33343E;
    font-size: 3cqw; font-weight: 600;
}
.hc-btn svg { width: 3.2cqw; height: 3.2cqw; }
.hist-head {
    position: absolute; left: 5cqw; right: 5cqw; top: 91cqw;
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 4.2cqw; font-weight: 700;
}
.hist-head small { font-size: 2.3cqw; font-weight: 700; letter-spacing: .12em; color: #B8C3FF; }
.hist { position: absolute; left: 4cqw; right: 4cqw; top: 100cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5cqw; }
.hist-card { display: flex; flex-direction: column; gap: 1.8cqw; padding: 2.4cqw; border-radius: 6cqw; background: #1D1F29; }
.hist-card .thumb { display: grid; place-items: center; aspect-ratio: 1; border-radius: 4cqw; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.hist-card .thumb .garment { width: 70%; }
.hist-card .m-bar { height: 2.2cqw; }

/* ScanCameraAnimation: 3.6s shutter clock, 4.4s float, 2.9s breath */
.ca-float { animation: ca-float 2.2s ease-in-out infinite alternate; }
.ca-tilt { transform-origin: 50px 50px; animation: ca-tilt 3.6s cubic-bezier(.4, 0, .2, 1) infinite; }
.ca-lens { transform-origin: 50px 56.5px; animation: ca-breath 1.45s ease-in-out infinite alternate; }
.ca-iris { transform-origin: 50px 56.5px; animation: ca-wink 3.6s cubic-bezier(.4, 0, .2, 1) infinite; }
.ca-flash { opacity: 0; animation: ca-flash 3.6s linear infinite; }
.ca-glint { opacity: 0; transform-origin: 50px 56.5px; animation: ca-glint-move 3.6s cubic-bezier(.4, 0, .2, 1) infinite, ca-glint-fade 3.6s linear infinite; }
.ca-sp1, .ca-sp2 { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ca-sp1 { animation: ca-sp1 3.6s linear infinite; }
.ca-sp2 { animation: ca-sp2 3.6s linear infinite; }
@keyframes ca-float { from { transform: translateY(.9px); } to { transform: translateY(-.9px); } }
@keyframes ca-tilt { 0%, 50% { transform: rotate(0); } 60% { transform: rotate(-4deg); } 71% { transform: rotate(1.3deg); } 82%, 100% { transform: rotate(0); } }
@keyframes ca-breath { to { transform: scale(1.04); } }
@keyframes ca-wink { 0%, 53% { transform: scaleY(1); } 59% { transform: scaleY(.07); } 67% { transform: scaleY(1.07); } 75%, 100% { transform: scaleY(1); } }
@keyframes ca-flash { 0%, 45% { opacity: 0; } 51%, 57% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes ca-glint-move { 0%, 59% { transform: translateX(-15px) rotate(22deg); } 79%, 100% { transform: translateX(15px) rotate(22deg); } }
@keyframes ca-glint-fade { 0%, 59% { opacity: 0; } 65%, 72% { opacity: .75; } 79%, 100% { opacity: 0; } }
@keyframes ca-sp1 { 0%, 60% { opacity: 0; transform: scale(.35); } 68%, 84% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.75); } }
@keyframes ca-sp2 { 0%, 67% { opacity: 0; transform: scale(.3); } 75%, 89% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(.75); } }

/* scenes — one 15s clock: post → share sheet (0–44) → loading (44–52) → crop (52–68) → source sheet (68–79) → gallery (79–100) */
.s1 .scene { opacity: 0; animation: 15s linear infinite; }
.s1 .s1-a { opacity: 1; animation-name: s1-a; background: #14151E; }
.s1 .s1-l { animation-name: s1-l; }
.s1 .s1-k { animation-name: s1-k; background: #11131C; }
.s1 .s1-c { animation-name: s1-c; }
.s1 .s1-d { animation-name: s1-d; background: #11131C; }
@keyframes s1-a { 0% { opacity: 0; } 2%, 43% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes s1-l { 0%, 43% { opacity: 0; } 46%, 51% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes s1-k { 0%, 51% { opacity: 0; } 54%, 67% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes s1-c { 0%, 67% { opacity: 0; } 70%, 78% { opacity: 1; } 81%, 100% { opacity: 0; } }
@keyframes s1-d { 0%, 78% { opacity: 0; } 81%, 97% { opacity: 1; } 100% { opacity: 0; } }

.backdrop { position: absolute; inset: 0; background: rgba(5, 6, 12, .55); }
.sheet {
    position: absolute; left: 0; right: 0; top: 98cqw; bottom: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 3cqw 5cqw 0; border-radius: 7cqw 7cqw 0 0; background: #1D1F29;
}
.grab { width: 10cqw; height: 1.3cqw; border-radius: 99px; background: rgba(226, 225, 239, .25); }

/* a post in another app (Instagram · TikTok · X · Pinterest), then its share sheet */
.post-head { position: absolute; left: 5cqw; right: 5cqw; top: 14cqw; display: flex; align-items: center; gap: 3cqw; }
.post-head .avatar { flex: none; width: 8cqw; height: 8cqw; border-radius: 50%; background: linear-gradient(135deg, #B8C3FF, #D8B9FF); }
.src {
    margin-left: auto; height: 5.4cqw; overflow: hidden; padding: 0 3cqw; border-radius: 99px;
    background: rgba(226, 225, 239, .1); font-size: 3cqw; font-weight: 700; line-height: 5.4cqw; text-align: center; color: #E2E1EF;
}
.src-c { display: block; transform: translateY(-16.2cqw); animation: s1-src 15s cubic-bezier(.4, 0, .2, 1) infinite; }
.src-c b { display: block; height: 5.4cqw; font-weight: inherit; }
@keyframes s1-src {
    0%, 7% { transform: none; }
    9%, 15% { transform: translateY(-5.4cqw); }
    17%, 23% { transform: translateY(-10.8cqw); }
    25%, 100% { transform: translateY(-16.2cqw); }
}
.post-photo { position: absolute; left: 4cqw; top: 26cqw; width: 92cqw; height: 112cqw; overflow: hidden; border-radius: 5cqw; background: linear-gradient(135deg, var(--p1), var(--p2)); }
.post-photo .garment { position: absolute; left: 50%; top: 47%; width: 96%; transform: translate(-50%, -50%); }
.post-acts { position: absolute; left: 5cqw; top: 143cqw; display: flex; gap: 4cqw; color: #E2E1EF; }
.post-acts svg { width: 7cqw; height: 7cqw; }
.post-cap { position: absolute; left: 5cqw; top: 157cqw; display: flex; flex-direction: column; gap: 2.4cqw; }

.s1-a .backdrop, .s1-a .sheet { opacity: 0; }
.s1-a .backdrop { animation: s1-bd 15s linear infinite; }
.s1-a .sheet { top: 108cqw; align-items: stretch; animation: s1-sheet-a 15s cubic-bezier(.4, 0, .2, 1) infinite; }
.s1-a .grab { align-self: center; }
@keyframes s1-bd { 0%, 25.5% { opacity: 0; } 29%, 100% { opacity: 1; } }
@keyframes s1-sheet-a { 0%, 25.4% { opacity: 0; transform: translateY(80cqw); } 25.5% { opacity: 1; transform: translateY(80cqw); } 29%, 100% { opacity: 1; transform: none; } }
.lk { display: flex; align-items: center; gap: 3cqw; margin-top: 4cqw; padding: 2.5cqw; border-radius: 4cqw; background: #282933; }
.lk-th { flex: none; width: 10cqw; height: 10cqw; border-radius: 2.4cqw; background: linear-gradient(135deg, #423552, #5D4A73); }
.lk-t { display: flex; flex-direction: column; gap: 1.6cqw; }
.lk-t b { font-size: 3cqw; font-weight: 700; }
.lk-t .m-bar { width: 34cqw; }
.apps { display: flex; justify-content: space-between; margin-top: 5cqw; }
.app { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; width: 18cqw; padding-bottom: 1cqw; border: .45cqw solid transparent; border-radius: 4.4cqw; }
.app i { display: grid; place-items: center; width: 15cqw; height: 15cqw; border-radius: 3.6cqw; background: #33343E; }
.app i img { width: 66%; height: 66%; object-fit: contain; }
.app.sl i { background: #11131C; }
.app .m-bar { width: 11cqw; height: 2cqw; }
.app small { font-size: 2.6cqw; font-weight: 700; line-height: 2cqw; }
.sh-list { display: flex; flex-direction: column; gap: 5cqw; margin-top: 6cqw; padding: 0 2cqw; }
.s1-a .app.sl { animation: s1-press-sl 15s linear infinite; }
@keyframes s1-press-sl { 0%, 37% { transform: scale(1); border-color: transparent; } 38.5% { transform: scale(.94); border-color: #B8C3FF; } 42%, 100% { transform: scale(1); border-color: transparent; } }
.s1-a .hand { animation: s1-hand-a 15s linear infinite; }
@keyframes s1-hand-a {
    0%, 19% { left: 19.5cqw; top: 148cqw; opacity: 0; transform: translate(-37%, -7%) scale(1.12); }
    22%, 23% { left: 19.5cqw; top: 148cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    24.5% { left: 19.5cqw; top: 148cqw; opacity: 1; transform: translate(-37%, -7%) scale(.88); }
    27% { left: 19.5cqw; top: 148cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    28.5% { left: 19.5cqw; top: 148cqw; opacity: 0; transform: translate(-37%, -7%) scale(1); }
    28.6%, 33% { left: 62cqw; top: 144.5cqw; opacity: 0; transform: translate(-37%, -7%) scale(1.12); }
    36%, 37% { left: 62cqw; top: 144.5cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    38.5% { left: 62cqw; top: 144.5cqw; opacity: 1; transform: translate(-37%, -7%) scale(.88); }
    41%, 44% { left: 62cqw; top: 144.5cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    46%, 100% { left: 62cqw; top: 144.5cqw; opacity: 0; transform: translate(-37%, -7%) scale(1); }
}

/* StyLens opens on the shared link: loading overlay over home */
.s1-l .backdrop { background: rgba(5, 6, 12, .72); }
.ld-spin {
    position: absolute; left: 50%; top: 80cqw; width: 11cqw; height: 11cqw; margin-left: -5.5cqw;
    border-radius: 50%; border: 1cqw solid rgba(184, 195, 255, .25); border-top-color: #B8C3FF;
    animation: spin .8s linear infinite;
}
.ld-chip {
    position: absolute; left: 50%; top: 98cqw; transform: translateX(-50%);
    display: flex; align-items: center; gap: 2cqw; padding: 2cqw 4cqw; border-radius: 99px;
    background: #282933; font-size: 3cqw; font-weight: 600; color: #C4C5D9; white-space: nowrap;
}
.ld-chip i { width: 2cqw; height: 2cqw; border-radius: 50%; background: linear-gradient(135deg, #B8C3FF, #D8B9FF); }

/* crop screen opens with the post's image (same layout as step 2) */
.s1-crop { animation: s1-crop 15s ease-in-out infinite; }
@keyframes s1-crop {
    0%, 54.5% { top: 10%; left: 10%; right: 10%; bottom: 10%; }
    60%, 100% { top: 26.5%; left: 11.5%; right: 27.5%; bottom: 21.3%; }
}
.s1-k .s1-dot { animation: s1-dot 15s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes s1-dot { 0%, 59.5% { transform: scale(0); } 63%, 100% { transform: scale(1); } }
.s1-k .s2-confirm { animation: none; }

/* source sheet → gallery */
.s1-c .sheet { animation: s1-sheet-c 15s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes s1-sheet-c { 0%, 67% { transform: translateY(40cqw); } 71.5%, 100% { transform: none; } }
.sh-title { margin-top: 4cqw; font-size: 4.6cqw; font-weight: 800; letter-spacing: -.01em; }
.sh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5cqw; width: 100%; margin-top: 5cqw; }
.sh-card {
    display: flex; flex-direction: column; align-items: center; gap: 1.2cqw;
    padding: 5cqw 2cqw 4.5cqw; border-radius: 6cqw; background: #282933;
    border: .45cqw solid transparent; text-align: center;
}
.sh-card .disc { display: grid; place-items: center; width: 14cqw; height: 14cqw; margin-bottom: 1.6cqw; border-radius: 50%; }
.sh-card .disc svg { width: 7cqw; height: 7cqw; }
.sh-card.cam .disc { background: rgba(184, 195, 255, .18); color: #B8C3FF; }
.sh-card.gal .disc { background: rgba(216, 185, 255, .15); color: #D8B9FF; }
.sh-card b { font-size: 3.1cqw; font-weight: 700; white-space: nowrap; }
.sh-card small { font-size: 2.4cqw; color: #8E90A2; white-space: nowrap; }
.sh-cancel { margin-top: 5cqw; font-size: 3cqw; font-weight: 700; color: #8E90A2; }
.s1-c .sh-card.gal { animation: s1-press-c 15s linear infinite; }
@keyframes s1-press-c { 0%, 74.5% { transform: scale(1); border-color: transparent; } 75.5% { transform: scale(.94); border-color: #D8B9FF; } 78.5%, 100% { transform: scale(1); border-color: transparent; } }
.s1-c .hand { left: 73.4cqw; top: 133cqw; animation: s1-hand-c 15s linear infinite; }
@keyframes s1-hand-c {
    0%, 70% { opacity: 0; transform: translate(-37%, -7%) scale(1.12); }
    73%, 74% { opacity: 1; transform: translate(-37%, -7%) scale(1); }
    75.5% { opacity: 1; transform: translate(-37%, -7%) scale(.88); }
    78.5%, 100% { opacity: 1; transform: translate(-37%, -7%) scale(1); }
}

/* gallery grid */
.gal-grid {
    position: absolute; left: 4cqw; right: 4cqw; top: 24cqw; height: 160cqw;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 3cqw;
    animation: s1-cells 15s linear infinite;
}
@keyframes s1-cells { 0%, 80% { opacity: 0; } 84%, 100% { opacity: 1; } }
.cell {
    position: relative; display: grid; place-items: center;
    border-radius: 4cqw; border: .6cqw solid transparent;
    background: linear-gradient(135deg, var(--g1), var(--g2));
}
.cell .garment { width: 66%; }
.cell:not(.sel) { animation: s1-dim 15s linear infinite; }
.cell.sel { animation: s1-sel 15s linear infinite; }
@keyframes s1-dim { 0%, 89.5% { opacity: 1; transform: scale(1); } 92.5%, 100% { opacity: .35; transform: scale(.97); } }
@keyframes s1-sel { 0%, 89.5% { transform: scale(1); border-color: transparent; } 92.5%, 100% { transform: scale(1.06); border-color: #4D9AFF; } }
.cell .check {
    position: absolute; top: 2cqw; right: 2cqw; display: grid; place-items: center;
    width: 7cqw; height: 7cqw; border-radius: 50%;
    background: linear-gradient(135deg, #4D9AFF, #8C5CFF);
    animation: s1-check 15s linear infinite;
}
.cell .check svg { width: 4.4cqw; height: 4.4cqw; color: #fff; }
@keyframes s1-check { 0%, 89.5% { opacity: 0; transform: scale(.3); } 92.5%, 100% { opacity: 1; transform: scale(1); } }
.s1-d .hand { left: 73.75cqw; top: 100cqw; animation: s1-hand-d 15s linear infinite; }
@keyframes s1-hand-d {
    0%, 85% { opacity: 0; transform: translate(-37%, -7%) scale(1.12); }
    87.5%, 88.5% { opacity: 1; transform: translate(-37%, -7%) scale(1); }
    90% { opacity: 1; transform: translate(-37%, -7%) scale(.88); }
    92.5%, 100% { opacity: 1; transform: translate(-37%, -7%) scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 2 — AI detection, drag a corner, tap the dress, confirm (7.6s)
   ════════════════════════════════════════════════════════════════════════ */
.s2-root { position: absolute; inset: 0; animation: s2-root 7.6s linear infinite; }
@keyframes s2-root { 0% { opacity: 0; } 3%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
.s2-sub { position: absolute; left: 8cqw; right: 8cqw; top: 12cqw; font-size: 3.1cqw; line-height: 1.4; color: #C4C5D9; text-align: center; }
.cropbox { position: absolute; left: 4cqw; top: 23cqw; width: 92cqw; aspect-ratio: 92 / 134; overflow: hidden; border-radius: 8cqw; background: #0C0E17; }
.s2-confirm {
    position: absolute; left: 12cqw; right: 12cqw; top: 161cqw; height: 12cqw;
    display: grid; place-items: center; border-radius: 99px;
    background: linear-gradient(135deg, #2E5BFF, #B8C3FF 50%, #D8B9FF);
    font-size: 3.6cqw; font-weight: 800; letter-spacing: .14em; color: #EFEFFF;
    text-shadow: 0 1px 6px rgba(17, 19, 28, .35);
    animation: s2-confirm 7.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.s2-cancel { position: absolute; left: 0; right: 0; top: 177cqw; text-align: center; font-size: 2.6cqw; font-weight: 700; letter-spacing: .12em; color: #8E90A2; }
@keyframes s2-confirm { 0%, 78.3% { transform: scale(1); filter: none; } 80.3% { transform: scale(.96); filter: brightness(1.2); } 82.9%, 100% { transform: scale(1); filter: none; } }

.seg { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(0, 0, 0, .4); opacity: 0; animation: s2-seg 7.6s linear infinite; }
.seg i { width: 9cqw; height: 9cqw; border-radius: 50%; border: .9cqw solid rgba(184, 195, 255, .25); border-top-color: #B8C3FF; animation: spin .8s linear infinite; }
@keyframes s2-seg { 0%, 17% { opacity: 1; } 21%, 100% { opacity: 0; } }

.s2-crop { animation: s2-crop 7.6s infinite; }
@keyframes s2-crop {
    0%, 37.5% { top: 10%; left: 10%; right: 10%; bottom: 10%; animation-timing-function: ease-in-out; }
    48.7%, 61.8% { top: 24%; left: 19%; right: 10%; bottom: 10%; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
    69.7%, 100% { top: 26.5%; left: 11.5%; right: 27.5%; bottom: 21.3%; }
}
.s2 .s2-dot { animation: s2-pop1 7.6s cubic-bezier(.34, 1.56, .64, 1) infinite, s2-pick 7.6s linear infinite; }
.s2 .s2-dot2 { animation: s2-pop2 7.6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.s2 .s2-dot3 { animation: s2-pop3 7.6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes s2-pop1 { 0%, 21% { transform: scale(0); } 25.7%, 100% { transform: scale(1); } }
@keyframes s2-pop2 { 0%, 23.7% { transform: scale(0); } 28.3%, 100% { transform: scale(1); } }
@keyframes s2-pop3 { 0%, 26.3% { transform: scale(0); } 30.9%, 100% { transform: scale(1); } }
@keyframes s2-pick {
    0%, 61.8% { background: rgba(255, 255, 255, .85); border-width: calc(var(--dot) * .11); }
    63.8%, 100% { background: #B8C3FF; border-width: calc(var(--dot) * .16); }
}

.s2 .hand { animation: s2-hand 7.6s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes s2-hand {
    0%, 31.6% { left: 13.2cqw; top: 36.4cqw; opacity: 0; transform: translate(-37%, -7%) scale(1.12); }
    35.5% { left: 13.2cqw; top: 36.4cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    37.5% { left: 13.2cqw; top: 36.4cqw; opacity: 1; transform: translate(-37%, -7%) scale(.88); animation-timing-function: ease-in-out; }
    48.7% { left: 21.5cqw; top: 55.2cqw; opacity: 1; transform: translate(-37%, -7%) scale(.88); }
    50.7%, 52.6% { left: 21.5cqw; top: 55.2cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    59.2%, 59.9% { left: 42.6cqw; top: 96.7cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    61.8% { left: 42.6cqw; top: 96.7cqw; opacity: 1; transform: translate(-37%, -7%) scale(.88); }
    64.5%, 72.4% { left: 42.6cqw; top: 96.7cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    77.6%, 78.3% { left: 50cqw; top: 167cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    80.3% { left: 50cqw; top: 167cqw; opacity: 1; transform: translate(-37%, -7%) scale(.88); }
    82.2% { left: 50cqw; top: 167cqw; opacity: 1; transform: translate(-37%, -7%) scale(.95); }
    85.5%, 100% { left: 50cqw; top: 167cqw; opacity: 0; transform: translate(-37%, -7%) scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 3 — AI analyzing: scan band, real status copy, attribute chips (9s)
   ════════════════════════════════════════════════════════════════════════ */
.s3-title { position: relative; flex: 1; height: 5cqw; font-size: 3.3cqw; font-weight: 800; letter-spacing: .1em; }
.s3-title span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.s3-title .t2 { opacity: 0; }
.s3-title .t1 { animation: s3-t1 9s linear infinite; }
.s3-title .t2 { animation: s3-t2 9s linear infinite; }
@keyframes s3-t1 { 0%, 49% { opacity: 1; } 51%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes s3-t2 { 0%, 49% { opacity: 0; } 51%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }

.s3-box { position: absolute; left: 4cqw; right: 4cqw; top: 24cqw; height: 126cqw; overflow: hidden; border-radius: 8cqw; background: #191B24; }
.s3-dress { position: absolute; left: 50%; top: 52%; width: 88%; transform: translate(-50%, -50%); color: rgba(216, 200, 255, .95); }
.s3-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.s3-scan {
    position: absolute; left: 0; right: 0; top: 0; height: 12%; opacity: .9;
    background: linear-gradient(180deg, transparent, rgba(184, 195, 255, .05) 14%, rgba(184, 195, 255, .1) 29%, #B8C3FF 43%, #D8B9FF 57%, rgba(216, 185, 255, .1) 71%, rgba(216, 185, 255, .05) 86%, transparent);
    animation: s3-scan 1.5s linear infinite alternate;
}
@keyframes s3-scan { to { transform: translateY(733%); } }
.s3-box .vf { inset: 5cqw; }
.s3-box .vf i { width: 7cqw; height: 7cqw; border-color: rgba(255, 255, 255, .4); }

.s3-chips { position: absolute; top: 5cqw; right: 5cqw; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 2cqw; }
.s3-chips .attr-chip { font-size: 3cqw; }
.s3-chips .attr-chip:nth-child(1) { animation: s3-chip1 9s cubic-bezier(.4, 0, .2, 1) infinite; }
.s3-chips .attr-chip:nth-child(2) { animation: s3-chip2 9s cubic-bezier(.4, 0, .2, 1) infinite; }
.s3-chips .attr-chip:nth-child(3) { animation: s3-chip3 9s cubic-bezier(.4, 0, .2, 1) infinite; }
.s3-chips .attr-chip:nth-child(4) { animation: s3-chip4 9s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes s3-chip1 { 0%, 51% { opacity: 0; transform: translateX(5cqw); } 54.4%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes s3-chip2 { 0%, 54.4% { opacity: 0; transform: translateX(5cqw); } 57.8%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes s3-chip3 { 0%, 57.8% { opacity: 0; transform: translateX(5cqw); } 61.2%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes s3-chip4 { 0%, 61.2% { opacity: 0; transform: translateX(5cqw); } 64.6%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }

.s3-msgs { position: absolute; left: 7%; right: 7%; top: 62%; height: 20%; z-index: 2; }
.s3-msgs span {
    position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
    font-size: 4.6cqw; font-weight: 700; line-height: 1.3; color: rgba(255, 255, 255, .75);
    opacity: 0; animation: s3-msg 9s linear infinite both;
}
.s3-msgs span:first-child { opacity: 1; }
.s3-msgs span:nth-child(2) { animation-delay: 1.5s; }
.s3-msgs span:nth-child(3) { animation-delay: 3s; }
.s3-msgs span:nth-child(4) { animation-delay: 4.5s; }
.s3-msgs span:nth-child(5) { animation-delay: 6s; }
.s3-msgs span:nth-child(6) { animation-delay: 7.5s; }
@keyframes s3-msg { 0% { opacity: 0; transform: translateY(1.6cqw); } 3%, 14% { opacity: 1; transform: none; } 16.67%, 100% { opacity: 0; transform: translateY(-1.6cqw); } }

.s3-note {
    position: absolute; left: 4cqw; right: 4cqw; top: 153cqw;
    display: flex; align-items: center; gap: 3cqw; padding: 3.4cqw 3.6cqw;
    border-radius: 7cqw; background: #1D1F29;
    animation: s3-note 9s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes s3-note { 0%, 6% { opacity: 0; transform: translateY(2cqw); } 12%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.s3-note .bell { display: grid; place-items: center; flex: none; width: 10cqw; height: 10cqw; border-radius: 50%; background: rgba(184, 195, 255, .2); color: #B8C3FF; }
.s3-note .bell svg { width: 5.2cqw; height: 5.2cqw; }
.s3-note-txt { display: flex; flex-direction: column; gap: .6cqw; min-width: 0; }
.s3-note-txt b { font-size: 3cqw; font-weight: 600; font-style: italic; color: #B8C3FF; }
.s3-note-txt small { font-size: 2.4cqw; line-height: 1.4; color: #C4C5D9; }

/* ════════════════════════════════════════════════════════════════════════
   STEP 4 — favourite, open the product, store page, add to cart (9s)
   ════════════════════════════════════════════════════════════════════════ */
.s4-pick { animation: s4-card 9s cubic-bezier(.4, 0, .2, 1) infinite; }
.s4-pick .fav { animation: s4-fav 9s cubic-bezier(.4, 0, .2, 1) infinite; }
.s4-pick .fav .h1 { animation: s4-heart 9s linear infinite; }
@keyframes s4-card { 0%, 25.6% { transform: scale(1); } 27.2% { transform: scale(.96); } 29.4%, 100% { transform: scale(1); } }
@keyframes s4-fav { 0%, 12.8% { transform: scale(1); } 15% { transform: scale(1.3); } 18.3%, 100% { transform: scale(1); } }
@keyframes s4-heart { 0%, 12.8% { opacity: 0; } 13.9%, 88% { opacity: 1; } 89%, 100% { opacity: 0; } }

.store { position: absolute; left: 0; right: 0; top: 11cqw; bottom: 0; z-index: 10; background: #F5F4F7; color: #1B1B1F; opacity: 0; animation: s4-store 9s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes s4-store { 0%, 28.9% { opacity: 0; transform: translateX(6cqw); } 33.3%, 89% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
.st-bar { position: absolute; left: 4cqw; right: 4cqw; top: 0; height: 11cqw; display: flex; align-items: center; gap: 3cqw; }
.st-bar svg { width: 5cqw; height: 5cqw; color: #1B1B1F; }
.st-bar span { width: 48cqw; height: 2.6cqw; border-radius: 1.3cqw; background: rgba(27, 27, 31, .35); }
.st-load { position: absolute; left: 0; top: 11cqw; width: 100%; height: .8cqw; background: #2E5BFF; transform-origin: left; transform: scaleX(0); animation: s4-load 9s linear infinite; }
@keyframes s4-load { 0%, 31.1% { transform: scaleX(0); opacity: 1; } 40% { transform: scaleX(1); opacity: 1; } 42.2%, 100% { transform: scaleX(1); opacity: 0; } }
.st-body { position: absolute; left: 4cqw; right: 4cqw; top: 14cqw; bottom: 0; animation: s4-body 9s linear infinite; }
@keyframes s4-body { 0%, 33.3% { opacity: 0; } 37.8%, 100% { opacity: 1; } }
.st-photo { position: absolute; left: 0; right: 0; top: 0; height: 76cqw; display: grid; place-items: center; border-radius: 4cqw; background: #E8E4EF; }
.st-photo .garment { width: 72cqw; color: #B6A3DA; }
.st-dots { position: absolute; top: 79cqw; left: 50%; display: flex; gap: 1.4cqw; transform: translateX(-50%); }
.st-dots i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: rgba(27, 27, 31, .2); }
.st-dots i:first-child { background: #1B1B1F; }
.st-line { position: absolute; left: 0; border-radius: 1cqw; }
.st-brand { top: 85cqw; width: 26%; height: 2.4cqw; background: rgba(27, 27, 31, .4); }
.st-name { top: 90.5cqw; width: 74%; height: 3.2cqw; background: rgba(27, 27, 31, .75); }
.st-price { top: 97cqw; width: 32%; height: 4.2cqw; background: #1B1B1F; }
.st-sizes { position: absolute; top: 105cqw; left: 0; display: flex; gap: 2.4cqw; }
.st-sizes i { width: 9cqw; height: 9cqw; border-radius: 2.4cqw; border: .45cqw solid rgba(27, 27, 31, .25); }
.st-sizes i.on { background: #1B1B1F; border-color: #1B1B1F; }
.st-cart { position: absolute; left: 0; right: 0; top: 120cqw; height: 13cqw; display: grid; place-items: center; border-radius: 99px; background: #1B1B1F; animation: s4-press 9s cubic-bezier(.4, 0, .2, 1) infinite; }
.st-cart svg { grid-area: 1 / 1; width: 5.4cqw; height: 5.4cqw; }
.st-cart .c1 { color: #fff; animation: s4-c1 9s linear infinite; }
.st-cart .c2 { color: #7CE0A0; opacity: 0; animation: s4-c2 9s linear infinite; }
@keyframes s4-press { 0%, 51.1% { transform: scale(1); } 52.8% { transform: scale(.96); } 55%, 100% { transform: scale(1); } }
@keyframes s4-c1 { 0%, 52.8% { opacity: 1; } 54.4%, 100% { opacity: 0; } }
@keyframes s4-c2 { 0%, 52.8% { opacity: 0; } 54.4%, 100% { opacity: 1; } }

.s4 .hand { animation: s4-hand 9s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes s4-hand {
    0%, 6.7% { left: 41.6cqw; top: 115.2cqw; opacity: 0; transform: translate(-37%, -7%) scale(1.12); }
    10%, 11.1% { left: 41.6cqw; top: 115.2cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    12.8% { left: 41.6cqw; top: 115.2cqw; opacity: 1; transform: translate(-37%, -7%) scale(.88); }
    15%, 20% { left: 41.6cqw; top: 115.2cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    24.4%, 25.6% { left: 26cqw; top: 140cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    27.2% { left: 26cqw; top: 140cqw; opacity: 1; transform: translate(-37%, -7%) scale(.88); }
    29.4% { left: 26cqw; top: 140cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    32.2% { left: 26cqw; top: 140cqw; opacity: 0; transform: translate(-37%, -7%) scale(1); }
    46.7% { left: 50cqw; top: 150cqw; opacity: 0; transform: translate(-37%, -7%) scale(1.12); }
    50%, 51.1% { left: 50cqw; top: 150cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    52.8% { left: 50cqw; top: 150cqw; opacity: 1; transform: translate(-37%, -7%) scale(.88); }
    55%, 60% { left: 50cqw; top: 150cqw; opacity: 1; transform: translate(-37%, -7%) scale(1); }
    63.3%, 100% { left: 50cqw; top: 150cqw; opacity: 0; transform: translate(-37%, -7%) scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════
   Shortcut icons (ShortcutAnimation.kt), 100-unit grid
   ════════════════════════════════════════════════════════════════════════ */
.sa-voice rect { transform-box: fill-box; transform-origin: center; animation: sa-bar 1.1s ease-in-out infinite; }
.sa-voice rect:nth-child(2) { animation-delay: -.96s; }
.sa-voice rect:nth-child(3) { animation-delay: -.82s; }
.sa-voice rect:nth-child(4) { animation-delay: -.68s; }
.sa-voice rect:nth-child(5) { animation-delay: -.54s; }
@keyframes sa-bar { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
.sa .sp { transform-box: fill-box; transform-origin: center; animation: sa-spark 2.2s ease-in-out infinite; }
.sa .sp-b { animation-delay: -.86s; }
@keyframes sa-spark { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }

.sa-scan .sl-root { transform-origin: 50px 50px; animation: sa-tap 2.8s linear infinite; }
.sa-scan .sl-glow { opacity: 0; animation: sa-glow 2.8s linear infinite; }
.sa-scan .sl-line { animation: sa-scanmove 2.8s cubic-bezier(.4, 0, .2, 1) infinite, sa-scanfade 2.8s linear infinite; }
@keyframes sa-tap { 0%, 6% { transform: scale(1); } 10% { transform: scale(.965); } 17%, 23% { transform: scale(1); } 27% { transform: scale(.965); } 34%, 100% { transform: scale(1); } }
@keyframes sa-glow { 0%, 6% { opacity: 0; } 10% { opacity: 1; } 17%, 23% { opacity: 0; } 27% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes sa-scanmove { 0%, 34% { transform: translateY(-26px); } 78%, 100% { transform: translateY(26px); } }
@keyframes sa-scanfade { 0%, 34% { opacity: 0; } 40%, 78% { opacity: 1; } 88%, 100% { opacity: 0; } }

.sa-share .ss-sheet { animation: sa-sheet 3s cubic-bezier(.4, 0, .2, 1) infinite; }
.sa-share .ss-tile { animation: sa-tile 3s linear infinite; }
@keyframes sa-sheet { 0% { transform: translateY(44px); } 22%, 66% { transform: none; } 88%, 100% { transform: translateY(44px); } }
@keyframes sa-tile { 0%, 36% { fill: #33343E; } 48%, 62% { fill: #B8C3FF; } 74%, 100% { fill: #33343E; } }

.sa-tile .qt-panel { animation: sa-panel 3.2s cubic-bezier(.4, 0, .2, 1) infinite; }
.sa-tile .qt-handle { animation: sa-handle 3.2s linear infinite; }
.sa-tile .qt-tile { fill: #B8C3FF; animation: sa-lit 3.2s linear infinite; }
.sa-tile .qt-glow { opacity: .35; animation: sa-litglow 3.2s linear infinite; }
@keyframes sa-panel { 0% { transform: translateY(-40px); } 20%, 60% { transform: none; } 84%, 100% { transform: translateY(-40px); } }
@keyframes sa-handle { 0%, 14% { opacity: 0; } 24%, 70% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes sa-lit { 0%, 28% { fill: #33343E; } 40%, 58% { fill: #B8C3FF; } 70%, 100% { fill: #33343E; } }
@keyframes sa-litglow { 0%, 28% { opacity: 0; } 40%, 58% { opacity: .35; } 70%, 100% { opacity: 0; } }

/* shortcut video phone */
.sc-media .phone { --pw: min(280px, 70vw); }
.sc-video { width: 100%; height: 100%; object-fit: cover; background: #0B0D14; }

/* ─── Reward progress ring (5 ads → 1 ticket) ─── */
.ring { position: relative; width: 104px; height: 104px; }
.ring svg { width: 100%; height: 100%; }
.ring-arc {
    transform-origin: 50px 50px; transform: rotate(-90deg);
    stroke-dasharray: 263.9; stroke-dashoffset: 0;
    animation: ring-fill 7s cubic-bezier(.4, 0, .2, 1) infinite, ring-fade 7s linear infinite;
}
@keyframes ring-fill { 0%, 10% { stroke-dashoffset: 263.9; } 14%, 26% { stroke-dashoffset: 211.1; } 30%, 42% { stroke-dashoffset: 158.3; } 46%, 58% { stroke-dashoffset: 105.6; } 62%, 74% { stroke-dashoffset: 52.8; } 78%, 97% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 263.9; } }
@keyframes ring-fade { 0%, 10% { opacity: 0; } 11%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ring-ticket { position: absolute; inset: 0; display: grid; place-items: center; color: #B8C3FF; }
.ring-ticket svg { width: 36px; height: 36px; animation: ring-ticket 7s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes ring-ticket { 0%, 76% { color: #8E90A2; transform: scale(1); } 80% { color: #B8C3FF; transform: scale(1.18); } 84%, 93% { color: #B8C3FF; transform: scale(1); } 97%, 100% { color: #8E90A2; transform: scale(1); } }

/* ─── Final CTA mark ─── */
.cta-mark .glow { width: 330%; }

/* ─── Only animate what is on screen ─── */
.js .anim:not(.is-live),
.js .anim:not(.is-live) * { animation-play-state: paused !important; }

@media (max-width: 960px) {
    .hero-visual { max-width: 460px; }
}

@media (prefers-reduced-motion: reduce) {
    .anim, .anim * { animation: none !important; }
    .s1 .scene:not(.s1-a) { opacity: 0; }
}