/* ============================================================
   Catálogo Resona — animação + interação + wordmark WebGL
   Carregado DEPOIS do <style> inline pra poder sobrescrever.
   TUDO gated em body.anim: sem JS, nada fica escondido.
   ============================================================ */

/* ---------- Wordmark WebGL na capa ---------- */
.cv-mark-gl{
  position:relative;
  width:min(1180px,90%);
  height:clamp(160px,25vw,340px);
  margin:0 auto;
}
@media (max-width:820px){
  .cv-mark-gl{ width:96%; height:clamp(200px,48vw,320px); }
}
.cv-mark-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.cv-mark-fallback{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; max-width:none; pointer-events:none;
  transition:opacity .5s ease;
}
.cv-mark-gl.gl-ready .cv-mark-fallback{ opacity:0; }
@media (min-width:821px){ .cv-mark-gl{ cursor:crosshair; } }

/* ---------- Barra de progresso de leitura ---------- */
.cat-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120;
  pointer-events:none; background:rgba(255,255,255,.04);
}
.cat-progress i{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,#B23410,#E8421A,#FF6B47);
  box-shadow:0 0 14px rgba(232,66,26,.65);
}

/* ============================================================
   COREOGRAFIA DE ENTRADA — variantes (não só fade)
   ============================================================ */
.anim .r-up,.anim .r-left,.anim .r-right,.anim .r-scale,.anim .r-card{
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
}

.anim .r-up{ opacity:0; transform:translateY(34px); }
.anim .r-up.in{ opacity:1; transform:none; }

.anim .r-left{ opacity:0; transform:translateX(-48px); }
.anim .r-left.in{ opacity:1; transform:none; }

.anim .r-right{ opacity:0; transform:translateX(48px); }
.anim .r-right.in{ opacity:1; transform:none; }

.anim .r-scale{ opacity:0; transform:scale(.9); }
.anim .r-scale.in{ opacity:1; transform:none; }

/* cards: sobem com leve escala */
.anim .r-card{ opacity:0; transform:translateY(42px) scale(.96); }
.anim .r-card.in{ opacity:1; transform:none; }

/* títulos: cortina que sobe revelando o texto */
.anim .r-title{
  opacity:0;
  clip-path:inset(0 0 112% 0);
  transform:translateY(.16em);
  transition:opacity .5s ease,
             clip-path 1s cubic-bezier(.22,.61,.36,1),
             transform 1s cubic-bezier(.22,.61,.36,1);
}
.anim .r-title.in{ opacity:1; clip-path:inset(0 0 -12% 0); transform:none; }

/* imagens: cortina lateral + zoom que assenta */
.anim .r-img{
  clip-path:inset(0 100% 0 0);
  transform:scale(1.14);
  transition:clip-path 1.1s cubic-bezier(.65,0,.35,1),
             transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.anim .r-img.in{ clip-path:inset(0 0 0 0); transform:none; }

/* linhas / tracinhos: se desenham da esquerda */
.anim .r-line{
  transform:scaleX(0); transform-origin:left center;
  transition:transform .85s cubic-bezier(.22,.61,.36,1);
}
.anim .r-line.in{ transform:scaleX(1); }

/* ============================================================
   INTERAÇÃO — inclinação 3D + brilho (desktop)
   (depois das regras de reveal pra vencer a transição lenta)
   ============================================================ */
.anim .cat-tilt{
  transform-style:preserve-3d;
  transition:transform .18s ease-out;
  will-change:auto;
}
.anim .cat-tilt.leaving{
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.cat-glare{
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  opacity:0; transition:opacity .3s ease; z-index:5;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),
            rgba(255,255,255,.22), rgba(255,255,255,0) 46%);
  mix-blend-mode:screen;
}
.cat-tilt:hover .cat-glare{ opacity:1; }

/* ---------- Botão CTA "Falar com a Resona" ----------
   Antes tinha um efeito "magnético" no JS que puxava o botão na direção do
   cursor — reposicionava pra cima do texto e o hover ficava lento. Removido.
   Agora, mesma linguagem do botão do site (.btn--catalogo): brilho diagonal
   que desliza em loop (movimento + iluminação em volta), glow que intensifica
   no hover (rápido), uma luz quente que acende e a setinha que avança. */
.cta-btn{ overflow:hidden; isolation:isolate; }
.cta-btn,
.anim .cta-btn{
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1),
             box-shadow .3s ease,
             color .25s ease;
}
.cta-btn:hover{
  box-shadow:0 0 0 8px rgba(232,66,26,.10),
             0 0 95px rgba(232,66,26,.62),
             0 26px 70px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.12);
}
.cta-btn span{ transition:transform .25s cubic-bezier(.22,.61,.36,1); }
.cta-btn:hover span{ transform:translateX(7px); }

/* luz quente que acende de cima no hover (atrás do texto) */
.cta-btn::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,140,90,.34), transparent 62%);
  opacity:0; transition:opacity .3s ease;
}
.cta-btn:hover::after{ opacity:1; }

/* brilho diagonal que cruza o botão em loop — o "movimento/iluminação" */
.cta-btn::before{
  content:""; position:absolute; top:0; left:0; z-index:-1;
  width:55%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(255,248,232,.42) 50%, transparent 100%);
  transform:translateX(-185%) skewX(-18deg);
}
@media (prefers-reduced-motion: no-preference){
  .cta-btn::before{ animation:ctaBtnShine 4.8s ease-in-out infinite; }
  @keyframes ctaBtnShine{
    0%, 70%, 100%{ transform:translateX(-185%) skewX(-18deg); }
    85%{ transform:translateX(330%) skewX(-18deg); }
  }
}

/* itens "→ ..." ganham um realce ao passar o mouse (desktop) */
@media (min-width:821px){
  .flist .frow{ transition:transform .25s ease, color .25s ease; }
  .flist .frow:hover{ transform:translateX(6px); }
  .on-dark .flist .frow:hover{ color:#fff; }
  .on-light .flist .frow:hover{ color:var(--DB); }
  .tcard{ transition:border-color .3s ease, background .3s ease; }
}

/* barrinha de progresso de cada slide "enche" quando entra (desktop) */
@media (min-width:821px){
  .anim .prog-fill{ width:0 !important; transition:width 1.1s cubic-bezier(.22,.61,.36,1) .15s; }
  .anim .slide.in-view .prog-fill{ width:var(--pf,100%) !important; }
}