/* =========================================================
   POMOSDA — SECTION 03 MOTION R2
   Motion-only overlay. It deliberately does NOT change the
   approved Section 03 layout, dimensions, typography or positions.
   ========================================================= */

#section-03[data-section03-motion] {
    --s03-motion-ease: cubic-bezier(.2,.78,.2,1);
}

/* Performance hints only. No layout properties here. */
#section-03[data-section03-motion] [data-s03-motion] {
    backface-visibility: hidden;
}

#section-03[data-section03-motion] .pomosda-benefits__heading,
#section-03[data-section03-motion] .pomosda-benefits__benefit,
#section-03[data-section03-motion] .pomosda-benefits__group-image,
#section-03[data-section03-motion] .pomosda-benefits__cta,
#section-03[data-section03-motion] .pomosda-benefits__bottom-visual {
    will-change: opacity, translate, scale;
}

#section-03[data-section03-motion] .pomosda-benefits__blob {
    will-change: opacity, scale, filter;
}

/* JS adds .s03-motion-ready. Until then the existing static design
   remains fully visible, so a JS failure can never blank the section. */
#section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__heading {
    opacity: 0;
    translate: 0 22px;
}

#section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__benefit--top {
    opacity: 0;
    translate: 0 -18px;
}

#section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__benefit--left {
    opacity: 0;
    translate: -28px 8px;
}

#section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__benefit--right {
    opacity: 0;
    translate: 28px 8px;
}

#section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__blob {
    opacity: 0;
    scale: .94;
    filter: saturate(.8);
}

#section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__group-image {
    opacity: 0;
    translate: 0 34px;
    scale: .975;
}

#section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__cta {
    opacity: 0;
    translate: 0 16px;
    scale: .96;
}

#section-03.s03-motion-ready:not(.s03-bottom-inview) .pomosda-benefits__bottom-visual {
    opacity: 0;
    translate: 0 30px;
}

/* Playback. Animations use translate/scale longhands so existing
   transform-based layout rules remain untouched. */
#section-03.s03-inview .pomosda-benefits__heading {
    animation: s03-r2-rise .72s var(--s03-motion-ease) .02s both;
}

#section-03.s03-inview .pomosda-benefits__benefit--top {
    animation: s03-r2-top .62s var(--s03-motion-ease) .32s both;
}

#section-03.s03-inview .pomosda-benefits__benefit--left {
    animation: s03-r2-left .64s var(--s03-motion-ease) .46s both;
}

#section-03.s03-inview .pomosda-benefits__benefit--right {
    animation: s03-r2-right .64s var(--s03-motion-ease) .58s both;
}

#section-03.s03-inview .pomosda-benefits__blob {
    animation:
        s03-r2-blob-in .82s var(--s03-motion-ease) .58s both,
        s03-r2-blob-breathe 7.5s ease-in-out 1.7s infinite;
}

#section-03.s03-inview .pomosda-benefits__group-image {
    animation:
        s03-r2-students-in .86s var(--s03-motion-ease) .72s both,
        s03-r2-students-float 7s ease-in-out 2s infinite;
}

#section-03.s03-inview .pomosda-benefits__cta {
    animation: s03-r2-cta-in .52s cubic-bezier(.22,1.22,.4,1) 1.34s both;
}

#section-03.s03-bottom-inview .pomosda-benefits__bottom-visual {
    animation: s03-r2-bottom-in .78s var(--s03-motion-ease) both;
}

/* CTA polish remains visual-only and does not resize the button. */
#section-03[data-section03-motion] .pomosda-benefits__cta {
    overflow: hidden;
    isolation: isolate;
}

#section-03[data-section03-motion] .pomosda-benefits__motion-sheen {
    position: absolute;
    inset-block: -60%;
    left: -38%;
    width: 22%;
    pointer-events: none;
    opacity: 0;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
}

@media (hover: hover) and (pointer: fine) {
    #section-03[data-section03-motion] .pomosda-benefits__cta:hover .pomosda-benefits__motion-sheen {
        animation: s03-r2-sheen .72s var(--s03-motion-ease) 1;
    }

    #section-03[data-section03-motion] .pomosda-benefits__bottom-image {
        transition: filter .35s ease;
    }

    #section-03[data-section03-motion] .pomosda-benefits__bottom-image:hover {
        filter: saturate(1.035) contrast(1.015);
    }
}

@keyframes s03-r2-rise {
    from { opacity: 0; translate: 0 22px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes s03-r2-top {
    from { opacity: 0; translate: 0 -18px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes s03-r2-left {
    from { opacity: 0; translate: -28px 8px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes s03-r2-right {
    from { opacity: 0; translate: 28px 8px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes s03-r2-blob-in {
    0%   { opacity: 0; scale: .94; filter: saturate(.8); }
    72%  { opacity: 1; scale: 1.012; filter: saturate(1.05); }
    100% { opacity: 1; scale: 1; filter: saturate(1); }
}

@keyframes s03-r2-blob-breathe {
    0%, 100% { scale: 1; }
    50%      { scale: 1.012; }
}

@keyframes s03-r2-students-in {
    0%   { opacity: 0; translate: 0 34px; scale: .975; }
    74%  { opacity: 1; translate: 0 -2px; scale: 1.003; }
    100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes s03-r2-students-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -3px; }
}

@keyframes s03-r2-cta-in {
    from { opacity: 0; translate: 0 16px; scale: .96; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes s03-r2-bottom-in {
    from { opacity: 0; translate: 0 30px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes s03-r2-sheen {
    0%   { left: -38%; opacity: 0; }
    16%  { opacity: .8; }
    100% { left: 120%; opacity: 0; }
}

/* Mobile: shorter travel, no perpetual floating. */
@media (max-width: 767px) {
    #section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__heading,
    #section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__benefit--top,
    #section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__benefit--left,
    #section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__benefit--right,
    #section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__group-image,
    #section-03.s03-motion-ready:not(.s03-inview) .pomosda-benefits__cta,
    #section-03.s03-motion-ready:not(.s03-bottom-inview) .pomosda-benefits__bottom-visual {
        translate: 0 18px;
    }

    #section-03.s03-inview .pomosda-benefits__group-image {
        animation: s03-r2-students-in-mobile .72s var(--s03-motion-ease) .62s both;
    }

    #section-03.s03-inview .pomosda-benefits__blob {
        animation: s03-r2-blob-in .72s var(--s03-motion-ease) .5s both;
    }
}

@keyframes s03-r2-students-in-mobile {
    from { opacity: 0; translate: 0 18px; scale: .985; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
}

/* Accessibility / safety fallback. */
@media (prefers-reduced-motion: reduce) {
    #section-03[data-section03-motion] *,
    #section-03[data-section03-motion] *::before,
    #section-03[data-section03-motion] *::after {
        animation: none !important;
        transition: none !important;
    }

    #section-03[data-section03-motion] .pomosda-benefits__heading,
    #section-03[data-section03-motion] .pomosda-benefits__benefit,
    #section-03[data-section03-motion] .pomosda-benefits__blob,
    #section-03[data-section03-motion] .pomosda-benefits__group-image,
    #section-03[data-section03-motion] .pomosda-benefits__cta,
    #section-03[data-section03-motion] .pomosda-benefits__bottom-visual {
        opacity: 1 !important;
        translate: 0 0 !important;
        scale: 1 !important;
        filter: none !important;
    }
}