/* =========================================================
   POMOSDA SECTION 03 — RICH MOTION R3.1 SAFE
   SAFE overlay only.

   IMPORTANT:
   - no position override on benefit text
   - no position override on student image
   - no position override on CTA
   - no layout/dimension changes
   ========================================================= */

@media (min-width: 992px) {
    #section-03[data-s03-rich-motion-safe] .pomosda-benefits__rich-overlay-safe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: visible;
        z-index: 3;
    }

    #section-03[data-s03-rich-motion-safe] .s03-safe-arrow,
    #section-03[data-s03-rich-motion-safe] .s03-safe-arrow-head {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    #section-03[data-s03-rich-motion-safe] .s03-safe-arrow {
        stroke-width: 2.3;
        opacity: .72;
    }

    #section-03[data-s03-rich-motion-safe] .s03-safe-arrow-head {
        stroke-width: 2.3;
        opacity: .72;
    }

    #section-03[data-s03-rich-motion-safe] .s03-safe-amber {
        stroke: #F3C200;
    }

    #section-03[data-s03-rich-motion-safe] .s03-safe-sage {
        stroke: #6F9A82;
    }

    #section-03[data-s03-rich-motion-safe] .s03-safe-dot {
        fill: #075F51;
        opacity: .22;
    }

    #section-03[data-s03-rich-motion-safe] .s03-safe-spark {
        fill: #F3C200;
        opacity: .82;
    }

    #section-03[data-s03-rich-motion-safe] .s03-safe-ring {
        fill: none;
        stroke: #F3C200;
        stroke-width: 2;
        opacity: .14;
    }

    /* Hidden animation state exists ONLY on our new SVG. */
    #section-03[data-s03-rich-motion-safe].s03-safe-ready .s03-safe-arrow {
        stroke-dasharray: 560;
        stroke-dashoffset: 560;
        opacity: 0;
    }

    #section-03[data-s03-rich-motion-safe].s03-safe-ready .s03-safe-arrow-head,
    #section-03[data-s03-rich-motion-safe].s03-safe-ready .s03-safe-dot,
    #section-03[data-s03-rich-motion-safe].s03-safe-ready .s03-safe-spark,
    #section-03[data-s03-rich-motion-safe].s03-safe-ready .s03-safe-ring {
        opacity: 0;
    }

    #section-03[data-s03-rich-motion-safe].s03-safe-inview .s03-safe-arrow--left {
        animation: s03-safe-draw .72s cubic-bezier(.2,.75,.22,1) .18s forwards;
    }

    #section-03[data-s03-rich-motion-safe].s03-safe-inview .s03-safe-arrow--top {
        animation: s03-safe-draw .68s cubic-bezier(.2,.75,.22,1) .32s forwards;
    }

    #section-03[data-s03-rich-motion-safe].s03-safe-inview .s03-safe-arrow--right {
        animation: s03-safe-draw .72s cubic-bezier(.2,.75,.22,1) .46s forwards;
    }

    #section-03[data-s03-rich-motion-safe].s03-safe-inview .s03-safe-arrow-head--left {
        animation: s03-safe-pop .28s ease-out .72s forwards;
    }

    #section-03[data-s03-rich-motion-safe].s03-safe-inview .s03-safe-arrow-head--top {
        animation: s03-safe-pop .28s ease-out .82s forwards;
    }

    #section-03[data-s03-rich-motion-safe].s03-safe-inview .s03-safe-arrow-head--right {
        animation: s03-safe-pop .28s ease-out .94s forwards;
    }

    #section-03[data-s03-rich-motion-safe].s03-safe-inview .s03-safe-dot {
        animation: s03-safe-dot-in .38s ease-out .76s forwards;
    }

    #section-03[data-s03-rich-motion-safe].s03-safe-inview .s03-safe-spark {
        animation:
            s03-safe-pop .32s ease-out .82s forwards,
            s03-safe-pulse 4.6s ease-in-out 1.3s infinite;
    }

    #section-03[data-s03-rich-motion-safe].s03-safe-inview .s03-safe-ring {
        animation:
            s03-safe-ring-in .38s ease-out .86s forwards,
            s03-safe-ring-breathe 4.6s ease-in-out 1.3s infinite;
    }

    @keyframes s03-safe-draw {
        0% {
            stroke-dashoffset: 560;
            opacity: 0;
        }
        14% {
            opacity: .72;
        }
        100% {
            stroke-dashoffset: 0;
            opacity: .72;
        }
    }

    @keyframes s03-safe-pop {
        from {
            opacity: 0;
            transform: scale(.78);
            transform-origin: center;
        }
        to {
            opacity: .82;
            transform: scale(1);
            transform-origin: center;
        }
    }

    @keyframes s03-safe-dot-in {
        from {
            opacity: 0;
            transform: translateY(5px);
        }
        to {
            opacity: .22;
            transform: translateY(0);
        }
    }

    @keyframes s03-safe-ring-in {
        from {
            opacity: 0;
            transform: scale(.8);
            transform-origin: center;
        }
        to {
            opacity: .14;
            transform: scale(1);
            transform-origin: center;
        }
    }

    @keyframes s03-safe-pulse {
        0%, 100% { opacity: .64; }
        50% { opacity: .95; }
    }

    @keyframes s03-safe-ring-breathe {
        0%, 100% { opacity: .08; }
        50% { opacity: .18; }
    }
}

@media (max-width: 991px) {
    #section-03 .pomosda-benefits__rich-overlay-safe {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #section-03[data-s03-rich-motion-safe] .s03-safe-arrow,
    #section-03[data-s03-rich-motion-safe] .s03-safe-arrow-head,
    #section-03[data-s03-rich-motion-safe] .s03-safe-dot,
    #section-03[data-s03-rich-motion-safe] .s03-safe-spark,
    #section-03[data-s03-rich-motion-safe] .s03-safe-ring {
        animation: none !important;
        opacity: .68 !important;
        stroke-dashoffset: 0 !important;
    }
}