/* Tela inicial por áreas: cada porta é uma cena pequena e viva (céu, mar, palco, noite),
   com um movimento próprio e calmo. Em cima, os três joguinhos de mexer: pular, dirigir, montar. */
#stage[data-screen=home]{background:linear-gradient(#eef7f2,#f6f1e4)}
.hero-row{gap:10px;margin-bottom:14px}
.hero-door{padding:0;min-height:0;overflow:hidden;border-radius:20px;gap:0;background:#fffaf1;box-shadow:0 5px 12px #6e574418;animation:ar-in .5s cubic-bezier(.3,1.4,.5,1) backwards}
.hero-door:nth-child(2){animation-delay:.06s}.hero-door:nth-child(3){animation-delay:.12s}
.play-shortcut.hero-door>span.hero-art{width:100%;height:92px;display:block;position:relative;overflow:hidden}
.hero-door strong{display:block;padding:6px 2px 9px;font-size:min(16px,max(11.5px,3.4vw));white-space:nowrap;overflow:hidden;text-overflow:clip}
.area-grid{gap:12px}
.category-grid .area-door{padding:0;justify-content:flex-start;min-height:0;overflow:hidden;animation:ar-in .5s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(.15s + var(--i,0) * .04s)}
.category-grid .area-door .door-art,.category-grid .world-door.area-door[data-world=halloween] .door-art{width:100%;height:104px;flex:none;padding:0;margin:0}
.category-grid .world-door.area-door[data-world=halloween]{justify-content:flex-start;padding:0}
.category-grid .area-door .door-label,.category-grid .world-door.area-door[data-world=halloween] .door-label{padding:7px 6px 10px;font-size:17px}
@media(min-width:600px){.category-grid.area-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.category-grid .area-door .door-art,.category-grid .world-door.area-door[data-world=halloween] .door-art{height:120px}.play-shortcut.hero-door>span.hero-art{height:118px}}
@media(min-width:900px){.category-grid.area-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.category-grid .area-door .door-art,.category-grid .world-door.area-door[data-world=halloween] .door-art{height:132px}}
@keyframes ar-in{from{opacity:0;scale:.86;translate:0 14px}to{opacity:1;scale:1;translate:0 0}}

/* Base das cenas */
.ar{position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none}
.ar .art-img,.ar img{position:absolute;object-fit:contain;pointer-events:none}
.ar-a{position:absolute;display:block}
.ar-a>.art-img{position:static;width:100%;height:100%}
.ar-hill{position:absolute;left:-10%;right:-10%;bottom:-38%;height:70%;border-radius:50%;background:linear-gradient(#a6dc86,#8bcc6d)}
.ar .nav-character{position:absolute;width:auto;left:auto}

/* ABC e Números: blocos de madeira que pulam um de cada vez */
.ar-abc{background:radial-gradient(circle,#fff6 2px,transparent 2.5px) 0 0/18px 18px,linear-gradient(#fbe7c6,#f3d3a3)}
.ar-numeros{background:radial-gradient(circle,#fff6 2px,transparent 2.5px) 0 0/18px 18px,linear-gradient(#dcf1e8,#bfe2d4)}
.ar-blocks{position:absolute;left:50%;top:50%;width:min(86%,130px);aspect-ratio:120/100;translate:-50% -46%}
.ar-blocks svg{width:100%;height:100%;overflow:visible}
.ar-blocks svg>g{animation:ar-block 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.ar-blocks svg>g:nth-child(2){animation-delay:.35s}.ar-blocks svg>g:nth-child(3){animation-delay:.7s}
.ar-numeros .ar-blocks{left:42%}
.ar-duck{position:absolute;right:2%;bottom:4%;width:30%;height:44%;animation:ar-waddle 1.6s ease-in-out infinite alternate}
.ar-duck .art-img{position:static;width:100%;height:100%}
@keyframes ar-block{0%,70%,100%{translate:0 0}80%{translate:0 -14%}90%{translate:0 2%}}
@keyframes ar-waddle{from{rotate:-7deg}to{rotate:7deg}}

/* Bichos: morro, vaca e cachorrinho */
.ar-fazenda{background:linear-gradient(#a9dcf5,#d9f1fb 70%)}
.ar-cow{left:4%;bottom:4%;width:52%;height:84%;transform-origin:50% 100%;animation:ar-nod 3.2s ease-in-out infinite}
.ar-dog{right:4%;bottom:2%;width:44%;height:70%;transform-origin:50% 100%;animation:ar-hop 2.2s ease-in-out infinite}
@keyframes ar-nod{0%,60%,100%{rotate:0deg}70%{rotate:-6deg}85%{rotate:4deg}}
@keyframes ar-hop{0%,55%,100%{translate:0 0;scale:1}65%{translate:0 0;scale:1.06 .94}78%{translate:0 -16%;scale:.96 1.05}90%{translate:0 0;scale:1.04 .96}}

/* Fundo do mar: bolhas subindo, baleia boiando, peixinho passando */
.ar-mar{background:linear-gradient(#8fdcf5,#4fb2dd 55%,#2f8fc4)}
.ar-sand{position:absolute;left:-5%;right:-5%;bottom:-22%;height:40%;border-radius:50%;background:#f1d79e}
.ar-whale{left:14%;top:12%;width:60%;height:66%;animation:ar-float 3.4s ease-in-out infinite alternate}
.ar-fish{left:0;bottom:8%;width:26%;height:30%;animation:ar-swim 7s linear infinite}
.ar-bubble{position:absolute;bottom:-12px;left:calc(8% + var(--i) * 15%);width:calc(6px + var(--i) * 1.5px);aspect-ratio:1;border-radius:50%;border:2px solid #ffffffb0;background:#ffffff30;animation:ar-rise calc(3.6s + var(--i) * .5s) linear infinite;animation-delay:calc(var(--i) * -.9s)}
@keyframes ar-float{from{translate:0 -4%;rotate:-2deg}to{translate:0 5%;rotate:2deg}}
@keyframes ar-swim{0%{translate:-30% 0;scale:1 1}48%{translate:340% -10%;scale:1 1}50%{translate:340% -10%;scale:-1 1}98%{translate:-30% 0;scale:-1 1}100%{translate:-30% 0;scale:1 1}}
@keyframes ar-rise{from{translate:0 0;opacity:0}15%{opacity:1}to{translate:6px -140px;opacity:0}}

/* Montar e Casa: as ilustrações pintadas */
.ar-montar{background:radial-gradient(circle at 50% 60%,#f4efff,#ddd2f4)}
.ar-casa{background:linear-gradient(#bfe6fb,#e4f6ff 75%)}
.ar .world-illustration{position:absolute;left:50%;top:50%;width:min(78%,100px);height:auto;aspect-ratio:1;translate:-50% -46%;background-size:200% 200%}
.ar-montar .world-illustration{animation:ar-wiggle 3s ease-in-out infinite}
.ar-casa .world-illustration{top:46%;animation:ar-breathe 3.4s ease-in-out infinite alternate}
@keyframes ar-wiggle{0%,70%,100%{rotate:0deg}78%{rotate:-6deg}88%{rotate:5deg}}
@keyframes ar-breathe{from{scale:1}to{scale:1.05}}

/* Música: xilofone e notinhas subindo */
.ar-musica{background:radial-gradient(ellipse at 50% 20%,#ffd9e8,#f6b7cf)}
.ar-xylo{left:50%;bottom:6%;width:min(82%,128px);height:auto;translate:-50% 0;animation:ar-breathe 1.2s ease-in-out infinite alternate}
.ar-note{position:absolute;bottom:20%;left:calc(14% + var(--i) * 20%);font-style:normal;font-weight:800;font-size:24px;color:#fff;text-shadow:0 2px 0 #d4708f;animation:ar-note 3s ease-out infinite;animation-delay:calc(var(--i) * -.75s)}
.ar-note:nth-child(2n){color:#fff6c8}
@keyframes ar-note{from{translate:0 0;opacity:0;scale:.6}20%{opacity:1}to{translate:8px -90px;opacity:0;scale:1.2}}

/* Arte: paleta e pinguinhos de tinta */
.ar-arte{background:linear-gradient(#fff8ec,#fbe6cf)}
.ar-palette{left:50%;top:10%;width:min(88%,140px);height:auto;translate:-50% 0;transform-origin:30% 80%;animation:ar-wiggle 3.6s ease-in-out infinite}
.ar-splats{position:absolute;left:0;right:0;bottom:-8px;height:26%;display:flex;justify-content:center;gap:4%}
.ar-splats i{width:min(15%,34px);aspect-ratio:1;border-radius:46% 54% 50% 50%;background:#ef5b50;animation:ar-breathe 1.6s ease-in-out infinite alternate}
.ar-splats i:nth-child(2){background:#ffc23a;animation-delay:-.4s}.ar-splats i:nth-child(3){background:#2fa866;animation-delay:-.8s}.ar-splats i:nth-child(4){background:#2f7ff0;animation-delay:-1.2s}

/* Creche: Maya pulando, Tutu balançando, bola quicando */
.ar-creche{background:linear-gradient(#bfe6fb,#e7f7ff 70%)}
.ar .ar-maya{left:6%;bottom:6%;width:42%;height:88%;animation:ar-jump 1.6s ease-in-out infinite}
.ar .ar-tutu{right:4%;bottom:4%;width:38%;height:82%;transform-origin:50% 100%;animation:ar-sway 2s ease-in-out infinite alternate}
.ar-ball{position:absolute;left:44%;bottom:6%;width:20%;height:26%;animation:ar-bounce 1s cubic-bezier(.5,0,.5,1) infinite alternate}
.ar-ball .art-img{position:static;width:100%;height:100%}
@keyframes ar-jump{0%,100%{translate:0 0}45%{translate:0 -16%}}
@keyframes ar-sway{from{rotate:-5deg}to{rotate:5deg}}
@keyframes ar-bounce{from{translate:0 -70%}to{translate:0 0}}

/* Carros: rua que passa, ônibus e carrinho */
.ar-transportes,.hero-drive{background:linear-gradient(#a9dcf5,#e1f4fc 60%)}
.ar-road{position:absolute;left:0;right:0;bottom:0;height:34%;background:#7d8590;box-shadow:inset 0 4px 0 #5c636c}
.ar-road::after{content:"";position:absolute;left:0;right:0;top:46%;height:4px;background:repeating-linear-gradient(90deg,#fff 0 18px,transparent 18px 36px);animation:ar-dash .6s linear infinite}
.ar-bus{right:4%;bottom:18%;width:50%;height:auto;animation:ar-rumble .4s ease-in-out infinite alternate}
.ar-car{left:4%;bottom:6%;width:46%;height:auto;scale:-1 1;animation:ar-rumble .32s ease-in-out infinite alternate}
@keyframes ar-dash{from{background-position-x:0}to{background-position-x:-36px}}
@keyframes ar-rumble{from{translate:0 0}to{translate:0 -3%}}

/* Halloween: noite com lua, abóbora e fantasminha que flutua */
.ar-halloween{background:radial-gradient(circle at 80% 18%,#7d6aa6,#3c2e5c 70%)}
.ar-moon{position:absolute;right:10%;top:10%;width:20%;aspect-ratio:1;border-radius:50%;background:#fff3c4;box-shadow:0 0 18px #fff3c488}
.ar-pumpkin{left:8%;bottom:4%;width:48%;height:66%;animation:ar-breathe 1.8s ease-in-out infinite alternate}
.ar-ghost{right:8%;top:10%;width:38%;height:60%;animation:ar-float 2.6s ease-in-out infinite alternate}

/* Álbum */
.ar-album{background:radial-gradient(circle,#fff6c8,#f6e2a0)}
.ar-star{left:50%;top:50%;width:62%;height:76%;translate:-50% -50%;animation:ar-spin 6s ease-in-out infinite}
@keyframes ar-spin{0%,80%,100%{rotate:0deg;scale:1}90%{rotate:20deg;scale:1.1}}

/* Joguinhos de mexer */
.hero-run{background:linear-gradient(#a9dcf5,#e1f4fc 70%)}
.hero-run .hero-maya{left:0;right:0;margin:0 auto;bottom:4%;width:auto;height:86%;animation:ar-jump 1.1s ease-in-out infinite}
.hero-balloon{position:absolute;right:8%;top:6%;width:min(26%,48px);height:44%;animation:ar-float 2s ease-in-out infinite alternate}
.hero-balloon .art-img,.hero-star .art-img{position:static;width:100%;height:100%}
.hero-drive .hero-car{left:12%;bottom:8%;height:68%;width:auto;max-width:70%;scale:-1 1;animation:ar-drive 3s ease-in-out infinite}
.hero-star{position:absolute;right:6%;top:10%;width:min(24%,44px);height:34%;animation:ar-spin 3s ease-in-out infinite}
.hero-puzzle{background:radial-gradient(circle at 50% 60%,#f4efff,#ddd2f4)}
.hero-piece{position:absolute;left:50%;top:50%;height:66%;aspect-ratio:342/260;translate:-50% -46%;background:url(assets/veiculos/car.webp) center/contain no-repeat;scale:-1 1}
.hero-piece-a{clip-path:polygon(0 0,52% 0,52% 34%,44% 38%,44% 56%,52% 60%,52% 100%,0 100%)}
.hero-piece-b{clip-path:polygon(52% 0,100% 0,100% 100%,52% 100%,52% 60%,44% 56%,44% 38%,52% 34%);animation:ar-join 3s ease-in-out infinite}
@keyframes ar-join{0%,15%{translate:-30% -60%;rotate:14deg}45%,85%{translate:-50% -46%;rotate:0deg}100%{translate:-30% -60%;rotate:14deg}}
@keyframes ar-drive{0%,100%{translate:0 0}50%{translate:18% -3%}}
@media(prefers-reduced-motion:reduce){.ar *,.hero-door,.area-door{animation:none!important}}