/* ============ Confete Club · camada de animação (cores do logo: amarelo, vermelho, azul, verde) ============ */
:root{--c-red:#e8402f;--c-yel:#ffc21a;--c-blu:#2f6fe0;--c-grn:#2cb25f;--spring:cubic-bezier(.34,1.56,.64,1);--cine:cubic-bezier(.77,0,.175,1)}

/* ---------- abertura: cortina que abre ---------- */
html.intro-on,html.intro-on body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:300;display:grid;place-items:center}
.cur{position:absolute;top:0;bottom:0;width:50.3%;background:#0b0b0c;transition:transform 1.05s var(--cine)}
.cl{left:0}.cr{right:0}
.cl::after,.cr::after{content:"";position:absolute;top:0;bottom:0;width:10px;background:linear-gradient(180deg,var(--c-red),var(--c-yel),var(--c-blu),var(--c-grn),var(--c-red))}
.cl::after{right:0}.cr::after{left:0}
.intro.open .cl{transform:translateX(-101%)}.intro.open .cr{transform:translateX(101%)}
.intro.gone{display:none}
.intro-mid{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;color:#fff;text-align:center;transition:opacity .45s,transform .8s var(--cine)}
.intro.open .intro-mid{opacity:0;transform:scale(1.25)}
.intro-mid img{width:124px;height:124px;border-radius:50%;animation:logoPop .8s var(--spring) both,logoRing 1.4s ease-out .5s infinite}
@keyframes logoPop{from{transform:scale(.2) rotate(-40deg);opacity:0}}
@keyframes logoRing{0%{box-shadow:0 0 0 0 rgba(255,194,26,.7)}100%{box-shadow:0 0 0 30px rgba(255,194,26,0)}}
.intro-mid p{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,4vw,2.2rem);animation:rise .6s var(--out) .3s both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.intro-bar{width:min(220px,60vw);height:5px;border-radius:5px;background:rgba(255,255,255,.18);overflow:hidden}
.intro-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--c-red),var(--c-yel),var(--c-blu),var(--c-grn));animation:fill .95s var(--cine) .05s forwards}
@keyframes fill{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ---------- barra de progresso ---------- */
.sp-bar{position:fixed;left:0;right:0;top:0;height:4px;z-index:80;pointer-events:none}
.sp-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--c-red),var(--c-yel),var(--c-blu),var(--c-grn))}
.nav.hide{transform:translateY(-115%)}

/* ---------- topo: telas que sobem, zoom lento, luz do mouse ---------- */
.tile{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--cine)}
.loaded .tile{clip-path:inset(0 0 0 0)}
.t-a{transition-delay:.05s}.t-b{transition-delay:.22s}.t-c{transition-delay:.4s}
.hero.off .tile video,.hero.off .mq{animation-play-state:paused}
.tile video{animation:kb 24s ease-in-out infinite alternate;translate:var(--mx,0px) 0;transition:translate .7s ease-out}
@keyframes kb{from{scale:1.02}to{scale:1.15}}
.hero-tiles{scale:calc(1 + var(--hp,0)*.1)}
.hero-copy{opacity:calc(1 - var(--hp,0)*1.15);translate:0 calc(var(--hp,0)*-60px)}
.glow-sec::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(460px circle at var(--gx,50%) var(--gy,40%),rgba(255,194,26,.18),transparent 62%);opacity:var(--go,0);transition:opacity .5s}
.hero .btn-white,.film-cta .btn-white,.final .btn-white{background:var(--c-yel);color:#101113}
.hero .btn-white .ic,.film-cta .btn-white .ic,.final .btn-white .ic{color:#101113}
.final .btn-white{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{scale:1.05}}
/* anéis só com transform/opacity (sem repintar a cada quadro) */
.dock::before{animation:none;box-shadow:none;border:3px solid rgba(37,211,102,.75);animation:ring2 2.4s ease-out infinite}
@keyframes ring2{from{transform:scale(1);opacity:.8}to{transform:scale(1.35,1.6);opacity:0}}

/* ---------- manifesto: marca-texto amarelo ---------- */
.big .lw.hl{background:linear-gradient(var(--c-yel),var(--c-yel)) 0 92%/0 .36em no-repeat;transition:color .35s,background-size .7s var(--out)}
.big .lw.hl.on{background-size:100% .36em}

/* ---------- galeria ---------- */
.g{transition:opacity .5s var(--out),transform .6s var(--out),clip-path 1.2s var(--out)}
.g:not(.in){clip-path:inset(16% 10% 16% 10% round 18px)}
.g.in{clip-path:inset(0 round 18px)}
.g img{scale:1.22;transition:transform 1.1s var(--out),scale 1.8s var(--out)}
.g.in img{scale:1}
.g-btn{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--out)}
.g-btn::after{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.3),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.g:hover .g-btn::after{opacity:1}

/* ---------- faixa de chamada ---------- */
.midcta{position:relative;background:var(--c-yel);color:#101113;padding:clamp(48px,6vw,84px) 0;border-block:3px solid #101113;overflow:hidden}
.midcta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 30%,var(--c-red) 0 7px,transparent 8px),radial-gradient(circle at 88% 70%,var(--c-blu) 0 9px,transparent 10px),radial-gradient(circle at 70% 20%,var(--c-grn) 0 6px,transparent 7px),radial-gradient(circle at 30% 80%,#fff 0 6px,transparent 7px);animation:drift 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{to{transform:translate(18px,-14px)}}
.midcta-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.midcta h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,4.6vw,3.8rem);line-height:1.05;letter-spacing:-.02em}
.midcta p{margin-top:10px;font-size:1.15rem;font-weight:500;max-width:36em}

/* ---------- histórias: painéis ganham vida ao passar ---------- */
@media (min-width:821px){
  .pn-big{scale:var(--s,1);rotate:var(--rot,0deg)}
  .pn-big img{scale:1.14;translate:calc(var(--pc,0)*-34px) 0}
  .pn-num{translate:calc(var(--pc,0)*-80px) 0}
  .pn-txt{opacity:calc(1 - var(--ab,0)*.7)}
}

/* ---------- depoimentos ---------- */
.film .dep[data-rev]{transform:translateY(90px) rotate(var(--dr,4deg)) scale(.9);transition:opacity .7s var(--out),transform 1s var(--spring);transition-delay:calc(var(--i,0)*120ms)}
.film .dep[data-rev].in{transform:none}
.dep:nth-child(odd){--dr:-4deg}
.dep:not(.playing) .play::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,255,255,.8);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
.dep.playing .dep-btn{box-shadow:0 0 0 3px var(--c-yel),0 36px 70px -24px rgba(255,194,26,.55)}

/* ---------- espaço ---------- */
.est-video[data-rev]{clip-path:circle(0% at 50% 50%);transition:clip-path 1.5s var(--cine),opacity .5s;opacity:1;transform:none;translate:0 var(--ep,0px)}
.est-video[data-rev].in{clip-path:circle(150% at 50% 50%)}
.feat li{border-top:0;position:relative}
.feat li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--out) calc(var(--i,0)*90ms)}
.feat li.in::before{transform:scaleX(1)}
.ph{animation:floaty 7s ease-in-out infinite}.ph2{animation-delay:-3.2s}
@keyframes floaty{50%{translate:0 -12px}}

/* ---------- como funciona: linha que se desenha ---------- */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:9%;right:9%;top:55px;border-top:3px dashed rgba(16,17,19,.28);transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--out)}
.steps.in::before{transform:scaleX(1)}
.num{scale:0;transition:scale .75s var(--spring) calc(var(--i,0)*.2s + .35s)}
.steps.in .num{scale:1}
.steps li:nth-child(1) .num{background:var(--c-yel)}.steps li:nth-child(2) .num{background:var(--c-red);color:#fff}.steps li:nth-child(3) .num{background:var(--c-blu);color:#fff}.steps li:nth-child(4) .num{background:var(--c-grn);color:#fff}
@media (max-width:1000px){.steps::before{display:none}}

/* ---------- mapa ---------- */
.map-frame[data-rev]{clip-path:inset(0 100% 0 0 round 26px);transition:clip-path 1.5s var(--cine),opacity .4s;opacity:1;transform:none}
.map-frame[data-rev].in{clip-path:inset(0 0 0 0 round 26px)}

/* ---------- rodapé: nome gigante que pula ---------- */
.mark{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(3.4rem,15.2vw,16rem);line-height:1;white-space:nowrap;text-align:center;letter-spacing:-.02em;margin:0 0 36px;overflow:hidden;padding-bottom:.08em}
.mark .L{display:inline-block;transform:translateY(70%) rotate(var(--lr)) scale(.6);opacity:0;transition:transform .95s var(--spring),opacity .4s;transition-delay:calc(var(--k)*50ms)}
.mark.in .L{transform:none;opacity:1}
.mark .sp{display:inline-block;width:.25em}
.mark .c0{color:var(--c-yel)}.mark .c1{color:#ff5a47}.mark .c2{color:#fff}.mark .c3{color:#5b9bff}.mark .c4{color:#3fd27d}

@media (max-width:820px){
  .hero-tiles{scale:1}.hero-copy{opacity:1;translate:0 0}
  .tile video{animation-duration:30s}
}
@media (prefers-reduced-motion:reduce){
  .tile{clip-path:none}.g:not(.in){clip-path:none}.g img{scale:1}.num{scale:1}.steps::before{transform:none}
  .est-video[data-rev],.map-frame[data-rev]{clip-path:none}.mark .L{transform:none;opacity:1}.hero-tiles,.hero-copy{scale:1;translate:0 0;opacity:1}
  .tile video{animation:none}.ph{animation:none}
}

/* ---------- menu: nunca quebra linha ---------- */
.nav-links,.nav-links a,.brand b,.brand small{white-space:nowrap}
@media (max-width:1120px){.nav-links{display:none}}
@media (max-width:420px){.brand b{font-size:1.05rem}.nav{padding-inline:12px}.nav .btn-sm{padding:9px 14px}}