/* ==========================================================================
   CWB Runner — Motion States & Scroll FX
   Estados iniciais antes do GSAP entrar em cena. JS adiciona .is-ready.
   ========================================================================== */

/* Boot — antes do JS estar pronto, esconde elementos que serão animados */
html:not(.gsap-ready) [data-fade],
html:not(.gsap-ready) [data-rise],
html:not(.gsap-ready) [data-split],
html:not(.gsap-ready) [data-stagger] > * {
  opacity: 0;
}

html:not(.gsap-ready) [data-rise] {
  transform: translateY(40px);
}

html:not(.gsap-ready) [data-split] {
  /* split-type vai dividir; deixa invisível até dividir */
  visibility: hidden;
}

html.gsap-ready [data-split] {
  visibility: visible;
}

/* SplitType padrão */
.split-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.split-line .word,
.split-line .char {
  display: inline-block;
}

/* Para textos animados — durante boot, sobe linhas */
html:not(.gsap-ready) [data-split-by="lines"] .split-line .word,
html:not(.gsap-ready) [data-split-by="lines"] .line {
  transform: translateY(110%);
}

/* Hover lift — micro reação física */
.lift {
  transition: transform 600ms var(--ease-out-expo);
}
.lift:hover {
  transform: translateY(-4px);
}

/* Hover line — sublinhado micro */
.underline-fx {
  position: relative;
  display: inline-block;
}
.underline-fx::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 600ms var(--ease-out-expo);
}
.underline-fx:hover::after {
  transform-origin: left center;
  transform: scaleX(1);
}

/* Parallax target — apenas em desktop, JS aplica scrub via ScrollTrigger */
@media (min-width: 881px) and (prefers-reduced-motion: no-preference) {
  [data-parallax] { will-change: transform; }
}

/* Image / media reveal — blur removido (era 8px → 0, custoso em GPU em imagens grandes).
   Uso de scale + opacity é o suficiente para a sensação. */
.media-reveal {
  position: relative;
  overflow: hidden;
}

.media-reveal__inner {
  transform: scale(1.08);
  opacity: 0.6;
  transition:
    transform 1600ms var(--ease-out-expo),
    opacity 1200ms var(--ease-smooth);
}

.media-reveal.is-in .media-reveal__inner {
  transform: scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .media-reveal__inner { transform: none; opacity: 1; transition: none; }
}

/* Scroll-driven horizontal pan */
.hpan {
  position: relative;
  overflow: hidden;
}

/* Counter — número grande que conta */
.counter {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.counter__num {
  font-size: clamp(56px, 8vw, 112px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.counter__suffix {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 4px;
}

/* Aurora — gradiente animado discreto para o hero.
   Otimizado: blur 40px (era 80px), terceira camada simplificada.
   Em mobile/reduced-motion, animações pausam. */
.aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  contain: layout paint;
}

/* PERF: mix-blend-mode: screen forçava read-back do compositor por pixel a cada
   frame — letal em integrada (MBP 2019 i5). Removido. Cor ajustada pra compensar. */
.aurora__layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(32px);
  opacity: 0.55;
  transform: translateZ(0);
}

/* Aurora cobre a janela de buffering do vídeo: movimento imediato ao entrar no
   site (sem sensação de congelamento). Faz fade-out e pausa quando o vídeo
   arranca — aí o vídeo passa a ser a luz ambiente. Em low-end (sem vídeo) a
   aurora permanece animada, evitando hero estático. */
.hero--video .aurora { transition: opacity 600ms ease; }
.hero--video.is-video-playing .aurora { opacity: 0; }
.hero--video.is-video-playing .aurora__layer { animation-play-state: paused; }

.aurora__layer--1 {
  width: 60vw;
  height: 60vw;
  top: -20vw;
  left: -10vw;
  background: radial-gradient(circle, rgba(92, 225, 230, 0.18) 0%, transparent 60%);
  animation: aurora-drift-a 28s ease-in-out infinite alternate;
}

.aurora__layer--2 {
  width: 50vw;
  height: 50vw;
  bottom: -20vw;
  right: -10vw;
  background: radial-gradient(circle, rgba(227, 255, 58, 0.07) 0%, transparent 60%);
  animation: aurora-drift-b 36s ease-in-out infinite alternate;
}

.aurora__layer--3 {
  width: 70vw;
  height: 70vw;
  top: 30%;
  left: 20%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.035) 0%, transparent 60%);
  animation: aurora-drift-c 44s ease-in-out infinite alternate;
}

@keyframes aurora-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(10vw, 10vh, 0) scale(1.1); }
}
@keyframes aurora-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-10vw, -5vh, 0) scale(1.15); }
}
@keyframes aurora-drift-c {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-5vw, 5vh, 0); }
}

@media (max-width: 880px), (prefers-reduced-motion: reduce) {
  .aurora__layer { animation: none !important; }
  .aurora__layer--3 { display: none; }
}

/* Pause animação quando hero/page-hero sai da viewport (JS adiciona .is-paused) */
.hero.is-paused .aurora__layer,
.page-hero.is-paused .aurora__layer,
.hero.is-paused .hero__led::before,
.hero.is-paused .hero__led::after,
.page-hero.is-paused .hero__led::before,
.page-hero.is-paused .hero__led::after {
  animation-play-state: paused;
}

/* Linha vertical decorativa que cresce com o scroll */
.scroll-line {
  position: absolute;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line-mid), transparent);
  pointer-events: none;
}

/* Cinematic vignette */
.vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}

/* Letterbox bars (cinema feel) — usado em transições / hero */
.letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--black);
  z-index: 2;
  pointer-events: none;
}

.letterbox--top { top: 0; transform: translateY(-100%); }
.letterbox--bot { bottom: 0; transform: translateY(100%); }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--gray-800); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-700); }