/* POMOSDA — Section 05 Visual + Motion R4 FIX
   Scoped enhancement only. The existing Section 05 base stylesheet remains authoritative. */

#section-05.pomosda-timeline-section--motion-r3 {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 24%, rgba(255, 193, 7, .055), transparent 24%),
        radial-gradient(circle at 91% 78%, rgba(0, 91, 76, .055), transparent 26%),
        #fff;
}

#section-05 .pomosda-timeline-section__header {
    position: relative;
    z-index: 2;
}

#section-05 .pomosda-timeline-section__eyebrow {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 12px;
    margin: 0 auto 13px;
    pointer-events: none;
}

#section-05 .pomosda-timeline-section__eyebrow > span {
    display: block;
    width: 66px;
    height: 4px;
    border-radius: 999px;
    background: #ffc400;
    transform-origin: left center;
}

#section-05 .pomosda-timeline-section__visual {
    position: relative;
    width: min(100%, calc(var(--section05-image-width, 1280px) + 36px));
    margin-inline: auto;
    padding: 18px;
    border: 1px solid rgba(0, 77, 64, .10);
    border-radius: max(24px, calc(var(--section05-frame-radius, 0px) + 18px));
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 24px 70px rgba(13, 65, 55, .075);
    isolation: isolate;
}

#section-05 .pomosda-timeline-section__figure {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: max(14px, var(--section05-frame-radius, 0px));
    background: #fff;
}

#section-05 .pomosda-timeline-section__figure picture,
#section-05 .pomosda-timeline-section__figure img {
    width: 100%;
}

#section-05 .pomosda-timeline-section__figure img {
    will-change: transform, filter, clip-path, opacity;
    transform-origin: 50% 50%;
}

#section-05 .pomosda-timeline-section__ambient {
    position: absolute;
    z-index: 0;
    display: block;
    width: 170px;
    aspect-ratio: 1;
    border-radius: 999px;
    filter: blur(2px);
    pointer-events: none;
}

#section-05 .pomosda-timeline-section__ambient--left {
    left: -82px;
    bottom: -91px;
    border: 1px solid rgba(0, 91, 76, .13);
}

#section-05 .pomosda-timeline-section__ambient--right {
    top: -76px;
    right: -62px;
    background: radial-gradient(circle, rgba(255, 196, 0, .10), rgba(255, 196, 0, 0) 67%);
}

#section-05 .pomosda-timeline-section__motion-layer {
    --section05-line-y: 49.25%;
    position: absolute;
    z-index: 4;
    inset: 18px;
    overflow: hidden;
    border-radius: max(14px, var(--section05-frame-radius, 0px));
    pointer-events: none;
}

#section-05 .pomosda-timeline-section__progress-track,
#section-05 .pomosda-timeline-section__progress-line {
    position: absolute;
    top: var(--section05-line-y);
    left: 1.2%;
    width: 96.7%;
    height: 3px;
    transform: translateY(-50%);
    border-radius: 999px;
}

#section-05 .pomosda-timeline-section__progress-track {
    opacity: 0;
    background: rgba(255, 196, 0, .12);
}

#section-05 .pomosda-timeline-section__progress-line {
    width: 0;
    opacity: 0;
    background: linear-gradient(90deg, #ffb700, #ffd33d 52%, #ffba00);
    box-shadow: 0 0 12px rgba(255, 190, 0, .38);
}

#section-05 .pomosda-timeline-section__playhead {
    position: absolute;
    z-index: 6;
    top: var(--section05-line-y);
    left: 1.2%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    opacity: 0;
    border: 1px solid rgba(255, 180, 0, .38);
    border-radius: 999px;
    background: rgba(255, 211, 61, .13);
    box-shadow: 0 0 0 7px rgba(255, 196, 0, .06);
}

#section-05 .pomosda-timeline-section__playhead-core {
    position: absolute;
    inset: 6px;
    border-radius: inherit;
    background: #ffbd00;
    box-shadow: 0 0 14px rgba(255, 185, 0, .75);
}

#section-05 .pomosda-timeline-section__milestone {
    position: absolute;
    z-index: 5;
    top: var(--section05-line-y);
    left: var(--section05-marker-x);
    width: 26px;
    height: 26px;
    transform: translate(-50%, -50%) scale(.45);
    opacity: 0;
    border-radius: 999px;
}

#section-05 .pomosda-timeline-section__milestone::before,
#section-05 .pomosda-timeline-section__milestone::after,
#section-05 .pomosda-timeline-section__milestone-ring {
    position: absolute;
    content: "";
    border-radius: inherit;
}

#section-05 .pomosda-timeline-section__milestone::before {
    inset: 8px;
    background: #ffc400;
    box-shadow: 0 0 14px rgba(255, 190, 0, .62);
}

#section-05 .pomosda-timeline-section__milestone::after {
    inset: 2px;
    border: 1px solid rgba(255, 185, 0, .44);
}

#section-05 .pomosda-timeline-section__milestone-ring {
    inset: -8px;
    border: 1px solid rgba(255, 190, 0, .24);
    opacity: 0;
}

#section-05.is-section05-ready [data-section05-reveal="header"] h2,
#section-05.is-section05-ready [data-section05-reveal="header"] p,
#section-05.is-section05-ready .pomosda-timeline-section__eyebrow > span,
#section-05.is-section05-ready [data-section05-reveal="timeline"] {
    transition-property: opacity, transform, clip-path, filter;
    transition-duration: .8s;
    transition-timing-function: cubic-bezier(.2,.75,.2,1);
}

#section-05.is-section05-ready:not(.is-section05-visible) [data-section05-reveal="header"] h2 {
    opacity: 0;
    transform: translateY(26px);
}

#section-05.is-section05-ready:not(.is-section05-visible) [data-section05-reveal="header"] p {
    opacity: 0;
    transform: translateY(18px);
}

#section-05.is-section05-ready:not(.is-section05-visible) .pomosda-timeline-section__eyebrow > span {
    transform: scaleX(0);
}

#section-05.is-section05-ready:not(.is-section05-visible) [data-section05-reveal="timeline"] {
    opacity: 0;
    transform: translateY(30px) scale(.985);
}

#section-05.is-section05-visible .pomosda-timeline-section__eyebrow > span {
    transition-delay: .05s;
}

#section-05.is-section05-visible [data-section05-reveal="header"] h2 {
    transition-delay: .12s;
}

#section-05.is-section05-visible [data-section05-reveal="header"] p {
    transition-delay: .24s;
}

#section-05.is-section05-visible [data-section05-reveal="timeline"] {
    transition-delay: .38s;
}

#section-05.is-section05-ready:not(.is-section05-playing):not(.is-section05-complete) .pomosda-timeline-section__figure img {
    clip-path: inset(0 100% 0 0);
    opacity: .92;
    filter: saturate(.88);
}

#section-05.is-section05-playing .pomosda-timeline-section__figure img {
    animation: section05-image-reveal 1.85s cubic-bezier(.18,.72,.22,1) .02s both;
}

#section-05.is-section05-playing .pomosda-timeline-section__progress-track {
    animation: section05-track-in .25s ease-out .08s both;
}

#section-05.is-section05-playing .pomosda-timeline-section__progress-line {
    animation:
        section05-progress 1.72s cubic-bezier(.17,.74,.18,1) .16s both,
        section05-progress-fade .55s ease 2.15s forwards;
}

#section-05.is-section05-playing .pomosda-timeline-section__playhead {
    animation:
        section05-playhead 1.72s cubic-bezier(.17,.74,.18,1) .16s both,
        section05-playhead-out .42s ease 2.08s forwards;
}

#section-05 .pomosda-timeline-section__milestone.is-active {
    animation: section05-marker-pop .58s cubic-bezier(.2,1.4,.35,1) both;
}

#section-05 .pomosda-timeline-section__milestone.is-active .pomosda-timeline-section__milestone-ring {
    animation: section05-marker-ring .72s ease-out .08s both;
}

#section-05.is-section05-complete .pomosda-timeline-section__figure img {
    clip-path: inset(0 0 0 0) !important;
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1) !important;
}

#section-05.is-section05-complete .pomosda-timeline-section__visual {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

@media (hover: hover) and (pointer: fine) {
    #section-05.is-section05-complete .pomosda-timeline-section__visual:hover {
        transform: translateY(-4px);
        border-color: rgba(0, 77, 64, .18);
        box-shadow: 0 30px 82px rgba(13, 65, 55, .11);
    }

    #section-05.is-section05-complete .pomosda-timeline-section__visual:hover .pomosda-timeline-section__figure img {
        transform: scale(1.006);
        transition: transform .7s cubic-bezier(.2,.75,.2,1);
    }
}

@keyframes section05-image-reveal {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: .92;
        filter: saturate(.88) contrast(.98);
        transform: scale(1.012);
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        filter: saturate(1) contrast(1);
        transform: scale(1);
    }
}

@keyframes section05-track-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes section05-progress {
    0% {
        width: 0;
        opacity: 1;
    }
    100% {
        width: 96.7%;
        opacity: 1;
    }
}

@keyframes section05-progress-fade {
    to { opacity: 0; }
}

@keyframes section05-playhead {
    0% {
        left: 1.2%;
        opacity: 0;
        transform: translate(-50%, -50%) scale(.6);
    }
    7% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        left: 97.9%;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes section05-playhead-out {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.45);
    }
}

@keyframes section05-marker-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.38);
    }
    62% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: .95;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes section05-marker-ring {
    0% {
        opacity: .7;
        transform: scale(.45);
    }
    100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

@media (max-width: 760px) {
    #section-05 .pomosda-timeline-section__visual {
        width: 100%;
        padding: 10px;
        border-radius: 18px;
        box-shadow: 0 16px 44px rgba(13, 65, 55, .07);
    }

    #section-05 .pomosda-timeline-section__motion-layer {
        display: none;
    }

    #section-05 .pomosda-timeline-section__ambient {
        display: none;
    }

    #section-05.is-section05-ready:not(.is-section05-playing):not(.is-section05-complete) .pomosda-timeline-section__figure img {
        clip-path: none;
        opacity: 1;
        filter: none;
    }

    #section-05.is-section05-playing .pomosda-timeline-section__figure img {
        animation: section05-mobile-in .72s cubic-bezier(.2,.75,.2,1) both;
    }

    @keyframes section05-mobile-in {
        from {
            opacity: 0;
            transform: translateY(16px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    #section-05 *,
    #section-05 *::before,
    #section-05 *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    #section-05 .pomosda-timeline-section__figure img {
        clip-path: none !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    #section-05 .pomosda-timeline-section__motion-layer {
        display: none !important;
    }
}