/* =====================================================================
   splash.css — abertura (splash) e boas-vindas do primeiro acesso
   Só transform/opacity nas animações: leve para iPads antigos.
   Segurança: se o JavaScript falhar, a splash some sozinha (animação "sai").
   ===================================================================== */
.splash {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #2AB476 0, #1E8A5A 50%, #12503B 100%); color: #fff;
  animation: sai .5s ease 4.6s forwards; cursor: pointer;
}
.splash.rapida { animation-delay: 1.5s; }
.splash.saindo { animation: sai .45s ease forwards; }
@keyframes sai { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.splash-centro { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; }
.splash-mascote {
  width: min(42vw, 180px); height: min(42vw, 180px); border-radius: 50%; object-fit: cover;
  border: 6px solid rgba(255, 255, 255, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  animation: surge .7s cubic-bezier(.2, 1.4, .4, 1) .25s both;
}
.splash-marca { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: surge .8s cubic-bezier(.2, 1.4, .4, 1) .3s both; }
.splash-marca img { width: min(46vw, 190px); height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .3)); }
.splash-marca .marca-nome { font-size: clamp(46px, 13vw, 78px); color: #fff; text-shadow: 0 4px 16px rgba(0, 0, 0, .28); }
.splash-marca .marca-nome i { color: var(--color-accent, #FFC53D); }
.splash-logo { width: min(86vw, 460px); height: auto; animation: surge .8s cubic-bezier(.2, 1.4, .4, 1) .3s both; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .3)); }
.splash-nome { margin: 16px 0 0; line-height: 1; animation: sobe .6s ease .7s both; text-shadow: 0 3px 12px rgba(0,0,0,.3); }
.splash-nome b { display: block; font-size: clamp(54px, 15vw, 92px); font-weight: 900; color: #fff; letter-spacing: -.03em; }
.splash-nome i { font-style: normal; font-size: clamp(30px, 8vw, 50px); font-weight: 900; color: var(--color-accent, #FBC02D); }
.splash-oi { margin: 10px 0 0; font-size: clamp(18px, 4.6vw, 22px); font-weight: 800; color: #E3F4EA; animation: sobe .6s ease 1s both; }
.splash-pular { position: absolute; z-index: 3; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); font-size: 14px; font-weight: 800; color: rgba(255, 255, 255, .75); }
@keyframes surge { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } }

/* folhas entrando pelas bordas */
.splash-folha { position: absolute; z-index: 1; width: 150px; height: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); animation: entra 1s ease-out both; }
.splash-folha:nth-of-type(1) { top: -34px; left: -30px; transform: rotate(140deg); --dx: -60px; --dy: -60px; }
.splash-folha:nth-of-type(2) { top: 4%; right: -40px; transform: rotate(-115deg); --dx: 60px; --dy: -40px; animation-delay: .1s; width: 130px; }
.splash-folha:nth-of-type(3) { bottom: -40px; left: 2%; transform: rotate(30deg); --dx: -40px; --dy: 60px; animation-delay: .15s; }
.splash-folha:nth-of-type(4) { bottom: 6%; right: -24px; transform: rotate(-40deg); --dx: 60px; --dy: 40px; animation-delay: .2s; width: 110px; }
.splash-folha:nth-of-type(5) { top: 38%; left: -46px; transform: rotate(80deg); --dx: -60px; --dy: 0px; animation-delay: .25s; width: 100px; opacity: .85; }
.sb-folha-bal { transform-box: fill-box; transform-origin: 50% 100%; animation: folha-bal 3.2s ease-in-out infinite alternate; }
.splash-folha:nth-of-type(even) .sb-folha-bal { animation-duration: 2.6s; animation-direction: alternate-reverse; }
@keyframes folha-bal { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes entra { from { opacity: 0; translate: var(--dx) var(--dy); } }

/* ---------- bichos que passam (js/splash-bichos.js) ----------
   .voo = caminho pela tela · .bal = balanço · partes = asas, pernas… */
.voo { position: absolute; z-index: 1; left: 0; top: 0; will-change: transform; pointer-events: none; }
.voo svg, .voo img { display: block; width: 100%; height: auto; overflow: visible; }
.voo svg g { transform-box: fill-box; }
.bal { will-change: transform; }
.voo svg { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .28)); }

/* borboleta: sobe da direita para a esquerda, em voo irregular */
.voo-borboleta { width: min(30vw, 140px); animation: borboleta-caminho 4.6s ease-in-out both; }
.splash.rapida .voo-borboleta { animation-duration: 1.8s; }
@keyframes borboleta-caminho {
  0% { transform: translate(100vw, 76vh) rotate(-25deg); }
  16% { transform: translate(82vw, 60vh) rotate(-40deg); }
  28% { transform: translate(76vw, 66vh) rotate(-12deg); }
  44% { transform: translate(56vw, 46vh) rotate(-45deg); }
  56% { transform: translate(49vw, 53vh) rotate(-15deg); }
  74% { transform: translate(26vw, 32vh) rotate(-40deg); }
  86% { transform: translate(16vw, 36vh) rotate(-18deg); }
  100% { transform: translate(-25vw, 14vh) rotate(-35deg); }
}
.sb-asa-e { transform-origin: 100% 45%; animation: borboleta-asa .19s ease-in-out infinite alternate; }
.sb-asa-d { transform-origin: 0% 45%; animation: borboleta-asa .19s ease-in-out infinite alternate; }
@keyframes borboleta-asa { from { transform: scaleX(1); } to { transform: scaleX(.22); } }
.bal-borboleta { animation: bal-borboleta .7s ease-in-out infinite; }
@keyframes bal-borboleta { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(3px, -7px); } 60% { transform: translate(-3px, 5px); } }

/* aranha: desce do topo no fio de seda, balança, mexe as patas e sobe de volta */
.voo-aranha { width: min(21vw, 96px); left: 74vw; top: 0; transform-origin: 50% 0; animation: aranha-desce 4.4s cubic-bezier(.45, 0, .3, 1) both; }
@keyframes aranha-desce {
  0% { transform: translateY(-100%); }
  28% { transform: translateY(calc(30vh - 100%)); }
  34% { transform: translateY(calc(27vh - 100%)); }
  40%, 72% { transform: translateY(calc(29vh - 100%)); }
  100% { transform: translateY(-110%); }
}
.bal-aranha { transform-origin: 50% -30vh; animation: aranha-balanco 1.6s ease-in-out .9s infinite alternate; }
@keyframes aranha-balanco { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.sb-patas-a { transform-origin: 50% 0%; animation: patas-aranha .35s ease-in-out infinite alternate; }
.sb-patas-b { transform-origin: 50% 0%; animation: patas-aranha .35s ease-in-out -.35s infinite alternate; }
@keyframes patas-aranha { from { transform: scaleY(.94) rotate(-2deg); } to { transform: scaleY(1.04) rotate(2deg); } }

/* joaninha: anda um pouco, abre a carapaça e sai voando */
.voo-joaninha { width: min(17vw, 78px); animation: joaninha-caminho 4.4s ease-in both; }
@keyframes joaninha-caminho {
  0% { transform: translate(5vw, 82vh) rotate(-12deg); }
  52% { transform: translate(19vw, 77vh) rotate(-18deg); }
  60% { transform: translate(20vw, 76vh) rotate(-25deg); }
  100% { transform: translate(72vw, 18vh) rotate(-42deg); }
}
.sb-pernas { animation: pernas .16s linear infinite alternate; }
@keyframes pernas { to { transform: translateX(1.5px) skewX(6deg); } }
.sb-elitro-a { transform-origin: 100% 100%; animation: elitro-a 4.4s ease both; }
.sb-elitro-b { transform-origin: 100% 0%; animation: elitro-b 4.4s ease both; }
@keyframes elitro-a { 0%, 54% { transform: rotate(0); } 62%, 100% { transform: rotate(-30deg); } }
@keyframes elitro-b { 0%, 54% { transform: rotate(0); } 62%, 100% { transform: rotate(30deg); } }
.sb-asas-voo { opacity: 0; animation: asas-joaninha 4.4s linear both; }
@keyframes asas-joaninha { 0%, 57% { opacity: 0; } 60%, 100% { opacity: 1; } }

/* boas-vindas do primeiro acesso */
.boas-vindas { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(15, 53, 41, .55); }
.boas-vindas .caixa {
  width: min(440px, calc(100vw - 40px)); margin-top: 80px; background: var(--surface); border-radius: var(--radius-l); padding: 26px 22px 22px; text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25); animation: sobe .4s ease both;
}
.boas-vindas img { width: 170px; height: 170px; border-radius: 50%; object-fit: cover; margin: -100px auto 8px; border: 5px solid #fff; box-shadow: var(--shadow-m); }
.boas-vindas h2 { margin: 0; font-size: 30px; font-weight: 900; color: var(--color-nature); }
.boas-vindas p { margin: 6px 0 18px; font-size: 19px; color: var(--text-soft); }
.boas-vindas .btn { width: 100%; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .splash, .splash.rapida { animation: sai .3s ease .8s forwards; }
  .splash *, .boas-vindas .caixa { animation: none !important; }
  .splash-folha { animation: none; }
  .voo { display: none; }
}