/* =====================================================
   GUEST WELCOME + GOCART COMMERCIAL — public/js/guest-promo.js
   The greeting reuses the guided tour card (guided-tour.css);
   everything below is the video player and the 960×540 stage.
   Brand: black, red (#d0001b), white.

   Stage layout grid (keeps every scene tidy):
     top-left  20–260 × 18–56  chapter tag
     top-right 880–960 × 0–70  close button (keep clear)
     bottom    0–960 × 455–540 captions / Skip Intro (keep clear of text)
===================================================== */

/* ------------------------------------------------------------ greeting */
.gp-welcome .bt-card {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.94);
    transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), opacity .2s;
}
.gp-welcome.is-open .bt-card { transform: translate(-50%, -50%) scale(1); }
.gp-welcome .bt-mascot { height: 118px; top: -56px; animation: btBob 2.8s ease-in-out infinite, gpWave 1.2s .4s ease-in-out 2; transform-origin: 50% 90%; }
.gp-welcome .bt-next { display: inline-flex; align-items: center; gap: 6px; }
.gp-welcome .bt-next i { font-size: 11px; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gp-chips span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--bt-line);
    color: var(--bt-ink);
    font-size: 12px;
    font-weight: 700;
}
.gp-chips i { color: var(--bt-accent); font-size: 11px; }

@keyframes gpWave { 25% { rotate: -8deg; } 75% { rotate: 8deg; } }

body.gp-locked { overflow: hidden; }

/* ------------------------------------------------------------ player */
.gp-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: grid;
    place-items: center;
    padding: 16px;
    background: radial-gradient(ellipse at 50% 40%, rgba(60, 0, 8, .92), rgba(4, 2, 3, .96));
    opacity: 0;
    transition: opacity .3s ease;
}
.gp-modal.is-open { opacity: 1; }

.gp-frame {
    position: relative;
    width: min(1100px, 100%, calc((100vh - 100px) * 16 / 9));
    border-radius: 18px;
    overflow: hidden;
    background: #0b0b0b;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 80px rgba(208, 0, 27, .25);
    transform: translateY(14px) scale(.97);
    transition: transform .35s cubic-bezier(.2, 1.2, .4, 1);
}
.gp-modal.is-open .gp-frame { transform: none; }

.gp-frame:fullscreen { width: 100vw; height: 100vh; border-radius: 0; display: flex; flex-direction: column; justify-content: center; background: #000; }
.gp-frame:fullscreen .gp-screen { width: min(100vw, calc((100vh - 64px) * 16 / 9)); margin: 0 auto; }

.gp-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    container-type: inline-size;
}

.gp-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

/* Loading spinner while pictures arrive. */
.gp-modal.is-loading .gp-screen::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .2);
    border-top-color: #d0001b;
    animation: gpSpin .8s linear infinite;
}

/* Segmented chapter progress. */
.gp-bar { display: flex; gap: 3px; padding: 0 12px; background: #0b0b0b; padding-top: 10px; }
.gp-bar span { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.gp-bar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d0001b, #ff4d61); }

.gp-controls { display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px; background: #0b0b0b; }
.gp-ctl {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.gp-ctl:hover { background: #d0001b; }
.gp-ctl:active { transform: scale(.92); }
.gp-time { color: rgba(255, 255, 255, .7); font-size: 12px; font-variant-numeric: tabular-nums; margin-left: 4px; }
.gp-brand { display: flex; align-items: center; gap: 8px; margin: 0 auto; color: #fff; font-weight: 800; letter-spacing: .5px; font-size: 14px; }
.gp-brand img { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); }
.gp-brand small { color: rgba(255, 255, 255, .5); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 1.5px; }

.gp-skip {
    position: absolute;
    right: 2cqw;
    bottom: 3.6cqw;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .7cqw;
    padding: max(7px, .9cqw) max(12px, 1.6cqw);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    color: #fff;
    font-weight: 800;
    font-size: max(12px, 1.35cqw);
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.gp-skip:hover { background: #d0001b; border-color: #d0001b; }
.gp-modal.is-ended .gp-skip { display: none; }

.gp-close {
    position: absolute;
    top: 1.6cqw;
    right: 1.6cqw;
    z-index: 6;
    width: max(32px, 3.6cqw);
    height: max(32px, 3.6cqw);
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: max(20px, 2.2cqw);
    line-height: 1;
    cursor: pointer;
}
.gp-close:hover { background: #d0001b; }
.gp-ctl:focus-visible, .gp-skip:focus-visible, .gp-close:focus-visible,
.gp-end a:focus-visible, .gp-end button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------------ lower-third caption */
.gp-caption {
    position: absolute;
    left: 50%;
    bottom: 3cqw;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    max-width: 66cqw;
    padding: .8cqw 1.8cqw .8cqw .8cqw;
    border-radius: 1.4cqw;
    background: rgba(12, 10, 10, .86);
    box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .35), inset .45cqw 0 0 #d0001b;
    color: #fff;
    transform: translate(-50%, 1.5cqw);
    opacity: 0;
    pointer-events: none;
}
.gp-caption.is-on { animation: gpCapIn .35s cubic-bezier(.2, 1.3, .4, 1) forwards; }
@keyframes gpCapIn { to { opacity: 1; transform: translate(-50%, 0); } }
.gp-cap-avatar {
    flex: none;
    width: max(34px, 4.8cqw);
    height: max(34px, 4.8cqw);
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 .25cqw #d0001b;
}
.gp-cap-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; transform: scale(1.6) translateY(18%); }
.gp-caption[data-who="leo"] .gp-cap-avatar img { object-position: 50% 0; transform: scale(1.5) translateY(14%); }
.gp-caption.is-talking .gp-cap-avatar { animation: gpTalk .5s ease-in-out infinite alternate; }
@keyframes gpTalk { to { box-shadow: 0 0 0 .45cqw rgba(255, 77, 97, .9); } }
.gp-cap-body { min-width: 0; }
.gp-cap-name { display: block; color: #ff4d61; font-size: max(10px, 1.15cqw); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.gp-cap-text { margin: .15cqw 0 0; font-size: max(12px, 1.75cqw); line-height: 1.35; font-weight: 600; }
.gp-ghost { visibility: hidden; }
.gp-modal.is-ended .gp-caption { bottom: auto; top: 2cqw; }

/* ------------------------------------------------------------ end card */
.gp-end {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, #33030a 0%, #0a0a0a 60%, #000 100%);
    color: #fff;
    overflow: hidden;
}
.gp-end.is-on { display: flex; animation: gpFadeIn .5s ease both; }
@keyframes gpFadeIn { from { opacity: 0; } }
.gp-end-lights {
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg at 50% 50%, transparent 0 10%, rgba(208, 0, 27, .24) 12%, transparent 16% 40%,
        rgba(255, 255, 255, .08) 43%, transparent 47% 70%, rgba(208, 0, 27, .2) 73%, transparent 77%);
    animation: gpSpin 16s linear infinite;
}
.gp-end-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, transparent, rgba(208, 0, 27, .18)); border-top: 1px solid rgba(255, 255, 255, .06); }
@keyframes gpSpin { to { transform: rotate(360deg); } }
.gp-end-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 52cqw; }
.gp-end-logo-wrap { position: relative; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 .3cqw #fff, 0 0 4cqw rgba(208, 0, 27, .8); animation: gpLogoIn .9s cubic-bezier(.2, 1.4, .4, 1) both; }
.gp-end-logo-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); animation: gpShine 2.6s 1.1s ease-in-out infinite; }
@keyframes gpShine { 40%, 100% { transform: translateX(120%); } }
.gp-end-logo { display: block; width: 11cqw; }
@keyframes gpLogoIn { from { opacity: 0; transform: scale(.3) rotate(-20deg); } }
.gp-end-title { margin: 1.2cqw 0 0; font-size: 4.8cqw; font-weight: 900; letter-spacing: .2em; line-height: 1; animation: gpUp .6s .3s both; }
.gp-end-tag { margin: .8cqw 0 0; font-size: 3.2cqw; font-weight: 900; color: #ff2a40; letter-spacing: .06em; line-height: 1; text-shadow: 0 0 2cqw rgba(255, 42, 64, .45); }
.gp-end-tag span { display: inline-block; animation: gpLetter .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes gpLetter { from { opacity: 0; transform: translateY(2cqw) scale(.4); } }
.gp-end-sub { margin: 1cqw 0 0; font-size: max(11px, 1.6cqw); color: rgba(255, 255, 255, .8); animation: gpUp .6s 1.4s both; }
.gp-end-actions { display: flex; gap: 1.2cqw; justify-content: center; margin-top: 2.2cqw; animation: gpUp .6s 1.7s both; }
.gp-end-signup, .gp-end-explore {
    display: inline-flex;
    align-items: center;
    gap: .7cqw;
    padding: max(8px, 1.2cqw) max(14px, 2.6cqw);
    border-radius: 999px;
    font-weight: 900;
    font-size: max(11px, 1.5cqw);
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s, filter .2s;
}
.gp-end-signup { background: #d0001b; color: #fff; border: 2px solid #d0001b; box-shadow: 0 .8cqw 2.4cqw rgba(208, 0, 27, .5); animation: gpPulse 1.8s 2.4s ease-in-out infinite; }
.gp-end-explore { background: #fff; color: #111; border: 2px solid #fff; }
.gp-end-signup:hover, .gp-end-explore:hover { transform: translateY(-2px); filter: brightness(1.08); }
.gp-end-replay { margin-top: 1.2cqw; background: none; border: 0; color: rgba(255, 255, 255, .7); font-size: max(11px, 1.25cqw); cursor: pointer; animation: gpUp .6s 2s both; }
.gp-end-replay:hover { color: #fff; text-decoration: underline; }
@keyframes gpPulse { 50% { box-shadow: 0 .8cqw 3.6cqw rgba(208, 0, 27, .9); } }
@keyframes gpUp { from { opacity: 0; transform: translateY(1.5cqw); } }
.gp-end-mate {
    position: absolute;
    left: 3cqw;
    bottom: 4%;
    height: 80%;
    filter: drop-shadow(0 1cqw 3cqw rgba(208, 0, 27, .5));
    transform-origin: 50% 100%;
    animation: gpMateIn .8s .2s cubic-bezier(.2, 1.4, .4, 1) both, gpSway 1.6s 1.2s ease-in-out infinite;
}
.gp-end-leo { position: absolute; right: 6cqw; bottom: 4%; height: 70%; filter: drop-shadow(0 1cqw 3cqw rgba(208, 0, 27, .4)); transform-origin: 50% 100%; animation: gpLeoIn .8s .5s cubic-bezier(.2, 1.4, .4, 1) both, gpSway 1.8s 1.4s ease-in-out infinite reverse; }
@keyframes gpMateIn { from { opacity: 0; transform: translateX(-6cqw); } }
@keyframes gpLeoIn { from { opacity: 0; transform: translateX(6cqw); } }
@keyframes gpSway { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

/* ------------------------------------------------------------ stage layers */
.gp-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 960px;
    height: 540px;
    transform-origin: 0 0;
    overflow: hidden;
    color: #1f1f1f;
}
.gp-stage * { box-sizing: border-box; }
.gp-host, .gp-host > div { position: absolute; inset: 0; overflow: hidden; }
/* A slow camera push on every scene. */
.gp-host > div { animation: gpKen var(--dur, 6s) linear both; }
@keyframes gpKen { from { transform: scale(1); } to { transform: scale(1.03); } }

.gp-grain {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(0, 0, 0, .3) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* Chapter tag, top-left. */
.gp-chapter {
    position: absolute;
    left: 20px;
    top: 18px;
    z-index: 3;
    display: flex;
    align-items: stretch;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    opacity: 0;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.gp-chapter b { padding: 8px 10px; background: #d0001b; color: #fff; }
.gp-chapter span { padding: 8px 14px; background: #111; color: #fff; }
.gp-chapter.is-on { animation: gpChapter .5s .35s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes gpChapter { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }

/* Brand wipe between scenes: white, red, then black with the logo. */
.gp-wipe { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.gp-wipe i {
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -15%;
    right: -15%;
    transform: translateX(-140%) skewX(-14deg);
}
.gp-wipe i:nth-child(1) { background: #fff; }
.gp-wipe i:nth-child(2) { background: #d0001b; }
.gp-wipe i:nth-child(3) { background: #0b0b0b; display: grid; place-items: center; }
.gp-wipe img { width: 120px; border-radius: 50%; transform: skewX(14deg); box-shadow: 0 0 0 3px #fff, 0 0 40px rgba(208, 0, 27, .8); }
.gp-wipe.is-in i { animation: gpWipeIn .32s cubic-bezier(.6, 0, .4, 1) both; }
.gp-wipe.is-in i:nth-child(2) { animation-delay: .04s; }
.gp-wipe.is-in i:nth-child(3) { animation-delay: .08s; }
.gp-wipe.is-out i { animation: gpWipeOut .45s cubic-bezier(.6, 0, .4, 1) both; }
.gp-wipe.is-out i:nth-child(3) { animation-delay: .05s; }
.gp-wipe.is-out i:nth-child(2) { animation-delay: .1s; }
.gp-wipe.is-out i:nth-child(1) { animation-delay: .15s; }
@keyframes gpWipeIn { from { transform: translateX(-140%) skewX(-14deg); } to { transform: translateX(0) skewX(-14deg); } }
@keyframes gpWipeOut { from { transform: translateX(0) skewX(-14deg); } to { transform: translateX(140%) skewX(-14deg); } }

/* ------------------------------------------------------------ shared pieces */
.gp-char { position: absolute; isolation: isolate; pointer-events: none; }
.gp-char img { display: block; height: 100%; width: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .25)); }
.gp-char::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -3%;
    height: 7%;
    border-radius: 50%;
    background: rgba(0, 0, 0, .28);
    filter: blur(4px);
    z-index: -1;
}
.gp-char.gp-no-shadow::after { display: none; }

/* Leo carrying a parcel in front of his hands. */
.gp-leo .gp-leo-carry { position: absolute; left: 50%; top: 56%; margin-left: -35px; }

.gp-phone { position: absolute; border-radius: 18px; background: #111; padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35), inset 0 0 0 2px #2a2a2a; }
.gp-phone-screen { position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: #1c1c1c; }

.gp-parcel {
    position: relative;
    width: 70px;
    height: 52px;
    border-radius: 5px;
    background: linear-gradient(180deg, #d9a066, #c08447);
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .1), 0 6px 12px rgba(0, 0, 0, .25);
}
.gp-parcel::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 12px; margin-left: -6px; background: #d0001b; }
.gp-parcel span { position: absolute; left: 6px; bottom: 6px; padding: 1px 4px; border-radius: 2px; background: #fff; color: #111; font-size: 8px; font-weight: 900; }

.gp-cart { position: relative; width: 190px; }
.gp-cart svg { width: 100%; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .35)); }
.gp-cart-count {
    position: absolute;
    top: -6px;
    right: 6px;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff;
    color: #d0001b;
    font-size: 22px;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    animation: gpPop .5s 3s cubic-bezier(.2, 1.8, .4, 1) both;
}
@keyframes gpPop { from { opacity: 0; transform: scale(0); } }

.gp-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.gp-spark {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px;
    background: #fff;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: 0;
    animation: gpSpark .9s ease-out both;
}
@keyframes gpSpark {
    0% { opacity: 0; transform: translate(0, 0) scale(.2); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(90deg); }
}

.gp-floaties { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gp-floaties i {
    position: absolute;
    bottom: -30px;
    font-style: normal;
    color: rgba(255, 255, 255, .55);
    animation-name: gpFloatUp;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
@keyframes gpFloatUp { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-560px) rotate(40deg); } }

.gp-cursor { position: absolute; font-size: 40px; color: #fff; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); z-index: 4; }
@keyframes gpTap { 50% { scale: .85; } }
@keyframes gpPress { 50% { transform: scale(.92); filter: brightness(.8); } }

.gp-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gp-confetti i {
    position: absolute;
    top: -20px;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation-name: gpConfetti;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
@keyframes gpConfetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 1; transform: translateY(580px) rotate(540deg); } }

.gp-sun {
    position: absolute;
    left: 300px;
    top: 40px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff4c9;
    box-shadow: 0 0 0 14px rgba(255, 244, 201, .35), 0 0 60px 30px rgba(255, 230, 160, .45);
}
.gp-cloud { position: absolute; left: 420px; top: 60px; width: 120px; height: 38px; border-radius: 40px; background: #fff; animation: gpDrift 16s linear infinite; }
.gp-cloud::before { content: ""; position: absolute; left: 24px; top: -20px; width: 58px; height: 48px; border-radius: 50%; background: #fff; }
.gp-cloud-2 { left: 700px; top: 26px; transform: scale(.75); animation-duration: 22s; }
@keyframes gpDrift { to { translate: 120px 0; } }

@keyframes gpBob { 50% { transform: translateY(-8px); } }
@keyframes gpCardIn { from { opacity: 0; transform: translateY(40px) scale(.7); } }
@keyframes gpFloat { 50% { transform: translateY(-7px); } }
@keyframes gpSlideIn { from { opacity: 0; transform: translateX(-120px); } }
@keyframes gpSlideRight { from { opacity: 0; transform: translateX(160px); } }
@keyframes gpJump { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.06, .92); } 50% { transform: translateY(-60px) scale(.96, 1.05); } 85% { transform: translateY(0) scale(1.05, .94); } }
@keyframes gpTwinkle { 50% { opacity: .25; } }

/* ------------------------------------------------------------ 1: bedroom */
.gp-s1 { background: #2b1216; }
.gp-cam { position: absolute; inset: 0; transform-origin: 66% 52%; animation: gpDolly 3.6s .9s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes gpDolly { to { transform: scale(1.14); } }
.gp-wall {
    position: absolute;
    inset: 0 0 140px 0;
    background:
        radial-gradient(circle, rgba(208, 0, 27, .07) 2px, transparent 2.5px) 0 0 / 28px 28px,
        linear-gradient(180deg, #fff3f5, #fbdde2);
}
.gp-floor { position: absolute; left: 0; right: 0; top: 400px; bottom: 0; background: repeating-linear-gradient(90deg, #b97c57 0 118px, #a96e4b 118px 120px); box-shadow: inset 0 10px 18px rgba(0, 0, 0, .15); }
.gp-rug { position: absolute; left: 330px; top: 430px; width: 460px; height: 80px; border-radius: 50%; background: radial-gradient(ellipse, #fff 0 45%, #f2c9cf 46% 60%, #fff 61%); box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
.gp-lights { position: absolute; left: 0; right: 0; top: 0; height: 60px; }
.gp-lights::before { content: ""; position: absolute; left: -40px; right: -40px; top: -60px; height: 100px; border-bottom: 2px solid #3a2a2a; border-radius: 50%; }
.gp-lights i { position: absolute; width: 11px; height: 15px; margin: -2px 0 0 -5px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: #ffd9de; box-shadow: 0 0 12px 4px rgba(255, 120, 140, .6); animation: gpTwinkle 1.4s ease-in-out infinite; }
.gp-lights i:nth-child(even) { background: #fff; box-shadow: 0 0 12px 4px rgba(255, 255, 255, .8); }
.gp-room-window {
    position: absolute;
    left: 70px;
    top: 90px;
    width: 190px;
    height: 170px;
    border: 10px solid #fff;
    border-radius: 12px;
    background: linear-gradient(180deg, #131a33, #3c2547);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.gp-room-window::before, .gp-room-window::after { content: ""; position: absolute; background: #fff; }
.gp-room-window::before { left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; }
.gp-room-window::after { top: 50%; left: 0; right: 0; height: 6px; margin-top: -3px; }
.gp-moon { position: absolute; right: 22px; top: 16px; width: 34px; height: 34px; border-radius: 50%; box-shadow: -8px 4px 0 0 #fff6d8; }
.gp-star { position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; animation: gpTwinkle 1.4s infinite; }
.gp-curtain { position: absolute; left: 40px; top: 70px; width: 52px; height: 240px; border-radius: 0 0 40% 20%; background: repeating-linear-gradient(90deg, #c4001a 0 10px, #a80016 10px 16px); box-shadow: 4px 0 10px rgba(0, 0, 0, .15); }
.gp-curtain-r { left: 238px; border-radius: 0 0 20% 40%; }
.gp-frame-art { position: absolute; left: 610px; top: 96px; width: 110px; height: 90px; padding: 8px; border-radius: 6px; background: #111; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); display: grid; place-items: center; }
.gp-frame-art img { height: 100%; border-radius: 50%; }
.gp-nightstand { position: absolute; left: 310px; top: 320px; width: 100px; height: 80px; border-radius: 8px; background: #fff; box-shadow: inset 0 -26px 0 #f1dadd, 0 6px 12px rgba(0, 0, 0, .12); }
.gp-room-lamp { position: absolute; left: 22px; top: -112px; width: 56px; height: 112px; }
.gp-room-lamp::before { content: ""; position: absolute; left: 25px; top: 40px; width: 6px; height: 72px; background: #222; }
.gp-room-lamp i { position: absolute; left: 0; top: 0; width: 56px; height: 44px; background: #fff; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); box-shadow: 0 0 70px 40px rgba(255, 220, 160, .55); }
.gp-plant { position: absolute; left: 196px; top: 336px; width: 56px; height: 64px; border-radius: 6px 6px 12px 12px; background: #111; }
.gp-plant i { position: absolute; bottom: 56px; left: 22px; width: 14px; height: 60px; border-radius: 50%; background: #3aa36a; transform-origin: 50% 100%; }
.gp-plant i:nth-child(1) { transform: rotate(-30deg); }
.gp-plant i:nth-child(3) { transform: rotate(30deg); }
.gp-bed { position: absolute; left: 430px; top: 240px; width: 500px; height: 170px; }
.gp-bed-head { position: absolute; left: 0; top: 0; width: 110px; height: 170px; border-radius: 50px 50px 6px 6px; background: #b00018; box-shadow: inset 0 0 0 8px #c4001a; }
.gp-bed-mattress { position: absolute; left: 30px; top: 90px; width: 470px; height: 56px; border-radius: 14px; background: #fff; box-shadow: 0 14px 0 #7a0012; }
.gp-bed-blanket { position: absolute; left: 170px; top: 78px; width: 330px; height: 62px; border-radius: 22px 14px 14px 22px; background: repeating-linear-gradient(135deg, #d0001b 0 18px, #e3243a 18px 36px); }
.gp-pillow { position: absolute; left: 46px; top: 58px; width: 116px; height: 46px; border-radius: 24px; background: #fff; box-shadow: inset 0 -6px 0 #f1dadd, 0 4px 8px rgba(0, 0, 0, .1); }
.gp-pillow-2 { left: 70px; top: 48px; background: #ffe3e7; }
.gp-teddy { position: absolute; left: 860px; top: 262px; width: 56px; height: 62px; }
.gp-teddy i { position: absolute; border-radius: 50%; background: #b9825b; }
.gp-teddy i:nth-child(1) { left: 8px; top: 22px; width: 40px; height: 40px; }
.gp-teddy i:nth-child(2) { left: 12px; top: 0; width: 32px; height: 30px; box-shadow: -10px -6px 0 -6px #b9825b, 10px -6px 0 -6px #b9825b; }
.gp-teddy i:nth-child(3) { left: 21px; top: 14px; width: 14px; height: 10px; background: #f2d4bd; }
.gp-phone-rays { position: absolute; left: 678px; top: 320px; width: 0; height: 0; }
.gp-phone-rays::before { content: ""; position: absolute; left: -200px; top: -200px; width: 400px; height: 400px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .5) 0 6deg, transparent 6deg 20deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); opacity: 0; animation: gpRaysOn .6s 1.4s both, gpSpin 12s 1.4s linear infinite; }
@keyframes gpRaysOn { to { opacity: 1; } }
.gp-s1-phone { left: 640px; top: 250px; width: 76px; height: 142px; transform: rotate(-6deg); animation: gpBuzz .08s 1.2s 6 alternate, gpPhoneUp .9s 1.7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes gpBuzz { from { translate: -2px 0; } to { translate: 2px 0; } }
@keyframes gpPhoneUp { from { transform: rotate(-6deg); } to { transform: rotate(-2deg) translateY(-22px); } }
.gp-s1-phone .gp-phone-screen { background: #1c1c1c; animation: gpScreenOn .3s 1.4s both; }
@keyframes gpScreenOn { to { background: #fff1f3; } }
.gp-s1-peek { left: 6px; bottom: -86px; height: 84px; transform-origin: 50% 100%; animation: gpPeek .6s 1.7s cubic-bezier(.2, 1.6, .4, 1) both, gpWave 1s 2.4s ease-in-out 3; }
.gp-s1-peek img { filter: none; }
@keyframes gpPeek { to { bottom: 4px; } }
.gp-s1-logo { position: absolute; left: 50%; top: 8px; width: 32px; margin-left: -16px; border-radius: 50%; opacity: 0; animation: gpPop .5s 4.2s cubic-bezier(.2, 1.8, .4, 1) both; animation-name: gpLogoShow; }
@keyframes gpLogoShow { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.gp-notif { position: absolute; left: 470px; top: 168px; display: flex; align-items: center; gap: 8px; width: 220px; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); transform-origin: 100% 100%; animation: gpNotif .5s 1.25s cubic-bezier(.2, 1.6, .4, 1) both; }
.gp-notif img { width: 30px; border-radius: 50%; }
.gp-notif b { display: block; font-size: 12px; color: #111; }
.gp-notif small { font-size: 11px; color: #555; }
@keyframes gpNotif { from { opacity: 0; transform: scale(.4) translateY(10px); } }
.gp-sting { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #0b0b0b; animation: gpStingOut .4s .95s ease both; }
.gp-sting img { width: 110px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 40px rgba(208, 0, 27, .8); animation: gpLogoIn .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.gp-sting span { color: #fff; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; font-size: 13px; animation: gpUpPx .5s .3s both; }
@keyframes gpStingOut { to { opacity: 0; visibility: hidden; } }
@keyframes gpUpPx { from { opacity: 0; transform: translateY(12px); } }

/* ------------------------------------------------------------ 2: discover */
.gp-s2 { background: radial-gradient(circle at 28% 52%, #e3132e 0, #8a0013 45%, #1a0004 100%); }
.gp-burst { position: absolute; left: 270px; top: 280px; width: 1400px; height: 1400px; margin: -700px; background: repeating-conic-gradient(rgba(255, 255, 255, .08) 0 8deg, transparent 8deg 22deg); animation: gpSpin 22s linear infinite; }
.gp-s2-phone { left: 220px; top: 170px; width: 110px; height: 210px; animation: gpPhoneAway .9s .5s ease-in both; }
.gp-s2-phone .gp-phone-screen { background: #fff; }
@keyframes gpPhoneAway { to { transform: translateY(260px) rotate(20deg) scale(.6); opacity: 0; } }
.gp-s2-mate { left: 150px; top: 80px; height: 390px; transform-origin: 50% 100%; animation: gpJumpOut .9s .3s cubic-bezier(.2, 1.5, .4, 1) both, gpBob 2.4s 1.4s ease-in-out infinite; }
@keyframes gpJumpOut { 0% { opacity: 0; transform: translateY(160px) scale(.25); } 60% { opacity: 1; transform: translateY(-30px) scale(1.05, .97); } 80% { transform: translateY(0) scale(1.04, .95); } 100% { transform: none; } }
.gp-s2 .gp-sparks { left: 270px; top: 260px; }
.gp-s2-logo { position: absolute; left: 650px; top: 22px; width: 80px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 30px rgba(255, 255, 255, .4); animation: gpLogoIn .8s .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.gp-s2-head { position: absolute; left: 455px; top: 112px; width: 470px; margin: 0; text-align: center; white-space: nowrap; color: #fff; font-size: 19px; font-weight: 800; animation: gpUpPx .6s .9s both; }
.gp-s2-head b { color: #fff; background: #111; padding: 0 8px; border-radius: 6px; }
.gp-cats { position: absolute; left: 455px; top: 152px; width: 470px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gp-cat {
    height: 122px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    border-radius: 18px;
    border-top: 4px solid #d0001b;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
    animation: gpCardIn .6s cubic-bezier(.2, 1.5, .4, 1) both, gpFloat 3s ease-in-out infinite;
}
.gp-cat:nth-child(even) { animation-direction: normal, reverse; }
.gp-cat img { width: 70px; height: 70px; object-fit: contain; }
.gp-cat span { font-size: 14px; font-weight: 800; color: #111; text-align: center; line-height: 1.15; }

/* ------------------------------------------------------------ 3: marketplace */
.gp-s3 { background: linear-gradient(135deg, #1b1b1b, #4a000c); }
.gp-s3 .gp-floaties i { color: rgba(255, 255, 255, .25); }
.gp-browser {
    position: absolute;
    left: 236px;
    top: 64px;
    width: 700px;
    height: 384px;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: #f5f5f5;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    animation: gpCardIn .6s cubic-bezier(.2, 1.3, .4, 1) both;
}
.gp-chrome { flex: none; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; background: #e9e9e9; }
.gp-chrome > i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.gp-chrome > i:nth-child(2) { background: #febc2e; }
.gp-chrome > i:nth-child(3) { background: #28c840; }
.gp-chrome span { margin-left: 14px; padding: 2px 14px; border-radius: 999px; background: #fff; color: #555; font-size: 11px; }
.gp-chrome span i { color: #28a745; font-size: 9px; }
.gp-shopbar { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; background: #111; color: #fff; }
.gp-shopbar img { width: 30px; border-radius: 50%; }
.gp-shopbar b { font-size: 18px; font-weight: 900; }
.gp-shopbar > i { font-size: 18px; }
.gp-search { flex: 1; height: 30px; border-radius: 999px; background: #fff; color: #888; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 12px; border: 2px solid #d0001b; }
.gp-flash { flex: none; display: flex; align-items: center; gap: 12px; height: 40px; margin: 10px 12px 0; padding: 0 14px; border-radius: 10px; background: linear-gradient(90deg, #d0001b, #ff3b52); color: #fff; }
.gp-flash b { font-size: 18px; font-weight: 900; font-style: italic; }
.gp-timer { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; background: #111; font-weight: 800; letter-spacing: 1px; font-size: 14px; font-variant-numeric: tabular-nums; }
.gp-timer > i { font-style: normal; animation: gpTwinkle 1s infinite; }
.gp-roll { display: inline-block; height: 1.2em; overflow: hidden; line-height: 1.2em; vertical-align: bottom; }
.gp-roll em { display: block; width: 1ch; font-style: normal; word-break: break-all; animation: gpRoll 10s steps(10) infinite; }
@keyframes gpRoll { to { transform: translateY(-12em); } }
.gp-trend { margin-left: auto; font-weight: 700; font-size: 13px; }
.gp-products { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 10px 12px 0; }
.gp-prod { position: relative; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); animation: gpCardIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.gp-prod img { display: block; width: 100%; height: 64px; object-fit: contain; }
.gp-prod span { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-prod b { font-size: 14px; color: #d0001b; }
.gp-prod s { color: #999; font-size: 10px; font-weight: 400; }
.gp-off { position: absolute; right: -6px; top: -8px; padding: 2px 7px; border-radius: 7px; background: #111; color: #fff; font-style: normal; font-weight: 900; font-size: 12px; animation: gpPop .5s cubic-bezier(.2, 1.8, .4, 1) both; }
.gp-sold { position: relative; height: 14px; margin-top: 5px; border-radius: 999px; background: #ffd6dc; overflow: hidden; }
.gp-sold i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ff3b52, #d0001b); border-radius: 999px; transform-origin: 0 50%; animation: gpGrow .8s ease-out both; }
.gp-sold small { position: relative; display: block; text-align: center; font-size: 9px; font-weight: 800; color: #fff; line-height: 14px; }
@keyframes gpGrow { from { transform: scaleX(0); } }
.gp-prod.is-pick { animation: gpCardIn .5s .4s cubic-bezier(.2, 1.4, .4, 1) both, gpPick 1s 5.4s ease-in-out both; }
@keyframes gpPick { 50% { transform: translateY(-10px) scale(1.07); } 100% { transform: translateY(-5px) scale(1.04); box-shadow: 0 0 0 3px #d0001b, 0 14px 26px rgba(208, 0, 27, .35); } }
.gp-voucher { display: flex; align-items: center; gap: 10px; width: 250px; padding: 9px 12px; border-radius: 12px; background: #fff; border: 2px dashed #d0001b; color: #d0001b; box-shadow: 0 6px 16px rgba(0, 0, 0, .08); animation: gpSwing 1.2s 4.3s cubic-bezier(.2, 1.4, .4, 1) both; }
.gp-voucher > i { font-size: 24px; }
.gp-voucher b { display: block; font-size: 16px; font-weight: 900; }
.gp-voucher small { color: #555; font-size: 11px; }
.gp-voucher span { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #d0001b; color: #fff; font-size: 11px; font-weight: 800; }
.gp-browser > .gp-voucher { position: absolute; left: 12px; bottom: 12px; white-space: nowrap; }
.gp-browser > .gp-voucher-2 { left: 274px; animation-delay: 4.6s; }
@keyframes gpSwing { 0% { opacity: 0; transform: rotate(-20deg) translateY(-50px); } 60% { opacity: 1; transform: rotate(5deg); } 100% { transform: rotate(0); } }
.gp-stamp {
    position: absolute;
    left: 790px;
    top: 348px;
    width: 104px;
    height: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffd400;
    color: #111;
    clip-path: polygon(50% 0, 61% 12%, 75% 6%, 79% 21%, 94% 22%, 89% 37%, 100% 47%, 89% 58%, 95% 73%, 80% 75%, 76% 90%, 62% 85%, 50% 100%, 38% 85%, 24% 90%, 20% 75%, 5% 73%, 11% 58%, 0 47%, 11% 37%, 6% 22%, 21% 21%, 25% 6%, 39% 12%);
    transform: rotate(10deg);
    animation: gpStamp .45s 3s cubic-bezier(.2, 1.8, .4, 1) both, gpStampPulse 1s 3.6s ease-in-out infinite;
}
.gp-stamp b { font-size: 11px; font-weight: 900; }
.gp-stamp strong { font-size: 28px; font-weight: 900; line-height: 1; color: #d0001b; }
@keyframes gpStamp { from { opacity: 0; transform: rotate(-30deg) scale(2.5); } to { opacity: 1; transform: rotate(10deg) scale(1); } }
@keyframes gpStampPulse { 50% { transform: rotate(10deg) scale(1.07); } }
.gp-s3-mate { left: 6px; top: 130px; height: 340px; transform-origin: 50% 100%; animation: gpSlideIn .7s .3s cubic-bezier(.2, 1.4, .4, 1) both, gpPoint 1.4s 1.2s ease-in-out infinite; }
@keyframes gpPoint { 50% { transform: rotate(3deg) translateX(6px); } }

/* ------------------------------------------------------------ 4: add to cart */
.gp-s4 { background: linear-gradient(135deg, #141414, #3a0009); }
.gp-spot { position: absolute; left: 140px; top: -60px; width: 700px; height: 600px; background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .12), transparent 60%); }
.gp-pdp { position: absolute; left: 240px; top: 84px; width: 470px; height: 300px; display: flex; gap: 18px; padding: 18px; border-radius: 20px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); animation: gpCardIn .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.gp-pdp-img { width: 190px; height: 100%; object-fit: contain; background: #f5f5f5; border-radius: 14px; }
.gp-pdp-info { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.gp-pdp-tag { align-self: flex-start; padding: 3px 10px; border-radius: 6px; background: #d0001b; color: #fff; font-size: 12px; font-weight: 800; }
.gp-pdp-info h3 { margin: 0; font-size: 21px; color: #111; }
.gp-stars { color: #f5a623; font-size: 14px; }
.gp-stars small { color: #777; }
.gp-pdp-price { font-size: 25px; color: #d0001b; }
.gp-pdp-price s { font-size: 13px; color: #999; font-weight: 400; }
.gp-swatches { display: flex; gap: 8px; }
.gp-swatches i { width: 20px; height: 20px; border-radius: 50%; background: #1b2238; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #d0001b; }
.gp-swatches i:nth-child(2) { background: #e9e9e9; box-shadow: 0 0 0 1px #ccc; }
.gp-swatches i:nth-child(3) { background: #d0001b; box-shadow: none; }
.gp-pdp-btns { display: flex; gap: 8px; margin-top: auto; }
.gp-btn-ghost, .gp-btn-add { padding: 11px 12px; border-radius: 10px; font-weight: 800; font-size: 14px; white-space: nowrap; }
.gp-btn-ghost { border: 2px solid #d0001b; color: #d0001b; }
.gp-btn-add { background: #d0001b; color: #fff; animation: gpPress .3s 2.1s both; }
.gp-s4 .gp-cursor { left: 760px; top: 480px; animation: gpCursorTo4 1.4s .7s cubic-bezier(.5, 0, .3, 1) both, gpTap .3s 2.1s both; }
@keyframes gpCursorTo4 { to { left: 616px; top: 342px; } }
.gp-fly { position: absolute; left: 270px; top: 130px; width: 120px; opacity: 0; z-index: 3; animation: gpFly 1s 2.25s cubic-bezier(.5, -0.3, .6, 1) both; }
@keyframes gpFly {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    50% { opacity: 1; transform: translate(280px, -110px) scale(.8) rotate(200deg); }
    100% { opacity: 0; transform: translate(540px, 150px) scale(.3) rotate(360deg); }
}
.gp-s4-cart { position: absolute; left: 744px; top: 240px; animation: gpCardIn .5s .3s both, gpCartBump .5s 3s both; }
.gp-cart-glow { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(208, 0, 27, .55), transparent 65%); animation: gpGlow 1.6s 3s ease-in-out infinite; }
@keyframes gpGlow { 50% { transform: scale(1.15); opacity: .7; } }
.gp-s4-cart .gp-sparks { left: 95px; top: 40px; }
.gp-plus { position: absolute; left: 70px; top: -20px; color: #fff; font-style: normal; font-weight: 900; font-size: 28px; opacity: 0; animation: gpPlus 1s 3s ease-out both; }
@keyframes gpPlus { 0% { opacity: 0; transform: translateY(10px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50px); } }
@keyframes gpCartBump { 40% { transform: scale(1.15) rotate(-4deg); } }
.gp-toast { position: absolute; left: 50%; top: 22px; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; color: #111; font-weight: 800; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); transform: translateX(-50%); animation: gpToast .5s 3.1s cubic-bezier(.2, 1.6, .4, 1) both; }
.gp-toast i { color: #22c55e; font-size: 18px; }
@keyframes gpToast { from { opacity: 0; transform: translate(-50%, -30px); } }
.gp-s4-mate { left: 20px; top: 128px; height: 350px; transform-origin: 50% 100%; animation: gpSlideIn .6s both, gpJump .7s 3.1s ease-in-out 2; }

/* ------------------------------------------------------------ 5: checkout */
.gp-s5 { background: linear-gradient(180deg, #fff 0, #ffe4e8 100%); }
.gp-s5 .gp-floaties i { color: rgba(208, 0, 27, .2); }
.gp-checkout { position: absolute; left: 290px; top: 34px; width: 400px; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .15); animation: gpUpPx .5s both; }
.gp-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 800; color: #999; }
.gp-steps span { padding: 4px 10px; border-radius: 999px; background: #f2f2f2; }
.gp-steps em { flex: 1; height: 2px; background: #eee; }
.gp-steps .is-done { background: #111; color: #fff; }
.gp-steps .is-now { background: #d0001b; color: #fff; }
.gp-step-last { animation: gpStepDone .3s 3s both; }
@keyframes gpStepDone { to { background: #22c55e; color: #fff; } }
.gp-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eee; font-size: 14px; color: #333; animation: gpUpPx .4s both; }
.gp-row:nth-of-type(2) { animation-delay: .4s; }
.gp-row:nth-of-type(3) { animation-delay: .9s; }
.gp-row:nth-of-type(4) { animation-delay: 1.4s; }
.gp-row img { width: 36px; height: 36px; object-fit: contain; background: #f5f5f5; border-radius: 8px; }
.gp-row i { width: 36px; text-align: center; color: #d0001b; font-size: 18px; }
.gp-row span { flex: 1; }
.gp-red { color: #d0001b; }
.gp-pay { display: flex; gap: 8px; margin: 12px 0; animation: gpUpPx .4s 1.8s both; }
.gp-pay span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; border: 2px solid #eee; text-align: center; font-size: 11px; font-weight: 800; color: #444; }
.gp-pay span i { font-size: 16px; color: #999; }
.gp-pay .is-on { border-color: #d0001b; color: #d0001b; background: #fff3f4; }
.gp-pay .is-on i { color: #d0001b; }
.gp-total { display: flex; justify-content: space-between; font-size: 16px; color: #111; animation: gpUpPx .4s 2s both; }
.gp-total b { color: #d0001b; }
.gp-place { display: block; margin-top: 12px; padding: 12px; border-radius: 12px; background: #d0001b; color: #fff; text-align: center; font-weight: 900; animation: gpUpPx .4s 2.1s both, gpPress .3s 2.6s both; }
.gp-s5-cursor { left: 900px; top: 520px; animation: gpCursorTo5 1s 1.6s cubic-bezier(.5, 0, .3, 1) both, gpTap .3s 2.6s both; }
@keyframes gpCursorTo5 { to { left: 500px; top: 410px; } }
.gp-confirm { position: absolute; left: 310px; top: 120px; width: 360px; padding: 26px; border-radius: 24px; background: #111; color: #fff; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); z-index: 3; animation: gpConfirm .6s 2.9s cubic-bezier(.2, 1.6, .4, 1) both; }
.gp-check { width: 70px; height: 70px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: #22c55e; font-size: 34px; box-shadow: 0 0 0 8px rgba(34, 197, 94, .2); animation: gpPop .5s 3.2s cubic-bezier(.2, 1.8, .4, 1) both; }
.gp-confirm b { display: block; font-size: 26px; }
.gp-confirm small { color: rgba(255, 255, 255, .7); }
@keyframes gpConfirm { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.gp-coins { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.gp-coins img { position: absolute; top: -60px; width: 44px; opacity: 0; animation: gpCoin 1.8s ease-in both; }
@keyframes gpCoin { 0% { opacity: 1; transform: translateY(0) rotateY(0); } 100% { opacity: 1; transform: translateY(640px) rotateY(720deg); } }
.gp-s5-mate { right: 24px; top: 150px; height: 310px; z-index: 5; transform-origin: 50% 100%; animation: gpSlideRight .6s 3.3s cubic-bezier(.2, 1.4, .4, 1) both, gpDance .7s 3.9s ease-in-out infinite; }
@keyframes gpDance { 25% { transform: rotate(-6deg) translateY(-10px); } 75% { transform: rotate(6deg) translateY(-10px); } }
.gp-gocoins-tag { position: absolute; left: 24px; top: 200px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; background: #111; color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); animation: gpPop .5s 4.2s cubic-bezier(.2, 1.8, .4, 1) both; }
.gp-gocoins-tag img { width: 40px; }
.gp-gocoins-tag b { display: block; font-size: 15px; }
.gp-gocoins-tag small { color: rgba(255, 255, 255, .7); font-size: 11px; }

/* ------------------------------------------------------------ 6: parcel journey */
.gp-s6 { background: linear-gradient(180deg, #ffe0e5 0, #fff6f7 60%); }
.gp-hills { position: absolute; left: -40px; right: -40px; top: 250px; height: 160px; background: radial-gradient(ellipse 260px 110px at 20% 100%, #f6c9cf 99%, transparent 100%), radial-gradient(ellipse 320px 130px at 70% 100%, #f2bcc4 99%, transparent 100%); }
.gp-shop { position: absolute; left: 30px; top: 250px; width: 170px; height: 155px; background: #fff; border-radius: 6px 6px 0 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .1); }
.gp-awning { position: absolute; left: -8px; right: -8px; top: 30px; height: 30px; border-radius: 0 0 14px 14px; background: repeating-linear-gradient(90deg, #d0001b 0 20px, #fff 20px 40px); box-shadow: 0 4px 8px rgba(0, 0, 0, .12); }
.gp-shop b { position: absolute; left: 0; right: 0; top: 6px; text-align: center; font-weight: 900; letter-spacing: .2em; font-size: 14px; color: #111; }
.gp-shop-win { position: absolute; left: 14px; top: 74px; width: 60px; height: 50px; border-radius: 4px; background: #cfe6ff; box-shadow: inset 0 0 0 4px #111; }
.gp-counter { position: absolute; right: 12px; bottom: 0; width: 80px; height: 30px; border-radius: 4px 4px 0 0; background: #111; }
.gp-counter .gp-packing { position: absolute; left: 6px; bottom: 30px; transform: scale(.85); transform-origin: 50% 100%; animation: gpPackOff .4s 1.1s both; }
@keyframes gpPackOff { to { opacity: 0; transform: scale(.4) translateX(40px); } }
.gp-tape { position: absolute; left: 6px; top: -50px; width: 60px; height: 6px; background: #d0001b; transform-origin: 0 50%; animation: gpTape .5s .3s both; }
@keyframes gpTape { from { transform: scaleX(0); } to { transform: scaleX(1); opacity: 0; } }
.gp-hub { position: absolute; left: 330px; top: 196px; width: 310px; height: 209px; border-radius: 8px 8px 0 0; background: #1d1d1d; box-shadow: inset 0 18px 0 #d0001b, 0 8px 20px rgba(0, 0, 0, .18); }
.gp-hub-sign { position: absolute; left: 50%; top: 32px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 250px; padding: 6px 10px; border-radius: 8px; background: #fff; color: #111; font-weight: 900; font-size: 14px; white-space: nowrap; transform: translateX(-50%); }
.gp-hub-sign img { width: 22px; border-radius: 50%; }
.gp-hub-door { position: absolute; left: 24px; bottom: 0; width: 100px; height: 100px; background: repeating-linear-gradient(180deg, #444 0 8px, #333 8px 10px); border-radius: 4px 4px 0 0; }
.gp-hub-door-2 { left: auto; right: 24px; }
.gp-home { position: absolute; left: 800px; top: 300px; width: 130px; height: 105px; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .1); }
.gp-home-roof { position: absolute; left: -14px; right: -14px; top: -56px; height: 58px; background: #111; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gp-home-door { position: absolute; left: 48px; bottom: 0; width: 34px; height: 56px; border-radius: 4px 4px 0 0; background: #d0001b; }
.gp-walk { position: absolute; left: 0; right: 0; top: 405px; height: 18px; background: #dcdcdc; box-shadow: inset 0 -3px 0 #c8c8c8; }
.gp-road { position: absolute; left: 0; right: 0; top: 423px; height: 117px; background: #2d2d2d; }
.gp-road::after { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 5px; background: repeating-linear-gradient(90deg, #fff 0 34px, transparent 34px 68px); }
.gp-truck-lane { position: absolute; left: 0; top: 322px; width: 170px; z-index: 1; animation: gpTruck 2.6s 5.1s ease-in-out both; opacity: 0; }
.gp-truck { width: 170px; display: block; }
@keyframes gpTruck { 0% { opacity: 1; transform: translateX(-200px); } 100% { opacity: 1; transform: translateX(1000px); } }
.gp-gate { position: absolute; left: 470px; top: 300px; width: 100px; height: 160px; border: 8px solid #111; border-bottom: 0; border-radius: 12px 12px 0 0; z-index: 1; }
.gp-gate::before { content: "SCAN"; position: absolute; left: 50%; top: -24px; padding: 2px 8px; border-radius: 4px; background: #d0001b; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .1em; transform: translateX(-50%); }
.gp-beam { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #ff2a40; box-shadow: 0 0 14px 4px rgba(255, 42, 64, .7); opacity: 0; z-index: 3; animation: gpScan .48s 2.9s 3 alternate both; }
@keyframes gpScan { 0% { opacity: 1; top: 0; } 100% { opacity: 1; top: 145px; } }
.gp-ride { position: absolute; left: 0; top: 280px; width: 170px; height: 170px; z-index: 2; animation: gpRide 9.6s .2s linear both; }
.gp-ride-leo { position: absolute; left: 56px; top: 6px; height: 150px; width: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); animation: gpBob .35s ease-in-out infinite; }
.gp-bike { position: absolute; left: 0; bottom: 0; width: 170px; height: 100px; overflow: visible; }
.gp-wheel { animation: gpSpin .5s linear infinite; }
.gp-bike-parcel { opacity: 0; animation: gpPop .4s 1.1s cubic-bezier(.2, 1.8, .4, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
.gp-exhaust { position: absolute; left: -10px; bottom: 26px; width: 14px; height: 14px; border-radius: 50%; background: rgba(160, 160, 160, .6); animation: gpPuff .8s ease-out infinite; }
.gp-exhaust + .gp-exhaust { animation-delay: .4s; }
@keyframes gpPuff { from { opacity: .8; transform: translate(0, 0) scale(.5); } to { opacity: 0; transform: translate(-40px, -14px) scale(1.6); } }
@keyframes gpRide {
    0%, 12.5% { transform: translateX(40px); }
    29% { transform: translateX(435px); }
    46% { transform: translateX(435px); }
    54%, 67% { transform: translateX(610px); }
    90%, 100% { transform: translateX(690px); }
}
.gp-follow { position: absolute; left: 430px; top: 26px; z-index: 2; }
.gp-s6-mate { position: relative; height: 150px; animation: gpBob 1.6s ease-in-out infinite; }
.gp-track { position: absolute; left: 660px; top: 66px; width: 270px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .14); z-index: 3; animation: gpSlideRight .5s .2s cubic-bezier(.2, 1.3, .4, 1) both; }
.gp-track-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 900; font-size: 14px; color: #111; }
.gp-track-head small { margin-left: auto; color: #999; font-weight: 700; font-size: 11px; }
.gp-live { width: 9px; height: 9px; border-radius: 50%; background: #ff3b52; animation: gpLive 1.2s infinite; }
@keyframes gpLive { from { box-shadow: 0 0 0 0 rgba(255, 59, 82, .7); } to { box-shadow: 0 0 0 9px rgba(255, 59, 82, 0); } }
.gp-track-row { position: relative; display: flex; align-items: center; gap: 10px; height: 23px; font-size: 12px; font-weight: 700; color: #aaa; animation: gpRowOn .35s both; }
.gp-track-row:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 17px; width: 2px; height: 12px; background: #eee; }
.gp-track-row i { width: 12px; height: 12px; border-radius: 50%; background: #e3e3e3; }
.gp-track-row i { animation: gpDotOn .35s both; animation-delay: inherit; }
@keyframes gpRowOn { to { color: #111; } }
@keyframes gpDotOn { 60% { transform: scale(1.5); } to { background: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .18); } }

/* ------------------------------------------------------------ 7: delivery */
.gp-s7 { background: linear-gradient(180deg, #ffd6dc 0, #fff3f5 70%); }
.gp-sun-7 { left: 600px; top: 40px; }
.gp-house { position: absolute; left: 120px; top: 140px; width: 380px; height: 302px; }
.gp-roof { position: absolute; left: -24px; right: -24px; top: 0; height: 112px; background: #111; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gp-wall { position: absolute; left: 0; right: 0; top: 110px; height: 180px; background: repeating-linear-gradient(180deg, #fff 0 18px, #f6e7ea 18px 20px); box-shadow: 0 8px 20px rgba(0, 0, 0, .1); }
.gp-win { position: absolute; left: 30px; top: 30px; width: 90px; height: 70px; border: 8px solid #d0001b; border-radius: 8px; background: linear-gradient(135deg, #cfe6ff 60%, #e9f3ff 60%); }
.gp-win-2 { left: auto; right: 30px; }
.gp-flowers { position: absolute; left: -10px; right: -10px; bottom: -22px; height: 16px; border-radius: 3px; background: #111; }
.gp-flowers::before { content: ""; position: absolute; left: 8px; right: 8px; top: -8px; height: 10px; background: radial-gradient(circle, #ff4d61 4px, transparent 5px) 0 0 / 16px 10px; }
.gp-doorway { position: absolute; left: 150px; bottom: 0; width: 80px; height: 130px; background: #3a0a10; border-radius: 10px 10px 0 0; overflow: hidden; perspective: 400px; }
.gp-door { position: absolute; inset: 0; background: #d0001b; border-radius: 10px 10px 0 0; transform-origin: 0 50%; box-shadow: inset 0 0 0 6px #b00018; animation: gpDoor .7s 2.1s ease-in-out both; }
.gp-door::after { content: ""; position: absolute; right: 12px; top: 66px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
@keyframes gpDoor { to { transform: rotateY(-100deg); } }
.gp-s7-peek { left: 2px; bottom: 0; height: 112px; animation: gpPeekOut .3s 2.9s ease both; }
@keyframes gpPeekOut { to { opacity: 0; } }
.gp-bell { position: absolute; left: 244px; top: 66px; font-size: 18px; color: #f5a623; transform-origin: 50% 0; animation: gpRing .15s 1.8s 6 alternate both; }
@keyframes gpRing { from { transform: rotate(-20deg) scale(1.3); } to { transform: rotate(20deg) scale(1.3); } }
.gp-step { position: absolute; left: 140px; bottom: 0; width: 100px; height: 12px; border-radius: 3px; background: #ddd; }
.gp-fence { position: absolute; left: 520px; right: 0; top: 372px; height: 60px; background: repeating-linear-gradient(90deg, #fff 0 16px, transparent 16px 30px); -webkit-mask: linear-gradient(#000, #000); }
.gp-fence::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 8px; background: #fff; box-shadow: 0 22px 0 #fff; }
.gp-grass { position: absolute; left: 0; right: 0; top: 432px; bottom: 0; background: linear-gradient(180deg, #6fc27f, #4fa865); }
.gp-path { position: absolute; left: 0; top: 442px; width: 960px; height: 98px; background: #e9d8c8; clip-path: polygon(270px 0, 350px 0, 420px 100%, 200px 100%); }
.gp-bush { position: absolute; left: 40px; top: 392px; width: 110px; height: 56px; border-radius: 60px 60px 10px 10px; background: #2e9e57; box-shadow: inset -10px -8px 0 rgba(0, 0, 0, .08); }
.gp-bush-2 { left: 840px; }
.gp-s7-mate { left: 286px; top: 236px; height: 230px; z-index: 2; transform-origin: 50% 100%; animation: gpOut .5s 3s cubic-bezier(.2, 1.6, .4, 1) both, gpJump .7s 4.6s ease-in-out 2; }
@keyframes gpOut { from { opacity: 0; transform: translateY(-20px) scale(.5); } }
.gp-s7-boy { left: 980px; top: 226px; height: 246px; z-index: 2; animation: gpWalkIn 1.8s .2s cubic-bezier(.3, 0, .3, 1) both; }
.gp-s7-boy img { animation: gpStep .3s .2s 6 alternate; }
.gp-s7-boy .gp-leo-carry { animation: gpGive .4s 3.2s ease-in both; }
@keyframes gpWalkIn { to { left: 560px; } }
@keyframes gpStep { to { transform: translateY(-6px) rotate(2deg); } }
@keyframes gpGive { to { opacity: 0; transform: translateX(-60px); } }
.gp-s7-box { position: absolute; left: 470px; top: 400px; z-index: 3; opacity: 0; animation: gpBoxIn .5s 3.4s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes gpBoxIn { from { opacity: 0; transform: translate(80px, -40px) scale(.6); } to { opacity: 1; transform: none; } }
.gp-s7-box .gp-parcel::after { content: ""; position: absolute; left: -4px; right: -4px; top: -6px; height: 14px; border-radius: 4px; background: #c98a4b; transform-origin: 0 100%; animation: gpLid .5s 4.4s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes gpLid { to { transform: rotate(-120deg); } }
.gp-s7-item { position: absolute; left: 10px; top: 0; width: 50px; opacity: 0; animation: gpItem .8s 4.6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes gpItem { from { opacity: 0; transform: translateY(20px) scale(.4); } to { opacity: 1; transform: translateY(-80px) scale(1.4); } }
.gp-s7-box .gp-sparks { left: 35px; top: -40px; }
.gp-hearts .gp-floaties i { color: rgba(208, 0, 27, .55); }

/* ------------------------------------------------------------ small screens */
@media (max-width: 640px) {
    .gp-modal { padding: 0; align-content: center; }
    .gp-frame { width: 100%; border-radius: 0; }
    .gp-controls { padding: 6px 8px 8px; }
    .gp-brand small { display: none; }
    .gp-end-mate { height: 64%; left: 0; }
    .gp-end-leo { height: 46%; right: 0; }
}

/* Reduced motion: scenes still change and play sound, without the movement. */
@media (prefers-reduced-motion: reduce) {
    .gp-stage *, .gp-end * { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
    .gp-end-lights { animation: none; }
}