/* Botoes de arte e a assinatura.
   .titulo PRECISA vir depois de .arte neste arquivo: ele usa a classe .arte,
   que define height:var(--h) com 48px de padrao. Ver armadilha 3 do CLAUDE.md. */

/* ---------- ações do hero: botões com arte ---------- */
.bloco{position:absolute;left:50%;bottom:clamp(2rem,8vh,5rem);transform:translateX(-50%);z-index:3;
  width:min(94vw,46rem);display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,2.4vh,2rem)}

/* assinatura acima dos botões */
.acoes{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center;align-items:center;min-height:78px;width:100%}

.arte{--h:48px;--ar:3;position:relative;display:inline-block;height:var(--h);aspect-ratio:var(--ar);
  padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .28s cubic-bezier(.3,1.6,.5,1)}
.arte[hidden]{display:none}
.agendar{--h:clamp(58px,5.4vw,76px);--ar:519/140}
.derrubar{--h:clamp(54px,4.9vw,70px);--ar:370/124}
.rever{--h:clamp(44px,3.9vw,56px);--ar:323/100}
.nav-agendar{--h:clamp(46px,4.2vw,62px);--ar:436/124;display:block}

.titulo{--h:auto;--ar:900/314;width:min(88vw,clamp(19rem,31vw,27.5rem));height:auto;aspect-ratio:var(--ar);
  position:relative;display:block;pointer-events:none;cursor:default}
.titulo img{width:100%;height:100%;display:block;
  filter:drop-shadow(0 2px 10px rgba(10,7,5,.85)) drop-shadow(0 0 26px rgba(10,7,5,.6))}

/* camada 1: revelação em pincelada (clip-path com borda irregular, funciona até em file://) */
.arte-corpo{position:absolute;inset:0}
@keyframes pintar{from{clip-path:polygon(0% 0%,calc(-32% + 12.0%) 0%,calc(-32% + 15.0%) 8%,calc(-32% + 7.1%) 16%,calc(-32% + 15.0%) 25%,calc(-32% + 6.0%) 33%,calc(-32% + 12.1%) 41%,calc(-32% + 2.0%) 50%,calc(-32% + 8.0%) 58%,calc(-32% + -0.9%) 66%,calc(-32% + 7.0%) 75%,calc(-32% + 1.0%) 83%,calc(-32% + 7.1%) 91%,calc(-32% + 0.0%) 100%,0% 100%)}to{clip-path:polygon(0% 0%,calc(128% + 12.0%) 0%,calc(128% + 15.0%) 8%,calc(128% + 7.1%) 16%,calc(128% + 15.0%) 25%,calc(128% + 6.0%) 33%,calc(128% + 12.1%) 41%,calc(128% + 2.0%) 50%,calc(128% + 8.0%) 58%,calc(128% + -0.9%) 66%,calc(128% + 7.0%) 75%,calc(128% + 1.0%) 83%,calc(128% + 7.1%) 91%,calc(128% + 0.0%) 100%,0% 100%)}}
@keyframes apagar{from{clip-path:polygon(0% 0%,calc(128% + 12.0%) 0%,calc(128% + 15.0%) 8%,calc(128% + 7.1%) 16%,calc(128% + 15.0%) 25%,calc(128% + 6.0%) 33%,calc(128% + 12.1%) 41%,calc(128% + 2.0%) 50%,calc(128% + 8.0%) 58%,calc(128% + -0.9%) 66%,calc(128% + 7.0%) 75%,calc(128% + 1.0%) 83%,calc(128% + 7.1%) 91%,calc(128% + 0.0%) 100%,0% 100%)}to{clip-path:polygon(0% 0%,calc(-32% + 12.0%) 0%,calc(-32% + 15.0%) 8%,calc(-32% + 7.1%) 16%,calc(-32% + 15.0%) 25%,calc(-32% + 6.0%) 33%,calc(-32% + 12.1%) 41%,calc(-32% + 2.0%) 50%,calc(-32% + 8.0%) 58%,calc(-32% + -0.9%) 66%,calc(-32% + 7.0%) 75%,calc(-32% + 1.0%) 83%,calc(-32% + 7.1%) 91%,calc(-32% + 0.0%) 100%,0% 100%)}}
.arte.entra .arte-corpo{animation:pintar .72s var(--atraso,0ms) cubic-bezier(.22,.8,.3,1) both}
.arte.sai .arte-corpo{animation:apagar .38s cubic-bezier(.6,0,.8,.4) both}
.arte.entra{animation:assenta .72s var(--atraso,0ms) cubic-bezier(.22,.8,.3,1) both}
@keyframes assenta{from{transform:translateX(-10px) skewX(-6deg)}to{transform:none}}

/* camada 2: miolo com as imagens */
.arte-miolo{position:absolute;inset:0;transition:filter .25s}
.arte-miolo img{position:absolute;display:block;pointer-events:none;user-select:none}
.arte-base{inset:0;width:100%;height:100%}
.arte-seta{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.arte-icone{transition:transform .6s cubic-bezier(.4,1.4,.5,1)}
/* brilho: cópia clareada da própria arte, vista por uma faixa diagonal que atravessa */
.arte-brilho{inset:0;width:100%;height:100%;filter:brightness(1.7) saturate(1.2);opacity:.55;
  clip-path:polygon(-20% 0,-8% 0,-14% 100%,-26% 100%)}
@keyframes varre{from{clip-path:polygon(-20% 0,-8% 0,-14% 100%,-26% 100%)}to{clip-path:polygon(112% 0,124% 0,118% 100%,106% 100%)}}

/* brasa atrás do agendar */
.agendar::before{content:"";position:absolute;inset:18% 6% 12% 4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(230,20,40,.55),rgba(230,20,40,0));opacity:.35;
  animation:pulsa 2.8s ease-in-out infinite;transition:opacity .3s}
@keyframes pulsa{50%{opacity:.8}}
.arte.sai::before,.arte.entra::before{opacity:0;animation:none}

/* derrubar: a placa ronca de tempos em tempos, pedindo o clique */
@keyframes ronco{0%,78%,100%{transform:none}80%{transform:translate(-1.5px,.5px) rotate(-.6deg)}
  82%{transform:translate(1.5px,-.5px) rotate(.6deg)}84%{transform:translate(-1px,0) rotate(-.4deg)}
  86%{transform:translate(1px,.5px) rotate(.3deg)}88%{transform:none}}
@keyframes ronco-rapido{0%,100%{transform:none}25%{transform:translate(-1.2px,.4px) rotate(-.5deg)}75%{transform:translate(1.2px,-.4px) rotate(.5deg)}}
@keyframes varre-pausa{0%,68%{clip-path:polygon(-20% 0,-8% 0,-14% 100%,-26% 100%)}100%{clip-path:polygon(112% 0,124% 0,118% 100%,106% 100%)}}
.derrubar:not(.sai) .arte-miolo{animation:ronco 3.4s 1.2s infinite}
.derrubar:not(.sai) .arte-brilho{animation:varre-pausa 3.4s 1.2s infinite}

/* interação */
.arte:hover,.arte:focus-visible{transform:translateY(-2px) rotate(-1deg) scale(1.045)}
.arte:hover .arte-miolo,.arte:focus-visible .arte-miolo{filter:brightness(1.12) saturate(1.1)}
.arte:hover .arte-brilho,.arte:focus-visible .arte-brilho{animation:varre .7s ease-out}
.arte:hover .arte-seta,.arte:focus-visible .arte-seta{animation:cutuca .75s cubic-bezier(.4,0,.3,1) infinite}
@keyframes cutuca{0%,100%{transform:translateX(0)}45%{transform:translateX(34%)}}
.arte:hover::before{opacity:1;animation:none}
.derrubar:hover .arte-miolo,.derrubar:focus-visible .arte-miolo{animation:ronco-rapido .16s linear infinite}
.derrubar:hover .arte-brilho{animation:varre .7s ease-out}
.rever:hover .arte-icone,.rever:focus-visible .arte-icone{transform:rotate(-360deg)}
.arte:active{transform:scale(.96);transition-duration:.08s}
.arte:focus-visible{outline:none}
.arte:focus-visible .arte-corpo{filter:drop-shadow(0 0 0 var(--luz)) drop-shadow(0 0 6px rgba(255,210,150,.7))}
.derrubar.golpe .arte-miolo{animation:golpe .32s cubic-bezier(.3,0,.3,1) both}
@keyframes golpe{0%{transform:none}30%{transform:scale(.93) rotate(-2deg)}60%{transform:scale(1.03) rotate(1deg)}100%{transform:none}}

.acoes[data-estado="inicio"] .derrubar{order:1}
.acoes[data-estado="inicio"] .agendar{order:2}
.acoes[data-estado="revelado"] .agendar{order:1}
.acoes[data-estado="revelado"] .rever{order:2}

/* pré-tremor quando a mão chega no gatilho */
@keyframes aviso{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,.5px)}50%{transform:translate(1px,-.5px)}75%{transform:translate(-.5px,-.5px)}}
.hero.prestes .muralha{animation:aviso .18s linear infinite}