/* =========================================================
   POMOSDA — SECTION 13 + 14 FINAL R1
   Combined final experience:
   Gallery + Scholarship + Closing CTA
   ========================================================= */

/* ---------------------------------------------------------
   SECTION 13 — gallery / scholarship stage
   --------------------------------------------------------- */

.s1314-r1-section13 {
    --s1314-green: #075f51;
    --s1314-green-dark: #054d42;
    --s1314-gold: #f3c623;
    --s1314-cream: #f8f4eb;
    --s1314-ink: #173f36;
    --s1314-muted: #69746f;
    --s1314-ease: cubic-bezier(.22,1,.36,1);

    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    padding-bottom: clamp(92px, 9vw, 132px) !important;
    background:
        radial-gradient(circle at 8% 18%, rgba(243,198,35,.09), transparent 18%),
        radial-gradient(circle at 92% 72%, rgba(7,95,81,.08), transparent 19%),
        linear-gradient(180deg, #fbf8f0 0%, #f7f2e8 100%) !important;
}

/* ambient ring */
.s1314-r1-section13::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: -100px;
    top: 32%;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(7,95,81,.08);
    border-radius: 50%;
    pointer-events: none;
}

.s1314-r1-section13::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 3%;
    top: 14%;
    width: 62px;
    height: 62px;
    background:
        radial-gradient(circle, rgba(7,95,81,.20) 0 2px, transparent 2.5px)
        0 0 / 12px 12px;
    opacity: .35;
    pointer-events: none;
}

/* title */
.s1314-r1-section13 .s1314-gallery-title {
    position: relative;
    z-index: 2;
    width: min(1080px, calc(100% - 36px));
    margin: 0 auto 34px !important;
    color: var(--s1314-green) !important;
    text-align: center !important;
    text-wrap: balance;
}

.s1314-r1-section13 .s1314-gallery-title::before {
    content: "KEHIDUPAN DI POMOSDA";
    display: block;
    margin-bottom: 12px;
    color: #7c8782;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .17em;
}

/* ---------------------------------------------------------
   FULL-WIDTH GALLERY
   --------------------------------------------------------- */

.s1314-r1-section13 .s1314-gallery {
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    overflow: hidden !important;
}

.s1314-r1-section13 .s1314-gallery::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(7,95,81,.05),
        inset 0 26px 40px rgba(255,255,255,.06),
        inset 0 -20px 34px rgba(7,95,81,.04);
}

.s1314-r1-section13 .s1314-gallery img {
    display: block;
    transition:
        transform 700ms var(--s1314-ease),
        filter 500ms ease,
        opacity 500ms ease;
}

/* visual rhythm for 10-photo grid */
@media (min-width: 821px) {
    .s1314-r1-section13 .s1314-gallery img:nth-of-type(3n+1) {
        transform-origin: 50% 60%;
    }

    .s1314-r1-section13 .s1314-gallery img:nth-of-type(3n+2) {
        transform-origin: 50% 40%;
    }
}

/* ---------------------------------------------------------
   SCHOLARSHIP CARDS
   --------------------------------------------------------- */

.s1314-r1-section13 .s1314-scholarship-wrap {
    position: relative;
    z-index: 3;
    width: min(1180px, calc(100% - 40px));
    margin: 46px auto 0;
}

.s1314-r1-section13 .s1314-scholarship-wrap::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -18px -20px;
    border: 1px solid rgba(7,95,81,.07);
    border-radius: 34px;
    background: rgba(255,255,255,.28);
}

.s1314-r1-section13 .s1314-scholarship-card,
.s1314-r1-section13 .s1314-benefit-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(7,95,81,.08) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 8% 10%, rgba(7,95,81,.05), transparent 20%),
        rgba(255,255,255,.92) !important;
    box-shadow:
        0 22px 52px rgba(30,54,47,.09),
        inset 0 1px 0 rgba(255,255,255,.88) !important;
}

/* gold top accent for the left card */
.s1314-r1-section13 .s1314-scholarship-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    width: 74px;
    height: 4px;
    border-radius: 0 0 99px 99px;
    background: var(--s1314-gold);
}

/* benefit card visual rail */
.s1314-r1-section13 .s1314-benefit-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 99px 99px 0;
    background:
        linear-gradient(
            180deg,
            var(--s1314-green),
            rgba(7,95,81,.10)
        );
}

/* ---------------------------------------------------------
   SECTION 14 — integrated final CTA
   --------------------------------------------------------- */

.s1314-r1-section14 {
    --s1314-green: #075f51;
    --s1314-green-dark: #054d42;
    --s1314-gold: #f3c623;
    --s1314-ease: cubic-bezier(.22,1,.36,1);

    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;

    margin-top: 0 !important;
    padding:
        clamp(136px, 11vw, 180px)
        24px
        clamp(118px, 10vw, 150px) !important;

    background:
        radial-gradient(circle at 16% 72%, rgba(243,198,35,.08), transparent 18%),
        radial-gradient(circle at 84% 20%, rgba(255,255,255,.05), transparent 19%),
        linear-gradient(145deg, #075f51 0%, #064f44 62%, #043f37 100%) !important;
    color: #fff;
}

/* wave bridges section 13 directly into section 14 */
.s1314-r1-wave {
    position: absolute;
    z-index: 4;
    top: -2px;
    left: 0;
    width: 100%;
    height: clamp(86px, 8vw, 124px);
    line-height: 0;
    pointer-events: none;
}

.s1314-r1-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

.s1314-r1-wave path:first-child {
    fill: #f7f2e8;
}

.s1314-r1-wave path:last-child {
    fill: none;
    stroke: rgba(243,198,35,.72);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

/* CTA inner width */
.s1314-r1-section14 .s1314-closing-inner {
    position: relative;
    z-index: 5;
    width: min(1060px, 100%);
    margin-inline: auto;
    text-align: center;
}

/* final eyebrow */
.s1314-r1-section14 .s1314-closing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: rgba(255,255,255,.62);
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
}

.s1314-r1-section14 .s1314-closing-eyebrow::before,
.s1314-r1-section14 .s1314-closing-eyebrow::after {
    content: "";
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(243,198,35,.66));
}

.s1314-r1-section14 .s1314-closing-eyebrow::after {
    transform: scaleX(-1);
}

/* title */
.s1314-r1-section14 .s1314-closing-title {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto !important;
    color: #fff !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: clamp(40px, 5.2vw, 72px) !important;
    font-weight: 800 !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
    text-align: center !important;
    text-wrap: balance;
}

.s1314-r1-section14 .s1314-closing-copy {
    max-width: 760px;
    margin: 22px auto 0 !important;
    color: rgba(255,255,255,.78) !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: clamp(17px, 1.8vw, 23px) !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

.s1314-r1-section14 .s1314-closing-cta {
    position: relative;
    z-index: 4;
    margin-top: 30px !important;
    box-shadow:
        0 18px 34px rgba(0,0,0,.16),
        0 0 0 1px rgba(255,255,255,.05) !important;
}

/* ---------------------------------------------------------
   FINAL VISUAL ORBITS
   --------------------------------------------------------- */

.s1314-r1-section14 .s1314-orbit {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
}

.s1314-r1-section14 .s1314-orbit--a {
    width: 300px;
    height: 300px;
    left: -92px;
    top: 38%;
    border: 1px solid rgba(255,255,255,.08);
}

.s1314-r1-section14 .s1314-orbit--a::before {
    content: "";
    position: absolute;
    inset: 28px;
    border: 1px dashed rgba(243,198,35,.12);
    border-radius: inherit;
}

.s1314-r1-section14 .s1314-orbit--b {
    width: 220px;
    height: 220px;
    right: -40px;
    top: 18%;
    border: 1px solid rgba(243,198,35,.14);
}

.s1314-r1-section14 .s1314-orbit--b::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 28px;
    top: 18px;
    border-radius: 50%;
    background: var(--s1314-gold);
    box-shadow: 0 0 0 7px rgba(243,198,35,.08);
}

.s1314-r1-section14 .s1314-dots {
    position: absolute;
    z-index: 1;
    right: 8%;
    bottom: 14%;
    width: 68px;
    height: 58px;
    background:
        radial-gradient(circle, rgba(255,255,255,.30) 0 2px, transparent 2.5px)
        0 0 / 12px 12px;
    opacity: .28;
    pointer-events: none;
}

/* ---------------------------------------------------------
   MOTION — SECTION 13
   --------------------------------------------------------- */

.s1314-r1-section13.s1314-ready:not(.is-s1314-visible)
.s1314-gallery-title,
.s1314-r1-section13.s1314-ready:not(.is-s1314-visible)
.s1314-scholarship-wrap {
    opacity: 0;
    translate: 0 22px;
}

.s1314-r1-section13.s1314-ready .s1314-gallery-title,
.s1314-r1-section13.s1314-ready .s1314-scholarship-wrap {
    transition:
        opacity 760ms var(--s1314-ease),
        translate 760ms var(--s1314-ease);
}

.s1314-r1-section13.is-s1314-visible .s1314-gallery-title,
.s1314-r1-section13.is-s1314-visible .s1314-scholarship-wrap {
    opacity: 1;
    translate: 0 0;
}

.s1314-r1-section13.s1314-ready:not(.is-s1314-visible)
.s1314-gallery img {
    opacity: 0;
    scale: .97;
    filter: saturate(.72);
}

.s1314-r1-section13.s1314-ready .s1314-gallery img {
    transition:
        opacity 620ms var(--s1314-ease),
        scale 720ms var(--s1314-ease),
        filter 620ms ease;
}

.s1314-r1-section13.is-s1314-visible .s1314-gallery img {
    opacity: 1;
    scale: 1;
    filter: none;
}

/* stagger the first 10 photos */
.s1314-r1-section13.is-s1314-visible .s1314-gallery img:nth-of-type(1){transition-delay:80ms}
.s1314-r1-section13.is-s1314-visible .s1314-gallery img:nth-of-type(2){transition-delay:130ms}
.s1314-r1-section13.is-s1314-visible .s1314-gallery img:nth-of-type(3){transition-delay:180ms}
.s1314-r1-section13.is-s1314-visible .s1314-gallery img:nth-of-type(4){transition-delay:230ms}
.s1314-r1-section13.is-s1314-visible .s1314-gallery img:nth-of-type(5){transition-delay:280ms}
.s1314-r1-section13.is-s1314-visible .s1314-gallery img:nth-of-type(6){transition-delay:330ms}
.s1314-r1-section13.is-s1314-visible .s1314-gallery img:nth-of-type(7){transition-delay:380ms}
.s1314-r1-section13.is-s1314-visible .s1314-gallery img:nth-of-type(8){transition-delay:430ms}
.s1314-r1-section13.is-s1314-visible .s1314-gallery img:nth-of-type(9){transition-delay:480ms}
.s1314-r1-section13.is-s1314-visible .s1314-gallery img:nth-of-type(10){transition-delay:530ms}

.s1314-r1-section13 .s1314-scholarship-wrap {
    transition-delay: 430ms;
}

/* ---------------------------------------------------------
   MOTION — SECTION 14
   --------------------------------------------------------- */

.s1314-r1-section14.s1314-ready:not(.is-s1314-visible)
.s1314-closing-eyebrow,
.s1314-r1-section14.s1314-ready:not(.is-s1314-visible)
.s1314-closing-title,
.s1314-r1-section14.s1314-ready:not(.is-s1314-visible)
.s1314-closing-copy,
.s1314-r1-section14.s1314-ready:not(.is-s1314-visible)
.s1314-closing-cta {
    opacity: 0;
    translate: 0 24px;
}

.s1314-r1-section14.s1314-ready .s1314-closing-eyebrow,
.s1314-r1-section14.s1314-ready .s1314-closing-title,
.s1314-r1-section14.s1314-ready .s1314-closing-copy,
.s1314-r1-section14.s1314-ready .s1314-closing-cta {
    transition:
        opacity 760ms var(--s1314-ease),
        translate 760ms var(--s1314-ease),
        scale 760ms var(--s1314-ease);
}

.s1314-r1-section14.s1314-ready .s1314-closing-title { transition-delay: 90ms; }
.s1314-r1-section14.s1314-ready .s1314-closing-copy { transition-delay: 180ms; }
.s1314-r1-section14.s1314-ready .s1314-closing-cta { transition-delay: 290ms; }

.s1314-r1-section14.is-s1314-visible
.s1314-closing-eyebrow,
.s1314-r1-section14.is-s1314-visible
.s1314-closing-title,
.s1314-r1-section14.is-s1314-visible
.s1314-closing-copy,
.s1314-r1-section14.is-s1314-visible
.s1314-closing-cta {
    opacity: 1;
    translate: 0 0;
}

/* one pulse only */
.s1314-r1-section14.is-s1314-visible .s1314-closing-cta::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(243,198,35,.34);
    border-radius: inherit;
    opacity: 0;
    animation: s1314CtaPulse 1.2s ease 900ms 1 both;
    pointer-events: none;
}

@keyframes s1314CtaPulse {
    0% { opacity: 0; scale: .96; }
    35% { opacity: .62; }
    100% { opacity: 0; scale: 1.12; }
}

/* desktop ambient */
@media (min-width: 981px) and (hover:hover) and (pointer:fine) {
    .s1314-r1-section14.is-s1314-visible .s1314-orbit--a {
        animation: s1314FloatA 8s ease-in-out infinite alternate;
    }

    .s1314-r1-section14.is-s1314-visible .s1314-orbit--b {
        animation: s1314FloatB 10s ease-in-out infinite alternate;
    }

    @keyframes s1314FloatA {
        from { translate: 0 0; }
        to { translate: 10px -8px; }
    }

    @keyframes s1314FloatB {
        from { translate: 0 0; rotate: 0deg; }
        to { translate: -10px 9px; rotate: 7deg; }
    }

    .s1314-r1-section13 .s1314-gallery img:hover {
        transform: scale(1.025);
        filter: saturate(1.03);
    }
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 820px) {
    .s1314-r1-section13 {
        padding-bottom: 88px !important;
    }

    .s1314-r1-section13 .s1314-scholarship-wrap {
        width: min(100% - 24px, 680px);
        margin-top: 32px;
    }

    .s1314-r1-section14 {
        padding-top: 118px !important;
    }

    .s1314-r1-section14 .s1314-orbit--a {
        width: 220px;
        height: 220px;
        left: -120px;
    }

    .s1314-r1-section14 .s1314-orbit--b {
        width: 170px;
        height: 170px;
        right: -80px;
    }
}

@media (max-width: 560px) {
    .s1314-r1-section13::after,
    .s1314-r1-section14 .s1314-dots {
        display: none;
    }

    .s1314-r1-section14 {
        padding-inline: 16px !important;
    }

    .s1314-r1-section14 .s1314-closing-title {
        font-size: clamp(35px, 10vw, 48px) !important;
    }

    .s1314-r1-wave {
        height: 72px;
    }
}

/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .s1314-r1-section13 *,
    .s1314-r1-section13 *::before,
    .s1314-r1-section13 *::after,
    .s1314-r1-section14 *,
    .s1314-r1-section14 *::before,
    .s1314-r1-section14 *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .s1314-r1-section13 .s1314-gallery-title,
    .s1314-r1-section13 .s1314-gallery img,
    .s1314-r1-section13 .s1314-scholarship-wrap,
    .s1314-r1-section14 .s1314-closing-eyebrow,
    .s1314-r1-section14 .s1314-closing-title,
    .s1314-r1-section14 .s1314-closing-copy,
    .s1314-r1-section14 .s1314-closing-cta {
        opacity: 1 !important;
        translate: 0 !important;
        scale: 1 !important;
        filter: none !important;
    }
}
