/* Animações no estilo do rockyshothoney.com, aplicadas ao site t|Derm Vet (vol3).
   Usa propriedades individuais (scale, rotate, translate) para não brigar com
   as transformações que o tema e o motor do vol já aplicam nos mesmos elementos. */

/* ---------- cortina de abertura ---------- */
.rk-cortina { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.rk-cortina__painel { position: absolute; inset: 0 0 -140px 0; background: #28d9c4; display: grid; place-items: center; }
.rk-cortina__painel svg.rk-onda { position: absolute; left: 0; bottom: 0; width: 100%; height: 140px; }
.rk-cortina__logo { width: min(320px, 60vw); scale: 0; rotate: -12deg; }
.rk-cortina__logo img { width: 100%; height: auto; display: block; }

/* ---------- adesivos que pulam ---------- */
.rk-pop { scale: var(--rk-s, 1); rotate: var(--rk-r, 0deg); filter: opacity(var(--rk-o, 1)); will-change: scale, rotate; }
.rk-pop.rk-sem-filtro { filter: none; }

/* ---------- estrelinhas decorativas ---------- */
.rk-estrela { position: absolute; z-index: 1; pointer-events: none; width: var(--t, 40px); height: auto; color: var(--c, #28d9c4);
  scale: var(--rk-s, 0); rotate: var(--rk-r, 0deg); translate: 0 var(--rk-y, 0px); }
.rk-estrela svg { width: 100%; height: auto; display: block; overflow: visible; animation: rk-balanca var(--dur, 5s) ease-in-out infinite alternate; }
@keyframes rk-balanca { from { transform: rotate(-10deg) scale(.94); } to { transform: rotate(12deg) scale(1.06); } }
.rk-tem-estrela { position: relative; }

/* ---------- faixas xadrez nas laterais do topo ---------- */
.rk-xadrez { position: absolute; top: -100%; bottom: -100%; width: 26px; z-index: 2; pointer-events: none;
  background-image: conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0); background-size: 26px 26px; opacity: .9; translate: 0 var(--rk-y, 0px); }
.rk-xadrez--esq { left: 0; }
.rk-xadrez--dir { right: 0; }

/* ---------- títulos que sobem ---------- */
.rk-sobe { translate: 0 var(--rk-y, 0px); scale: var(--rk-s, 1); transform-origin: 50% 100%; }

/* ---------- palco 3D que deita ---------- */
.rk-3d-pai { perspective: 1300px; }
.rk-3d { rotate: x var(--rk-rx, 0deg); transform-origin: 50% 100%; }

/* ---------- personagens com vida (como o Lottie do Rocky) ---------- */
@keyframes rk-vida { 0%, 100% { rotate: -2deg; translate: 0 0; } 50% { rotate: 2deg; translate: 0 -8px; } }
@keyframes rk-quica { 0%, 100% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -14px; rotate: -4deg; } 60% { translate: 0 0; rotate: 3deg; } }

/* ---------- personagens no rodapé (o "toca aqui" do Rocky) ---------- */
.rk-rodape-bichos { position: absolute; left: calc(50% - min(130px, 20vw)); bottom: calc(100% - 6px); width: min(260px, 40vw); z-index: 3; pointer-events: none; translate: 0 var(--rk-y, 60%); clip-path: inset(-200px -200px 0 -200px); }
.rk-rodape-bichos img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(21, 26, 67, .25)); }
.rk-rodape-bichos .rk-estalo { position: absolute; left: 44%; top: 2%; width: 26%; color: #28d9c4; scale: var(--rk-s, 0); rotate: var(--rk-r, -30deg); }
.rk-rodape-bichos .rk-estalo svg { width: 100%; height: auto; display: block; }
.rk-rodape-pai { position: relative; overflow: visible !important; }

/* ---------- botão com "líquido" subindo no hover ---------- */
.rk-liquido { position: relative; overflow: hidden; isolation: isolate; }
.rk-liquido::before { content: ""; position: absolute; left: -10%; right: -10%; top: 100%; height: 180%; z-index: -1; pointer-events: none;
  background: #151a43 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q15 0 30 6 T60 6 T90 6 T120 6 V12 H0Z' fill='%23151a43'/%3E%3C/svg%3E") 0 0 / 60px 12px repeat-x;
  background-origin: border-box; transition: top .55s cubic-bezier(.22, 1, .36, 1); animation: rk-onda-btn 1.2s linear infinite; }
.rk-liquido:hover::before, .rk-liquido:focus-visible::before { top: -14px; }
.rk-liquido:hover, .rk-liquido:focus-visible { color: #fff !important; }
.rk-liquido:hover * { color: #fff !important; }
@keyframes rk-onda-btn { to { background-position: 60px 0; } }

@media (max-width: 980px) {
  .rk-xadrez { width: 16px; background-size: 16px 16px; }
  .rk-estrela { width: calc(var(--t, 40px) * .7); }
}
@media (prefers-reduced-motion: reduce) {
  .rk-cortina, .rk-estrela, .rk-xadrez { display: none !important; }
  .rk-pop, .rk-sobe, .rk-3d { scale: 1 !important; rotate: 0deg !important; translate: none !important; filter: none !important; }
  .tdv-bicho, .rk-estrela svg, .rk-liquido::before { animation: none !important; }
  .rk-rodape-bichos { translate: none !important; }
}

/* ---------- explosões (o "estouro" atrás do frasco do Rocky) ---------- */
.rk-explosao { position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 1; scale: var(--rk-s, 1); rotate: calc(var(--rk-r, 0deg) + var(--rk-gira, 0deg)); }
.rk-explosao--hero { left: 50%; bottom: 4%; width: min(56vh, 46vw); translate: -50% 0; opacity: .9; }
.rk-explosao--hero2 { left: 50%; bottom: 1%; width: min(64vh, 52vw); translate: -50% 0; opacity: .12; }
#hero-video-block .tdv-bicho { z-index: 1; }
.rk-explosao--castra { left: 50%; top: 50%; width: 86%; translate: -50% -50%; opacity: .95; }
#castracao .et_pb_image_0 img { position: relative; z-index: 1; }
.rk-explosao--produto { left: 50%; top: 58%; width: 66%; translate: -50% -50%; z-index: 0 !important; }
.prod-img .et_pb_image_wrap > img { position: relative !important; z-index: 2 !important; mix-blend-mode: normal !important; }
.prod-img .et_pb_image_wrap { overflow: visible !important; isolation: isolate; }
.single-product .prod-img .et_pb_image_wrap { position: relative; display: block; background: transparent !important; }

/* ---------- elementos que voam na cena presa ---------- */
.rk-voa { translate: var(--rk-x, 0px) var(--rk-y, 0px); scale: var(--rk-s, 1); rotate: var(--rk-r, 0deg); filter: opacity(var(--rk-o, 1)); }

/* ---------- selos ondulados com foto ---------- */
.rk-selo { position: absolute; z-index: 1; pointer-events: none; width: clamp(90px, 10vw, 150px); aspect-ratio: 1; background: #28d9c4; padding: 7px;
  scale: var(--rk-s, 1); rotate: var(--rk-r, 0deg); translate: 0 var(--rk-y, 0px); filter: drop-shadow(0 14px 18px rgba(21, 26, 67, .2)); }
.rk-selo img { width: 100%; height: 100%; object-fit: cover; clip-path: inherit; display: block; }
@media (max-width: 980px) { .rk-selo { width: 76px; } .rk-explosao--hero { width: 78vw; } .rk-explosao--hero2 { width: 90vw; } }
@media (prefers-reduced-motion: reduce) { .rk-explosao, .rk-selo { display: none !important; } .rk-voa { translate: none !important; scale: 1 !important; rotate: 0deg !important; filter: none !important; } }

/* o tema zera o ::before dos botões (por causa do ícone "5" do Divi): aqui ele precisa existir, vazio,
   senão o texto fica branco sobre o botão branco no hover */
a.rk-liquido::before, button.rk-liquido::before, .button.rk-liquido::before { content: "" !important; display: block !important; }
a.rk-liquido::after, .button.rk-liquido::after { content: none !important; }