/* Missão Apolo — camada de ambiente (céu, sol/lua, nuvens, pássaros, borboletas, foguete).
   Puramente decorativa: fica ATRÁS do conteúdo, não recebe toques e some com prefers-reduced-motion. */
.app{position:relative;z-index:1}
#ambient{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;max-width:100vw;contain:strict;z-index:0;overflow:hidden;pointer-events:none;
  --amb-tint:rgba(58,134,255,.10);--amb-tint2:rgba(255,194,61,.08);--amb-cloud:rgba(255,255,255,.55);--amb-star:#fff;--amb-r:50%}
#ambient[hidden]{display:none!important}
body[data-hero="blocos"] #ambient{--amb-tint:rgba(78,143,47,.12);--amb-tint2:rgba(242,179,61,.08);--amb-r:6%}
body[data-hero="veloz"] #ambient{--amb-tint:rgba(21,101,216,.13);--amb-tint2:rgba(255,210,63,.09)}
body[data-hero="aranha"] #ambient{--amb-tint:rgba(183,28,28,.09);--amb-tint2:rgba(30,79,216,.08)}

/* céu: um véu leve sobre o fundo do app, por período do dia */
.amb-sky{position:absolute;top:0;right:0;bottom:0;left:0;transition:background 1.5s}
#ambient[data-time="manha"] .amb-sky{background:linear-gradient(180deg,var(--amb-tint) 0,var(--amb-tint2) 45%,transparent 100%)}
#ambient[data-time="tarde"] .amb-sky{background:linear-gradient(180deg,var(--amb-tint) 0,rgba(255,140,60,.10) 55%,transparent 100%)}
#ambient[data-time="noite"] .amb-sky{background:linear-gradient(180deg,rgba(11,18,48,.22) 0,rgba(29,43,83,.10) 60%,transparent 100%)}
:root[data-theme="dark"] #ambient .amb-sky,
:root:not([data-theme="light"]) #ambient .amb-sky{--amb-cloud:rgba(255,255,255,.14)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) #ambient .amb-sky{--amb-cloud:rgba(255,255,255,.55)}}

/* sol e lua */
.amb-sun,.amb-moon{position:absolute;width:72px;height:72px;border-radius:var(--amb-r);opacity:0;transition:opacity 1.5s,transform 2s}
.amb-sun{right:8%;top:6%;background:radial-gradient(circle at 40% 40%,#FFE9A3,#FFC23D 65%,rgba(255,194,61,0) 70%);box-shadow:0 0 40px 14px rgba(255,194,61,.28)}
.amb-moon{right:12%;top:7%;background:radial-gradient(circle at 38% 38%,#FFFDF4,#E5E9F5 70%);box-shadow:0 0 34px 10px rgba(255,255,255,.14)}
.amb-moon::after{content:"";position:absolute;left:18px;top:8px;width:56px;height:56px;border-radius:var(--amb-r);background:var(--bg);opacity:.9}
#ambient[data-time="manha"] .amb-sun{opacity:.9;transform:translateY(20px)}
#ambient[data-time="tarde"] .amb-sun{opacity:.85;transform:translateY(90px) scale(1.1)}
#ambient[data-time="noite"] .amb-moon{opacity:.85}
body.tv .amb-sun,body.tv .amb-moon{width:110px;height:110px}

/* estrelas (só à noite) */
.amb-stars{position:absolute;top:0;right:0;bottom:40%;left:0;opacity:0;transition:opacity 1.5s}
#ambient[data-time="noite"] .amb-stars{opacity:1}
.amb-star{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--amb-star);opacity:.7;animation:ambTwinkle 3s ease-in-out infinite alternate}
.amb-star.big{width:4px;height:4px}
@keyframes ambTwinkle{from{opacity:.25;transform:scale(.8)}to{opacity:.9;transform:scale(1.15)}}

/* estrela cadente (rara) */
.amb-shoot{position:absolute;width:120px;height:2px;border-radius:2px;transform-origin:right center;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff);opacity:0;animation:ambShoot 1.4s ease-out forwards}
@keyframes ambShoot{0%{opacity:0;transform:translate(0,0) rotate(-25deg)}10%{opacity:.9}100%{opacity:0;transform:translate(-320px,150px) rotate(-25deg)}}

/* nuvens (movidas por CSS, não por JS) */
.amb-cloud{position:absolute;left:-30%;width:180px;height:56px;border-radius:var(--amb-r);background:var(--amb-cloud);filter:blur(1px);
  animation:ambDrift linear infinite;will-change:transform}
.amb-cloud::before,.amb-cloud::after{content:"";position:absolute;background:inherit;border-radius:inherit}
.amb-cloud::before{width:70px;height:70px;left:28px;top:-30px}
.amb-cloud::after{width:90px;height:80px;left:70px;top:-36px}
.amb-cloud.c1{top:9%;animation-duration:95s}
.amb-cloud.c2{top:22%;transform:scale(.7);animation-duration:130s;animation-delay:-50s}
.amb-cloud.c3{top:34%;transform:scale(.5);animation-duration:170s;animation-delay:-110s;opacity:.7}
#ambient[data-time="noite"] .amb-cloud{opacity:.35}
@keyframes ambDrift{from{transform:translateX(0) scale(var(--s,1))}to{transform:translateX(160vw) scale(var(--s,1))}}
.amb-cloud.c2{--s:.7}.amb-cloud.c3{--s:.5}

/* seres que voam (posicionados via JS com translate3d) */
.amb-sprite{position:absolute;left:0;top:0;will-change:transform;opacity:0;transition:opacity .6s}
.amb-sprite.in{opacity:1}
.amb-bird{width:44px;height:30px;color:#2E3A5F}
#ambient[data-time="noite"] .amb-bird{color:#0B1230}
.amb-bird svg{width:100%;height:100%;overflow:visible}
.amb-bird .w{transform-origin:22px 15px;animation:ambFlap .32s ease-in-out infinite alternate}
.amb-bird .w2{animation-direction:alternate-reverse}
.amb-bird.glide .w{animation-play-state:paused}
@keyframes ambFlap{from{transform:scaleY(1)}to{transform:scaleY(-.6)}}
.amb-bird.flip{transform:scaleX(-1)}
.amb-fly{width:26px;height:22px}
.amb-fly svg{width:100%;height:100%;overflow:visible}
.amb-fly .wl,.amb-fly .wr{transform-origin:13px 11px;animation:ambWing .22s ease-in-out infinite alternate}
.amb-fly .wr{animation-delay:.11s}
@keyframes ambWing{from{transform:scaleX(1)}to{transform:scaleX(.35)}}
.amb-rocket{width:56px;height:56px;font-size:40px;line-height:1;filter:drop-shadow(0 0 6px rgba(255,194,61,.6))}
.amb-rocket i{position:absolute;left:8px;top:40px;width:10px;height:26px;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;
  background:linear-gradient(180deg,#FFE9A3,#FF8C3C 60%,rgba(255,140,60,0));animation:ambFlame .12s infinite alternate;transform-origin:top center}
@keyframes ambFlame{from{transform:scaleY(.7)}to{transform:scaleY(1.2)}}

/* durante missão ou jogo: tudo mais apagado, para não roubar a atenção */
#ambient.amb-study .amb-sprite.in{opacity:.45}
#ambient.amb-study .amb-cloud{opacity:.5}
#ambient.amb-study .amb-sun,#ambient.amb-study .amb-moon{opacity:.45!important}

/* telas grandes (TV a 3 metros): elementos um pouco maiores */
body.tv .amb-bird{width:66px;height:45px}
body.tv .amb-fly{width:38px;height:32px}
body.tv .amb-rocket{font-size:56px}

@media (prefers-reduced-motion:reduce){#ambient{display:none!important}}
@media print{#ambient{display:none!important}}