/* Cenas fixas com revelação na rolagem. Sem JavaScript ou com movimento reduzido, tudo vira página comum e legível. */
:root{--cabeca:72px}

/* Base (sem animação): cada cena é um bloco comum */
.cena{position:relative}
.fixa{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--e3);padding:var(--e6) var(--e3)}
.beats{display:flex;flex-direction:column;gap:var(--e5);width:100%;max-width:var(--largura);align-items:center}
.beat{display:flex;flex-direction:column;align-items:center;gap:var(--e2);max-width:900px}
.fala{font-family:var(--f-titulo);font-weight:500;font-size:clamp(26px,3.6vw,48px);line-height:1.2;text-wrap:balance;margin:0}
.titulo-grande{font-family:var(--f-titulo);font-weight:700;font-size:clamp(40px,7vw,96px);line-height:1.02;text-wrap:balance}
.grande{font-family:var(--f-titulo);font-weight:700;font-size:clamp(28px,4.4vw,56px);line-height:1.15;max-width:26ch;text-wrap:balance;margin:0}
.grande em{font-style:normal;color:var(--azul)}
.escuro .grande em{color:var(--azul-claro)}
.suave-fala{font-family:var(--f-texto);font-size:clamp(18px,1.8vw,22px);max-width:52ch;opacity:.85}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e1)}
.chips li{font-family:var(--f-rotulo);font-weight:600;font-size:clamp(15px,1.6vw,20px);letter-spacing:.04em;border:1px solid rgba(5,2,89,.25);border-radius:999px;padding:6px 18px;background:var(--branco)}

/* Abertura */
.hero .fixa{padding-top:var(--e5)}
.hero h1{font-size:clamp(48px,min(12vw,14svh),128px)}
.hero-texto{display:flex;flex-direction:column;align-items:center;gap:var(--e1)}
.hero .filme{margin:var(--e3) 0 0;width:min(960px,100%)}

/* Fio de constelação */
.fio{display:none}

/* Paleta, letras, selo */
.cena-paleta{background:#fff;color:var(--navy)}
.cor-nome{font-family:var(--f-titulo);font-weight:700;font-size:clamp(64px,14vw,200px);line-height:.95;margin:0}
.cor-hex{font-family:var(--f-rotulo);font-weight:500;font-size:clamp(18px,2.4vw,28px);letter-spacing:.1em;margin:0}
.cena-paleta .beat+.beat{padding-top:var(--e4)}
.pontos{display:none}
.aa-gigante{font-size:clamp(160px,34vw,420px);line-height:.9;color:var(--azul);margin:0}
.peso{font-family:var(--f-rotulo);font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.selo-cena img{width:min(300px,60vw);margin:0 auto}
.fim-nota{margin-top:var(--e3)}

/* Revelação simples */
.rev{}

/* Com animação */
.anim .cena{height:calc(var(--n,3)*70svh + 100svh)}
.anim .fixa{position:sticky;top:0;height:100svh;overflow:hidden;padding:calc(var(--cabeca) + var(--e3)) var(--e3) var(--e4)}
.anim .beats{display:grid;gap:0}
.anim .beat{grid-area:1/1;justify-self:center;justify-content:center;opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.anim .beat.passou{transform:translateY(-40px)}
.anim .beat.on{opacity:1;transform:none;pointer-events:auto}
.anim .cena-paleta .beat+.beat{padding-top:0}
.anim .pal{opacity:.18;transition:opacity .3s}
.anim .pal.on{opacity:1}
.anim .fim-nota{opacity:clamp(0,calc((var(--p,0) - .62)*5),1);transform:translateY(calc((1 - clamp(0,calc((var(--p,0) - .62)*5),1))*24px))}

/* Abertura animada */
.anim .hero{height:calc(2*70svh + 100svh)}
.anim .hero .fixa{display:block}
.anim .hero-texto{position:absolute;top:calc(var(--cabeca) + 4svh);left:0;right:0;opacity:calc(1 - var(--h,0)*1.8);transform:translateY(calc(var(--h,0)*-70px))}
.anim .hero .filme{position:absolute;left:50%;top:calc(var(--cabeca) + (100svh - var(--cabeca))*(.68 - .18*var(--h,0)));width:min(100vw,calc((100svh - var(--cabeca))*16/9));margin:0;transform:translate(-50%,-50%) scale(calc(var(--s0,.5) + (1 - var(--s0,.5))*var(--h,0)));border-radius:calc(20px*(1 - var(--h,0)));overflow:hidden}
.anim .hero .filme video{border-radius:0}

/* Medida */
.anim .cena[data-beats] .escala li{transition:opacity .6s,transform .6s}
.anim #medida .escala{margin-top:var(--e4);justify-content:center}
.anim #medida[data-beat="0"] .escala li:not(:first-child),.anim #medida[data-beat="1"] .escala li:not(:first-child){opacity:0;transform:scale(.2)}
.anim #medida[data-beat="0"] .escala li:first-child,.anim #medida[data-beat="1"] .escala li:first-child{transform:scale(5)}
.anim #medida[data-beat="2"] .escala li:nth-child(2){transition-delay:.1s}
.anim #medida[data-beat="2"] .escala li:nth-child(3){transition-delay:.2s}
.anim #medida[data-beat="2"] .escala li:nth-child(4){transition-delay:.3s}
.anim #medida[data-beat="2"] .escala li:nth-child(5){transition-delay:.4s}
.anim #medida[data-beat="2"] .escala li:nth-child(6){transition-delay:.5s}

/* Paleta animada */
.anim .cena-paleta{background:var(--bg,#fff);color:var(--fg,#050259);transition:background-color .6s,color .6s}
.anim .cena-paleta .rotulo{color:inherit;opacity:.8}
.anim .pontos{display:flex;gap:10px;position:absolute;left:0;right:0;bottom:calc(var(--e4) + env(safe-area-inset-bottom,0px));justify-content:center}
.pontos i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.3;transition:opacity .3s,transform .3s}
.pontos i.on{opacity:1;transform:scale(1.5)}

/* Letras animadas: o peso da fonte varia com a rolagem */
.anim .aa-gigante{font-weight:calc(100 + 800*var(--bp,0));font-variation-settings:normal}

/* Selo animado */
.anim .selo-cena img{transform:rotate(calc(var(--p,0)*50deg)) scale(calc(.72 + .28*clamp(0,calc(var(--p,0)*4),1)));will-change:transform}

/* Fio de constelação (só em telas largas) */
@media (min-width:1200px){
  .anim .fio{display:block;position:fixed;left:28px;top:calc(var(--cabeca) + 24px);bottom:32px;width:2px;z-index:5;pointer-events:none}
  .fio .linha{position:absolute;inset:0;background:rgba(66,128,239,.28);border-radius:2px}
  .fio .linha::after{content:"";position:absolute;left:0;top:0;width:100%;height:calc(var(--g,0)*100%);background:#4280EF;border-radius:2px}
  .fio i{position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;background:#4280EF;opacity:.35;transition:opacity .4s,transform .4s,box-shadow .4s}
  .fio i:nth-child(2){top:18%}.fio i:nth-child(3){top:52%}.fio i:nth-child(4){top:86%}
  .fio i.on{opacity:1;transform:scale(1.5);box-shadow:0 0 12px 2px rgba(66,128,239,.7)}
}

/* Exemplos em pilha (telas largas com animação) */
.cena-exemplos{background:var(--superficie)}
.cena-exemplos .cheio{width:100%}
.cena-exemplos .exemplos-intro{max-width:62ch;text-align:left;margin-left:0}
@media (min-width:861px){
  .anim .cena-exemplos .fixa{align-items:stretch;justify-content:flex-start;text-align:left;gap:var(--e1);padding-bottom:var(--e2)}
  .anim .cena-exemplos .cheio{display:flex;flex-direction:column;height:100%;min-height:0;gap:var(--e1)}
  .anim .cena-exemplos .exemplos-intro{margin:0;max-width:none;flex-direction:row;align-items:baseline;gap:var(--e3);flex:none}
  .anim .cena-exemplos .exemplos-intro p:not(.rotulo){display:none}
  .anim .cena-exemplos .exemplos-intro h2{font-size:clamp(24px,2.6vw,36px)}
  .anim .pilha{position:relative;flex:1;min-height:0}
  .anim .pilha .exemplo{position:absolute;left:0;right:0;top:50%;padding:0;border-top:0;opacity:0;pointer-events:none;transform:translateY(calc(-50% + 56px)) scale(var(--fit,1));transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .anim .pilha .exemplo.passou{transform:translateY(calc(-50% - 40px)) scale(var(--fit,1))}
  .anim .pilha .exemplo.on{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(var(--fit,1))}
}
@media (max-width:860px){
  .anim .cena-exemplos{height:auto}
  .anim .cena-exemplos .fixa{position:static;height:auto;overflow:visible;padding:var(--e5) var(--e3)}
  .cena-exemplos .cheio{width:100%}
}

/* Cenas no celular */
@media (max-width:860px){
  .anim .hero{--s0:.9}
  .anim .fixa{padding-inline:var(--e2)}
  .anim .cena-paleta .cor-nome{font-size:clamp(56px,18vw,120px)}
}

/* Repositório */
.anim .rev{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.anim .rev.vis{opacity:1;transform:none}
.anim .rev:nth-child(2){transition-delay:.12s}