/* ShopeeFast Experience V3: expressive motion, lightweight rendering, accessible by default. */
:root{--v3-ease:cubic-bezier(.16,1,.3,1);--v3-quick:cubic-bezier(.3,.8,.3,1)}
body{background:#08080e}
.header{position:fixed;background:rgba(10,9,16,.3);transition:background .45s,border-color .45s,box-shadow .45s;will-change:auto}
.header.is-scrolled{background:rgba(11,9,19,.91);border-color:rgba(211,254,134,.18);box-shadow:0 12px 42px #0005;backdrop-filter:blur(19px)}
.identity-sigil{position:relative;overflow:hidden}
.identity-sigil:after{content:"";position:absolute;inset:-50%;background:linear-gradient(125deg,transparent 36%,rgba(255,255,255,.72) 50%,transparent 62%);transform:translateX(-180%);animation:v3-sheen 6s 1.2s ease-in-out infinite}
.identity-star{display:inline-block;animation:v3-star-spin 9s linear infinite;transform-origin:center}
.motion-switch{border:1px solid #574b69;border-radius:30px;padding:8px 12px;background:rgba(32,25,49,.7);display:flex;align-items:center;gap:9px;color:#e5dcf4;font:700 9px var(--font-title);letter-spacing:.05em;white-space:nowrap;transition:background .25s,border-color .25s}
.motion-switch:hover{background:#332445;border-color:var(--acid)}.switch-glyph{font-size:17px;color:var(--acid);display:inline-block;animation:v3-star-spin 8s linear infinite}
.motion-switch[aria-pressed="true"] .switch-glyph{animation-play-state:paused;color:#b2abb8}
.hero{background:radial-gradient(ellipse 68% 72% at 83% 42%,#2b2055 0,#120e20 61%,#07080b 100%)}
.hero-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;filter:blur(2px)}
.hero-ambient i{position:absolute;display:block;border-radius:50%;will-change:transform;opacity:.43;mix-blend-mode:screen}
.hero-ambient i:nth-child(1){width:42vw;height:42vw;left:34%;top:-28%;background:radial-gradient(circle,rgba(135,65,245,.37),transparent 68%);animation:v3-ambient-a 19s ease-in-out infinite alternate}
.hero-ambient i:nth-child(2){width:55vw;height:50vw;right:-15%;bottom:-36%;background:radial-gradient(circle,rgba(234,60,186,.26),transparent 69%);animation:v3-ambient-b 22s ease-in-out infinite alternate}
.hero-ambient i:nth-child(3){width:21vw;height:25vw;left:0;bottom:0;background:radial-gradient(circle,rgba(211,254,134,.13),transparent 67%);animation:v3-ambient-c 17s ease-in-out infinite alternate}
.hero-scan{position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(125deg,transparent 35%,rgba(190,145,255,.028) 50%,transparent 62%);background-size:250% 250%;animation:v3-scan 19s linear infinite}
.hero-grid{background-position:var(--grid-x,0px) var(--grid-y,0px);transition:background-position .1s linear}
.hero-index span,.hero-pager{animation:v3-tint 4s ease-in-out infinite alternate}
.signal-dot{display:inline-block;vertical-align:middle;width:6px;height:6px;background:var(--acid);border-radius:50%;margin-right:4px;box-shadow:0 0 0 0 rgba(211,254,134,.55);animation:v3-signal 2.3s ease-out infinite}
.hero-title .line{transform-origin:0 90%}.hero-title .line i{display:inline-block;animation:v3-neon-text 5.5s ease-in-out infinite alternate}
.hero-title .line:nth-child(3){position:relative}
.hero-title .line:nth-child(3):after{content:"";width:19%;height:4px;background:var(--purple);position:absolute;bottom:-12px;left:0;transform-origin:left;animation:v3-underline 5s var(--v3-ease) infinite}
.button-primary{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 8px 40px #c9ff8121;transition:box-shadow .45s,transform .35s,background .35s}
.button-primary:before{content:"";position:absolute;inset:-30% auto -30% -60%;width:28%;transform:skewX(-24deg);background:#ffffff5f;animation:v3-sheen 5.2s 1s infinite}
.button-primary:hover{box-shadow:0 14px 60px #d3fe8650}
.button-arrow{transition:transform .38s var(--v3-ease)}.button-primary:hover .button-arrow{transform:translate(6px,-6px) rotate(20deg)}
.hero-scene{filter:drop-shadow(0 20px 95px #a471f727)}
.scene-halo{position:absolute;inset:9%;border-radius:50%;z-index:0;pointer-events:none}
.halo-one{background:conic-gradient(from 0deg,transparent 4%,#b38aff18 16%,transparent 27%,#cefa8244 32%,transparent 42%,transparent 80%,#edb0e446 90%,transparent);filter:blur(19px);animation:v3-halo 13s linear infinite}
.halo-two{inset:2%;border:1px solid #f3e1ff0f;box-shadow:inset 0 0 70px #a568ff24,0 0 65px #d5aeff14;animation:v3-breathe 7s ease-in-out infinite alternate}
.scene-satellite{position:absolute;color:#d3fe86;font-size:35px;left:46%;top:-2%;z-index:3;filter:drop-shadow(0 0 12px #d3fe86aa);animation:v3-satellite 9s ease-in-out infinite}
.scene-core{box-shadow:0 20px 80px #a05aff4c,inset 0 0 54px #fbdfff22;animation-duration:7s}
.scene-core:before{content:"";position:absolute;inset:3%;border:1px solid #ffffff2e;border-radius:inherit;animation:v3-breathe 4s ease-in-out infinite alternate;pointer-events:none}
.core-symbol{animation:v3-star-spin 8s linear infinite}
.orbit-label{transition:scale .45s,filter .45s}.hero-scene:hover .orbit-label{scale:1.1;filter:brightness(1.35)}
.float-tile{backdrop-filter:blur(7px);box-shadow:0 18px 34px #0003}.float-a{animation-duration:4.4s}.float-b{animation-duration:6.1s;animation-delay:-2s}
.float-c{position:absolute;bottom:7%;left:30%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;width:89px;height:80px;border:1px solid #ffffff75;color:#151121;border-radius:9px;background:#d3fe86;transform:rotate(12deg);font:700 33px var(--font-title);animation:v3-tile-c 5.5s -1.7s ease-in-out infinite}
.float-c small{font:800 6px var(--font-title);letter-spacing:.08em}
.motion-strip-track{animation-duration:21s;will-change:transform}.motion-strip{box-shadow:0 14px 50px #0004}
/* Kinetic interlude: the words travel based on actual scroll position. */
.kinetic-interlude{color:#191523;background:#d3fe86;position:relative;overflow:hidden;padding:75px clamp(24px,5.5vw,100px) 70px;min-height:560px;isolation:isolate}
.kinetic-interlude:before{content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;background-image:radial-gradient(#1e172f 1px,transparent 1px);background-size:19px 19px;mask-image:linear-gradient(180deg,transparent,#000 48%,transparent)}
.kinetic-dots{position:absolute;right:6%;top:35px;display:flex;gap:9px}.kinetic-dots span{height:9px;width:9px;border-radius:50%;background:#1a1324;animation:v3-dot 1.3s ease-in-out infinite alternate}.kinetic-dots span:nth-child(2){animation-delay:.3s}.kinetic-dots span:nth-child(3){animation-delay:.6s}
.kinetic-overline{font:800 11px var(--font-title);letter-spacing:.14em;margin-bottom:45px}
.kinetic-type{font:700 clamp(76px,13.4vw,220px)/.77 var(--font-title);letter-spacing:-.118em;text-transform:uppercase;white-space:nowrap;position:relative;z-index:1;user-select:none}
.kinetic-word{display:block;width:max-content;max-width:none;will-change:transform;transition:color .5s;transform:translate3d(var(--kinetic-x,0px),0,0)}
.kinetic-word-a{color:#181321}.kinetic-word-b{color:transparent;-webkit-text-stroke:2px #1c1528;position:relative;margin-left:clamp(4px,9vw,190px)}.kinetic-word-c{color:#762cf5;position:relative;margin-left:-2vw}
.kinetic-asterisk{color:#171222;-webkit-text-stroke:0;display:inline-block;font-size:.48em;vertical-align:top;letter-spacing:0;margin-left:.15em;animation:v3-star-spin 10s linear infinite}
.kinetic-bottom{margin-top:50px;padding-top:20px;border-top:1px solid #1a152c65;display:flex;align-items:center;gap:24px;justify-content:space-between;position:relative;z-index:1}.kinetic-bottom p{font-size:14px;line-height:1.5;max-width:390px;margin-right:auto}.kinetic-round{display:grid;place-items:center;background:#1a1521;color:#d3fe86;width:67px;height:67px;border-radius:50%;font-size:34px;animation:v3-star-spin 12s linear infinite}.kinetic-link{display:flex;gap:30px;align-items:center;font:800 11px var(--font-title);letter-spacing:.1em;padding:18px 20px;border:1px solid #1a152d;color:#1a152d;border-radius:30px;transition:background .3s,color .3s}.kinetic-link:hover{color:#d3fe86;background:#1a152d}.kinetic-link span{font-size:18px}
/* Category tiles: entrance, free-floating icons, pointer spotlight, tactile hover. */
.universe{position:relative;isolation:isolate}.universe:before{content:"";position:absolute;top:3%;right:0;height:500px;width:40vw;background:radial-gradient(ellipse,#a571ff16,transparent 70%);pointer-events:none;z-index:-1}
.universe-card{isolation:isolate;transition:translate .6s var(--v3-ease),border-color .45s,box-shadow .5s,background .5s;--mx:50%;--my:50%}
.universe-card:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle 130px at var(--mx) var(--my),rgba(255,255,255,.19),transparent 72%);pointer-events:none;opacity:0;transition:opacity .4s}
.universe-card:hover:before{opacity:1}.universe-card:hover{box-shadow:0 20px 75px #04030d6b;border-color:#d3fe8677}
.universe-card .uni-index,.universe-card .uni-name,.universe-card .uni-go{position:relative;z-index:2}
.universe-card .uni-glyph{will-change:transform;animation:v3-glyph-float 6.8s ease-in-out infinite alternate;filter:drop-shadow(0 8px 20px #0003)}
.universe-card:nth-child(2n) .uni-glyph{animation-delay:-2s;animation-duration:8s}.universe-card:nth-child(3n) .uni-glyph{animation-duration:7.3s;animation-direction:alternate-reverse}
.universe-card:hover .uni-glyph{animation-play-state:paused;transform:translate(-10px,-12px) rotate(18deg) scale(1.15)}
.universe-card .uni-go{transition:transform .4s var(--v3-ease)}.universe-card:hover .uni-go{transform:translate(7px,-7px) rotate(25deg)}
.universe-card:active{scale:.985}
.section-eyebrow>span:first-child{display:inline-block;animation:v3-star-spin 15s linear infinite}
.eyebrow-rule{transform-origin:left;animation:v3-rule-grow 4.2s ease-in-out infinite alternate}
.section-display em{display:inline-block;animation:v3-tint 7s ease-in-out infinite alternate}
/* Catalog animation and a living filter surface */
.filter-deck{position:relative}.filter-search{transition:box-shadow .35s,background .35s,border-color .35s}.filter-search:focus-within{box-shadow:0 0 0 2px #a471f7,0 0 45px #a471f725;background:#221a2e}.filter-search svg{transition:transform .45s}.filter-search:focus-within svg{transform:scale(1.17) rotate(-8deg)}
.cat-filter{position:relative;overflow:hidden}.cat-filter:before{content:"";position:absolute;left:-130%;top:0;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);transition:left .7s}.cat-filter:hover:before{left:160%}.cat-filter[aria-pressed=true]{box-shadow:0 0 27px #d3fe8625}
.product-card{--mx:50%;--my:50%;--card-lift:0px;transform:translateY(var(--card-lift));transition:transform .6s var(--v3-ease),box-shadow .6s,border-color .4s;isolation:isolate}
.product-card:hover{--card-lift:-10px;box-shadow:0 28px 62px #0009}
.product-art{isolation:isolate}.product-art .product-emoji{animation:v3-product-float 5.2s ease-in-out infinite alternate}.product-card:nth-child(3n) .product-art .product-emoji{animation-delay:-1.5s;animation-duration:6s}
.product-card:nth-child(4n) .product-art .product-emoji{animation-delay:-3s;animation-duration:5.8s}
.product-art:before,.product-art:after{animation:v3-art-ring 15s linear infinite}.product-art:after{animation-direction:reverse;animation-duration:21s}
.product-art{--mx:50%;--my:50%}.product-art .product-emoji{filter:drop-shadow(0 20px 16px #0005)}
.product-art .product-number{letter-spacing:.2em}.product-tag{animation:v3-badge 3.5s ease-in-out infinite alternate}
.product-body:before{content:"";display:block;width:24px;height:2px;background:var(--acid);margin-bottom:7px;transform-origin:left;transition:transform .45s}.product-card:hover .product-body:before{transform:scaleX(2.3)}
.product-title{transition:color .3s}.product-card:hover .product-title{color:#e0c5ff}
/* Distinct secondary kinetic tape */
.discover-ribbon{padding:16px 0;overflow:hidden;background:#b88bf4;color:#191021;transform:rotate(-1.5deg) scale(1.025);position:relative;z-index:2;box-shadow:0 9px 32px #0007}
.discover-ribbon-track{display:flex;width:max-content;animation:v3-ribbon 30s linear infinite}.discover-ribbon-track span{white-space:nowrap;font:700 clamp(19px,2.4vw,38px) var(--font-title);letter-spacing:-.06em;padding-right:25px}
.manifesto{position:relative}.manifesto:before{content:"✳";position:absolute;right:-3%;top:4%;font:700 min(42vw,650px)/1 var(--font-title);color:#ffffff15;pointer-events:none;animation:v3-manifesto-star 35s linear infinite}
.manifesto-statement{transform:translate3d(var(--manifesto-x,0px),0,0);will-change:transform}
.manifesto-asterisk{display:inline-block;animation:v3-star-spin 13s linear infinite}
.manifesto-link b{animation:v3-exit-arrow 4s ease-in-out infinite}
.footer-word span{display:inline-block;animation:v3-star-spin 14s linear infinite}.footer-top a{transition:color .3s,translate .3s}.footer-top a:hover{translate:0 -5px}
/* Re-entrant intersection animations. JS adds motion-ready and toggles .is-visible on EVERY reentry. */
html.motion-ready .reveal{opacity:0;transform:translate3d(0,56px,0) skewY(1deg);filter:blur(9px);transition:none}
html.motion-ready .reveal.is-visible{animation:v3-rise 850ms var(--v3-ease) both}
html.motion-ready .hero-title .line:nth-child(2).is-visible{animation-delay:110ms}
html.motion-ready .hero-title .line:nth-child(3).is-visible{animation-delay:200ms}
html.motion-ready .hero-description.is-visible{animation-delay:250ms}
html.motion-ready .hero-cta.is-visible{animation-delay:330ms}
html.motion-ready .universe-card{opacity:0;translate:0 58px;transition:opacity .8s var(--v3-ease),translate .8s var(--v3-ease),box-shadow .5s,border-color .4s}
html.motion-ready .universe-card.is-visible{opacity:1;translate:0 0;transition-delay:var(--motion-delay,0ms)}
html.motion-ready .product-card{opacity:0;translate:0 56px;filter:blur(5px);transition:opacity .8s var(--v3-ease),translate .8s var(--v3-ease),filter .8s var(--v3-ease),transform .6s var(--v3-ease),box-shadow .6s,border-color .4s}
html.motion-ready .product-card.is-visible{opacity:1;translate:0 0;filter:blur(0);transition-delay:var(--motion-delay,0ms)}
html.motion-ready .kinetic-interlude .kinetic-word{opacity:0;transition:opacity .65s ease}
html.motion-ready .kinetic-interlude.is-visible .kinetic-word{opacity:1}
html.motion-ready .kinetic-interlude.is-visible .kinetic-word-b{transition-delay:.1s}
html.motion-ready .kinetic-interlude.is-visible .kinetic-word-c{transition-delay:.2s}
/* Magnetic pointer helper only on accurate hover devices */
.pointer-label{position:fixed;left:0;top:0;z-index:230;display:grid;place-items:center;width:98px;height:98px;transform:translate3d(-150px,-150px,0) scale(.4);background:var(--acid);color:#191422;border-radius:50%;font:800 12px var(--font-title);letter-spacing:.02em;pointer-events:none;opacity:0;transition:opacity .24s,scale .24s;box-shadow:0 20px 50px #0005}.pointer-label.is-active{opacity:1;scale:1}
@keyframes v3-rise{0%{opacity:0;transform:translate3d(0,56px,0) skewY(1deg);filter:blur(9px)}100%{opacity:1;transform:translate3d(0,0,0) skewY(0);filter:blur(0)}}
@keyframes v3-sheen{0%,17%,100%{translate:-220% 0}39%{translate:880% 0}}
@keyframes v3-ambient-a{from{transform:translate3d(-4%,-6%,0) scale(.83)}to{transform:translate3d(22%,21%,0) scale(1.12)}}
@keyframes v3-ambient-b{from{transform:translate3d(9%,10%,0) scale(1.2)}to{transform:translate3d(-18%,-16%,0) scale(.8)}}
@keyframes v3-ambient-c{from{transform:translate3d(0,8%,0)}to{transform:translate3d(34%,-22%,0)}}
@keyframes v3-scan{to{background-position:-250% 220%}}
@keyframes v3-star-spin{to{transform:rotate(360deg)}}
@keyframes v3-tint{from{filter:brightness(.86)}to{filter:brightness(1.45)}}
@keyframes v3-signal{0%{box-shadow:0 0 0 0 #d3fe8688}72%,100%{box-shadow:0 0 0 10px #d3fe8600}}
@keyframes v3-neon-text{0%,100%{text-shadow:0 0 0 #d3fe8600}50%{text-shadow:0 0 40px #d3fe8640}}
@keyframes v3-underline{0%,100%{transform:scaleX(.25)}50%{transform:scaleX(1)}}
@keyframes v3-halo{to{transform:rotate(360deg)}}
@keyframes v3-breathe{from{scale:.9;opacity:.35}to{scale:1.11;opacity:1}}
@keyframes v3-satellite{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(24px) rotate(180deg)}}
@keyframes v3-tile-c{0%,100%{transform:rotate(12deg) translateY(0)}50%{transform:rotate(1deg) translateY(-19px)}}
@keyframes v3-dot{to{transform:translateY(-8px);opacity:.3}}
@keyframes v3-glyph-float{from{transform:translateY(8px) rotate(-8deg) scale(.94)}to{transform:translateY(-11px) rotate(9deg) scale(1.06)}}
@keyframes v3-rule-grow{from{transform:scaleX(.2)}to{transform:scaleX(1)}}
@keyframes v3-product-float{from{translate:0 9px;rotate:-7deg}to{translate:0 -11px;rotate:8deg}}
@keyframes v3-art-ring{to{rotate:360deg}}
@keyframes v3-badge{to{filter:brightness(1.23)}}
@keyframes v3-ribbon{to{transform:translateX(-50%)}}
@keyframes v3-manifesto-star{to{transform:rotate(360deg)}}
@keyframes v3-exit-arrow{0%,100%{translate:0 0}50%{translate:6px -7px}}
/* Respect accessibility and performance. Keep native focus and interactions. */
@media(max-width:1040px){.switch-text{display:none}.motion-switch{width:39px;height:39px;justify-content:center;padding:0}.kinetic-type{font-size:clamp(73px,12.2vw,145px)}}
@media(max-width:800px){.hero-ambient i:nth-child(1){width:90vw;height:90vw}.hero-ambient i:nth-child(2){width:100vw;height:110vw}.kinetic-interlude{min-height:460px;padding:68px 24px 65px}.kinetic-type{font-size:clamp(66px,12.9vw,115px)}.kinetic-word-b{margin-left:6vw}.kinetic-bottom{gap:13px}.kinetic-round{width:48px;height:48px;font-size:25px;flex:none}.kinetic-bottom p{font-size:12px}.kinetic-link{font-size:9px;gap:8px;padding:13px}}
@media(max-width:540px){.hero-title .line:nth-child(3):after{height:2px;bottom:-6px}.float-c{width:57px;height:55px;bottom:4%;left:28%;font-size:23px}.float-c small{font-size:4px}.hero-ambient i:nth-child(3){width:80vw;height:80vw}.kinetic-interlude{min-height:375px;padding:64px 19px 43px}.kinetic-overline{font-size:8px;margin-bottom:38px}.kinetic-type{font-size:clamp(57px,13.6vw,78px);line-height:.92;letter-spacing:-.11em}.kinetic-word-b{margin-left:0}.kinetic-word-c{margin-left:-10px}.kinetic-bottom{margin-top:37px;flex-wrap:wrap}.kinetic-bottom p{width:calc(100% - 70px);margin:0;font-size:12px}.kinetic-link{margin-left:62px}.pointer-label{display:none}.discover-ribbon{padding:12px 0}.hero-scene{filter:drop-shadow(0 14px 40px #a471f71c)}.motion-switch{width:34px;height:34px}.header .nav-actions{gap:7px}}
@media(hover:none),(pointer:coarse){.pointer-label{display:none}.universe-card:hover .uni-glyph{animation-play-state:running;transform:none}.universe-card:before{display:none}.product-art:before,.product-art:after{animation-duration:25s}.hero-ambient i{filter:blur(15px)}}
@media(prefers-reduced-motion:reduce){.hero-grid{background-position:0 0!important}.kinetic-word,.manifesto-statement{transform:none!important}.pointer-label{display:none!important}.header,.product-card,.universe-card{transition:none!important}}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation:none!important;transition-duration:0ms!important;scroll-behavior:auto!important}
html.motion-paused .reveal,html.motion-paused .universe-card,html.motion-paused .product-card,html.motion-paused .kinetic-interlude .kinetic-word{opacity:1!important;translate:none!important;transform:none!important;filter:none!important}
html.motion-paused .pointer-label{display:none!important}
/* Graceful fallback when JavaScript has not initialized. */
html:not(.motion-ready) .reveal{opacity:1;transform:none;filter:none}
/* Limit continuous decoration to currently visible product and category cards. */
html.motion-ready .product-card:not(.is-visible) .product-emoji,
html.motion-ready .product-card:not(.is-visible) .product-art::before,
html.motion-ready .product-card:not(.is-visible) .product-art::after,
html.motion-ready .universe-card:not(.is-visible) .uni-glyph{animation-play-state:paused}