/* =====================================================================
   Içara em Brasa — sistema de animações
   Regras: só transform/opacity/filter (GPU), tudo respeita prefers-reduced-motion,
   e nada fica escondido se o JS falhar (.no-anim) ou estiver desligado (sem .js).
   ===================================================================== */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1)}

/* ---------- barra de progresso de rolagem ---------- */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:70;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#db2900,#ff7a1a 60%,#ffbf10);box-shadow:0 0 14px rgba(255,110,20,.7)}

/* ---------- cabeçalho: entrada + esconde ao rolar para baixo ---------- */
.top{transition:transform .55s var(--ease),background .3s,height .3s,padding .3s,opacity .6s}
.top.is-hidden{transform:translateY(-100%)}
.js:not(.hero-in) .top{transform:translateY(-100%);opacity:0}
.js.hero-in .top{opacity:1}

/* ---------- hero ---------- */
.hero__bg{position:absolute;inset:-7% 0;z-index:-2;will-change:transform;pointer-events:none}
.hero__bg i,.cad__bg i{position:absolute;inset:0;background:center top/cover no-repeat;animation:kenburns 30s ease-in-out infinite alternate;will-change:transform}
.hero__bg i{background-image:url("../img/prancheta11.webp")}
.cad__bg{position:absolute;inset:-7% 0;z-index:0;will-change:transform;pointer-events:none}
.cad__bg i{background-image:url("../img/prancheta12.webp");background-position:center;animation-duration:38s}
@keyframes kenburns{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.8%,1.2%,0)}}

.embers{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;mix-blend-mode:screen}
.embers--soft{z-index:1;opacity:.8}

/* título: cada linha sobe de uma máscara */
.ln{display:block;overflow:hidden;padding:.07em .05em .03em;margin:-.07em -.05em -.03em}
.ln>span{display:block}
.js .ln>span{transform:translate3d(0,112%,0) rotate(2.5deg);transform-origin:0 100%}
.js.hero-in .ln>span{transform:none;transition:transform 1.25s var(--ease) calc(.2s + var(--i,0)*.14s)}
/* elementos de apoio do hero entram depois do título */
.js .hero__in{opacity:0;translate:0 28px}
.js.hero-in .hero__in{opacity:1;translate:0 0;transition:opacity .9s var(--ease) calc(.2s + var(--i,0)*.14s),translate 1s var(--ease) calc(.2s + var(--i,0)*.14s)}
.js .hero__flame{opacity:0;scale:.4}
.js.hero-in .hero__flame{opacity:1;scale:1;transition:opacity .8s .1s,scale 1s var(--ease) .1s}
.js .hero__side{opacity:0}
.js.hero-in .hero__side{opacity:1;transition:opacity 1.2s .9s}

.hero__flame{transform-origin:50% 92%;animation:flicker 2.9s ease-in-out infinite;will-change:transform,filter}
@keyframes flicker{
  0%,100%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 10px rgba(255,90,20,.5))}
  18%{transform:scale(1.04,.97) rotate(-1.6deg)}
  35%{transform:scale(.98,1.06) rotate(1deg);filter:drop-shadow(0 0 24px rgba(255,130,30,.85))}
  55%{transform:scale(1.03,1) rotate(-1deg)}
  75%{transform:scale(.99,1.04) rotate(1.6deg);filter:drop-shadow(0 0 16px rgba(255,100,20,.65))}
}

/* selo giratório */
.seal{position:absolute;z-index:3;right:clamp(20px,6vw,126px);bottom:clamp(60px,8vw,130px);width:clamp(92px,9vw,164px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.38);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);text-decoration:none}
.seal svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 24s linear infinite}
.seal text{font:600 11.4px var(--f-body);letter-spacing:.14em;fill:#fff;text-transform:uppercase}
.seal img{width:30%;height:auto;animation:flicker 2.9s ease-in-out infinite .6s}
.seal:hover svg{animation-duration:7s}
.seal::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(255,140,40,.45);animation:pulse-ring 3.2s ease-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse-ring{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.28);opacity:0}}

/* indicador de rolagem */
.cue{position:absolute;left:50%;bottom:26px;z-index:3;width:26px;height:42px;margin-left:-13px;border:1.5px solid rgba(255,255,255,.7);border-radius:20px;display:block}
.cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 2s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateY(14px);opacity:0}}

/* ---------- revelar ao rolar ---------- */
.js [data-reveal]{--d:0s;transition:opacity .9s var(--ease) var(--d),transform 1.05s var(--ease) var(--d),clip-path 1.2s var(--ease) var(--d),filter .9s var(--ease) var(--d);will-change:transform,opacity}
.js [data-reveal=up]{opacity:0;transform:translate3d(0,42px,0)}
.js [data-reveal=fade]{opacity:0}
.js [data-reveal=left]{opacity:0;transform:translate3d(-70px,0,0)}
.js [data-reveal=right]{opacity:0;transform:translate3d(70px,0,0)}
.js [data-reveal=pop]{opacity:0;transform:translate3d(0,26px,0) scale(.86);filter:blur(8px)}
.js [data-reveal=zoom]{opacity:0;transform:scale(.9);filter:blur(5px)}
.js [data-reveal=clip]{clip-path:inset(0 0 105% 0);transform:translate3d(0,46px,0)}
.js [data-reveal=line]{transform:scaleX(0);transform-origin:0 50%}
.js [data-reveal=curtain]{clip-path:inset(0 0 100% 0)}
.js [data-reveal=curtain] img{transform:scale(1.28);transition:transform 1.8s var(--ease) var(--d)}

.js [data-reveal].in{opacity:1;transform:none;filter:none;clip-path:inset(-12% -6% -12% -6%)}
.js [data-reveal=curtain].in{clip-path:inset(0 0 0 0)}
.js [data-reveal=curtain].in img{transform:none}
.js [data-reveal].done{clip-path:none;will-change:auto}
.js [data-reveal=curtain].done{clip-path:none}

/* itens que também têm hover: mantêm a transição do hover junto com a do reveal */
.js .card[data-reveal]{transition:opacity .9s var(--ease) var(--d),transform 1.05s var(--ease) var(--d),translate .6s var(--ease)}
.js .est__big[data-reveal],.js .est__sm[data-reveal]{transition:opacity .9s var(--ease) var(--d),transform 1.05s var(--ease) var(--d),translate .6s var(--ease),box-shadow .6s}
.js .as[data-reveal]{transition:opacity .9s var(--ease) var(--d),transform 1.1s var(--ease) var(--d),filter .9s var(--ease) var(--d),scale .6s var(--ease)}
.js .cta[data-reveal],.js .btn[data-reveal]{transition:opacity .9s var(--ease) var(--d),transform 1.05s var(--ease) var(--d),translate .35s var(--ease),background .2s}

/* seletor do cadastro precisa ficar acima dos campos seguintes */
.fld.ac{z-index:20}

/* ---------- imagens com zoom no hover ---------- */
.zm{display:block;overflow:hidden;position:relative}
.zm img{display:block;border-radius:0!important;transition:transform 1.4s var(--ease),scale 1.2s var(--ease)}
.card:hover .zm img,.est__big:hover .zm img,.est__sm:hover .zm img,.sobre__fig:hover .zm img,.como__fig:hover .zm img{scale:1.07}
.as{transition:scale .6s var(--ease)}
.as:hover{scale:1.035}
.card{transition:translate .6s var(--ease)}
.card:hover{translate:0 -8px}
.est__sm,.est__big{transition:translate .6s var(--ease),box-shadow .6s}
.est__sm:hover,.est__big:hover{translate:0 -6px;box-shadow:0 26px 60px rgba(0,0,0,.45)}

/* ---------- apoiadores: carrossel infinito estilo streaming ---------- */
.marquee{flex:1;min-width:0;overflow:hidden;padding-block:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee .apoio__logos{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:0;width:max-content;flex:none;margin:0;padding:0;overflow:visible;animation:marq var(--dur,42s) linear infinite;will-change:transform}
.marquee .apoio__logos li{flex:none;padding-inline:clamp(18px,2.5vw,48px)}
.marquee:hover .apoio__logos,.marquee.is-held .apoio__logos{animation-play-state:paused}
@keyframes marq{to{transform:translate3d(-50%,0,0)}}
.apoio__n strong [data-count]{font:inherit;display:inline-block}
.lg{animation:bob 6.5s ease-in-out infinite;animation-delay:calc(var(--i,0)*-1.35s);transition:scale .45s var(--ease),filter .45s}
.lg:hover{scale:1.16;filter:drop-shadow(0 0 20px rgba(255,255,255,.4)) brightness(1.15)}
@keyframes bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -10px;rotate:-1.4deg}}

/* ---------- atrações ---------- */
.atr::before,.est::before,.sobre::before{animation:breathe 8s ease-in-out infinite alternate;will-change:transform,opacity}
.est::after{animation:breathe 9s ease-in-out infinite alternate-reverse}
@keyframes breathe{from{transform:scale(.92);opacity:.75}to{transform:scale(1.16);opacity:1}}
.lineup li:not(.brk){cursor:default;transition:scale .5s var(--ease),color .3s,text-shadow .4s,opacity .9s var(--ease) var(--d),transform 1.05s var(--ease) var(--d),filter .9s var(--ease) var(--d)}
.lineup li:not(.brk):hover{scale:1.05;text-shadow:0 0 36px rgba(219,41,0,.85),0 0 4px rgba(255,255,255,.25)}
.fl{animation:flame-dance 2.2s ease-in-out infinite;transform-origin:50% 92%}
.lineup li:nth-child(3) .fl{animation-delay:-.7s}.lineup li:nth-child(6) .fl{animation-delay:-1.3s}
@keyframes flame-dance{0%,100%{transform:scale(1,1) rotate(0)}25%{transform:scale(1.08,.94) rotate(-4deg)}50%{transform:scale(.94,1.1) rotate(3deg)}75%{transform:scale(1.05,.98) rotate(-2deg)}}

/* ---------- botões ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-130%);animation:shine 5s var(--ease-io) infinite}
@keyframes shine{55%,100%{transform:translateX(130%)}}
.cta--red span{animation:ring 2.8s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(219,41,0,.6)}70%,100%{box-shadow:0 0 0 20px rgba(219,41,0,0)}}
[data-magnetic]{transition:translate .35s var(--ease)}
.pill:hover,.cta:hover{translate:0 -2px}

/* ---------- como chegar / rodapé ---------- */
.como__loc svg{animation:pin 2.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes pin{0%,100%{transform:translateY(0)}35%{transform:translateY(-8px)}55%{transform:translateY(0)}70%{transform:translateY(-3px)}}
.como__fig figcaption{animation:none}
.foot__logo{animation:bob-y 7.5s ease-in-out infinite;filter:drop-shadow(0 12px 28px rgba(219,41,0,.35));will-change:translate,rotate}
@keyframes bob-y{0%,100%{translate:0 0}50%{translate:0 -14px}}
.tilt{transform-style:preserve-3d}
.foot__logo{transition:rotate .25s ease-out}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .marquee{width:100%;flex:none}
  .marquee .apoio__logos{--u:.62px;--dur:34s}
  .marquee .apoio__logos li{padding-inline:20px}
  .seal{right:16px;bottom:78px;width:84px}
  .seal text{font-size:12px}
  .js [data-reveal=left],.js [data-reveal=right]{transform:translate3d(0,42px,0)}
  .cue{display:none}
}
@media (max-width:560px){.seal{display:none}}

/* ---------- fallback: JS não carregou ---------- */
.no-anim [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;transition:none!important}
.no-anim .ln>span,.no-anim .hero__in,.no-anim .hero__flame,.no-anim .hero__side{transform:none!important;translate:none!important;scale:none!important;opacity:1!important;transition:none!important}
.no-anim .top{transform:none!important;opacity:1!important}
.no-anim .zm img{transform:none!important}

/* ---------- movimento reduzido: sem animação, conteúdo estático ---------- */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js .ln>span,.js .hero__in,.js .hero__flame,.js .hero__side,.js:not(.hero-in) .top{opacity:1!important;transform:none!important;translate:none!important;scale:none!important;clip-path:none!important;filter:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
  .marquee .apoio__logos{width:auto;flex-wrap:wrap;justify-content:center;animation:none!important}
  .marquee .apoio__logos li.clone{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .embers,.cue{display:none}
  .progress{display:none}
}