/* Botoes de pincelada e o titulo do inicio.

   No original cada botao era uma imagem pronta (com o emblema do tatuador e o
   texto desenhados). Aqui o botao e HTML: o formato rasgado vem da mascara
   --pincel (componentes.css), a cor vem do tema e o texto e editavel.
   As animacoes sao as mesmas: entrada em pincelada, brilho que atravessa,
   seta que cutuca, tremor do "derrubar".

   .titulo PRECISA vir depois de .arte neste arquivo: ele tambem usa a classe
   .arte e sobrescreve altura e largura. */

/* ---------- acoes do hero ---------- */
.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)}
.acoes{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center;align-items:center;min-height:78px;width:100%}

/* ---------- o botao ---------- */
.arte{--h:48px;--ar:3;position:relative;display:inline-block;height:var(--h);min-width:calc(var(--h) * var(--ar));
  padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  font-size:calc(var(--h) * .2);
  transition:transform .28s cubic-bezier(.3,1.6,.5,1)}
.arte[hidden]{display:none}
.agendar{--h:clamp(58px,5.4vw,76px);--ar:3.5}
.derrubar{--h:clamp(54px,4.9vw,70px);--ar:3}
.rever{--h:clamp(44px,3.9vw,56px);--ar:3.1}
.nav-agendar{--h:clamp(46px,4.2vw,62px);--ar:3.4;display:block}

/* camada 1: revelacao em pincelada (clip-path com borda irregular) */
.arte-corpo{position:relative;display:block;height:100%}
@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: o miolo, recortado pela pincelada */
.arte-miolo{position:relative;display:flex;align-items:center;gap:.9em;height:100%;
  padding:0 1.7em 0 1.1em;transition:filter .25s;
  -webkit-mask:var(--pincel) 0 0/100% 100% no-repeat;mask:var(--pincel) 0 0/100% 100% no-repeat;
  background:
    var(--ruido),
    repeating-linear-gradient(-62deg,rgba(0,0,0,0) 0 7px,rgba(0,0,0,.16) 7px 9px,rgba(0,0,0,0) 9px 19px),
    linear-gradient(100deg,rgb(var(--acento-escuro)) 0%,rgb(var(--acento)) 28%,rgb(var(--acento-vivo)) 58%,rgb(var(--acento-escuro)) 100%)}
.arte-texto{position:relative;z-index:1;flex:1;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:1em;letter-spacing:.18em;text-transform:uppercase;
  color:#f8efe2;text-shadow:0 1px 2px rgba(0,0,0,.75)}
.arte-icone-caixa{position:relative;z-index:1;flex:none;display:grid;place-items:center;
  height:62%;aspect-ratio:1;border:1.5px solid rgba(248,239,226,.75);background:rgba(10,6,5,.55);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.4)}
.arte-icone-caixa > *{width:58%;height:78%;color:#f3ead9}
.arte-seta{position:relative;z-index:1;flex:none;width:1.9em;height:1em;color:#f8efe2;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.arte-icone{transition:transform .6s cubic-bezier(.4,1.4,.5,1)}

/* brilho: faixa clara que atravessa na diagonal (recortada pela mesma mascara) */
.arte-brilho{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:linear-gradient(100deg,transparent 30%,rgba(255,236,214,.75) 50%,transparent 70%);
  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%)}}

/* ---------- variantes ---------- */
/* derrubar e rever: papel cor de osso com o texto numa pincelada preta */
.derrubar .arte-miolo,.rever .arte-miolo{padding:0 1.2em 0 .9em;gap:.5em;
  background:var(--ruido),linear-gradient(170deg,#e4d8c1,#cbb999 60%,#ad9a79)}
.derrubar .arte-texto,.rever .arte-texto{padding:.55em 1.1em .5em 1em;color:#efe6d6;letter-spacing:.12em;
  background:#0d0a09;-webkit-mask:var(--pincel-2) 0 0/100% 100%;mask:var(--pincel-2) 0 0/100% 100%}
.derrubar .arte-texto{white-space:normal;max-width:9em;line-height:1.02;font-weight:800;font-style:italic;
  font-size:1.15em;letter-spacing:.06em;transform:skewX(-6deg) rotate(-3deg);text-align:left}
.derrubar .arte-icone-caixa{height:72%;border:0;background:none;box-shadow:none}
.derrubar .arte-icone-caixa > *{width:100%;height:100%;color:#17110d;overflow:visible}
.icone-torre .garra{fill:none;stroke:rgb(var(--acento-vivo));stroke-width:3.2;stroke-linecap:round;
  filter:drop-shadow(0 0 2px rgb(var(--acento) / .6))}
.rever .arte-icone-caixa{height:66%;border:0;background:none;box-shadow:none}
.rever .arte-icone-caixa > *{width:100%;height:100%;color:#17110d}
.rever .arte-seta,.derrubar .arte-seta{display:none}
.rever .arte-texto{text-align:center;font-size:1.3em;font-weight:800}

/* brasa atras do agendar */
.agendar::before{content:"";position:absolute;inset:18% 6% 12% 4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--acento-vivo) / .55),rgb(var(--acento-vivo) / 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}

/* interacao */
.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}

/* ---------- titulo do inicio ---------- */
/* Usa .arte so para herdar a entrada em pincelada; o desenho e o .tit--hero. */
.titulo{--h:auto;height:auto;min-width:0;width:min(88vw,clamp(19rem,31vw,27.5rem));
  position:relative;display:block;pointer-events:none;cursor:default}
.titulo .arte-corpo{height:auto}
.titulo:hover,.titulo:focus-visible{transform:none}

/* pre-tremor quando a mao 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}