/* =========================================================
   VIVA+ — animations.css
   ========================================================= */

/* ---------- Reveal ao entrar na viewport (via Intersection Observer) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.32s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.38s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.44s; }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 0.5s; }
.reveal-stagger.is-visible > *:nth-child(n+10) { transition-delay: 0.56s; }

/* =========================================================
   Cards flutuantes com efeito 3D / profundidade
   Um "bob" suave e constante + sombra em camadas simulam os
   cards pairando sobre a superfície. Roda em qualquer tela
   (não depende de mouse); o tilt com o cursor (tilt.js) continua
   funcionando só no desktop, por cima deste efeito.
   ========================================================= */
:root {
  --float-shadow-rest: 0 2px 6px rgba(15, 23, 42, 0.06), 0 16px 30px -14px rgba(15, 23, 42, 0.22);
  --float-shadow-lift: 0 10px 16px rgba(15, 23, 42, 0.08), 0 28px 44px -16px rgba(15, 23, 42, 0.3);
}

.pillar-card,
.value-card,
.sector-card,
.team-card,
.project-card,
.goal-card,
.guidance-card,
.org-item {
  box-shadow: var(--float-shadow-rest);
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Só começa a flutuar depois que o card já revelou na tela (evita
   brigar com a transição de entrada) e escalona o ritmo pra não
   flutuarem todos em sincronia perfeita. */
.pillar-card.is-visible,
.value-card.is-visible,
.sector-card.is-visible,
.team-card.is-visible,
.project-card.is-visible,
.goal-card.is-visible,
.guidance-card.is-visible,
.org-item {
  animation: cardFloat 5.2s ease-in-out infinite;
  animation-delay: 0.9s;
}
.pillar-card.is-visible:nth-child(even),
.value-card.is-visible:nth-child(even),
.sector-card.is-visible:nth-child(even),
.team-card.is-visible:nth-child(even),
.project-card.is-visible:nth-child(even),
.goal-card.is-visible:nth-child(even),
.guidance-card.is-visible:nth-child(even),
.org-item:nth-child(even) {
  animation-delay: 1.5s;
  animation-duration: 6.1s;
}
.pillar-card.is-visible:nth-child(3n),
.value-card.is-visible:nth-child(3n),
.sector-card.is-visible:nth-child(3n),
.team-card.is-visible:nth-child(3n),
.project-card.is-visible:nth-child(3n),
.goal-card.is-visible:nth-child(3n),
.guidance-card.is-visible:nth-child(3n),
.org-item:nth-child(3n) {
  animation-delay: 0.4s;
  animation-duration: 4.6s;
}

/* Ao passar o mouse (ou durante o tilt 3D do cursor), a flutuação
   para para não competir com o transform do hover/tilt. */
.pillar-card:hover,
.value-card:hover,
.sector-card:hover,
.team-card:hover,
.project-card:hover,
.goal-card:hover,
.guidance-card:hover,
.org-item:hover,
.pillar-card.tilt-active,
.value-card.tilt-active,
.sector-card.tilt-active,
.team-card.tilt-active,
.project-card.tilt-active,
.goal-card.tilt-active,
.guidance-card.tilt-active,
.org-item.tilt-active {
  animation: none;
  box-shadow: var(--float-shadow-lift);
}


/* ---------- Hero ---------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
.hero-blob-green { animation: floatY 9s ease-in-out infinite; }
.hero-blob-orange { animation: floatY 11s ease-in-out infinite reverse; }
.hero-float-1 { animation: floatY 6s ease-in-out infinite; }
.hero-float-2 { animation: floatY 7s ease-in-out infinite reverse; }

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.hero-ring-1 { animation: spinSlow 60s linear infinite; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow { animation: heroFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) both; }
.hero-title { animation: heroFadeUp 0.8s 0.08s cubic-bezier(0.22,1,0.36,1) both; }
.hero-sub { animation: heroFadeUp 0.8s 0.16s cubic-bezier(0.22,1,0.36,1) both; }
.hero-ctas { animation: heroFadeUp 0.8s 0.24s cubic-bezier(0.22,1,0.36,1) both; }
.hero-stats { animation: heroFadeUp 0.8s 0.32s cubic-bezier(0.22,1,0.36,1) both; }
.hero-visual { animation: heroFadeUp 1s 0.2s cubic-bezier(0.22,1,0.36,1) both; }

/* ---------- Destaque do mês (Orientações) ---------- */
@keyframes spotlightPulse {
  0%, 100% { transform: scale(1); opacity: 0.22; }
  50% { transform: scale(1.12); opacity: 0.32; }
}

/* ---------- Modal ---------- */
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Toast ---------- */
.toast.show { animation: heroFadeUp 0.4s ease both; }

/* =========================================================
   Aprimoramentos exclusivos para desktop (mouse fino)
   — não afeta a experiência em tablets/celulares
   ========================================================= */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {

  /* ---------- Rolagem: reveal mais elaborado (blur + escala) ---------- */
  .reveal {
    transform: translateY(42px) scale(0.96);
    filter: blur(6px);
    transition:
      opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.is-visible { filter: blur(0); transform: translateY(0) scale(1); }

  .reveal-stagger > * {
    transform: translateY(34px) scale(0.95);
    filter: blur(5px);
    transition:
      opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal-stagger.is-visible > * { filter: blur(0); transform: translateY(0) scale(1); }

  /* ---------- Cards: tilt 3D + brilho seguindo o cursor ---------- */
  .pillar-card,
  .value-card,
  .sector-card,
  .team-card,
  .project-card,
  .goal-card,
  .guidance-card,
  .org-item {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.35s ease;
  }

  .pillar-card > *,
  .value-card > *,
  .sector-card > *,
  .team-card > *,
  .project-card > *,
  .goal-card > *,
  .guidance-card > *,
  .org-item > * { position: relative; z-index: 2; }

  .pillar-card::after,
  .value-card::after,
  .sector-card::after,
  .team-card::after,
  .project-card::after,
  .goal-card::after,
  .guidance-card::after,
  .org-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.4), transparent 65%);
    transition: opacity 0.4s ease;
  }

  .tilt-active::after { opacity: 1; }
  .tilt-active {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-10px) scale(1.02);
  }
  .pillar-card.tilt-active,
  .value-card.tilt-active,
  .guidance-card.tilt-active { box-shadow: var(--shadow-md); }
  .sector-card.tilt-active,
  .team-card.tilt-active,
  .project-card.tilt-active,
  .goal-card.tilt-active { box-shadow: var(--shadow-lg); }
  .org-item.tilt-active { box-shadow: var(--shadow-md); }

  /* ---------- Botões: brilho deslizante ao passar o mouse ---------- */
  .btn { position: relative; overflow: hidden; }
  .btn::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: left 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .btn:hover::after { left: 130%; }

  /* ---------- Menu desktop: sublinhado animado ---------- */
  .nav-desktop a { position: relative; }
  .nav-desktop a::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 6px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-desktop a:hover::after { transform: scaleX(1); }

  /* ---------- Hero: leve paralaxe 3D ao mover o mouse ---------- */
  .hero-visual {
    transition: transform 0.25s ease-out;
    transform: perspective(1000px) rotateX(var(--hrx, 0deg)) rotateY(var(--hry, 0deg));
  }
  .hero-float-1, .hero-float-2 { transition: transform 0.25s ease-out; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; filter: none; }
  .tilt-active { transform: none !important; }
  .pillar-card::after, .value-card::after, .sector-card::after,
  .team-card::after, .project-card::after, .goal-card::after,
  .guidance-card::after,
  .org-item::after { display: none; }
  .hero-visual { transform: none !important; }
  .month-spotlight-glow { animation: none !important; }
}