/* POMOSDA — Section 08 Prestasi Motion R4
 * Motion-only enhancement. Does not replace the shared stylesheet.
 */
#section-08.s08m4 {
    position: relative;
    isolation: isolate;
}

#section-08.s08m4 .s08m4-ambient {
    position: absolute;
    z-index: -1;
    width: 260px;
    aspect-ratio: 1;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    filter: blur(1px);
    transition: opacity 900ms ease;
}

#section-08.s08m4 .s08m4-ambient--a {
    top: 18%;
    left: -110px;
    background: radial-gradient(circle, rgba(11, 107, 88, .10) 0 28%, rgba(11, 107, 88, 0) 70%);
}

#section-08.s08m4 .s08m4-ambient--b {
    right: -115px;
    bottom: 8%;
    background: radial-gradient(circle, rgba(255, 190, 18, .12) 0 25%, rgba(255, 190, 18, 0) 72%);
}

#section-08.s08m4.is-s08m4-visible .s08m4-ambient { opacity: 1; }

#section-08.s08m4 .s08m4-heading {
    opacity: 0;
    translate: 0 24px;
    filter: blur(4px);
    transition:
        opacity 720ms cubic-bezier(.22,1,.36,1),
        translate 720ms cubic-bezier(.22,1,.36,1),
        filter 720ms ease;
}

#section-08.s08m4.is-s08m4-visible .s08m4-heading {
    opacity: 1;
    translate: 0 0;
    filter: none;
}

#section-08.s08m4 .s08m4-copy {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 640ms ease 140ms, translate 640ms cubic-bezier(.22,1,.36,1) 140ms;
}

#section-08.s08m4.is-s08m4-visible .s08m4-copy {
    opacity: 1;
    translate: 0 0;
}

#section-08.s08m4 .s08m4-card {
    position: relative;
    isolation: isolate;
    opacity: .88;
    scale: .975;
    filter: saturate(.82) contrast(.98);
    transition:
        opacity 440ms ease,
        scale 520ms cubic-bezier(.22,1,.36,1),
        translate 520ms cubic-bezier(.22,1,.36,1),
        filter 440ms ease,
        box-shadow 520ms cubic-bezier(.22,1,.36,1);
}

#section-08.s08m4 .s08m4-card.s08m4-active {
    opacity: 1;
    scale: 1.025;
    translate: 0 -5px;
    filter: saturate(1.04) contrast(1.015);
    box-shadow: 0 24px 58px rgba(15, 70, 58, .16), 0 8px 24px rgba(15, 70, 58, .08);
}

#section-08.s08m4 .s08m4-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background: linear-gradient(110deg, transparent 24%, rgba(255,255,255,.52) 46%, rgba(255,255,255,.08) 58%, transparent 72%);
    translate: -130% 0;
}

#section-08.s08m4 .s08m4-card.s08m4-sweep::after {
    animation: s08m4Sweep 760ms cubic-bezier(.22,1,.36,1) 1 both;
}

#section-08.s08m4 .s08m4-card img {
    transition: scale 5.2s cubic-bezier(.2,.65,.25,1), filter 460ms ease;
}

#section-08.s08m4 .s08m4-card.s08m4-active img {
    scale: 1.035;
}

#section-08.s08m4 .s08m4-progress {
    width: min(360px, calc(100% - 56px));
    height: 3px;
    margin: 24px auto 0;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(11, 107, 88, .13);
    opacity: 0;
    translate: 0 8px;
    transition: opacity 500ms ease 300ms, translate 500ms ease 300ms;
}

#section-08.s08m4.is-s08m4-visible .s08m4-progress {
    opacity: 1;
    translate: 0 0;
}

#section-08.s08m4 .s08m4-progress__bar {
    width: 100%;
    height: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    border-radius: inherit;
    background: linear-gradient(90deg, #e5ad00, #ffc515, #0b6b58);
}

#section-08.s08m4 .s08m4-progress.is-running .s08m4-progress__bar {
    animation: s08m4Progress var(--s08m4-duration, 5200ms) linear 1 both;
}

#section-08.s08m4 .s08m4-signal {
    position: absolute;
    z-index: 6;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffc515;
    box-shadow: 0 0 0 5px rgba(255, 197, 21, .16), 0 0 22px rgba(255, 197, 21, .48);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

#section-08.s08m4 .s08m4-card.s08m4-active .s08m4-signal {
    opacity: 1;
    animation: s08m4Signal 2.6s ease-in-out infinite;
}

@media (hover:hover) and (pointer:fine) {
    #section-08.s08m4 .s08m4-card:hover {
        opacity: 1;
        filter: saturate(1.02);
    }
}

@keyframes s08m4Sweep {
    0% { opacity: 0; translate: -130% 0; }
    20% { opacity: .72; }
    100% { opacity: 0; translate: 135% 0; }
}

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

@keyframes s08m4Signal {
    0%,100% { scale: .9; box-shadow: 0 0 0 4px rgba(255,197,21,.12), 0 0 14px rgba(255,197,21,.34); }
    50% { scale: 1.08; box-shadow: 0 0 0 8px rgba(255,197,21,.05), 0 0 24px rgba(255,197,21,.48); }
}

@media (max-width: 760px) {
    #section-08.s08m4 .s08m4-card { scale: .99; opacity: .94; filter: none; }
    #section-08.s08m4 .s08m4-card.s08m4-active { scale: 1; translate: 0; box-shadow: none; }
    #section-08.s08m4 .s08m4-card.s08m4-active img { scale: 1.015; }
    #section-08.s08m4 .s08m4-signal { display: none; }
    #section-08.s08m4 .s08m4-ambient { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    #section-08.s08m4 *,
    #section-08.s08m4 *::before,
    #section-08.s08m4 *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    #section-08.s08m4 .s08m4-heading,
    #section-08.s08m4 .s08m4-copy,
    #section-08.s08m4 .s08m4-progress {
        opacity: 1 !important;
        translate: 0 !important;
        filter: none !important;
    }
    #section-08.s08m4 .s08m4-card,
    #section-08.s08m4 .s08m4-card.s08m4-active,
    #section-08.s08m4 .s08m4-card img,
    #section-08.s08m4 .s08m4-card.s08m4-active img {
        opacity: 1 !important;
        scale: 1 !important;
        translate: 0 !important;
        filter: none !important;
    }
    #section-08.s08m4 .s08m4-progress__bar { transform: scaleX(1) !important; }
}