/* =========================================================================
   TUBARÃO — biblioteca de animações do site
   Cada bloco corresponde a um componente montado no Elementor com a classe
   indicada. O JS (tubarao.js) cuida do que precisa de cálculo.
   ========================================================================= */

:root{
  --tub-navy:#182A7C; --tub-navy-deep:#12205F; --tub-blue:#1F99EE;
  --tub-blue-lite:#3DA6F3; --tub-blue-card:#32ADE6; --tub-teal:#00C4C0;
  --tub-yellow:#FDC462; --tub-cream:#FDFCF8;
  --tub-ease:cubic-bezier(.2,.8,.3,1);
}

/* ---------------------------------------------------- 1. reveal no scroll */
/* Só esconde quando o motor JS está ativo (html.tub-js) — sem JS nada fica invisível.
   FAILSAFE em CSS puro: aos 2.2s o keyframe (fill forwards, vence a cascata) força o
   elemento visível mesmo que o IntersectionObserver nunca dispare — seção alguma
   pode ficar oculta para sempre. */
html.tub-js .tub-reveal{opacity:0;transform:translateY(38px);
  transition:opacity .8s var(--tub-ease),transform .8s var(--tub-ease);
  transition-delay:var(--tub-delay,0ms);will-change:opacity,transform;
  animation:tubFailsafe .6s ease 2.2s forwards;}
@keyframes tubFailsafe{to{opacity:1;transform:none;}}
html.tub-js .tub-reveal.is-in{opacity:1;transform:none;animation:none;}
.tub-reveal.is-in{opacity:1;transform:none;}
html.tub-js .tub-reveal--esq{transform:translateX(-46px);}
html.tub-js .tub-reveal--dir{transform:translateX(46px);}
html.tub-js .tub-reveal--zoom{transform:scale(.92);}
html.tub-js .tub-reveal.is-in{transform:none;}

/* ---------------------------------------------------- 2. ondas em loop */
.tub-onda{position:relative;width:100%;overflow:hidden;pointer-events:none;
  line-height:0;height:var(--tub-altura,140px);}
.tub-onda svg{position:absolute;left:0;top:0;height:100%;width:200%;}
.tub-onda__camada{animation:tubOndaDeriva var(--tub-vel,20s) linear infinite;
  transform-origin:center;will-change:transform;}
.tub-onda__camada--2{animation-duration:calc(var(--tub-vel,20s) * 1.55);animation-direction:reverse;}
.tub-onda__camada--3{animation-duration:calc(var(--tub-vel,20s) * .78);}
@keyframes tubOndaDeriva{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* onda usada como divisor absoluto no rodapé de uma seção */
.tub-onda--abs{position:absolute;left:0;right:0;bottom:0;z-index:0;}
.tub-onda--topo{top:0;bottom:auto;}
.tub-onda--flip{transform:scaleY(-1);}

/* ---------------------------------------------------- 3. água viva (caustics) */
.tub-agua{position:relative;isolation:isolate;}
.tub-agua>.tub-agua__camada{position:absolute;inset:-8%;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;opacity:.5;mix-blend-mode:screen;
  filter:saturate(1.2) contrast(1.05);will-change:transform;}
.tub-agua>.tub-agua__camada--a{animation:tubAguaA 26s ease-in-out infinite alternate;}
.tub-agua>.tub-agua__camada--b{animation:tubAguaB 34s ease-in-out infinite alternate;opacity:.34;}
.tub-agua>.tub-agua__brilho{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.18),transparent 60%);
  animation:tubAguaBrilho 9s ease-in-out infinite alternate;}
.tub-agua>*:not(.tub-agua__camada):not(.tub-agua__brilho){position:relative;z-index:2;}
@keyframes tubAguaA{
  0%{transform:translate3d(0,0,0) scale(1.04);}
  50%{transform:translate3d(-2.2%,1.4%,0) scale(1.09) rotate(.4deg);}
  100%{transform:translate3d(2%,-1.2%,0) scale(1.05) rotate(-.3deg);}}
@keyframes tubAguaB{
  0%{transform:translate3d(1.6%,-1%,0) scale(1.08) rotate(.5deg);}
  100%{transform:translate3d(-1.8%,1.6%,0) scale(1.03) rotate(-.6deg);}}
@keyframes tubAguaBrilho{from{opacity:.35;}to{opacity:.85;}}

/* ---------------------------------------------------- 4. pêndulo (foto + camada) */
.tub-pendulo{position:relative;display:inline-block;}
.tub-pendulo .tub-pendulo__fundo,
.tub-pendulo .tub-pendulo__foto{transform-origin:50% 60%;will-change:transform;
  transform:rotate(var(--tub-rot,0deg));}
.tub-pendulo .tub-pendulo__fundo{
  animation:tubPenduloFundo var(--tub-dur,7s) ease-in-out infinite alternate;}
.tub-pendulo .tub-pendulo__foto{
  animation:tubPenduloFoto var(--tub-dur,7s) ease-in-out infinite alternate;}
@keyframes tubPenduloFoto{
  from{transform:rotate(calc(var(--tub-rot,0deg) - var(--tub-amp,2.6deg))) translateY(-2px);}
  to{transform:rotate(calc(var(--tub-rot,0deg) + var(--tub-amp,2.6deg))) translateY(2px);}}
@keyframes tubPenduloFundo{
  from{transform:rotate(calc(var(--tub-rot,0deg) + var(--tub-amp,2.6deg))) translateY(3px);}
  to{transform:rotate(calc(var(--tub-rot,0deg) - var(--tub-amp,2.6deg))) translateY(-3px);}}
.tub-pendulo:hover .tub-pendulo__foto{animation-play-state:paused;
  transform:rotate(var(--tub-rot,0deg)) scale(1.03);transition:transform .5s var(--tub-ease);}
.tub-pendulo:hover .tub-pendulo__fundo{animation-play-state:paused;
  transform:rotate(calc(var(--tub-rot,0deg) - 5deg)) translate(-6px,6px);
  transition:transform .5s var(--tub-ease);}

/* ---------------------------------------------------- 5. pilha de fotos (polaroid) */
.tub-stack{position:relative;}
.tub-stack .tub-stack__foto{transform-origin:50% 70%;will-change:transform;
  transform:rotate(var(--tub-rot,0deg));
  transition:transform .65s var(--tub-ease),box-shadow .45s ease,z-index 0s .2s;
  animation:tubStackFlutua var(--tub-dur,8s) ease-in-out infinite alternate;
  animation-delay:var(--tub-delay,0ms);}
@keyframes tubStackFlutua{
  from{transform:rotate(var(--tub-rot,0deg)) translateY(-4px);}
  to{transform:rotate(calc(var(--tub-rot,0deg) + 1.6deg)) translateY(4px);}}
.tub-stack:hover .tub-stack__foto{animation-play-state:paused;}
.tub-stack:hover .tub-stack__foto{transform:rotate(calc(var(--tub-rot,0deg) * 1.55))
  translate(var(--tub-abre-x,0px),var(--tub-abre-y,0px)) scale(1.04);
  box-shadow:0 22px 48px rgba(4,12,48,.3);}
/* mouse NUMA foto da pilha: ela vem para a FRENTE (quase reta, com leve zoom)
   enquanto as outras seguem abertas em leque — da para ver qualquer foto de tras */
.tub-stack .tub-stack__foto:hover{z-index:9 !important;
  transform:rotate(calc(var(--tub-rot,0deg) * .3))
    translate(calc(var(--tub-abre-x,0px) * 1.6),calc(var(--tub-abre-y,0px) * 1.6)) scale(1.1);
  box-shadow:0 30px 64px rgba(4,12,48,.42);}

/* ---------------------------------------------------- 6. leque de cards */
.tub-leque{position:relative;}
.tub-leque .tub-leque__item{will-change:transform;cursor:pointer;
  transform-origin:50% 85%;
  transition:transform .9s var(--tub-ease),box-shadow .5s ease,filter .5s ease;
  transform:translate3d(var(--tub-x0,0px),60px,0) rotate(var(--tub-rot0,0deg)) scale(.84);opacity:0;
  transition-delay:var(--tub-delay,0ms);}
.tub-leque.is-in .tub-leque__item{opacity:1;
  transform:translate3d(var(--tub-x,0px),var(--tub-y,0px),0) rotate(var(--tub-rot,0deg));}
.tub-leque .tub-leque__item:hover{
  transform:translate3d(var(--tub-x,0px),calc(var(--tub-y,0px) - 16px),0)
    rotate(calc(var(--tub-rot,0deg) * .45)) scale(1.045);z-index:9;}
.tub-leque .tub-leque__item.is-front{z-index:12;
  transform:translate3d(var(--tub-x,0px),calc(var(--tub-y,0px) - 22px),0) rotate(0deg) scale(1.06);}
/* a elevacao vai para as CAMADAS (que carregam a rotacao), nunca para o wrapper reto */
.tub-leque .tub-camada{transition:box-shadow .5s ease;}
/* par card+foto: hover no conjunto ENTREABRE as camadas (a de tras aparece mais) */
.tub-par .tub-camada{transition:transform .65s var(--tub-ease),box-shadow .5s ease,
  z-index 0s .22s;}
.tub-par:hover img.tub-camada{transform:translate(18px,-16px);}
.tub-par:hover div.tub-camada{transform:translate(-14px,12px);}
/* mouse na propria imagem de tras: ela DESLIZA para fora e so entao passa para a
   frente (transicao do z-index atrasada .22s = movimento continuo, sem pulo seco) */
.tub-par img.tub-camada:hover{z-index:5;
  transform:translate(30px,-24px) scale(1.07);
  box-shadow:0 30px 64px rgba(4,12,48,.45) !important;}
.tub-leque .tub-leque__item:hover .tub-camada,
.tub-leque .tub-leque__item.is-front .tub-camada,
.tub-leque .tub-leque__item.tub-camada:hover,
.tub-leque .tub-leque__item.tub-camada.is-front,
body.tub-hover .tub-leque .tub-camada{box-shadow:0 30px 60px rgba(4,12,48,.42) !important;}
@media(max-width:1024px){
  /* empilha o leque reto e centrado: sem degraus (margin-top), sem rotação
     (a rotação dos cards usa a propriedade `rotate`, não transform) */
  .tub-leque{flex-direction:column !important;flex-wrap:nowrap !important;
    align-items:center !important;}
  .tub-leque .tub-leque__item,
  .tub-leque .tub-leque__item:hover,
  .tub-leque .tub-leque__item.is-front{transform:none !important;box-shadow:none;
    margin:0 !important;
    /* o e-div-block-base tem width:100%: centra o conteúdo dentro do item */
    display:flex;justify-content:center;}
  .tub-leque .tub-camada{rotate:none;margin-inline:0 !important;}
}

/* ---------------------------------------------------- 7. slider em leque */
.tub-fan{position:relative;width:100%;min-height:440px;display:block !important;
  touch-action:pan-y;user-select:none;}
.tub-fan .tub-fan__card{position:absolute !important;left:50%;top:0;margin-left:-160px;
  width:320px !important;cursor:pointer;will-change:transform;
  transition:transform .72s var(--tub-ease),background-color .5s ease,box-shadow .5s ease,filter .5s ease;
  box-shadow:0 18px 44px rgba(4,12,48,.28);}
.tub-fan .tub-fan__card.is-center{box-shadow:0 34px 76px rgba(4,12,48,.5);}
.tub-fan .tub-fan__card:not(.is-center):hover{filter:brightness(1.08);}
.tub-fan__nav{position:relative;z-index:20;}
.tub-fan__btn{cursor:pointer;transition:transform .3s var(--tub-ease),background-color .3s ease;}
.tub-fan__btn:hover{transform:scale(1.12);}
.tub-fan__btn:active{transform:scale(.94);}
@media(max-width:1024px){
  .tub-fan{min-height:0;}
  .tub-fan .tub-fan__card{position:relative !important;left:auto;top:auto;margin:0 auto 22px;
    width:100% !important;max-width:360px;transform:none !important;}
}

/* ---------------------------------------------------- 8. mascotes */
.tub-mascote{will-change:transform;}
.tub-mascote--loop{animation:tubMascoteLoop var(--tub-dur,6s) ease-in-out infinite alternate;}
@keyframes tubMascoteLoop{
  from{transform:translateY(-10px) rotate(-3deg);}
  to{transform:translateY(12px) rotate(3deg);}}
.tub-mascote--cursor{transition:transform .9s cubic-bezier(.16,.9,.3,1);}
.tub-mascote--hover{transition:transform .5s var(--tub-ease);}
.tub-mascote--hover:hover{transform:scale(1.09) rotate(-5deg);}
.tub-mascote--nada{animation:tubMascoteNada var(--tub-dur,9s) ease-in-out infinite;}
@keyframes tubMascoteNada{
  0%{transform:translate(0,0) rotate(0deg);}
  25%{transform:translate(14px,-14px) rotate(4deg);}
  50%{transform:translate(0,-22px) rotate(0deg);}
  75%{transform:translate(-14px,-10px) rotate(-4deg);}
  100%{transform:translate(0,0) rotate(0deg);}}

/* ---------------------------------------------------- 9. órbita de avatares */
.tub-orbita{position:relative;}
.tub-orbita .tub-orbita__item{will-change:transform;
  animation:tubOrbitaSobe var(--tub-dur,7s) ease-in-out infinite alternate;
  animation-delay:var(--tub-delay,0ms);}
@keyframes tubOrbitaSobe{
  from{transform:translate(-5px,-8px) scale(.97);}
  to{transform:translate(6px,9px) scale(1.03);}}
.tub-orbita__aneis circle{transform-origin:50% 50%;
  animation:tubAnelPulsa 6s ease-in-out infinite;}
@keyframes tubAnelPulsa{0%,100%{opacity:.45;}50%{opacity:1;}}

/* ---------------------------------------------------- 10. shark interativo */
.tub-shark-wrap{position:relative;width:100%;pointer-events:none;}
.tub-shark-wrap .oceano-tubarao{background:transparent;}
/* modo tela toda: o oceano preenche o contêiner e o tubarão nada por toda a seção */
.tub-shark-wrap--full{height:100%;}
.tub-shark-wrap--full .oceano-tubarao{height:100% !important;}

/* ---------------------------------------------------- 11. play do vídeo */
.tub-play{cursor:pointer;}
.tub-play::after{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:2px solid rgba(253,252,248,.55);animation:tubPlayPulso 2.4s ease-out infinite;}
@keyframes tubPlayPulso{0%{transform:scale(.9);opacity:.85;}100%{transform:scale(1.35);opacity:0;}}
/* no hover o play NAO se move (o transform de centralizacao fica intacto):
   apenas o pulso do anel acelera e fica mais vivo */
.tub-play:hover::after{animation-duration:1.1s;border-color:rgba(253,252,248,.95);}

/* ---------------------------------------------------- 12. bolhas de fundo */
.tub-bolhas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.tub-bolhas span{position:absolute;bottom:-40px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.85),rgba(160,210,255,.28) 62%,rgba(120,180,255,.1));
  border:1px solid rgba(255,255,255,.4);
  animation:tubBolhaSobe var(--tub-dur,14s) linear infinite;animation-delay:var(--tub-delay,0s);}
@keyframes tubBolhaSobe{
  0%{transform:translateY(0) translateX(0) scale(.6);opacity:0;}
  10%{opacity:.75;}
  90%{opacity:.5;}
  100%{transform:translateY(calc(var(--tub-sobe,600px) * -1)) translateX(var(--tub-lado,30px)) scale(1.1);opacity:0;}}

/* ---------------------------------------------------- 13. lightbox do vídeo */
.tub-lightbox{position:fixed;inset:0;z-index:99999;background:rgba(6,14,44,.92);
  display:flex;align-items:center;justify-content:center;padding:4vmin;
  opacity:0;pointer-events:none;transition:opacity .35s ease;backdrop-filter:blur(6px);}
.tub-lightbox.is-open{opacity:1;pointer-events:auto;}
.tub-lightbox__inner{width:min(1100px,92vw);aspect-ratio:16/9;position:relative;
  border-radius:20px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.55);
  transform:scale(.94);transition:transform .4s var(--tub-ease);}
.tub-lightbox.is-open .tub-lightbox__inner{transform:none;}
.tub-lightbox__inner iframe,.tub-lightbox__inner video{width:100%;height:100%;border:0;display:block;}
.tub-lightbox__fechar{position:absolute;top:18px;right:22px;width:46px;height:46px;border-radius:50%;
  border:0;background:rgba(253,252,248,.16);color:#FDFCF8;font-size:26px;line-height:1;cursor:pointer;
  transition:background-color .25s ease,transform .25s ease;}
.tub-lightbox__fechar:hover{background:rgba(253,252,248,.32);transform:rotate(90deg);}

/* ---------------------------------------------------- 14. respeitar reduced motion */
@media (prefers-reduced-motion:reduce){
  .tub-reveal{opacity:1 !important;transform:none !important;}
  .tub-onda__camada,.tub-agua__camada,.tub-agua__brilho,.tub-pendulo__foto,.tub-pendulo__fundo,
  .tub-stack__foto,.tub-mascote--loop,.tub-mascote--nada,.tub-orbita__item,.tub-bolhas span,
  .tub-play::after{animation:none !important;}
}


/* ---------------------------------------------------- 15. acordeão de barras */
.tub-acc .tub-acc__item{cursor:pointer;transition:transform .45s var(--tub-ease),box-shadow .45s ease;}
.tub-acc .tub-acc__item:hover{transform:translateX(6px);box-shadow:0 16px 34px rgba(4,12,48,.24);}
.tub-acc .tub-acc__corpo{display:grid !important;grid-template-rows:0fr;opacity:0;
  padding-block-start:0 !important;
  transition:grid-template-rows .55s var(--tub-ease),opacity .4s ease,padding .45s ease;
  overflow:hidden;}
.tub-acc .tub-acc__corpo>*{min-height:0;}
.tub-acc .tub-acc__item.is-open{transform:none;}
.tub-acc .tub-acc__item.is-open .tub-acc__corpo{grid-template-rows:1fr;opacity:1;
  padding-block-start:16px !important;}
.tub-acc .tub-acc__cab{pointer-events:none;}