/* ============================================================
   animations.css — Instituto Salutem · Psicologia Plural
   Pássaros Canvas, Scroll-Reveal, Transições, Efeitos
   ============================================================ */

/* ── Scroll Reveal ─────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal="fade-up"],
[data-reveal] {
  transform: translateY(28px);
}

[data-reveal="fade-left"] {
  transform: translateX(-28px);
}

[data-reveal="fade-right"] {
  transform: translateX(28px);
}

[data-reveal="scale"] {
  transform: scale(0.95);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

[data-reveal-delay="100"] { transition-delay: 0.1s; }
[data-reveal-delay="200"] { transition-delay: 0.2s; }
[data-reveal-delay="300"] { transition-delay: 0.3s; }
[data-reveal-delay="400"] { transition-delay: 0.4s; }
[data-reveal-delay="500"] { transition-delay: 0.5s; }
[data-reveal-delay="600"] { transition-delay: 0.6s; }

/* ── Pássaros — Animação CSS Sprite ───────────────────────── */

.bird {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg');
  filter: invert(20%) sepia(60%) saturate(500%) hue-rotate(195deg) brightness(80%) contrast(95%);
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;
  animation-name: fly-cycle;
  animation-timing-function: steps(10);
  animation-iteration-count: infinite;
}

.bird-one   { animation-duration: 1s;    animation-delay: -0.5s;  }
.bird-two   { animation-duration: 0.9s;  animation-delay: -0.75s; }
.bird-three { animation-duration: 1.25s; animation-delay: -0.25s; }
.bird-four  { animation-duration: 1.1s;  animation-delay: -0.5s;  }
.bird-five  { animation-duration: 0.95s; animation-delay: -0.3s;  }
.bird-six   { animation-duration: 1.15s; animation-delay: -0.6s;  }
.bird-seven { animation-duration: 1.05s; animation-delay: -0.1s;  }
.bird-eight { animation-duration: 0.85s; animation-delay: -0.8s;  }
.bird-nine  { animation-duration: 1.3s;  animation-delay: -0.4s;  }
.bird-ten   { animation-duration: 1s;    animation-delay: -0.55s; }

.bird-container {
  position: absolute;
  top: 10%;
  left: -3%;
  transform: scale(0.3) translateX(-10vw);
  will-change: transform;
  pointer-events: none;
  z-index: 0;
  animation-name: fly-right-one;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0.55;
}

.bird-container-one   { animation-duration: 18s;  animation-delay:  0s;    top: 12%; }
.bird-container-two   { animation-duration: 22s;  animation-delay: -6s;    top: 24%; }
.bird-container-three { animation-duration: 16s;  animation-delay: -10s;   top:  8%; }
.bird-container-four  { animation-duration: 20s;  animation-delay: -14s;   top: 32%; }
.bird-container-five  { animation-duration: 19s;  animation-delay: -3s;    top: 18%; opacity: 0.45; }
.bird-container-six   { animation-duration: 24s;  animation-delay: -8s;    top: 40%; opacity: 0.40; }
.bird-container-seven { animation-duration: 15s;  animation-delay: -12s;   top:  5%; opacity: 0.50; }
.bird-container-eight { animation-duration: 21s;  animation-delay: -17s;   top: 28%; opacity: 0.45; }
.bird-container-nine  { animation-duration: 17s;  animation-delay: -5s;    top: 45%; opacity: 0.35; }
.bird-container-ten   { animation-duration: 23s;  animation-delay: -19s;   top: 15%; opacity: 0.40; }

@keyframes fly-cycle {
  100% { background-position: -900px 0; }
}

@keyframes fly-right-one {
  0%   { transform: translateX(-15vw) translateY(0)   scale(0.25); opacity: 0;    }
  5%   { opacity: 0.55; }
  15%  { transform: translateX(5vw)   translateY(2vh)  scale(0.38); }
  30%  { transform: translateX(28vw)  translateY(-1vh) scale(0.50); }
  45%  { transform: translateX(50vw)  translateY(3vh)  scale(0.58); }
  60%  { transform: translateX(72vw)  translateY(1vh)  scale(0.58); }
  80%  { transform: translateX(92vw)  translateY(-1vh) scale(0.55); opacity: 0.55; }
  93%  { opacity: 0; }
  100% { transform: translateX(115vw) translateY(0)    scale(0.55); opacity: 0;    }
}

@keyframes fly-right-two {
  0%   { transform: translateX(-15vw) translateY(-1vh) scale(0.35); opacity: 0;    }
  5%   { opacity: 0.50; }
  15%  { transform: translateX(5vw)   translateY(1vh)  scale(0.42); }
  30%  { transform: translateX(28vw)  translateY(-3vh) scale(0.52); }
  45%  { transform: translateX(50vw)  translateY(2vh)  scale(0.48); }
  60%  { transform: translateX(72vw)  translateY(-1vh) scale(0.52); }
  80%  { transform: translateX(92vw)  translateY(1vh)  scale(0.48); opacity: 0.50; }
  93%  { opacity: 0; }
  100% { transform: translateX(115vw) translateY(0)    scale(0.48); opacity: 0;    }
}

.bird-container-three,
.bird-container-four  { animation-name: fly-right-two; }

@keyframes fly-right-three {
  0%   { transform: translateX(-15vw) translateY(2vh)   scale(0.20); opacity: 0;    }
  5%   { opacity: 0.45; }
  15%  { transform: translateX(5vw)   translateY(-1vh)  scale(0.30); }
  30%  { transform: translateX(28vw)  translateY(2vh)   scale(0.40); }
  45%  { transform: translateX(50vw)  translateY(-2vh)  scale(0.45); }
  60%  { transform: translateX(72vw)  translateY(3vh)   scale(0.45); }
  80%  { transform: translateX(92vw)  translateY(0vh)   scale(0.42); opacity: 0.45; }
  93%  { opacity: 0; }
  100% { transform: translateX(115vw) translateY(0)     scale(0.42); opacity: 0;    }
}

.bird-container-five  { animation-name: fly-right-one;   }
.bird-container-six   { animation-name: fly-right-three; }
.bird-container-seven { animation-name: fly-right-two;   }
.bird-container-eight { animation-name: fly-right-one;   }
.bird-container-nine  { animation-name: fly-right-three; }
.bird-container-ten   { animation-name: fly-right-two;   }

@media (max-width: 768px) {
  .bird-container { opacity: 0.38; }
  .bird { width: 60px; height: 85px; }
  .bird-container-six,
  .bird-container-seven,
  .bird-container-eight,
  .bird-container-nine,
  .bird-container-ten { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bird-container, .bird { animation: none !important; display: none !important; }
}

/* ── Animações de entrada da Hero ──────────────────────────── */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroScaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero__logo {
  animation: heroScaleIn 0.8s ease both;
  animation-delay: 0.1s;
}

.hero__tagline-pre {
  animation: heroFadeIn 0.7s ease both;
  animation-delay: 0.3s;
}

.hero__title {
  animation: heroFadeIn 0.8s ease both;
  animation-delay: 0.45s;
}

.hero__subtitle {
  animation: heroFadeIn 0.7s ease both;
  animation-delay: 0.6s;
}

.hero__tagline {
  animation: heroFadeIn 0.7s ease both;
  animation-delay: 0.75s;
}

.hero__btn-group,
.btn-group--hero {
  animation: heroFadeIn 0.7s ease both;
  animation-delay: 0.9s;
}

/* ── Loader / Spinner ──────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-brand-light);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

/* ── Pulse ─────────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 58, 107, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(27, 58, 107, 0); }
}

.pulse-ring {
  animation: pulse 2s ease-in-out infinite;
}

/* ── Float animation ───────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.float { animation: float 4s ease-in-out infinite; }

/* ── Shimmer de loading ────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Page transition ───────────────────────────────────────── */
@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-content {
  animation: pageIn 0.5s ease both;
}

/* ── Hover underline animado ───────────────────────────────── */
.animated-underline {
  position: relative;
  display: inline-block;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-brand);
  transition: width var(--transition-normal);
}

.animated-underline:hover::after { width: 100%; }

/* ── Gradiente animado no fundo hero ──────────────────────── */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Partículas de decoração ───────────────────────────────── */
.deco-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.06;
  pointer-events: none;
}

.deco-circle--1 {
  width: 400px; height: 400px;
  background: var(--color-brand);
  top: -100px; right: -100px;
  animation: float 8s ease-in-out infinite;
}

.deco-circle--2 {
  width: 200px; height: 200px;
  background: var(--color-warm);
  bottom: -50px; left: -50px;
  animation: float 6s ease-in-out infinite reverse;
}

/* ── Reveal stagger para grids ─────────────────────────────── */
.stagger-children > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.15s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.25s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.35s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.45s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.55s; }
.stagger-children > *:nth-child(7) { transition-delay: 0.65s; }
.stagger-children > *:nth-child(8) { transition-delay: 0.75s; }

/* ── Transição de hover para ícones Phosphor ───────────────── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  transition: background var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--color-brand-light);
  transform: scale(1.1);
}

/* ── Efeito glassmorphism leve (usado em sobreposições) ────── */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ── Animação de aparição do navbar ───────────────────────── */
@keyframes navbarIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.navbar {
  animation: navbarIn 0.5s ease both;
}