/* Topo em camadas (inspirado no "Zênite"): céu, nuvens, a ilha do Tarefino e o nome gigante.
   O palco fica preso por 1 tela enquanto a página rola; a câmera "entra na nuvem" e o conteúdo surge.
   Regra: nenhuma camada termina em linha reta visível — toda ponta é degradê ou fica fora da tela. */
:root{
  --ceu-1:#4f8fd0; --ceu-2:#6fa8dc; --ceu-3:#a7cdea; --ceu-4:#d8ebf3; --ceu-5:#fbe9d6; --nevoa:#fff3e3;
}
.hero-trilho{position:relative;height:200svh}
.hero-palco{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--nevoa);isolation:isolate}
.camada{position:absolute;inset:0;will-change:transform}
.camada>.dentro{position:absolute;inset:0}

/* 1. céu */
.ceu .dentro{background:
  radial-gradient(60% 45% at 86% 6%,rgba(255,244,214,.75),transparent 70%),
  radial-gradient(90% 30% at 50% 74%,rgba(255,231,205,.7),transparent 75%),
  linear-gradient(180deg,var(--ceu-1) 0%,var(--ceu-2) 22%,var(--ceu-3) 44%,var(--ceu-4) 60%,var(--ceu-5) 76%,var(--nevoa) 90%)}

/* nuvens: posição fixa no palco, deriva infinita para a direita (CSS, roda no compositor) */
.nuvem{position:absolute;left:0;pointer-events:none;animation:deriva linear infinite;will-change:transform}
.nuvem img{display:block;width:100%;height:auto}
.nuvem.espelho img{transform:scaleX(-1)}
@keyframes deriva{from{transform:translateX(-100%)}to{transform:translateX(100vw)}}
.longe .nuvem img{filter:saturate(.85) brightness(1.02) blur(1px);opacity:.9}
.nevoa-faixa{position:absolute;left:-10%;right:-10%;pointer-events:none}
.horizonte .nevoa-faixa{top:72%;height:260%;background:linear-gradient(180deg,rgba(255,243,227,0) 0%,rgba(255,243,227,.85) 12%,var(--nevoa) 22%)}
.frente .nevoa-faixa{top:88%;height:300%;background:linear-gradient(180deg,rgba(255,243,227,0),var(--nevoa) 14%)}

/* a ilha */
.ilha-caixa{position:absolute;left:50%;top:43%;width:min(40vw,62svh);transform:translate(-50%,-50%)}
.ilha-caixa .flutua{animation:flutua-ilha 7.5s ease-in-out infinite}
.ilha-caixa img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 30px rgba(60,40,90,.18))}
.ilha-caixa::after{content:"";position:absolute;left:10%;right:10%;bottom:-6%;height:22%;background:radial-gradient(closest-side,rgba(255,243,227,.85),transparent);filter:blur(10px);z-index:-1}
@keyframes flutua-ilha{0%,100%{transform:translateY(-.8%) rotate(-.3deg)}50%{transform:translateY(.8%) rotate(.3deg)}}

/* muro de nuvens da saída (sobe de baixo da tela) */
.muro{pointer-events:none}
.muro .fila{position:absolute;left:-15%;right:-15%;display:flex;justify-content:space-between}
.muro .fila img{width:42%;height:auto;margin:0 -6%}
.muro .f1{top:104%}.muro .f2{top:124%}.muro .f3{top:146%}
.muro .base{position:absolute;left:-10%;right:-10%;top:128%;height:320%;background:linear-gradient(180deg,rgba(255,243,227,0) 0,var(--nevoa) 10%)}
.veu{position:absolute;inset:0;background:var(--fundo,#fffaf3);opacity:0;pointer-events:none}

/* textos e interface */
.hero-ui{position:absolute;inset:0;pointer-events:none}
.hero-ui a,.hero-ui button{pointer-events:auto}
.nav-hero{position:fixed;z-index:30;top:max(14px,env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:6px;border-radius:18px;background:rgba(255,255,255,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 6px 20px rgba(40,30,80,.12);transition:transform .35s,opacity .35s}
.nav-hero a{color:var(--tinta);text-decoration:none;font-weight:900;font-size:14px;padding:8px 14px;border-radius:12px;white-space:nowrap}
.nav-hero a:hover{background:rgba(255,255,255,.7)}
.nav-hero a.cta{background:var(--ouro)}
.nav-hero.some{transform:translate(-50%,-140%);opacity:0}
.hud{position:absolute;top:calc(max(14px,env(safe-area-inset-top,0px)) + 64px);display:grid;gap:6px;font-weight:900;font-size:13px;font-variant-numeric:tabular-nums}
.hud span{background:rgba(255,255,255,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--tinta);padding:6px 12px;border-radius:999px;box-shadow:0 3px 10px rgba(40,30,80,.08);justify-self:start}
.hud.esq{left:28px}.hud.dir{right:28px;justify-items:end}.hud.dir span{justify-self:end}
.nome-hero{position:absolute;left:28px;bottom:3svh;margin:0;font-family:var(--display);font-weight:800;font-size:min(16vw,30svh);line-height:.82;letter-spacing:-.035em;color:var(--tinta);display:flex;align-items:flex-start}
.nome-hero .letras{display:inline-flex}
.nome-hero .l{display:inline-block;overflow:hidden;padding-bottom:.08em}
.nome-hero .l>span{display:inline-block}
.nome-hero{flex-wrap:wrap}
.slogan-hero{flex-basis:100%;font-family:var(--body);font-weight:900;font-size:max(17px,.16em);letter-spacing:.01em;line-height:1.15;color:var(--tinta);margin-top:.04em;padding-left:.05em}
.estrela-gira{width:.3em;height:.3em;margin:.06em 0 0 .04em;animation:gira 48s linear infinite;flex:none}
@keyframes gira{to{transform:rotate(360deg)}}
.lado-hero{position:absolute;right:28px;bottom:5svh;width:min(390px,34vw);display:grid;gap:18px;justify-items:start}
.lado-hero p{font-size:20px;line-height:1.3;font-weight:800;color:var(--tinta)}
.lado-hero p .lin{display:block;overflow:hidden}
.lado-hero p .lin>span{display:block}
.js .dica-rolar{opacity:0}.js.entrou .dica-rolar{animation:surge .7s 3.2s both}
@keyframes surge{from{opacity:0}to{opacity:1}}
.dica-rolar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--suave);text-transform:uppercase}
.btn-pilula{display:inline-flex;align-items:center;gap:12px;background:var(--ouro);color:var(--tinta);font-weight:900;font-size:18px;text-decoration:none;padding:10px 10px 10px 22px;border-radius:999px;box-shadow:0 5px 0 var(--ouro-esc)}
.btn-pilula i{width:40px;height:40px;border-radius:50%;background:var(--tinta);display:grid;place-items:center;transition:transform .3s}
.btn-pilula:hover i{transform:rotate(-45deg)}
.btn-pilula svg{width:18px;height:18px}

/* grão (só computador) */
.grao{position:fixed;inset:-50%;z-index:40;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;animation:grao .8s steps(6) infinite}
@keyframes grao{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* o conteúdo sobe de dentro da nuvem */
.depois{position:relative;z-index:2;margin-top:-75svh;padding-top:30svh;background:linear-gradient(180deg,rgba(255,250,243,0) 0,var(--fundo) 30svh)}

/* antes da entrada (esperando a arte carregar) só a névoa aparece; sem JS tudo fica visível */
.js:not(.entrou) .hero-palco .camada,.js:not(.entrou) .hero-ui,.js:not(.entrou) .nav-hero{opacity:0}

/* celular */
@media (max-width:760px){
  .ilha-caixa{width:min(84vw,52svh);top:36%}
  .nav-hero{left:12px;right:12px;transform:none;justify-content:space-between}
  .nav-hero.some{transform:translateY(-140%)}
  .nav-hero{gap:0;padding:5px}
  .nav-hero a{padding:8px 6px;font-size:12.5px}
  .hud{top:calc(max(14px,env(safe-area-inset-top,0px)) + 58px);font-size:11.5px}
  .hud.esq{left:12px}.hud.dir{right:12px;top:calc(max(14px,env(safe-area-inset-top,0px)) + 94px)}
  .nome-hero{left:16px;bottom:auto;top:58svh;font-size:min(23vw,15svh)}
  .lado-hero{left:16px;right:16px;bottom:max(20px,env(safe-area-inset-bottom,0px));width:auto;gap:14px}
  .lado-hero p{font-size:16.5px}
  .dica-rolar{display:none}
  .longe .nuvem img{filter:none}
  .grao{display:none}
}
@media (max-width:760px) and (max-height:700px){.nome-hero{top:54svh}.lado-hero p{font-size:15px}}

/* movimento reduzido: nada preso, nada derivando */
@media (prefers-reduced-motion:reduce){
  .hero-trilho{height:auto}
  .hero-palco{position:relative;height:100svh}
  .nuvem,.ilha-caixa .flutua,.estrela-gira,.grao{animation:none}
  .depois{margin-top:0;padding-top:0}
}