/* === Método Aplicado — Scroll Effects (add-on, não toca no bundle) === */

/* ── 1. Barra de progresso de scroll no topo ── */
@supports (animation-timeline: scroll()) {
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #099CDA, #0882B8);
    z-index: 9999;
    transform-origin: left center;
    animation: scrollProgress linear both;
    animation-timeline: scroll(root);
  }

  @keyframes scrollProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* ── 2. Humane-inspired: elementos .hero-animate ganham blur+scale ao sair ── */
@supports (animation-timeline: scroll()) {
  .hero-animate,
  .hero-fade {
    will-change: opacity, transform, filter;
  }

  /* Container do hero sai com scale + blur enquanto user scrolla */
  .hero-animate ~ * ,
  .min-h-screen.relative,
  section.min-h-screen {
    /* só aplica a seções que não são o hero */
  }
}

/* ── 3. Scroll reveal aprimorado para elementos .sr (progressivo) ── */
@supports (animation-timeline: view()) {
  .sr {
    /* sobrescreve o opacity:0 estático com animação scroll-driven */
    opacity: 0;
    transform: translateY(32px);
    filter: blur(4px);
    animation: srReveal 1s cubic-bezier(.16,1,.3,1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
    /* desativa a transição JS-driven para não conflitar */
    transition: none !important;
  }

  .sr-visible {
    /* mantém visível se JS já tiver aplicado antes do suporte ser detectado */
    opacity: 1 !important;
    transform: translateY(0) !important;
    filter: none !important;
  }

  @keyframes srReveal {
    from {
      opacity: 0;
      transform: translateY(32px);
      filter: blur(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }
}

/* ── 4. Fade-in suave para h1, h2, h3 ao entrar na viewport ── */
@supports (animation-timeline: view()) {
  h1, h2, h3 {
    animation: headingReveal 0.8s cubic-bezier(.16,1,.3,1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  @keyframes headingReveal {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

/* ── 5. Cards e painéis animam ao entrar ── */
@supports (animation-timeline: view()) {
  .rounded-2xl,
  .rounded-3xl,
  .shadow-lg,
  .shadow-2xl {
    animation: cardReveal 0.7s cubic-bezier(.16,1,.3,1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  @keyframes cardReveal {
    from {
      opacity: 0;
      transform: translateY(24px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}