/* ============================================================
   BBL — Global Section Reveal Animations
   ------------------------------------------------------------
   Adds a scroll-triggered fade-up to every <section> on every
   page (Home, About, Services, Team, Contact, Careers, etc.).

   Pure CSS using CSS scroll-driven animations — no JavaScript
   and no template edits required.

   Browser support:
     • Chrome / Edge 115+
     • Safari 26+
   In browsers without support the sections simply show normally
   (no hidden content), because everything is wrapped in
   `@supports (animation-timeline: view())`.

   Load this file LAST (after main.css / about-sections.css).
   ============================================================ */

@keyframes bbl-section-reveal {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@supports (animation-timeline: view()) {

    /* Every section inside the page <main> fades up as it enters the viewport */
    main section {
        animation: bbl-section-reveal 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        animation-timeline: view();
        animation-range: entry 0% entry 32%;
    }

    /* Nested sections animate a little faster/subtler */
    main section section {
        animation-duration: 0.6s;
        animation-range: entry 0% entry 24%;
    }

    /* Respect users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        main section {
            animation: none;
        }
    }
}