/* POMOSDA Section 09 — Cinematic Motion R6
   Additive + scoped. Portrait R5 remains the orientation owner. */

#section-09 {
    --s09-ease: cubic-bezier(.22,.8,.28,1);
    --s09-gold: #f3ca3d;
    --s09-green: #0b6b58;
}

/* ---------- SECTION ENTRANCE ---------- */
#section-09.has-section09-motion .pomosda-alumni-section__header,
#section-09.has-section09-motion .pomosda-alumni-video-zone__header {
    opacity: 0;
    transform: translateY(24px);
}

#section-09.has-section09-motion.is-section09-visible .pomosda-alumni-section__header {
    animation: s09HeaderIn 760ms var(--s09-ease) 80ms both;
}

#section-09.has-section09-motion.is-section09-video-visible .pomosda-alumni-video-zone__header {
    animation: s09HeaderIn 760ms var(--s09-ease) 80ms both;
}

#section-09.has-section09-motion .pomosda-alumni-section__eyebrow::before,
#section-09.has-section09-motion .pomosda-alumni-section__eyebrow::after {
    transform: scaleX(0);
    transform-origin: center;
}

#section-09.has-section09-motion.is-section09-visible .pomosda-alumni-section__eyebrow::before,
#section-09.has-section09-motion.is-section09-visible .pomosda-alumni-section__eyebrow::after {
    animation: s09LineOpen 620ms var(--s09-ease) 520ms both;
}

@keyframes s09HeaderIn {
    from { opacity: 0; transform: translateY(24px); filter: blur(5px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes s09LineOpen {
    from { transform: scaleX(0); opacity: .2; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* ---------- PHOTO STORY POLISH ---------- */
#section-09 .pomosda-alumni-editorial__slide.is-section09-slide-entering {
    animation: s09StoryCardIn 620ms var(--s09-ease) both;
}

#section-09 .pomosda-alumni-editorial__slide.is-section09-slide-entering .pomosda-alumni-editorial__media {
    animation: s09MediaReveal 760ms var(--s09-ease) 70ms both;
}

#section-09 .pomosda-alumni-editorial__slide.is-section09-slide-entering .pomosda-alumni-editorial__shape {
    animation: s09ShapeWake 880ms var(--s09-ease) 120ms both;
}

#section-09 .pomosda-alumni-editorial__slide.is-section09-slide-entering .pomosda-alumni-editorial__media img,
#section-09 .pomosda-alumni-editorial__slide.is-section09-slide-entering .pomosda-alumni-editorial__initial {
    animation: s09PersonRise 760ms var(--s09-ease) 140ms both;
}

#section-09 .pomosda-alumni-editorial__slide.is-section09-slide-entering .pomosda-alumni-editorial__quote-mark {
    animation: s09QuoteMark 720ms var(--s09-ease) 240ms both;
}

#section-09 .pomosda-alumni-editorial__slide.is-section09-slide-entering blockquote {
    animation: s09CopyIn 680ms var(--s09-ease) 250ms both;
}

#section-09 .pomosda-alumni-editorial__slide.is-section09-slide-entering .pomosda-alumni-editorial__identity {
    animation: s09CopyIn 680ms var(--s09-ease) 390ms both;
}

#section-09 .pomosda-alumni-editorial__slide.is-active .pomosda-alumni-editorial__media img {
    transition: transform 700ms var(--s09-ease), filter 700ms ease;
}

@media (hover:hover) and (pointer:fine) {
    #section-09 .pomosda-alumni-editorial__slide.is-active:hover .pomosda-alumni-editorial__media img {
        transform: translateY(-4px) scale(1.018);
        filter: drop-shadow(0 28px 30px rgba(18,48,40,.22));
    }
}

@keyframes s09StoryCardIn {
    from { opacity: .62; transform: translateY(18px) scale(.987); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes s09MediaReveal {
    from { clip-path: inset(0 100% 0 0 round var(--section09-card-radius,28px)); }
    to   { clip-path: inset(0 0 0 0 round var(--section09-card-radius,28px)); }
}

@keyframes s09ShapeWake {
    from { opacity: 0; transform: translateX(-50%) scale(.76) rotate(-8deg); }
    to   { opacity: .74; transform: translateX(-50%) scale(1) rotate(0deg); }
}

@keyframes s09PersonRise {
    from { opacity: 0; transform: translateY(30px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes s09QuoteMark {
    from { opacity: 0; transform: translateY(-14px) rotate(-7deg) scale(.8); }
    to   { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes s09CopyIn {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---------- VIDEO CINEMATIC POLISH ---------- */
#section-09 .pomosda-alumni-video-zone__glow {
    animation: s09GlowDrift 8s ease-in-out infinite alternate;
}

@keyframes s09GlowDrift {
    from { transform: translateX(-53%) scale(.96); opacity: .7; }
    to   { transform: translateX(-47%) scale(1.06); opacity: 1; }
}

#section-09.has-section09-motion .pomosda-alumni-video-showcase {
    opacity: 0;
    transform: translateY(28px);
}

#section-09.has-section09-motion.is-section09-video-visible .pomosda-alumni-video-showcase {
    animation: s09ShowcaseIn 820ms var(--s09-ease) 220ms both;
}

@keyframes s09ShowcaseIn {
    from { opacity: 0; transform: translateY(28px) scale(.988); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#section-09 .pomosda-alumni-video-panel {
    position: relative;
    isolation: isolate;
    transition:
        border-color 360ms ease,
        box-shadow 360ms ease,
        background-color 360ms ease;
}

#section-09 .pomosda-alumni-video-panel::before {
    content: "";
    position: absolute;
    z-index: 8;
    top: 0;
    left: clamp(22px, 4vw, 52px);
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--s09-gold), rgba(243,202,61,.18));
    pointer-events: none;
    transition: width 760ms var(--s09-ease);
}

#section-09 .pomosda-alumni-video-panel.is-active::before {
    width: min(130px, 24%);
}

#section-09 .pomosda-alumni-video-panel.is-scene-entering {
    animation: s09SceneCard 620ms var(--s09-ease) both;
}

#section-09 .pomosda-alumni-video-panel.is-scene-entering .pomosda-alumni-video-panel__media {
    animation: s09SceneMedia 720ms var(--s09-ease) both;
}

#section-09 .pomosda-alumni-video-panel__media {
    isolation: isolate;
    transition: box-shadow 420ms ease, transform 420ms var(--s09-ease);
}

#section-09 .pomosda-alumni-video-panel__media::after {
    content: "";
    position: absolute;
    z-index: 6;
    inset: -20% auto -20% -42%;
    width: 26%;
    transform: skewX(-15deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    opacity: 0;
    pointer-events: none;
}

#section-09 .pomosda-alumni-video-panel.is-scene-entering .pomosda-alumni-video-panel__media::after {
    animation: s09LightSweep 920ms ease 350ms both;
}

#section-09 .pomosda-alumni-video-panel.is-scene-entering .pomosda-alumni-video-panel__caption h3 {
    animation: s09CaptionIn 620ms var(--s09-ease) 170ms both;
}

#section-09 .pomosda-alumni-video-panel.is-scene-entering .pomosda-alumni-video-panel__caption p {
    animation: s09CaptionIn 620ms var(--s09-ease) 280ms both;
}

#section-09 .pomosda-alumni-video-panel.is-scene-entering .pomosda-alumni-video-panel__caption span {
    animation: s09CaptionIn 620ms var(--s09-ease) 390ms both;
}

@keyframes s09SceneCard {
    from { opacity: .35; transform: translateY(16px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes s09SceneMedia {
    from { opacity: .55; filter: saturate(.65) brightness(.82); }
    to   { opacity: 1; filter: saturate(1) brightness(1); }
}

@keyframes s09LightSweep {
    0%   { left: -42%; opacity: 0; }
    12%  { opacity: 1; }
    72%  { opacity: .7; }
    100% { left: 118%; opacity: 0; }
}

@keyframes s09CaptionIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Video play = media becomes the focus, surrounding copy gently recedes. */
#section-09 .pomosda-alumni-video-zone__header,
#section-09 .pomosda-alumni-video-showcase__thumbs,
#section-09 .pomosda-alumni-section__footer,
#section-09 .pomosda-alumni-video-panel__caption {
    transition: opacity 360ms ease, transform 360ms var(--s09-ease), filter 360ms ease;
}

#section-09 .pomosda-alumni-video-showcase.is-video-playing .pomosda-alumni-video-panel.is-active {
    border-color: rgba(243,202,61,.28);
    box-shadow: 0 36px 78px rgba(0,0,0,.38), 0 0 0 1px rgba(243,202,61,.08);
}

#section-09 .pomosda-alumni-video-showcase.is-video-playing .pomosda-alumni-video-panel.is-active .pomosda-alumni-video-panel__media {
    box-shadow: inset 0 0 0 1px rgba(243,202,61,.12);
}

#section-09 .pomosda-alumni-video-zone.is-video-focus .pomosda-alumni-video-zone__header,
#section-09 .pomosda-alumni-video-zone.is-video-focus .pomosda-alumni-video-showcase__thumbs,
#section-09 .pomosda-alumni-video-zone.is-video-focus .pomosda-alumni-section__footer {
    opacity: .54;
    filter: saturate(.82);
}

#section-09 .pomosda-alumni-video-showcase.is-video-playing .pomosda-alumni-video-panel.is-active .pomosda-alumni-video-panel__caption {
    opacity: .58;
    transform: translateX(7px);
}

#section-09 .pomosda-alumni-video-showcase.is-video-playing .pomosda-alumni-video-panel.is-active:hover .pomosda-alumni-video-panel__caption,
#section-09 .pomosda-alumni-video-showcase.is-video-playing .pomosda-alumni-video-panel.is-active:focus-within .pomosda-alumni-video-panel__caption {
    opacity: .9;
    transform: translateX(0);
}

/* ---------- FILM STRIP / STORY SELECTOR ---------- */
#section-09 .pomosda-alumni-video-showcase__thumbs {
    gap: 12px;
    padding-top: 7px;
}

#section-09 .pomosda-alumni-video-thumb {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 9px;
    border-color: rgba(255,255,255,.09);
    background: rgba(4,21,17,.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition:
        opacity 220ms ease,
        transform 260ms var(--s09-ease),
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}

#section-09 .pomosda-alumni-video-thumb::before {
    content: attr(data-scene);
    position: absolute;
    z-index: 4;
    top: 5px;
    left: 5px;
    min-width: 28px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(7,32,27,.78);
    color: rgba(255,255,255,.72);
    font-family: "Poppins", sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    backdrop-filter: blur(7px);
}

#section-09 .pomosda-alumni-video-thumb::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--s09-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 420ms var(--s09-ease);
}

#section-09 .pomosda-alumni-video-thumb.is-active {
    transform: translateY(-3px);
    border-color: rgba(243,202,61,.38);
    background: rgba(255,255,255,.085);
    box-shadow: 0 14px 30px rgba(0,0,0,.16);
}

#section-09 .pomosda-alumni-video-thumb.is-active::after {
    transform: scaleX(1);
}

@media (hover:hover) and (pointer:fine) {
    #section-09 .pomosda-alumni-video-thumb:hover {
        transform: translateY(-3px);
    }
}

/* ---------- CTA MICRO INTERACTION ---------- */
#section-09 .pomosda-alumni-section__cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

#section-09 .pomosda-alumni-section__cta::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -40%;
    bottom: -40%;
    left: -45%;
    width: 32%;
    transform: skewX(-18deg);
    background: rgba(255,255,255,.38);
    opacity: 0;
}

@media (hover:hover) and (pointer:fine) {
    #section-09 .pomosda-alumni-section__cta:hover::after {
        animation: s09CtaSweep 680ms ease both;
    }
}

@keyframes s09CtaSweep {
    0% { left: -45%; opacity: 0; }
    18% { opacity: .7; }
    100% { left: 120%; opacity: 0; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 820px) {
    #section-09 .pomosda-alumni-video-zone.is-video-focus .pomosda-alumni-video-zone__header,
    #section-09 .pomosda-alumni-video-zone.is-video-focus .pomosda-alumni-video-showcase__thumbs,
    #section-09 .pomosda-alumni-video-zone.is-video-focus .pomosda-alumni-section__footer,
    #section-09 .pomosda-alumni-video-showcase.is-video-playing .pomosda-alumni-video-panel.is-active .pomosda-alumni-video-panel__caption {
        opacity: 1;
        filter: none;
        transform: none;
    }

    #section-09 .pomosda-alumni-video-showcase__thumbs {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding: 8px 2px 10px;
    }

    #section-09 .pomosda-alumni-video-showcase__thumbs::-webkit-scrollbar { display: none; }

    #section-09 .pomosda-alumni-video-thumb {
        flex: 0 0 min(270px, 78vw);
        scroll-snap-align: center;
    }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    #section-09.has-section09-motion .pomosda-alumni-section__header,
    #section-09.has-section09-motion .pomosda-alumni-video-zone__header,
    #section-09.has-section09-motion .pomosda-alumni-video-showcase {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        filter: none !important;
    }

    #section-09 *,
    #section-09 *::before,
    #section-09 *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    #section-09 .pomosda-alumni-video-zone__glow {
        animation: none !important;
    }
}

/* =========================================================
   POMOSDA — SECTION 09 PHOTO STORY ROUNDING R6.1
   Membuat media alumni tetap rounded sebelum, selama,
   dan sesudah transition.
   ========================================================= */

#section-09 .pomosda-alumni-editorial__media {
    border-radius:
        var(--section09-card-radius, 28px)
        18px
        18px
        var(--section09-card-radius, 28px);
    overflow: hidden;
}

/* Ketika layout foto berada di kanan, radius ikut mirror. */
#section-09
.pomosda-alumni-editorial__slide.is-reverse
.pomosda-alumni-editorial__media {
    border-radius:
        18px
        var(--section09-card-radius, 28px)
        var(--section09-card-radius, 28px)
        18px;
}

/* Samakan bentuk saat reveal dengan bentuk final. */
@keyframes s09MediaReveal {
    from {
        clip-path: inset(
            0 100% 0 0
            round
            var(--section09-card-radius, 28px)
            18px
            18px
            var(--section09-card-radius, 28px)
        );
    }

    to {
        clip-path: inset(
            0 0 0 0
            round
            var(--section09-card-radius, 28px)
            18px
            18px
            var(--section09-card-radius, 28px)
        );
    }
}

/* Reverse slide juga direveal dari arah yang sesuai. */
#section-09
.pomosda-alumni-editorial__slide.is-reverse.is-section09-slide-entering
.pomosda-alumni-editorial__media {
    animation-name: s09MediaRevealReverse;
}

@keyframes s09MediaRevealReverse {
    from {
        clip-path: inset(
            0 0 0 100%
            round
            18px
            var(--section09-card-radius, 28px)
            var(--section09-card-radius, 28px)
            18px
        );
    }

    to {
        clip-path: inset(
            0 0 0 0
            round
            18px
            var(--section09-card-radius, 28px)
            var(--section09-card-radius, 28px)
            18px
        );
    }
}

@media (max-width: 760px) {
    #section-09 .pomosda-alumni-editorial__media,
    #section-09
    .pomosda-alumni-editorial__slide.is-reverse
    .pomosda-alumni-editorial__media {
        border-radius: 22px;
    }
}