/* Pitara chest (shared by the scroll story, finale, portal and add-to-bag catch).
   The full chest has headroom above the box so Safari never clips the opening lid. */
.finale-chest .pitara-chest,.kit-cta-pitara .pitara-chest,.kit-empty-pitara .pitara-chest,.pf-cta-chest .pitara-chest,.kit-hero-pitara .pitara-chest{margin-top:-29.762%}
.pitara-chest.is-plain .chest-lid{transform-origin:150px 120px;transform:translateY(calc(var(--open,0) * -36px)) rotate(calc(var(--open,0) * -6deg))}
.pitara-chest{display:block;width:100%;height:auto;overflow:visible}
.pitara-chest .chest-lid{transform-box:view-box;transform-origin:270px 120px;transform:translate(calc(var(--open,0) * 6px),calc(var(--open,0) * -30px)) rotate(calc(var(--open,0) * 28deg));transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.pitara-chest .chest-glow{opacity:var(--open,0);transition:opacity .4s}
.pitara-chest .chest-lock{transform-box:fill-box;transform-origin:50% 0}
.is-idle .pitara-chest .chest-lid,.finale-chest .chest-lid{animation:chest-peek 3.2s ease-in-out infinite}
.is-idle .pitara-chest .chest-lock,.finale-chest .chest-lock{animation:lock-jiggle 3.2s ease-in-out infinite}
@keyframes chest-peek{0%,72%,100%{transform:none}78%{transform:translate(2px,-10px) rotate(3deg)}84%{transform:translate(0,-3px)}90%{transform:translate(1px,-7px) rotate(2deg)}}
@keyframes lock-jiggle{0%,72%,100%{rotate:0deg}78%{rotate:-14deg}86%{rotate:10deg}92%{rotate:-5deg}}

/* Hero: rotating photo stack, 3D toy orbit and scroll drift */
.playful-home .pp-hero-art{--hs:0;transform:translate(var(--move-x,0px),calc(var(--move-y,0px) + var(--hs) * 70px)) rotate(calc(var(--hs) * -5deg)) scale(calc(1 - var(--hs) * .06))}
.hero-slides{position:relative;z-index:2;isolation:isolate}
.hero-slide{position:absolute;inset:0;margin:0;opacity:0;clip-path:circle(0% at 82% 18%);transform:rotate(9deg) scale(1.18);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),transform 1.5s cubic-bezier(.2,.8,.2,1),opacity 0s 1.1s}
.hero-slide.is-active{opacity:1;z-index:2;clip-path:circle(150% at 82% 18%);transform:none;transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),transform 1.5s cubic-bezier(.2,.8,.2,1)}
.hero-slide.is-leaving{opacity:1;z-index:1;clip-path:circle(150% at 82% 18%);transform:rotate(-7deg) scale(1.15);transition:transform 1.3s ease-in}
.hero-slide img{display:block}
.pp-sun,.pp-spark{z-index:3}
.pp-photo-label,.pp-orbit-note{z-index:5}
.pp-photo-label.is-changing{animation:label-flip .55s ease-in-out}
@keyframes label-flip{50%{transform:rotate(-7deg) rotateX(90deg) scale(.95)}}
.hero-dots{position:absolute;left:50%;bottom:6px;translate:-50% 0;display:flex;gap:4px;z-index:5;background:#fff9ebd9;border-radius:20px;padding:4px 8px}
.hero-dots button{width:26px;height:26px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.hero-dots button:after{content:'';width:9px;height:9px;border-radius:9px;background:#d5c6e8;transition:width .3s,background .3s}
.hero-dots button[aria-pressed=true]:after{width:24px;background:#654299}
.hero-orbit{position:absolute;inset:0;pointer-events:none}
.hero-orbit span{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:#fff;border:4px solid #fff;box-shadow:0 10px 22px #4b2a7a2e;overflow:hidden;will-change:transform}
.hero-orbit img{width:100%;height:100%;object-fit:contain;padding:8px}

/* Scroll story: the Pitara opens and the toy library bursts out */
.pitara-explode{position:relative;height:420vh;background:radial-gradient(ellipse at 62% 55%,#fff3c9 0,#f1e8fa 38%,#e7dcf6 100%)}
.px-sticky{position:sticky;top:var(--header-h,0px);height:calc(100vh - var(--header-h,0px));height:calc(100dvh - var(--header-h,0px));overflow:hidden;display:grid;grid-template-columns:minmax(250px,28%) 1fr;align-items:center;gap:2%;padding:0 5%;max-width:1600px;margin:auto}
.px-copy{position:relative;z-index:6}
.px-copy h2{font-family:Nunito,sans-serif;font-weight:900;font-size:clamp(34px,3.6vw,56px);line-height:1.05;letter-spacing:-1.5px;margin:14px 0 26px}
.px-copy h2 em{color:#654299}
.px-chapters{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.px-chapters li{display:flex;gap:12px;align-items:baseline;font-size:15px;font-weight:700;opacity:.38;transition:opacity .4s,transform .4s}
.px-chapters li b{font:900 11px Nunito,sans-serif;background:#fff;border-radius:20px;padding:4px 9px;color:#654299}
.px-chapters li.is-active{opacity:1;transform:translateX(6px)}
.px-chapters li.is-active b{background:#654299;color:#fff}
.px-stage{position:relative;height:100%}
.px-rays{position:absolute;left:50%;top:46%;width:110vmax;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,#ffd76a 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 58%);mask:radial-gradient(circle,#000 0,transparent 58%);opacity:calc(var(--open,0) * .6);animation:rays-spin 40s linear infinite;pointer-events:none}
@keyframes rays-spin{to{rotate:360deg}}
.px-chest{position:absolute;left:50%;top:54%;width:min(31vw,49vh,400px);translate:-50% -50%;z-index:3}
.is-idle .px-chest{animation:chest-bob 2.6s ease-in-out infinite}
@keyframes chest-bob{50%{translate:-50% calc(-50% - 8px)}}
.px-lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.px-lines line{stroke:#654299;stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round;opacity:0}
.px-sparkles{position:absolute;left:50%;top:50%;z-index:2;pointer-events:none}
.px-sparkles span{position:absolute;left:0;top:0;font-size:22px;color:#f5bd2c;translate:-50% -50%;transform:rotate(var(--a)) translateY(calc(var(--burst,0) * -32vmin * var(--d)));opacity:calc(min(1, var(--burst,0) * 6) * (1 - var(--burst,0)))}
.px-sparkles span:nth-child(3n){color:#ed752b;font-size:16px}.px-sparkles span:nth-child(3n+1){color:#72a524}
.px-part{--pw:clamp(84px,12vmin,150px);position:absolute;left:0;top:0;z-index:4;width:max(var(--pw),160px);display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;visibility:hidden;will-change:transform;color:inherit;text-decoration:none}
.px-visual{width:var(--pw);aspect-ratio:1;border-radius:50%;background:#fff;border:5px solid #fff;box-shadow:0 0 0 3px var(--ring,#f5bd2c),0 16px 30px #4b2a7a29;display:grid;place-items:center;overflow:hidden;animation:part-float 4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.7s);transition:box-shadow .25s}
.px-visual img{width:100%;height:100%;object-fit:contain;padding:12%}
.px-visual .toy-icon{width:68%;height:68%}
.px-part-0{--ring:#ed752b;--i:0}.px-part-1{--ring:#72a524;--i:1}.px-part-2{--ring:#149ca5;--i:2}.px-part-3{--ring:#f5bd2c;--i:3}.px-part-4{--ring:#e45c9b;--i:4}.px-part-5{--ring:#654299;--i:5}
.px-label{margin-top:-10px;position:relative;background:#fff;border-radius:14px;padding:8px 13px;box-shadow:0 8px 18px #4b2a7a1f;opacity:var(--lbl,0);transform:translateY(calc((1 - var(--lbl,0)) * 8px))}
.px-label b{display:block;font:900 14px/1.2 Nunito,sans-serif}
.px-label small{display:block;font-size:11px;color:#686675;margin-top:2px}
.px-part:hover .px-visual,.px-part:focus-visible .px-visual{box-shadow:0 0 0 5px var(--ring),0 20px 34px #4b2a7a40}
@keyframes part-float{50%{transform:translateY(-8px) rotate(2deg)}}
.px-hint{position:absolute;left:50%;bottom:4%;translate:-50% 0;margin:0;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#654299;opacity:calc(1 - var(--open,0) * 3);z-index:5;white-space:nowrap}
.px-hint span{display:inline-block;animation:hint-bounce 1.2s ease-in-out infinite}
@keyframes hint-bounce{50%{transform:translateY(5px)}}

/* Finale chest */
.finale-chest{width:168px;margin:0 auto 6px;transition:transform .3s}
.pp-finale:has([data-pitara-open]:hover,[data-pitara-open]:focus-visible) .finale-chest{--open:.35;transform:translateY(-4px) rotate(-2deg)}
.pp-finale:has([data-pitara-open]:hover) .finale-chest .chest-lid{animation:none}

/* Portal: the shop opens out of the Pitara */
.pitara-portal{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:radial-gradient(circle at 50% 50%,#fff3c8 0,#f7cf72 14%,#9a72d2 40%,#4a2880 72%,#2f1856 100%);color:#fff;overflow:hidden;opacity:0;transition:opacity .25s}
.pitara-portal[open]{opacity:1}
@starting-style{.pitara-portal[open]{opacity:0}}
.pitara-portal::backdrop{background:transparent}
.portal-rays{position:absolute;left:50%;top:50%;width:170vmax;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,#ffd76a 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%);opacity:0;scale:.3;transition:opacity .4s,scale 1.2s cubic-bezier(.2,.8,.2,1);animation:rays-spin 22s linear infinite}
.pitara-portal.is-open .portal-rays{opacity:.45;scale:1}
.portal-chest{position:absolute;left:50%;top:47%;width:min(67vw,358px);translate:-50% -50%;z-index:2;transition:transform .55s cubic-bezier(.6,0,.9,.4),opacity .5s .1s}
.pitara-portal.is-shaking .portal-chest{animation:portal-shake .45s ease-in-out}
.pitara-portal.is-open .portal-chest{--open:1}
.pitara-portal.is-zoom .portal-chest{transform:scale(7);opacity:0}
@keyframes portal-shake{20%{rotate:-6deg}40%{rotate:6deg}60%{rotate:-4deg}80%{rotate:3deg}}
.portal-burst{position:absolute;inset:0;z-index:3;pointer-events:none}
.portal-piece{position:absolute;left:0;top:0;width:var(--s,90px);height:var(--s,90px);will-change:transform,opacity}
.portal-piece img{width:100%;height:100%;object-fit:contain;padding:10%;background:#fff;border-radius:50%;border:4px solid #fff;box-shadow:0 12px 26px #0003}
.portal-piece .toy-icon{width:100%;height:100%;filter:drop-shadow(0 8px 12px #0003)}
.portal-piece.is-confetti{width:14px;height:14px;border-radius:3px;background:var(--c)}
.portal-copy{position:absolute;left:50%;bottom:9%;translate:-50% 0;text-align:center;z-index:4;width:90%;opacity:0;transform:translateY(16px);transition:opacity .5s .35s,transform .5s .35s}
.pitara-portal.is-open .portal-copy{opacity:1;transform:none}
.portal-copy h2{font:900 clamp(32px,5vw,58px)/1.05 Nunito,sans-serif;letter-spacing:-1px;margin-top:12px}
.portal-copy em{color:#ffd25a}
.portal-skip{position:absolute;right:24px;bottom:24px;z-index:5;background:#fff;color:#654299;border:0;border-radius:30px;padding:12px 20px;font-weight:800;font-size:13px;cursor:pointer}

/* Add to bag: a mini Pitara pops out, catches the toy and bounces */
.mini-pitara{position:fixed;z-index:120;width:76px;pointer-events:none;margin-left:-38px}
.mini-pitara .pitara-chest .chest-lid{transition-duration:.25s}
.mini-pitara.is-caught .pitara-chest{animation:mini-squash .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes mini-squash{30%{transform:scale(1.18,.8) translateY(6px)}60%{transform:scale(.92,1.1) translateY(-8px)}}
.mini-plus{position:absolute;left:50%;top:-6px;translate:-50% 0;background:#654299;color:#fff;font:900 13px Nunito,sans-serif;border-radius:20px;padding:3px 9px;animation:plus-rise .8s ease-out forwards}
@keyframes plus-rise{from{opacity:0;transform:translateY(10px) scale(.6)}30%{opacity:1;transform:translateY(-6px) scale(1.1)}to{opacity:0;transform:translateY(-26px)}}
.pitara-flyer{position:fixed;left:0;top:0;z-index:121;width:84px;height:84px;border-radius:50%;background:#fff;border:4px solid #fff;box-shadow:0 12px 28px #4b2a7a40;object-fit:contain;padding:6px;pointer-events:none;will-change:transform}
.mini-spark{position:fixed;z-index:121;font-size:16px;color:#f5bd2c;pointer-events:none}
.nav-bag.pitara-caught{animation:bag-wiggle .6s ease-in-out}
.nav-bag.pitara-caught b{animation:count-pop .6s ease-out}
@keyframes bag-wiggle{20%{rotate:-12deg}45%{rotate:10deg}70%{rotate:-5deg}}
@keyframes count-pop{40%{transform:scale(1.6)}}

/* Toy parade along the bottom of the screen */
.play-parade{position:fixed;left:0;right:0;bottom:0;height:170px;pointer-events:none;z-index:30;overflow:hidden}
.parade-walker{position:absolute;left:0;bottom:4px;height:var(--h,62px);will-change:transform;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.parade-walker>svg{height:100%;width:auto;display:block;overflow:visible}
.parade-walker.is-left>svg{transform:scaleX(-1)}
.parade-car{--h:52px}.parade-doll{--h:84px}.parade-turtle{--h:48px}.parade-chick{--h:46px}.parade-hen{--h:96px;pointer-events:none}.parade-bunny{--h:64px}
.parade-walker [class^=leg-],.parade-walker .bob,.parade-walker .head,.parade-walker .tail,.parade-walker .ear,.parade-walker .wheel,.parade-walker .hop,.parade-walker .dance,.parade-walker .waddle,.parade-walker [class^=arm-],.parade-walker .skirt,.parade-walker .notes,.parade-walker .speed,.parade-walker .wing,.parade-walker .headlight,.parade-walker .trunk,.parade-walker .puff,.parade-walker .yarn{transform-box:fill-box}
.parade-walker .leg-a{animation:leg-step .36s ease-in-out infinite alternate}
.parade-walker .leg-b{animation:leg-step .36s ease-in-out infinite alternate-reverse}
@keyframes leg-step{from{transform:translateX(-4px)}to{transform:translateX(4px)}}
.parade-turtle .leg-a,.parade-turtle .leg-b{animation-duration:.8s}
.parade-turtle .head{transform-origin:0 50%;animation:turtle-head 1.6s ease-in-out infinite}
@keyframes turtle-head{50%{transform:translate(3px,-2px) rotate(-6deg)}}
.parade-puppy .bob{animation:dog-bob .18s ease-in-out infinite alternate}
@keyframes dog-bob{to{transform:translateY(-3px)}}
.parade-puppy .tail{transform-origin:100% 100%;animation:tail-wag .2s ease-in-out infinite alternate}
@keyframes tail-wag{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
.parade-puppy .ear{transform-origin:50% 0;animation:tail-wag .18s ease-in-out infinite alternate}
.parade-bunny .hop{transform-origin:50% 100%;animation:bunny-hop .6s cubic-bezier(.3,0,.4,1) infinite}
@keyframes bunny-hop{0%,100%{transform:translateY(0) scale(1.08,.92)}15%{transform:translateY(0) scale(.95,1.06)}50%{transform:translateY(-26px) rotate(-6deg)}}
.parade-car .wheel{transform-origin:center;animation:wheel-spin .3s linear infinite}
@keyframes wheel-spin{to{transform:rotate(360deg)}}
.parade-car .bob{animation:car-hum .12s linear infinite alternate}
@keyframes car-hum{to{transform:translateY(-1.5px)}}
.parade-car .speed{animation:speed-flicker .25s steps(2) infinite}
@keyframes speed-flicker{50%{opacity:.3;transform:translateX(-6px)}}
.parade-doll .dance{transform-origin:50% 100%;animation:doll-dance 1s ease-in-out infinite alternate}
@keyframes doll-dance{0%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(0) translateY(-6px)}100%{transform:rotate(9deg) translateY(0)}}
.parade-doll .arm-l{transform-origin:100% 100%;animation:arm-wave .5s ease-in-out infinite alternate}
.parade-doll .arm-r{transform-origin:0 100%;animation:arm-wave .5s ease-in-out infinite alternate-reverse}
@keyframes arm-wave{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.parade-doll .skirt{transform-origin:50% 0;animation:skirt-swish .5s ease-in-out infinite alternate}
@keyframes skirt-swish{to{transform:scaleX(1.12)}}
.parade-doll .notes{animation:notes-float 1.4s ease-in-out infinite}
@keyframes notes-float{0%{opacity:0;transform:translateY(6px)}40%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.parade-chick .waddle{transform-origin:50% 100%;animation:duck-waddle .32s ease-in-out infinite alternate}
@keyframes duck-waddle{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
/* Parade reactions */
.parade-bubble{position:absolute;left:50%;bottom:calc(100% + 6px);translate:-50% 0;background:#fff;color:#654299;font:900 12px/1 Nunito,sans-serif;padding:6px 10px;border-radius:12px;box-shadow:0 6px 14px #4b2a7a2e;white-space:nowrap;pointer-events:none;animation:bubble-pop .35s cubic-bezier(.3,1.6,.5,1)}
.parade-bubble:after{content:'';position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#fff}
.parade-bubble.is-sparkle{color:#e2a722;font-size:14px;letter-spacing:2px}
@keyframes bubble-pop{from{opacity:0;transform:translateY(8px) scale(.5)}}
.parade-heart{position:absolute;left:62%;bottom:70%;color:#f47fb4;font-size:16px;pointer-events:none;animation:heart-rise 1.1s ease-out forwards}
.parade-heart.heart-1{left:40%;font-size:12px}.parade-heart.heart-2{left:80%;font-size:14px}
@keyframes heart-rise{from{opacity:0;transform:translateY(6px) scale(.4)}25%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:translateY(-34px) rotate(14deg)}}
.parade-turtle .leg-a,.parade-turtle .leg-b{transform-origin:50% 0;transition:transform .25s,opacity .25s}
.parade-turtle .head{transition:transform .3s cubic-bezier(.5,0,.3,1.4),opacity .3s}
.parade-turtle.is-hiding .head{animation:none;transform:translateX(-18px) scale(.15);opacity:0}
.parade-turtle.is-hiding .leg-a,.parade-turtle.is-hiding .leg-b{animation:none;transform:scale(.1);opacity:0}
.parade-turtle.is-hiding .bob{animation:shell-shiver .1s linear 8}
@keyframes shell-shiver{50%{transform:translateX(-1.5px) rotate(-1.5deg)}}
.parade-bunny.is-fleeing .hop{animation-duration:.26s}
.parade-puppy.is-happy .leg-a,.parade-puppy.is-happy .leg-b{animation:none}
.parade-puppy.is-happy .bob{animation:none;transform:rotate(-8deg) translateY(4px);transform-origin:20% 100%}
.parade-puppy.is-happy .tail{animation-duration:.07s}
.parade-car .headlight{transform-origin:center}
.parade-car.is-honking .headlight{animation:headlight-flash .14s ease-in-out 8 alternate}
@keyframes headlight-flash{to{transform:scale(2.6);fill:#fff}}
.parade-car.is-honking>svg{transform-origin:36% 85%;animation:wheelie .7s ease-out}
.parade-car.is-honking.is-left>svg{transform-origin:64% 85%;animation-name:wheelie-left}
@keyframes wheelie{40%{rotate:-9deg}}
@keyframes wheelie-left{40%{rotate:9deg}}
.parade-doll.is-twirling .dance{animation:doll-twirl 1.1s ease-in-out}
@keyframes doll-twirl{25%{transform:scaleX(-1) translateY(-6px)}50%{transform:scaleX(1) translateY(-12px)}75%{transform:scaleX(-1) translateY(-6px)}}
.parade-chick .leg-a,.parade-chick .leg-b{animation-duration:.22s}
.parade-chick.is-scared .waddle{animation:shell-shiver .08s linear infinite}
.parade-chick.is-scared .leg-a,.parade-chick.is-scared .leg-b{animation:none}
.parade-chick.is-hurrying .leg-a,.parade-chick.is-hurrying .leg-b{animation-duration:.1s}
.parade-hen .leg-a,.parade-hen .leg-b{animation-duration:.3s}
.parade-hen.is-running .leg-a,.parade-hen.is-running .leg-b{animation-duration:.09s}
.parade-hen.is-running .bob{animation:dog-bob .09s ease-in-out infinite alternate}
.parade-hen .wing{transform-origin:80% 20%}
.parade-hen.is-scolding .wing{animation:wing-flap .12s ease-in-out infinite alternate}
.parade-hen.is-scolding .head{transform-origin:0 100%;animation:hen-peck .3s ease-in-out infinite alternate}
.parade-hen.is-scolding .leg-a,.parade-hen.is-scolding .leg-b{animation:none}
@keyframes wing-flap{to{transform:rotate(-38deg) translateY(-4px)}}
@keyframes hen-peck{to{transform:rotate(10deg) translateX(3px)}}
.parade-walker{--dir:1}.parade-walker.is-left{--dir:-1}
.parade-elephant{--h:70px}.parade-train{--h:54px}.parade-kitten{--h:48px}
.parade-bunny.is-fleeing>svg{animation:bunny-leap .55s cubic-bezier(.3,0,.4,1)}
@keyframes bunny-leap{45%{translate:0 -46px}}
.parade-hen.is-charging>svg{animation:hen-charge 1.3s ease-out}
@keyframes hen-charge{0%{translate:0 0}20%{translate:calc(var(--dir) * 18px) -10px}30%{translate:calc(var(--dir) * 20px) 0}45%{translate:calc(var(--dir) * 24px) -6px}55%,80%{translate:calc(var(--dir) * 24px) 0}100%{translate:0 0}}
.parade-elephant .ear{transform-origin:100% 20%;animation:ear-flap .9s ease-in-out infinite alternate}
@keyframes ear-flap{to{transform:rotate(10deg)}}
.parade-elephant .leg-a,.parade-elephant .leg-b{animation-duration:.6s}
.parade-elephant .trunk{transform-origin:0 0;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.parade-elephant.is-spraying .trunk{transform:rotate(-125deg)}
.parade-elephant.is-spraying .leg-a,.parade-elephant.is-spraying .leg-b{animation:none}
.parade-elephant.is-spraying .ear{animation-duration:.15s}
.parade-drop{position:absolute;top:4%;left:calc(50% + var(--dir) * 40%);width:7px;height:10px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#5cc6e8;pointer-events:none;animation:drop-arc .85s ease-out forwards}
@keyframes drop-arc{0%{transform:translate(0,0) scale(.5);opacity:1}45%{transform:translate(calc(var(--dir) * var(--k) * 24px),calc(var(--k) * -30px))}100%{transform:translate(calc(var(--dir) * var(--k) * 50px),14px);opacity:0}}
.parade-train .puff{transform-origin:center;animation:puff 1.2s ease-out infinite}
.parade-train .p2{animation-delay:.4s}.parade-train .p3{animation-delay:.8s}
@keyframes puff{0%{transform:scale(.4);opacity:.95}100%{transform:translate(-22px,-16px) scale(1.7);opacity:0}}
.parade-train .wheel{transform-origin:center;animation:wheel-spin .5s linear infinite}
.parade-train .bob{animation:car-hum .18s linear infinite alternate}
.parade-train .headlight{transform-origin:center}
.parade-train.is-whistling .puff{animation:puff-big .45s ease-out infinite}
.parade-train.is-whistling .headlight{animation:headlight-flash .14s ease-in-out 8 alternate}
@keyframes puff-big{0%{transform:scale(.6);opacity:1}100%{transform:translate(-30px,-26px) scale(2.6);opacity:0}}
.parade-kitten .yarn{transform-origin:center;animation:wheel-spin .9s linear infinite}
.parade-kitten .tail{transform-origin:100% 100%;animation:kitten-tail .6s ease-in-out infinite alternate}
@keyframes kitten-tail{to{transform:rotate(14deg)}}
.parade-kitten.is-pouncing>svg{animation:kitten-pounce .8s cubic-bezier(.3,0,.4,1)}
.parade-kitten.is-left.is-pouncing>svg{animation-name:kitten-pounce-left}
@keyframes kitten-pounce{0%{translate:0 0}30%{translate:-4px 5px}65%{translate:14px -30px}100%{translate:0 0}}
@keyframes kitten-pounce-left{0%{translate:0 0}30%{translate:4px 5px}65%{translate:-14px -30px}100%{translate:0 0}}
.parade-kitten.is-pouncing .leg-a,.parade-kitten.is-pouncing .leg-b{animation:none}
.parade-kitten.is-pouncing .tail{animation-duration:.07s}
.parade-toggle{position:fixed;left:14px;bottom:14px;z-index:31;width:40px;height:40px;border-radius:50%;border:2px solid #e7dcf6;background:#fff;box-shadow:0 6px 16px #4b2a7a26;display:grid;place-items:center;cursor:pointer;padding:0}
.parade-toggle svg{width:16px;height:16px;fill:#654299;stroke:#654299;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.parade-toggle .icon-play,.parade-off .parade-toggle .icon-pause{display:none}
.parade-off .parade-toggle .icon-play{display:inline}
.parade-off .play-parade{display:none}
.parade-toggle .icon-pause{fill:none}

/* Why renting: little looping stories */
.benefit-art{display:block;width:100%;max-width:230px;height:auto;margin:0 0 4px;overflow:visible}
.benefit-art *{transform-box:fill-box}
.pp-benefits .benefit-art *{animation-play-state:paused}
.pp-benefits.pp-visible .benefit-art *,html:not(.pp-motion) .pp-benefits .benefit-art *{animation-play-state:running}
.ba-coin{transform-origin:center;opacity:0;animation:coin-drop 2.4s cubic-bezier(.5,0,.8,.6) infinite}
.ba-coin-1{animation-delay:.8s}.ba-coin-2{animation-delay:1.6s}
@keyframes coin-drop{0%{transform:translateY(-16px) scaleX(1);opacity:0}15%{opacity:1}40%{transform:translateY(4px) scaleX(-1)}75%{transform:translateY(26px) scaleX(1);opacity:1}85%,100%{transform:translateY(30px) scale(1,.2);opacity:0}}
.ba-piggy{transform-origin:50% 100%;animation:piggy-gulp .8s ease-in-out infinite}
@keyframes piggy-gulp{0%,15%,50%,100%{transform:none}25%{transform:scale(1.04,.95)}38%{transform:scale(.98,1.04) translateY(-3px)}}
.ba-sparkle{transform-origin:center;animation:twinkle 1.6s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(.4) rotate(45deg);opacity:.3}}
.ba-toy{animation:4.5s cubic-bezier(.4,0,.5,1) infinite}
.ba-toy-0{animation-name:toy-in-0}.ba-toy-1{animation-name:toy-in-1}.ba-toy-2{animation-name:toy-in-2}
@keyframes toy-in-0{0%,6%{transform:none;opacity:1}18%{transform:translate(36px,-62px) rotate(180deg)}28%{transform:translate(70px,-6px) rotate(320deg) scale(.8);opacity:1}29%,90%{transform:translate(70px,-6px);opacity:0}100%{transform:none;opacity:1}}
@keyframes toy-in-1{0%,24%{transform:none;opacity:1}36%{transform:translate(-36px,-62px) rotate(-160deg)}46%{transform:translate(-73px,-6px) rotate(-300deg) scale(.8);opacity:1}47%,90%{transform:translate(-73px,-6px);opacity:0}100%{transform:none;opacity:1}}
@keyframes toy-in-2{0%,42%{transform:none;opacity:1}54%{transform:translate(34px,-26px) rotate(140deg) scale(1.15)}64%{transform:translate(62px,44px) rotate(280deg) scale(.8);opacity:1}65%,90%{transform:translate(62px,44px);opacity:0}100%{transform:none;opacity:1}}
.ba-flap{transform-box:view-box;transform-origin:100px 68px;animation:flaps 4.5s ease-in-out infinite}
@keyframes flaps{0%,70%,100%{transform:none}78%,92%{transform:scaleY(.12)}}
.benefit-space{animation:none}
.ba-rainbow{stroke-dasharray:100;stroke-dashoffset:100;animation:rainbow-draw 4s ease-in-out infinite}
.ba-rb-1{animation-delay:.2s}.ba-rb-2{animation-delay:.4s}
@keyframes rainbow-draw{0%{stroke-dashoffset:100;opacity:1}35%,75%{stroke-dashoffset:0;opacity:1}90%,100%{stroke-dashoffset:0;opacity:0}}
.ba-star{transform-origin:center;opacity:0;animation:star-rise 2.4s ease-out infinite}
.ba-star-1{animation-delay:.6s}.ba-star-2{animation-delay:1.2s}.ba-star-3{animation-delay:1.8s}
@keyframes star-rise{0%{transform:translateY(10px) scale(.3);opacity:0}25%{opacity:1}100%{transform:translateY(-70px) rotate(160deg) scale(1.1);opacity:0}}
.pp-motion .pp-visible .pp-benefit-grid article>span{animation:number-pop .7s cubic-bezier(.3,1.6,.5,1) both}
.pp-motion .pp-visible .pp-benefit-grid article:nth-child(2)>span{animation-delay:.12s}.pp-motion .pp-visible .pp-benefit-grid article:nth-child(3)>span{animation-delay:.24s}
@keyframes number-pop{from{transform:scale(.3) rotate(-20deg);opacity:0}}
.pp-benefit-grid article{transition:transform .3s}
.pp-benefit-grid article:hover{transform:translateY(-6px)}

/* A little cycle: a toy car drives through the steps */
.pp-steps.has-track{position:relative;padding-top:72px}
.steps-track{position:absolute;top:22px;height:40px;left:27px;width:0;height:30px;pointer-events:none}
.steps-road{position:absolute;left:0;right:0;bottom:2px;height:5px;border-radius:5px;background:linear-gradient(90deg,#654299 calc(var(--p,0) * 100%),#e4dcef 0)}
.steps-road:after{content:'';position:absolute;inset:1.5px 0;background:repeating-linear-gradient(90deg,#fff 0 10px,transparent 0 22px);opacity:.7}
.steps-car{position:absolute;left:-38px;bottom:5px;width:76px;will-change:transform}
.steps-car svg{display:block;width:100%;overflow:visible}
.steps-car .wheel{transform-box:fill-box;transform-origin:center}
.steps-track.is-moving .steps-car .wheel{animation:wheel-spin .35s linear infinite}
.steps-track.is-moving .steps-car svg{animation:car-hum .12s linear infinite alternate}
.pp-steps.has-track article:after{display:none}
.steps-ready article>span{transition:transform .45s cubic-bezier(.3,1.6,.5,1),filter .4s,opacity .4s,box-shadow .4s}
.steps-ready article:not(.is-lit)>span{filter:grayscale(.85);opacity:.5;transform:scale(.88) rotate(0)}
.steps-ready article.is-lit>span{box-shadow:0 0 0 5px #fff,0 0 0 8px #65429933}
.steps-ready article h3,.steps-ready article p{transition:opacity .4s}
.steps-ready article:not(.is-lit) h3,.steps-ready article:not(.is-lit) p{opacity:.45}
@media(max-width:800px){
 .playful-home .pp-benefit-grid article{padding-left:0}
 .playful-home .pp-benefit-grid article>span{position:static;display:block}
 .benefit-art{max-width:190px}
 .steps-track{display:none}
 .pp-steps.has-track{padding-top:0}

 .px-sticky{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:18px 5% 0;gap:0}
 .px-copy h2{font-size:30px;margin:8px 0 10px}
 .px-chapters{margin:0 0 6px;display:block}
 .px-chapters li{display:none;font-size:13px}
 .px-chapters li.is-active{display:flex;transform:none}
 .px-copy .px-skip{display:none}
 .px-chest{width:min(51vw,33vh,268px);top:52%}
 .px-part{--pw:clamp(64px,17vw,92px);width:max(var(--pw),110px)}
 .px-label{padding:6px 9px}.px-label b{font-size:12px}.px-label small{display:none}
 .hero-orbit span{width:56px;height:56px;margin:-28px 0 0 -28px;border-width:3px}
 .parade-walker{--h:44px}.parade-doll{--h:62px}.parade-car{--h:38px}.parade-turtle,.parade-chick{--h:36px}.parade-hen{--h:72px}.parade-elephant{--h:52px}.parade-train{--h:40px}.parade-kitten{--h:36px}.parade-bunny{--h:46px}
 .play-parade{height:140px}
 .parade-toggle{width:34px;height:34px;left:10px;bottom:10px}
 .portal-skip{right:50%;translate:50% 0;bottom:20px}
}
@media(prefers-reduced-motion:reduce){
 .pitara-explode{height:auto}
 .px-sticky{position:relative;top:0;height:auto;min-height:620px}
 .px-stage{height:560px}
 .px-hint,.play-parade,.parade-toggle{display:none}
 .hero-slide,.hero-slide.is-active,.hero-slide.is-leaving{transition:none;clip-path:none;transform:none}
 .px-visual,.px-rays,.portal-rays,.is-idle .px-chest,.is-idle .pitara-chest .chest-lid,.finale-chest .chest-lid,.finale-chest .chest-lock{animation:none}
 .pp-hero-art{transform:none}
}