/* =============================================
   AxoraStore — Explainer Animator CSS
   ============================================= */

:root {
  --bg:       #050814;
  --surface:  #0d1526;
  --surface2: #111d35;
  --border:   rgba(99,153,255,0.13);
  --primary:  #4f8cff;
  --accent:   #a78bfa;
  --accent2:  #38bdf8;
  --success:  #22c55e;
  --gold:     #f7b32b;
  --text:     #e2e8f0;
  --muted:    #8899b4;
  --dim:      #4a5a75;
  --grad:     linear-gradient(135deg,#4f8cff 0%,#a78bfa 50%,#38bdf8 100%);
  --gradg:    linear-gradient(135deg,#22c55e,#4ade80);
  --font-h:   'Space Grotesk',sans-serif;
  --font-b:   'Inter',sans-serif;
  --ease:     cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-b);overflow-x:hidden;}
.hidden{display:none!important;}

/* =========== HEADER =========== */
.ex-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  background:rgba(5,8,20,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.ex-back{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none;transition:color .2s;}
.ex-back:hover{color:var(--primary);}
.ex-logo{display:flex;align-items:center;gap:0;text-decoration:none;}
.ex-logo-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ex-logo strong{font-weight:400;color:#fff;-webkit-text-fill-color:#fff;background:none;}
.ex-lang{display:flex;gap:4px;}
.ex-lang-btn{background:transparent;border:1px solid var(--border);border-radius:50px;padding:5px 12px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .2s;font-family:var(--font-b);}
.ex-lang-btn.active{background:var(--grad);color:#fff;border-color:transparent;}

/* =========== INTRO SCREEN =========== */
.ex-intro{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:100px 24px 60px;position:relative;overflow:hidden;text-align:center;
}
.ex-intro::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);
  width:700px;height:600px;
  background:radial-gradient(ellipse at center,rgba(79,140,255,.15) 0%,transparent 70%);
  pointer-events:none;
}
.ex-intro-inner{position:relative;z-index:2;max-width:600px;}
.ex-intro-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(79,140,255,.1);border:1px solid rgba(79,140,255,.22);
  border-radius:50px;padding:7px 18px;font-size:13px;font-weight:700;color:var(--accent2);
  margin-bottom:24px;
}
.ex-intro-title{font-family:var(--font-h);font-size:clamp(2rem,6vw,3.6rem);font-weight:900;line-height:1.1;letter-spacing:-1.5px;margin-bottom:16px;}
.ex-intro-title span{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ex-intro-sub{font-size:1.05rem;color:var(--muted);margin-bottom:40px;}
.ex-play-big{
  display:inline-flex;align-items:center;gap:16px;
  background:var(--grad);color:#fff;border:none;border-radius:60px;
  padding:18px 36px;font-size:18px;font-weight:700;cursor:pointer;
  box-shadow:0 8px 40px rgba(79,140,255,.45);
  transition:transform .25s var(--ease),box-shadow .25s;font-family:var(--font-b);
  animation:introBtn 2s ease-in-out infinite;
}
.ex-play-big:hover{transform:scale(1.06);box-shadow:0 12px 50px rgba(79,140,255,.6);}
@keyframes introBtn{0%,100%{box-shadow:0 8px 40px rgba(79,140,255,.45);}50%{box-shadow:0 8px 60px rgba(167,139,250,.7);}}
.ex-play-big-icon{width:48px;height:48px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;}

/* Floating icons */
.ex-intro-floats{position:absolute;inset:0;pointer-events:none;z-index:1;}
.ef{position:absolute;font-size:26px;color:var(--primary);opacity:.15;animation:efFloat linear infinite;}
.ef1{top:15%;left:8%; animation-duration:7s;animation-delay:0s;}
.ef2{top:20%;right:10%;animation-duration:9s;animation-delay:1s;}
.ef3{top:60%;left:5%; animation-duration:8s;animation-delay:2s;}
.ef4{top:70%;right:8%; animation-duration:10s;animation-delay:.5s;}
.ef5{top:40%;left:2%; animation-duration:6s;animation-delay:3s;}
.ef6{top:80%;left:50%;animation-duration:11s;animation-delay:1.5s;}
@keyframes efFloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-18px) rotate(12deg);}}

/* =========== PLAYER WRAPPER =========== */
.ex-player-wrap{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:80px 16px 20px;gap:20px;
}

/* =========== STAGE =========== */
.ex-stage{
  width:100%;max-width:900px;
  aspect-ratio:16/9;
  background:var(--surface);
  border-radius:20px;
  overflow:hidden;
  position:relative;
  box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px var(--border);
}

/* =========== SCENE SHARED =========== */
.ex-scene{
  position:absolute;inset:0;overflow:hidden;
  transition:opacity .6s var(--ease);
}
.ex-scene.hidden{opacity:0;pointer-events:none;}

.scene-caption{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(5,8,20,.95) 0%,rgba(5,8,20,.6) 80%,transparent 100%);
  padding:28px 28px 18px;
  display:flex;align-items:flex-end;gap:14px;
}
.cap-num{
  font-family:var(--font-h);font-size:2rem;font-weight:900;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  opacity:.35;line-height:1;flex-shrink:0;
}
.cap-text{font-size:.9rem;color:var(--text);line-height:1.55;font-weight:500;max-width:600px;}

/* =========== SCENE BACKGROUNDS =========== */
.scene-bg{position:absolute;inset:0;}
.scene-bg-1{background:radial-gradient(ellipse at 50% 110%,rgba(79,140,255,.18) 0%,transparent 65%),linear-gradient(160deg,#07102a 0%,#0a1830 100%);}
.scene-bg-2{background:radial-gradient(ellipse at 80% 50%,rgba(167,139,250,.15) 0%,transparent 60%),linear-gradient(150deg,#090e22 0%,#0d1a30 100%);}
.scene-bg-3{background:radial-gradient(ellipse at 30% 60%,rgba(56,189,248,.13) 0%,transparent 55%),linear-gradient(140deg,#061020 0%,#0b1828 100%);}
.scene-bg-4{background:radial-gradient(ellipse at 60% 40%,rgba(79,140,255,.18) 0%,transparent 65%),linear-gradient(160deg,#06101f 0%,#0d1830 100%);}
.scene-bg-5{background:radial-gradient(ellipse at 40% 70%,rgba(34,197,94,.12) 0%,transparent 55%),linear-gradient(140deg,#071512 0%,#0a1e18 100%);}
.scene-bg-6{background:radial-gradient(ellipse at 50% 50%,rgba(247,179,43,.13) 0%,transparent 65%),linear-gradient(150deg,#0d1005 0%,#151a08 100%);}

/* =========== SCENE 1 — Store =========== */
.s1-ground{position:absolute;bottom:80px;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,rgba(79,140,255,.3),transparent);}

.s1-store{
  position:absolute;bottom:82px;left:50%;transform:translateX(-50%);
  animation:storeRise .9s var(--ease) .3s both;
}
@keyframes storeRise{from{transform:translateX(-50%) translateY(60px);opacity:0;}to{transform:translateX(-50%) translateY(0);opacity:1;}}
.s1-store-roof{width:220px;height:50px;background:linear-gradient(135deg,#4f8cff,#a78bfa);clip-path:polygon(0 100%,50% 0%,100% 100%);margin:0 auto;}
.s1-store-body{width:200px;min-height:110px;background:var(--surface2);border:1px solid var(--border);border-radius:0 0 8px 8px;display:flex;flex-direction:column;align-items:center;padding:12px;gap:8px;}
.s1-store-sign{background:var(--grad);border-radius:8px;padding:6px 14px;font-size:12px;font-weight:800;color:#fff;display:flex;align-items:center;gap:6px;}
.s1-store-door{width:36px;height:52px;background:rgba(79,140,255,.2);border:2px solid rgba(79,140,255,.4);border-radius:4px 4px 0 0;position:relative;}
.s1-store-door::after{content:'';position:absolute;top:50%;right:6px;transform:translateY(-50%);width:5px;height:5px;background:var(--gold);border-radius:50%;}
.s1-store-win{width:28px;height:28px;background:rgba(56,189,248,.15);border:1px solid rgba(56,189,248,.3);border-radius:3px;position:absolute;}
.s1-win-l{left:14px;top:56px;}
.s1-win-r{right:14px;top:56px;}

.s1-person{position:absolute;bottom:84px;left:calc(50% - 140px);animation:personWalk 1.4s var(--ease) .8s both;}
@keyframes personWalk{from{left:8%;opacity:0;}to{left:calc(50% - 90px);opacity:1;}}
.s1-head{width:22px;height:22px;background:var(--accent);border-radius:50%;margin:0 auto;}
.s1-body{width:18px;height:28px;background:var(--primary);border-radius:4px;margin:2px auto;}
.s1-leg{width:8px;height:20px;background:var(--accent2);border-radius:3px;display:inline-block;margin:1px 1px 0;}
.s1-leg-l{animation:walkL 0.5s ease-in-out infinite alternate;}
.s1-leg-r{animation:walkR 0.5s ease-in-out infinite alternate;}
@keyframes walkL{from{transform:rotate(15deg);}to{transform:rotate(-15deg);}}
@keyframes walkR{from{transform:rotate(-15deg);}to{transform:rotate(15deg);}}

.s1-spark{position:absolute;color:var(--gold);animation:sparkPop .6s ease both;}
.sp1{top:22%;left:54%;animation-delay:.5s;}
.sp2{top:18%;left:48%;animation-delay:.7s;}
.sp3{top:25%;left:60%;animation-delay:.9s;}
@keyframes sparkPop{0%{opacity:0;transform:scale(0);}60%{opacity:1;transform:scale(1.4);}100%{opacity:0;transform:scale(1) translateY(-12px);}}

.s1-key{position:absolute;top:22%;left:50%;transform:translateX(-50%);font-size:28px;color:var(--gold);animation:keyFloat 1s var(--ease) .4s both;}
@keyframes keyFloat{from{opacity:0;transform:translateX(-50%) translateY(-20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}

/* =========== SCENE 2 — Catalog =========== */
.s2-screen{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);
  width:340px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.5);
  animation:screenIn .7s var(--ease) .2s both;
}
@keyframes screenIn{from{opacity:0;transform:translate(-50%,-45%);}to{opacity:1;transform:translate(-50%,-55%);}}
.s2-screen-top{background:var(--surface2);padding:10px 14px;display:flex;gap:6px;}
.s2-screen-top span{width:11px;height:11px;border-radius:50%;background:var(--dim);}
.s2-screen-top span:nth-child(1){background:#ef4444;}
.s2-screen-top span:nth-child(2){background:var(--gold);}
.s2-screen-top span:nth-child(3){background:var(--success);}
.s2-catalog{padding:12px;display:flex;flex-direction:column;gap:8px;}

.s2-product{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;opacity:0;animation:prodIn .4s ease both;}
.s2p-1{animation-delay:.5s;}
.s2p-2{animation-delay:.8s;}
.s2p-3{animation-delay:1.1s;}
@keyframes prodIn{from{opacity:0;transform:translateX(-15px);}to{opacity:1;transform:translateX(0);}}
.s2-prod-img{width:34px;height:34px;background:rgba(79,140,255,.1);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--primary);}
.s2-prod-name{font-size:11px;font-weight:700;margin-bottom:2px;}
.s2-prod-price{font-size:10px;color:var(--muted);}
.s2-prod-price span{color:var(--primary);font-weight:700;}
.s2-prod-add{margin-left:auto;width:24px;height:24px;background:var(--grad);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;animation:addPulse 1.5s ease-in-out infinite;}
@keyframes addPulse{0%,100%{box-shadow:0 0 0 0 rgba(79,140,255,.5);}50%{box-shadow:0 0 0 5px rgba(79,140,255,0);}}

.s2-cart-wrap{position:absolute;top:12%;right:10%;animation:cartIn .5s var(--ease) 1.5s both;}
@keyframes cartIn{from{opacity:0;transform:scale(0);}to{opacity:1;transform:scale(1);}}
.s2-cart{font-size:32px;color:var(--primary);}
.s2-cart-badge{position:absolute;top:-4px;right:-6px;background:var(--grad);color:#fff;font-size:11px;font-weight:800;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

.s2-tags{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.s2-tag{background:rgba(79,140,255,.1);border:1px solid rgba(79,140,255,.2);border-radius:50px;padding:5px 14px;font-size:11px;font-weight:700;color:var(--accent2);animation:tagFloat 2s ease-in-out infinite;}
.s2-tag:nth-child(1){animation-delay:0s;}
.s2-tag:nth-child(2){animation-delay:.5s;}
.s2-tag:nth-child(3){animation-delay:1s;}
@keyframes tagFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* =========== SCENE 3 — Warehouse =========== */
.s3-warehouse{
  position:absolute;bottom:80px;left:14%;
  animation:whIn .8s var(--ease) .3s both;
}
@keyframes whIn{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
.s3-wh-roof{width:200px;height:40px;background:linear-gradient(135deg,#38bdf8,#4f8cff);clip-path:polygon(0 100%,5% 0,95% 0,100% 100%);}
.s3-wh-body{width:200px;min-height:110px;background:var(--surface2);border:1px solid var(--border);border-radius:0 0 6px 6px;padding:10px;}
.s3-wh-label{font-size:11px;font-weight:800;color:var(--accent2);display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.s3-shelves{display:flex;flex-direction:column;gap:6px;}
.s3-shelf{display:flex;gap:4px;border-bottom:2px solid var(--border);padding-bottom:4px;}
.s3-box{font-size:16px;color:var(--primary);opacity:0;animation:boxIn .3s ease both;}
.s3b-1{animation-delay:.6s;} .s3b-2{animation-delay:.8s;} .s3b-3{animation-delay:1s;}
.s3b-4{animation-delay:1.2s;} .s3b-5{animation-delay:1.4s;} .s3b-6{animation-delay:1.6s;}
@keyframes boxIn{from{opacity:0;transform:scale(0);}to{opacity:1;transform:scale(1);}}

.s3-globe-wrap{position:absolute;top:12%;right:12%;animation:globeIn .7s var(--ease) .5s both;}
@keyframes globeIn{from{opacity:0;transform:scale(.5);}to{opacity:1;transform:scale(1);}}
.s3-globe{font-size:64px;color:var(--accent2);opacity:.7;animation:globeSpin 12s linear infinite;}
@keyframes globeSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.s3-pin{position:absolute;font-size:14px;color:var(--grad);animation:pinBounce 1.5s ease-in-out infinite;}
.s3pin-1{top:-8px;left:30%;color:#4f8cff;animation-delay:0s;}
.s3pin-2{top:30%;right:-10px;color:#a78bfa;animation-delay:.3s;}
.s3pin-3{bottom:10%;left:20%;color:#38bdf8;animation-delay:.6s;}
.s3pin-4{top:50%;left:-10px;color:var(--gold);animation-delay:.9s;}
@keyframes pinBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

.s3-fly-box{position:absolute;font-size:22px;color:var(--primary);animation:flyBox 2.5s ease-in-out infinite;}
.fb1{top:30%;left:35%;animation-delay:0s;}
.fb2{top:45%;left:55%;animation-delay:1s;}
@keyframes flyBox{0%{transform:translate(0,0) rotate(0);}50%{transform:translate(30px,-20px) rotate(15deg);}100%{transform:translate(0,0) rotate(0);}}

.s3-check{
  position:absolute;top:14%;left:16%;
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);
  border-radius:50px;padding:6px 14px;font-size:12px;font-weight:700;color:var(--success);
  display:flex;align-items:center;gap:6px;
  animation:checkPop .5s var(--ease) 1.8s both;
}
@keyframes checkPop{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:scale(1);}}

/* =========== SCENE 4 — Robot + Price =========== */
.s4-price-panel{
  position:absolute;top:50%;left:10%;transform:translateY(-60%);
  background:var(--surface);border:1px solid rgba(79,140,255,.25);border-radius:14px;padding:20px 22px;width:160px;
  animation:panelIn .6s var(--ease) .3s both;
}
@keyframes panelIn{from{opacity:0;transform:translateY(-60%) translateX(-30px);}to{opacity:1;transform:translateY(-60%) translateX(0);}}
.s4-pp-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--dim);display:flex;align-items:center;gap:5px;margin-bottom:10px;}
.s4-pp-label i{color:var(--primary);}
.s4-pp-value{font-family:var(--font-h);font-size:1.9rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;}
.s4-pp-sub{font-size:10px;color:var(--muted);}

.s4-arrow-wrap{
  position:absolute;top:50%;left:34%;transform:translateY(-60%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  animation:arrowIn .5s var(--ease) .7s both;
}
@keyframes arrowIn{from{opacity:0;transform:translateY(-60%) scaleX(0);}to{opacity:1;transform:translateY(-60%) scaleX(1);}}
.s4-arrow{display:flex;align-items:center;gap:0;}
.s4-arrow-line{width:60px;height:2px;background:var(--grad);}
.s4-arrow-head{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid var(--accent);}
.s4-arrow-label{font-size:10px;font-weight:700;color:var(--accent2);text-transform:uppercase;letter-spacing:.8px;}

.s4-robot{
  position:absolute;top:50%;left:46%;transform:translateY(-65%);
  animation:robotIn .7s var(--ease) .5s both;
}
@keyframes robotIn{from{opacity:0;transform:translateY(-55%);}to{opacity:1;transform:translateY(-65%);}}
.s4-robot-head{
  width:56px;height:48px;background:var(--surface2);border:2px solid rgba(79,140,255,.4);
  border-radius:12px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  gap:8px;position:relative;
}
.s4-robot-eye{width:10px;height:10px;background:var(--primary);border-radius:50%;animation:eyeBlink 3s ease-in-out infinite;}
@keyframes eyeBlink{0%,90%,100%{transform:scaleY(1);}95%{transform:scaleY(.1);}}
.s4-robot-mouth{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:20px;height:4px;background:var(--success);border-radius:4px;}
.s4-robot-body{
  width:64px;height:64px;background:var(--surface2);border:2px solid rgba(79,140,255,.35);
  border-radius:12px;margin:4px auto;display:flex;align-items:center;justify-content:center;
  animation:robotBody 2s ease-in-out infinite;
}
@keyframes robotBody{0%,100%{border-color:rgba(79,140,255,.35);}50%{border-color:rgba(79,140,255,.8);box-shadow:0 0 16px rgba(79,140,255,.3);}}
.s4-robot-chest{font-size:24px;color:var(--primary);}
.s4-robot-arm{
  width:14px;height:40px;background:var(--surface2);border:2px solid rgba(79,140,255,.35);
  border-radius:6px;position:absolute;top:64px;
}
.ra-l{left:-18px;animation:armL 1s ease-in-out infinite alternate;}
.ra-r{right:-18px;animation:armR 1s ease-in-out infinite alternate;}
@keyframes armL{from{transform:rotate(-20deg);}to{transform:rotate(20deg);}}
@keyframes armR{from{transform:rotate(20deg);}to{transform:rotate(-20deg);}}

.s4-mps{position:absolute;top:14%;right:8%;display:flex;flex-direction:column;gap:8px;}
.s4-mp{
  display:flex;align-items:center;gap:8px;
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  padding:7px 12px;font-size:12px;font-weight:700;color:var(--text);
  opacity:0;animation:mpSlide .4s ease both;
}
.mp1{animation-delay:1.0s;} .mp2{animation-delay:1.3s;} .mp3{animation-delay:1.6s;} .mp4{animation-delay:1.9s;}
@keyframes mpSlide{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
.s4-mp i{color:var(--primary);width:14px;text-align:center;}

.s4-ticks{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.s4-tick{
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);
  border-radius:50px;padding:5px 12px;font-size:11px;font-weight:700;color:var(--success);
  display:flex;align-items:center;gap:5px;
  opacity:0;animation:tickIn .4s ease both;
}
.t1{animation-delay:1.2s;} .t2{animation-delay:1.5s;} .t3{animation-delay:1.8s;}
@keyframes tickIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* =========== SCENE 5 — Customer =========== */
.s5-device{
  position:absolute;top:50%;left:16%;transform:translateY(-55%);
  width:160px;
  background:var(--surface2);border:3px solid var(--border);border-radius:24px;overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.5);
  animation:deviceIn .7s var(--ease) .3s both;
}
@keyframes deviceIn{from{opacity:0;transform:translateY(-45%) rotate(-5deg);}to{opacity:1;transform:translateY(-55%) rotate(0);}}
.s5-screen{background:var(--surface);padding:12px;}
.s5-listing{display:flex;flex-direction:column;gap:8px;}
.s5-listing-img{width:100%;height:70px;background:rgba(79,140,255,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--primary);}
.s5-listing-name{font-size:11px;font-weight:700;margin-bottom:2px;}
.s5-listing-price{font-size:14px;font-weight:900;color:var(--success);margin-bottom:8px;}
.s5-buy-btn{
  background:var(--gradg);color:#fff;border-radius:6px;padding:6px;
  font-size:10px;font-weight:700;text-align:center;display:flex;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;
  animation:buyPulse 1.8s ease-in-out infinite;
}
@keyframes buyPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5);}50%{box-shadow:0 0 0 8px rgba(34,197,94,0);}}
.s5-home-btn{width:34px;height:34px;border-radius:50%;background:var(--dim);margin:8px auto;}

.s5-notifs{
  position:absolute;top:14%;right:10%;
  display:flex;flex-direction:column;gap:8px;
}
.s5-notif{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:8px 14px;font-size:12px;font-weight:600;
  opacity:0;animation:notifSlide .5s ease both;
  min-width:180px;
}
.n1{animation-delay:1.0s;color:var(--gold);}
.n2{animation-delay:1.6s;color:var(--success);}
.n3{animation-delay:2.2s;color:var(--accent2);}
@keyframes notifSlide{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
.s5-notif i{font-size:16px;}

.s5-parcel{
  position:absolute;font-size:28px;color:var(--primary);
  animation:parcelFly 2s ease-in-out .8s infinite;
}
@keyframes parcelFly{
  0%{left:40%;top:70%;opacity:0;transform:rotate(-5deg);}
  30%{opacity:1;}
  100%{left:75%;top:25%;opacity:0;transform:rotate(15deg);}
}

/* =========== SCENE 6 — Wallet =========== */
.s6-wallet{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);
  animation:walletIn .8s var(--ease) .3s both;
}
@keyframes walletIn{from{opacity:0;transform:translate(-50%,-50%) scale(.5);}to{opacity:1;transform:translate(-50%,-60%) scale(1);}}
.s6-wallet-body{
  font-size:80px;color:var(--gold);
  filter:drop-shadow(0 0 30px rgba(247,179,43,.5));
  animation:walletBounce 1.5s ease-in-out infinite;
}
@keyframes walletBounce{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}
.s6-wallet-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:160px;height:160px;
  background:radial-gradient(circle,rgba(247,179,43,.2),transparent 70%);
  animation:walletGlow 1.5s ease-in-out infinite;pointer-events:none;
}
@keyframes walletGlow{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.3);}}

.s6-coins{position:absolute;inset:0;pointer-events:none;}

.s6-card{
  position:absolute;bottom:105px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#0d2a18,#0a1f2a);
  border:1px solid rgba(34,197,94,.35);border-radius:14px;
  padding:16px 24px;text-align:center;min-width:220px;
  animation:cardIn .6s var(--ease) .8s both;
}
@keyframes cardIn{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.s6-card-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:rgba(34,197,94,.6);margin-bottom:6px;}
.s6-card-amount{font-family:var(--font-h);font-size:2rem;font-weight:900;color:var(--success);text-shadow:0 0 20px rgba(34,197,94,.4);margin-bottom:4px;}
.s6-card-sub{font-size:11px;color:rgba(34,197,94,.55);margin-bottom:10px;}
.s6-card-bar{height:4px;background:rgba(34,197,94,.15);border-radius:4px;overflow:hidden;}
.s6-card-bar-fill{height:100%;width:0;background:var(--gradg);border-radius:4px;transition:width 1.5s ease .5s;}

.s6-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;}

.s6-cta{
  position:absolute;top:12%;left:50%;transform:translateX(-50%);
  text-align:center;
  animation:ctaIn .6s var(--ease) 1.5s both;
}
@keyframes ctaIn{from{opacity:0;transform:translateX(-50%) translateY(-12px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.s6-cta-text{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:10px;}
.s6-cta-btn{
  display:inline-block;background:var(--grad);color:#fff;
  border-radius:50px;padding:10px 24px;font-size:13px;font-weight:700;
  text-decoration:none;font-family:var(--font-b);
  box-shadow:0 4px 20px rgba(79,140,255,.4);
  animation:btnGlowLoop 2s ease-in-out infinite;
}
@keyframes btnGlowLoop{0%,100%{box-shadow:0 4px 20px rgba(79,140,255,.4);}50%{box-shadow:0 4px 32px rgba(167,139,250,.7);}}

/* =========== CONTROLS =========== */
.ex-controls{
  width:100%;max-width:900px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:14px 18px;
  display:flex;flex-direction:column;gap:12px;
}
.ex-progress-wrap{display:flex;flex-direction:column;gap:8px;}
.ex-progress-track{
  height:6px;background:rgba(255,255,255,.06);border-radius:6px;
  position:relative;cursor:pointer;overflow:visible;
}
.ex-progress-fill{
  height:100%;background:var(--grad);border-radius:6px;
  transition:width .3s linear;pointer-events:none;
}
.ex-progress-thumb{
  width:14px;height:14px;background:#fff;border-radius:50%;
  position:absolute;top:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px rgba(79,140,255,.4);
  transition:left .3s linear;pointer-events:none;
}
.ex-scene-dots{display:flex;gap:8px;justify-content:center;}
.ex-dot{
  width:8px;height:8px;border-radius:50%;background:var(--dim);
  cursor:pointer;transition:all .25s;
  border:none;padding:0;
}
.ex-dot.active{background:var(--primary);transform:scale(1.4);}
.ex-dot.done{background:rgba(79,140,255,.4);}

.ex-ctrl-row{display:flex;align-items:center;justify-content:space-between;}
.ex-ctrl-left,.ex-ctrl-right{display:flex;align-items:center;gap:8px;}
.ex-ctrl-btn{
  width:38px;height:38px;background:var(--surface2);border:1px solid var(--border);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--muted);cursor:pointer;transition:all .2s;
}
.ex-ctrl-btn:hover{background:rgba(79,140,255,.15);color:var(--text);border-color:rgba(79,140,255,.3);}
.ex-ctrl-play{
  width:48px;height:48px;background:var(--grad);border:none;
  color:#fff;font-size:16px;
}
.ex-ctrl-play:hover{transform:scale(1.08);background:var(--grad);}
.ex-scene-label{font-size:13px;font-weight:700;color:var(--muted);}

/* =========== COIN =========== */
.coin{
  position:absolute;font-size:18px;color:var(--gold);
  animation:coinFall linear forwards;
  pointer-events:none;
}
@keyframes coinFall{
  0%  {transform:translateY(0) rotate(0deg);  opacity:1;}
  100%{transform:translateY(260px) rotate(360deg);opacity:0;}
}

/* =========== CONFETTI PIECE =========== */
.confetti-piece{
  position:absolute;width:8px;height:8px;border-radius:2px;
  animation:confettiFall linear forwards;
  pointer-events:none;
}
@keyframes confettiFall{
  0%  {transform:translateY(-20px) rotate(0deg);  opacity:1;}
  100%{transform:translateY(400px) rotate(720deg);opacity:0;}
}

/* =========== SCENE TRANSITION =========== */
.scene-exit{animation:sceneExit .5s var(--ease) forwards;}
.scene-enter{animation:sceneEnter .5s var(--ease) forwards;}
@keyframes sceneExit{from{opacity:1;transform:scale(1);}to{opacity:0;transform:scale(.97);}}
@keyframes sceneEnter{from{opacity:0;transform:scale(1.02);}to{opacity:1;transform:scale(1);}}

/* =========== RESPONSIVE =========== */
@media(max-width:700px){
  .ex-stage{aspect-ratio:4/3;}
  .s2-screen{width:260px;}
  .cap-text{font-size:.78rem;}
  .s4-robot{left:40%;}
  .s4-mps{right:4%;}
  .s6-card-amount{font-size:1.4rem;}
  .s5-notifs{right:4%;}
  .ex-controls{border-radius:10px;padding:10px 12px;}
}
@media(max-width:480px){
  .ex-intro-title{font-size:1.7rem;}
  .s1-store{transform:translateX(-50%) scale(.8);}
  .s3-warehouse{transform:scale(.8);left:2%;}
  .s3-globe-wrap{right:2%;}
}