/* =================================================================
   CPN ACADEMIA — animations.css  ·  redesign "Luz Líquida"
   @keyframes, sistema de reveal e preferências de movimento.
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ─── BRAND ─── */
@keyframes waveBob {
  0%,
  100% {
    transform: translateY(0) scaleX(1);
  }
  50% {
    transform: translateY(2px) scaleX(0.86);
  }
}

/* ─── FUNDO / CAUSTICS (luz da água) ─── */
@keyframes caustics {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(22px, -20px) scale(1.07);
  }
  100% {
    transform: translate(-16px, 14px) scale(1.03);
  }
}

/* ─── BOLHAS subindo ─── */
@keyframes rise {
  0% {
    transform: translateY(0) translateX(0) scale(0.6);
    opacity: 0;
  }
  12% {
    opacity: 0.7;
  }
  88% {
    opacity: 0.35;
  }
  100% {
    transform: translateY(-120vh) translateX(36px) scale(1.15);
    opacity: 0;
  }
}

/* ─── ONDAS DIVISÓRIAS ─── */
@keyframes waveSlide {
  0% {
    transform: translateX(-34px);
  }
  50% {
    transform: translateX(34px);
  }
  100% {
    transform: translateX(-34px);
  }
}
@keyframes waveFlow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes waveSwell {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

/* ─── PULSE (botão flutuante WA) ─── */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.65;
  }
  70%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* ─── ENTRADA FLUTUANTE (floats) ─── */
@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.7);
  }
  to {
    opacity: 1;
  }
}

/* ─── ESTEIRA / CARROSSEL ─── */
@keyframes marqueeMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ─── GRADIENTE AQUÁTICO em movimento ─── */
@keyframes aquaShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ─── MODAL POP ─── */
.reveal-modal {
  animation: modalPop 0.45s var(--ease);
}
@keyframes modalPop {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ─── HERO — entradas em cascata ─── */
@keyframes heroBadgeIn {
  from {
    opacity: 0;
    transform: translateY(-16px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes heroSubIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroStatsIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes heroCtasIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── SHIMMER (brilho deslizante) ─── */
@keyframes shimmer {
  0% {
    transform: translateX(-130%) skewX(-18deg);
  }
  100% {
    transform: translateX(230%) skewX(-18deg);
  }
}

/* ─── GLOW PULSE (CTA destaque) ─── */
@keyframes glowPulse {
  0%,
  100% {
    box-shadow:
      0 0 22px 0 rgba(22, 207, 230, 0.4),
      0 16px 40px -14px rgba(22, 207, 230, 0.7);
  }
  50% {
    box-shadow:
      0 0 46px 7px rgba(22, 207, 230, 0.6),
      0 22px 52px -14px rgba(22, 207, 230, 0.9);
  }
}

/* ─── FLOATING (ícone respirando) ─── */
@keyframes floatStat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ─── SCALE IN ─── */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ─── BADGE DOT ─── */
@keyframes badgeDot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 12px var(--aqua);
  }
  50% {
    transform: scale(1.55);
    opacity: 0.65;
    box-shadow: 0 0 22px var(--aqua);
  }
}

/* ─── LINHA GROW ─── */
@keyframes lineGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ─── ROTAÇÃO LENTA (anéis ambientes) ─── */
@keyframes spinSlow {
  to {
    transform: rotate(360deg);
  }
}

/* ─── RIPPLE (ondulação ao revelar) ─── */
@keyframes ripplePop {
  0% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* ─── DASH (linha desenhando) ─── */
@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

/* ──────────────────────────────────────────────────────────────────
   REVEAL — animação por scroll (classe .is-visible vem do JS)
   ────────────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out),
    filter 0.9s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-44px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-right {
  opacity: 0;
  transform: translateX(44px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger: o JS define --d por item (fallback escalonado abaixo) */
[data-stagger] .reveal,
[data-stagger] .reveal-left,
[data-stagger] .reveal-right,
[data-stagger] .reveal-scale {
  transition-delay: var(--d, 0s);
}
[data-stagger] > *:nth-child(1) {
  --d: 0s;
}
[data-stagger] > *:nth-child(2) {
  --d: 0.08s;
}
[data-stagger] > *:nth-child(3) {
  --d: 0.16s;
}
[data-stagger] > *:nth-child(4) {
  --d: 0.24s;
}
[data-stagger] > *:nth-child(5) {
  --d: 0.32s;
}
[data-stagger] > *:nth-child(6) {
  --d: 0.4s;
}

/* ─── ORB DRIFT — orbes atmosféricos do hero ─── */
@keyframes orbDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(65px, 80px) scale(1.2); }
}
@keyframes orbDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-75px, -55px) scale(1.15); }
}
@keyframes orbDrift3 {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(calc(-50% + 50px), calc(-50% - 42px)) scale(0.86); }
}

/* ─── ICON RING PULSE — anel de onda ao hover nos cards ─── */
@keyframes iconRingPulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ─── INFO ICON FLOAT — levitação sutil dos ícones ─── */
@keyframes infoIconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-5px) rotate(-3deg); }
}

/* ─── BUTTON RIPPLE — ondulação ao clicar ─── */
@keyframes btnRipple {
  to { transform: translate(-50%, -50%) scale(28); opacity: 0; }
}

/* ─── SHIMMER em texto gradiente aqua ─── */
@keyframes aquaTextShimmer {
  0%, 100% { background-position: 0% center; }
  50%       { background-position: 100% center; }
}
.grad-aqua {
  background: linear-gradient(
    100deg,
    var(--aqua-light),
    var(--aqua),
    #b4f7ff,
    var(--aqua),
    var(--aqua-light)
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aquaTextShimmer 5s ease-in-out infinite;
}

/* ─── CONTAGEM dos stats do hero ─── */
@keyframes statPop {
  from { transform: scale(0.7) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0);       opacity: 1; }
}
.hero__stat strong.is-counting {
  animation: statPop 0.55s var(--ease-spring) both;
}

/* ─── SCROLL WHEEL indicator ─── */
@keyframes scrollWheel {
  0%   { top: 5px;  opacity: 1; }
  55%  { top: 18px; opacity: 0.3; }
  100% { top: 5px;  opacity: 1; }
}
.hero__scroll {
  position: absolute;
  bottom: 160px;   /* acima da superfície da água (~120px) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: heroCtasIn 1s var(--ease) 1.5s both;
  pointer-events: none;
}
.hero__scroll-mouse {
  width: 22px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 11px;
  position: relative;
}
.hero__scroll-wheel {
  width: 4px;
  height: 7px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2.2s ease-in-out infinite;
}
.hero__scroll-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

/* ─── Oculta scroll hint após começar a rolar ─── */
.header.is-scrolled ~ main .hero__scroll {
  opacity: 0;
  transition: opacity 0.4s;
}

/* ─── Acessibilidade: movimento reduzido ─── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bubble,
  .wave,
  .hero__caustics,
  .hero__waterline,
  .mod-caustics,
  .hero__scroll-wheel,
  .lights,
  .orb,
  .info-card__ico,
  .modalidades::before,
  .float__pulse,
  .brand__wave::before,
  .brand__wave::after,
  .marquee__track,
  .hero__badge-dot,
  .scroll-progress,
  .btn--glow,
  .grad-aqua {
    animation: none !important;
  }
  .section__head .h2::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}