/* ============================================================================
   shark-web · MOVIMENTO (camada CSS)
   ----------------------------------------------------------------------------
   Estados de repouso e de chegada dos efeitos. O GSAP anima; este arquivo
   define de onde cada coisa parte e como ela fica quando nada anima.

   A LEI DESTE ARQUIVO, e a mais importante do acervo inteiro:

     NENHUM elemento comeca invisivel por CSS sozinho.

   Todo estado de partida esta atras de .sw-motion, uma classe que o
   shark-web.motion.js poe no <html> DEPOIS de confirmar que o GSAP carregou e
   que prefers-reduced-motion esta desligado. Se o JS nao subir — 404 no vendor,
   erro antes dele, CSP bloqueando, rede caindo no meio — a pagina aparece
   inteira, parada, e ninguem perde conteudo.

   O contrario (esconder por CSS e revelar por JS) e o padrao mais comum em
   site animado e e uma bomba: no dia em que o JS falha, a pagina fica em
   branco e o erro nao aparece em lugar nenhum.
   ========================================================================== */

/* ============================================================================
   REVEAL
   ----------------------------------------------------------------------------
   So transform e opacity. Nunca top, height ou width: essas tres forcam
   layout a cada quadro e derrubam o frame rate no celular.
   ========================================================================== */

.sw-motion [data-sw-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

.sw-motion [data-sw-reveal="up"],
.sw-motion [data-sw-reveal=""]      { transform: translate3d(0, var(--sw-rise), 0); }
.sw-motion [data-sw-reveal="down"]  { transform: translate3d(0, calc(var(--sw-rise) * -1), 0); }
.sw-motion [data-sw-reveal="left"]  { transform: translate3d(calc(var(--sw-rise) * -1.4), 0, 0); }
.sw-motion [data-sw-reveal="right"] { transform: translate3d(calc(var(--sw-rise) * 1.4), 0, 0); }
.sw-motion [data-sw-reveal="fade"]  { transform: none; }
.sw-motion [data-sw-reveal="scale"] { transform: scale(0.96); }

/* Depois de animar, o GSAP limpa o transform inline e o elemento fica com
   .is-revelado. will-change some junto: mante-lo depois do fim custa memoria
   de compositor a toa, e em pagina longa isso soma. */
.sw-motion [data-sw-reveal].is-revelado {
  will-change: auto;
}

/* ============================================================================
   SPLIT
   ========================================================================== */

.sw-motion [data-sw-split].is-split .sw-char,
.sw-motion [data-sw-split].is-split .sw-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* ============================================================================
   MARQUEE
   ----------------------------------------------------------------------------
   Feito em CSS puro de proposito: e o unico efeito continuo da pagina, e
   deixar um rAF rodando para sempre so para deslizar logo e desperdicio.
   O JS so duplica o conteudo para o laco fechar sem emenda.
   ========================================================================== */

.sw-marquee {
  --sw-marquee-dur: 34s;
  display: flex;
  overflow: hidden;
  gap: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sw-marquee-trilho {
  display: flex;
  align-items: center;
  gap: var(--sw-gap-lg);
  padding-right: var(--sw-gap-lg);
  flex: none;
  min-width: 100%;
  animation: sw-marquee var(--sw-marquee-dur) linear infinite;
}

.sw-marquee:hover .sw-marquee-trilho { animation-play-state: paused; }

.sw-marquee--reverso .sw-marquee-trilho { animation-direction: reverse; }

@keyframes sw-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* ============================================================================
   SPOTLIGHT
   ----------------------------------------------------------------------------
   Luz que segue o ponteiro dentro do card. O JS so escreve --sw-mx e --sw-my;
   quem desenha e o CSS. Sem ponteiro fino (celular, TV) nunca liga.
   ========================================================================== */

.sw-spotlight {
  position: relative;
  isolation: isolate;
}

.sw-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--sw-dur-2) var(--sw-ease);
  background: radial-gradient(
    260px circle at var(--sw-mx, 50%) var(--sw-my, 50%),
    color-mix(in srgb, var(--sw-acento) 16%, transparent),
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* O raio em "260px circle" tem unidade de proposito. A forma abreviada
   "circle 40%" e sintaxe invalida em radial-gradient, e gradiente invalido
   nao degrada: derruba a declaracao inteira e o fundo do bloco some junto. */

.sw-spotlight.is-ativo::before { opacity: 1; }

.sw-spotlight > * { position: relative; z-index: 1; }

/* ============================================================================
   MAGNETICO
   ========================================================================== */

.sw-magnetico {
  will-change: transform;
}

/* ============================================================================
   PARALLAX E SCRUB
   ========================================================================== */

.sw-motion [data-sw-parallax],
.sw-motion [data-sw-scrub] {
  will-change: transform;
}

/* ============================================================================
   TRANSICAO DE PAGINA
   ========================================================================== */

.sw-motion [data-sw-transicao] {
  opacity: 0;
}

/* ============================================================================
   O DESLIGAMENTO
   ----------------------------------------------------------------------------
   Duas travas, e as duas precisam existir.

   1. prefers-reduced-motion aqui embaixo, que anula o estado de partida mesmo
      que a classe .sw-motion tenha entrado por engano.
   2. O proprio JS, que nem registra os ScrollTriggers quando a media query
      esta ligada.

   Redundancia proposital: e o unico caso do acervo em que falhar significa
   conteudo invisivel, e nao apenas feio.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sw-motion [data-sw-reveal],
  .sw-motion [data-sw-transicao] {
    opacity: 1 !important;
    transform: none !important;
  }

  .sw-marquee-trilho { animation: none; }

  .sw-spotlight::before { display: none; }
}