/* =========================================================
   GEUGF — PROGRAMS PAGE
   CLEAN STANDALONE CSS
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.programs-page {
    position: relative;
    z-index: 3;

    min-height: 100vh;

    overflow: visible !important;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(115,170,130,.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 25%,
            rgba(80,150,180,.12),
            transparent 30%
        ),
        #f5faf6;

    color: #073f4d;
}


/* =========================================================
   HERO
   ========================================================= */

.program-hero {

    min-height: 570px;

    padding: 70px 8% 50px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, .85fr);

    align-items: center;

    gap: 40px;

    position: relative;

    overflow: visible;
}


.program-hero-content {

    max-width: 680px;

    position: relative;

    z-index: 10;
}


.program-eyebrow {

    display: flex;

    align-items: center;

    gap: 14px;

    color: #d59d17;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 5px;
}


.program-eyebrow span {

    width: 42px;

    height: 1px;

    background: #d59d17;
}


.program-hero h1 {

    margin: 25px 0 22px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(52px, 6vw, 86px);

    line-height: .96;

    color: #073f4d;
}


.program-hero h1 em {

    color: #5d8d6a;

    font-style: normal;
}


.program-hero p {

    max-width: 650px;

    margin: 0;

    color: #527687;

    font-size: 18px;

    line-height: 1.75;
}


.story-hint {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 28px;

    padding: 12px 18px;

    border-radius: 40px;

    background: rgba(255,255,255,.85);

    color: #54766c;

    font-size: 14px;

    box-shadow:
        0 12px 35px
        rgba(7,63,77,.08);
}


.hint-dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #dca21d;

    animation:
        hintPulse 1.8s infinite;
}


@keyframes hintPulse {

    50% {

        transform: scale(1.7);

        opacity: .4;

    }

}


/* =========================================================
   EVA HERO
   ========================================================= */

.program-eva {

    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: visible;
}


.eva-glow {

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background:
        rgba(157,226,190,.35);

    filter: blur(25px);
}


.eva-character {

    position: relative;

    width: 250px;

    height: 350px;

    z-index: 5;

    animation:
        evaFloat 4s ease-in-out infinite;
}


@keyframes evaFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-15px);
    }

}


/* EVA FACE */

.eva-face {

    position: absolute;

    width: 150px;

    height: 165px;

    left: 50px;

    top: 25px;

    z-index: 4;

    border-radius:
        48% 48% 45% 45%;

    background: #ffd8bd;

    box-shadow:
        inset -8px -8px 0
        rgba(0,0,0,.03);
}


.eva-hair {

    position: absolute;

    width: 175px;

    height: 100px;

    left: 38px;

    top: 8px;

    z-index: 5;

    border-radius:
        50% 50% 35% 35%;

    background: #36231d;
}


.eva-eye {

    position: absolute;

    width: 12px;

    height: 17px;

    top: 72px;

    border-radius: 50%;

    background: #173b43;
}


.eva-eye.left {
    left: 42px;
}


.eva-eye.right {
    right: 42px;
}


.eva-blush {

    position: absolute;

    width: 22px;

    height: 10px;

    top: 100px;

    border-radius: 50%;

    background:
        rgba(239,125,120,.35);
}


.eva-blush.left {
    left: 25px;
}


.eva-blush.right {
    right: 25px;
}


.eva-mouth {

    position: absolute;

    width: 23px;

    height: 11px;

    left: 63px;

    top: 110px;

    border-bottom:
        3px solid #9a4d52;

    border-radius: 50%;
}


/* EVA BODY */

.eva-body {

    position: absolute;

    width: 180px;

    height: 175px;

    left: 35px;

    top: 175px;

    z-index: 2;

    border-radius:
        50px 50px 25px 25px;

    background: #74a983;
}


.eva-badge {

    position: absolute;

    width: 48px;

    height: 48px;

    left: 66px;

    top: 35px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e4aa2a;

    color: white;

    font-size: 22px;
}


.eva-arm {

    position: absolute;

    width: 65px;

    height: 25px;

    top: 205px;

    z-index: 1;

    border-radius: 30px;

    background: #ffd8bd;
}


.left-arm {

    left: 0;

    transform:
        rotate(25deg);
}


.right-arm {

    right: 0;

    transform:
        rotate(-25deg);
}


.eva-name {

    position: absolute;

    bottom: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;

    text-align: center;
}


.eva-name strong {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 27px;

    color: #073f4d;
}


.eva-name span {

    color: #73908a;

    font-size: 12px;
}


/* =========================================================
   INTRO
   ========================================================= */

.program-intro {

    max-width: 850px;

    margin: auto;

    padding:
        50px 20px 45px;

    text-align: center;
}


.section-label {

    color: #d99b16;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;
}


.program-intro h2 {

    margin: 18px 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(40px, 5vw, 64px);

    line-height: 1;

    color: #073f4d;
}


.program-intro h2 span {

    color: #5d8d6a;
}


.program-intro p {

    color: #5d7b86;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   PROGRAM CARDS
   ========================================================= */

.program-cards-wrapper {

    width: min(1200px, 92%);

    margin: auto;

    padding:
        20px 0 65px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 24px;
}


.main-program-card {

    position: relative;

    min-height: 390px;

    padding: 38px 32px;

    overflow: hidden;

    border-radius: 30px;

    background:
        rgba(255,255,255,.92);

    border:
        1px solid
        rgba(255,255,255,.95);

    box-shadow:
        0 20px 55px
        rgba(7,63,77,.09);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.main-program-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 30px 70px
        rgba(7,63,77,.15);
}


.main-program-card::before {

    content: "";

    position: absolute;

    width: 190px;

    height: 190px;

    right: -80px;

    top: -80px;

    border-radius: 50%;

    background:
        rgba(100,180,130,.12);
}


.skills-card::before {

    background:
        rgba(220,170,50,.12);
}


.environment-card::before {

    background:
        rgba(80,170,180,.12);
}


.card-number {

    position: absolute;

    top: 20px;

    right: 25px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 46px;

    color:
        rgba(7,63,77,.08);
}


.program-icon {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 35px;

    border-radius: 22px;

    background: #edf7f0;

    font-size: 32px;
}


.skills-card .program-icon {

    background: #fff6dc;
}


.environment-card .program-icon {

    background: #e7f5f4;
}


.card-label {

    color: #d49a19;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;
}


.card-content h3 {

    margin: 12px 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 38px;

    line-height: 1.05;

    color: #073f4d;
}


.card-content p {

    min-height: 78px;

    color: #66808b;

    line-height: 1.65;

    font-size: 15px;
}


.explore-program {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 20px;

    padding: 9px 0;

    border: none;

    background: transparent;

    color: #d49a19;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;
}


.explore-program span {

    font-size: 22px;

    transition:
        transform .25s ease;
}


.explore-program:hover span {

    transform:
        translateX(7px);
}


/* =========================================================
   BOTTOM MESSAGE
   ========================================================= */

.program-bottom-message {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    padding:
        10px 20px 70px;
}


.program-bottom-message p {

    margin: 0;

    text-align: center;

    color: #68817f;

    font-size: 17px;
}


.program-bottom-message strong {

    color: #073f4d;
}


.message-line {

    width: 60px;

    height: 1px;

    background: #d6a32a;
}


/* =========================================================
   PREVENT BACKGROUND PAGE MOVEMENT
   ========================================================= */

body.modal-open {

    overflow: hidden !important;
}


/* =========================================================
   CATEGORY OVERLAY
   ========================================================= */

.program-overlay {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    padding: 25px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    background:
        rgba(3,35,43,.84) !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 999900 !important;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


.program-overlay.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   CATEGORY MODAL
   ========================================================= */

.program-modal {

    position: relative;

    width:
        min(900px, 94vw);

    height:
        min(720px, calc(100vh - 50px));

    max-height:
        calc(100vh - 50px);

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7fbf5
        );

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.42);

    transform:
        translateY(20px)
        scale(.97);

    transition:
        transform .35s ease;
}


.program-overlay.show .program-modal {

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.modal-close,
.story-close {

    position: absolute !important;

    top: 18px !important;

    right: 18px !important;

    width: 48px !important;

    height: 48px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 !important;

    border: none !important;

    border-radius: 50% !important;

    background: #073f4d !important;

    color: white !important;

    font-size: 30px !important;

    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 999999 !important;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.25);
}


.modal-close:hover,
.story-close:hover {

    background: #d59d17 !important;

    transform:
        rotate(90deg);
}


/* =========================================================
   EVA MODAL HEADER
   ========================================================= */

.modal-eva-area {

    flex: 0 0 auto;

    min-height: 125px;

    padding:
        28px 85px 25px 32px;

    display: flex;

    align-items: center;

    gap: 20px;

    background:
        linear-gradient(
            135deg,
            #eaf7ee,
            #fffaf0
        );

    border-bottom:
        1px solid #e1ece5;
}


.mini-eva {

    width: 75px;

    height: 75px;

    flex: 0 0 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.9);

    box-shadow:
        0 15px 35px
        rgba(50,100,65,.12);
}


.mini-eva-face {

    position: relative;

    width: 54px;

    height: 54px;

    border-radius: 50%;

    background: #f3d0af;

    border: 2px solid #d3a328;
}


.mini-eye {

    position: absolute;

    top: 20px;

    width: 7px;

    height: 10px;

    border-radius: 50%;

    background: #073f4d;
}


.mini-eye.left {
    left: 14px;
}


.mini-eye.right {
    right: 14px;
}


.mini-mouth {

    position: absolute;

    left: 50%;

    bottom: 12px;

    width: 15px;

    height: 8px;

    transform:
        translateX(-50%);

    border-bottom:
        2px solid #073f4d;

    border-radius: 50%;
}


.eva-dialogue {

    flex: 1;

    min-width: 0;
}


.dialogue-label {

    display: block;

    margin-bottom: 6px;

    color: #d09b1d;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 4px;
}


.eva-dialogue h3 {

    margin: 0 0 5px;

    color: #073f4d;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 28px;
}


.eva-dialogue p {

    margin: 0;

    color: #648292;

    font-size: 14px;

    line-height: 1.55;
}


/* =========================================================
   CATEGORY CONTENT
   ========================================================= */

.modal-content {

    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto !important;

    overflow-x: hidden;

    padding:
        35px 40px 45px;

    -webkit-overflow-scrolling:
        touch;
}


.modal-content::-webkit-scrollbar {

    width: 7px;
}


.modal-content::-webkit-scrollbar-track {

    background: #edf4ed;
}


.modal-content::-webkit-scrollbar-thumb {

    background: #8aae91;

    border-radius: 20px;
}


.category-content {

    display: none;
}


.category-heading {

    margin-bottom: 25px;

    max-width: 750px;
}


.category-heading > span {

    display: block;

    margin-bottom: 10px;

    color: #d09b1d;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 4px;
}


.category-heading h2 {

    margin: 0 0 12px;

    color: #073f4d;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(35px, 5vw, 50px);

    line-height: 1.05;
}


.category-heading p {

    margin: 0;

    color: #638292;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   SUBCATEGORIES
   ========================================================= */

.subcategory-list {

    display: grid;

    gap: 13px;
}


.subcategory {

    width: 100%;

    min-height: 82px;

    padding:
        15px 18px;

    display: flex;

    align-items: center;

    gap: 16px;

    text-align: left;

    border: none;

    border-radius: 18px;

    background: white;

    cursor: pointer;

    box-shadow:
        0 10px 30px
        rgba(20,70,70,.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.subcategory:hover {

    transform:
        translateX(5px);

    box-shadow:
        0 16px 38px
        rgba(20,70,70,.13);
}


.sub-icon {

    width: 54px;

    height: 54px;

    flex: 0 0 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 17px;

    background: #edf7ef;

    font-size: 26px;
}


.sub-text {

    flex: 1;

    min-width: 0;
}


.sub-text strong {

    display: block;

    margin-bottom: 3px;

    color: #073f4d;

    font-size: 17px;
}


.sub-text small {

    display: block;

    color: #78919a;

    font-size: 12px;

    line-height: 1.5;
}


.sub-arrow {

    flex: 0 0 auto;

    color: #d99d08;

    font-size: 23px;

    transition:
        transform .25s ease;
}


.subcategory:hover .sub-arrow {

    transform:
        translateX(5px);
}


/* =========================================================
   STORY OVERLAY
   IMPORTANT:
   THIS IS ABOVE CATEGORY MODAL
   ========================================================= */

.story-overlay {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    padding: 20px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    background:
        rgba(4,36,45,.92) !important;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 99999999 !important;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


.story-overlay.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   STORY SCREEN
   ========================================================= */

.story-screen {

    position: relative;

    width:
        min(1100px, 94vw);

    height:
        min(720px, calc(100vh - 40px));

    max-height:
        calc(100vh - 40px);

    min-height: 0;

    display: grid;

    grid-template-columns:
        .95fr 1.05fr;

    overflow: hidden;

    border-radius: 32px;

    background: white;

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.45);

    transform:
        scale(.95)
        translateY(20px);

    transition:
        transform .35s ease;
}


.story-overlay.show .story-screen {

    transform:
        scale(1)
        translateY(0);
}


/* =========================================================
   FILM STRIPS
   ONLY TOP + BOTTOM
   ========================================================= */

.story-screen > .film-top,
.story-screen > .film-bottom {

    position: absolute !important;

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

    height: 18px !important;

    padding:
        0 30px !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-around !important;

    background:
        #073f4d !important;

    z-index: 1000 !important;

    pointer-events: none !important;
}


.story-screen > .film-top {

    top: 0 !important;

    bottom: auto !important;
}


.story-screen > .film-bottom {

    bottom: 0 !important;

    top: auto !important;
}


.story-screen > .film-top span,
.story-screen > .film-bottom span {

    width: 34px;

    height: 7px;

    border-radius: 5px;

    background:
        rgba(255,255,255,.25);
}


/* =========================================================
   STORY VISUAL
   ========================================================= */

.story-visual {

    position: relative;

    min-width: 0;

    min-height: 0;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle,
            #eaf7ec,
            #dcefe0 45%,
            #cde4d2
        );
}


.story-glow {

    position: absolute;

    width: 340px;

    height: 340px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.9),
            rgba(255,255,255,0)
        );

    animation:
        storyGlow 4s ease-in-out infinite;
}


.story-orbit {

    position: absolute;

    border:
        1px solid
        rgba(91,140,103,.35);

    border-radius: 50%;

    pointer-events: none;
}


.story-orbit-one {

    width: 390px;

    height: 170px;

    transform:
        rotate(-25deg);

    animation:
        storyOrbit 12s linear infinite;
}


.story-orbit-two {

    width: 330px;

    height: 145px;

    transform:
        rotate(45deg);

    animation:
        storyOrbitReverse 15s linear infinite;
}


.story-emoji {

    position: relative;

    z-index: 10;

    width: 160px;

    height: 160px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.78);

    box-shadow:
        0 25px 55px
        rgba(50,100,65,.15);

    font-size: 72px;

    animation:
        storyEmojiFloat 3.5s ease-in-out infinite;
}


/* =========================================================
   STORY EVA
   ========================================================= */

.story-eva {

    position: absolute;

    left: 50%;

    bottom: 45px;

    transform:
        translateX(-50%);

    z-index: 100;

    animation:
        evaStoryFloat 3s ease-in-out infinite;
}


.story-eva-head {

    position: relative;

    width: 78px;

    height: 78px;

    border-radius: 50%;

    background: #f3d0af;

    border:
        2px solid #d3a328;
}


.story-eva-head::before {

    content: "";

    position: absolute;

    left: -5px;

    right: -5px;

    top: -17px;

    height: 45px;

    border-radius:
        50% 50% 35% 35%;

    background: #3e2a26;

    z-index: -1;
}


.story-eye {

    position: absolute;

    top: 30px;

    width: 9px;

    height: 13px;

    border-radius: 50%;

    background: #073f4d;
}


.story-eye.left {
    left: 21px;
}


.story-eye.right {
    right: 21px;
}


.story-smile {

    position: absolute;

    left: 50%;

    bottom: 17px;

    width: 21px;

    height: 10px;

    transform:
        translateX(-50%);

    border-bottom:
        3px solid #073f4d;

    border-radius: 50%;
}


.story-eva-body {

    width: 86px;

    height: 90px;

    margin:
        -2px auto 0;

    border-radius:
        40px 40px 18px 18px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding-bottom: 13px;

    background:
        linear-gradient(
            160deg,
            #78b27f,
            #4e8860
        );

    box-shadow:
        0 12px 25px
        rgba(60,100,65,.18);
}


.story-eva-body span {

    color: white;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* =========================================================
   STORY TEXT
   ========================================================= */

.story-text {

    position: relative;

    min-width: 0;

    min-height: 0;

    height: 100%;

    padding:
        65px 55px 50px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow-y: auto;

    overflow-x: hidden;

    background: white;
}


.story-text::-webkit-scrollbar {

    width: 7px;
}


.story-text::-webkit-scrollbar-track {

    background: #edf4ed;
}


.story-text::-webkit-scrollbar-thumb {

    background: #8aae91;

    border-radius: 20px;
}


.story-tag {

    color: #d19c1e;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 4px;

    margin-bottom: 12px;
}


.story-text h2 {

    margin: 0 0 18px;

    color: #073f4d;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(42px, 5vw, 65px);

    line-height: 1;
}


.story-progress {

    width: 100%;

    height: 6px;

    margin-bottom: 25px;

    overflow: hidden;

    border-radius: 10px;

    background: #e7efe8;
}


.story-progress span {

    display: block;

    width: 0;

    height: 100%;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d9a51f,
            #6fa277
        );

    transition:
        width .35s ease;
}


#storyDescription {

    margin: 0;

    color: #5e7d8c;

    font-size: 17px;

    line-height: 1.8;
}


.story-note {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 25px;

    padding: 17px;

    border-radius: 17px;

    background: #f1f8f1;

    border-left:
        4px solid #6fa277;
}


.story-note > span {

    color: #d6a21b;

    font-size: 20px;
}


.story-note p {

    margin: 0;

    color: #52716e;

    font-size: 14px;

    line-height: 1.6;
}


.story-next {

    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 25px;

    padding:
        14px 22px;

    border: none;

    border-radius: 30px;

    background: #dcae43;

    color: white;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(200,150,30,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.story-next:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 30px
        rgba(200,150,30,.30);
}


.story-next span {

    font-size: 19px;
}


/* =========================================================
   STORY ANIMATIONS
   ========================================================= */

@keyframes storyGlow {

    0%,
    100% {
        transform: scale(1);
        opacity: .8;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

}


@keyframes storyOrbit {

    from {
        transform:
            rotate(-25deg);
    }

    to {
        transform:
            rotate(335deg);
    }

}


@keyframes storyOrbitReverse {

    from {
        transform:
            rotate(45deg);
    }

    to {
        transform:
            rotate(-315deg);
    }

}


@keyframes storyEmojiFloat {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-10px)
            scale(1.04);
    }

}


@keyframes evaStoryFloat {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(-9px);
    }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .program-hero {

        grid-template-columns: 1fr;

        text-align: center;

        padding:
            65px 7% 35px;
    }


    .program-hero-content {

        margin: auto;
    }


    .program-eyebrow {

        justify-content: center;
    }


    .program-hero p {

        margin-left: auto;

        margin-right: auto;
    }


    .program-eva {

        min-height: 420px;
    }


    .program-cards-wrapper {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 800px) {

    .program-cards-wrapper {

        grid-template-columns: 1fr;

        max-width: 600px;
    }


    .program-modal {

        width: 100%;

        height:
            calc(100vh - 24px);

        max-height:
            calc(100vh - 24px);

        border-radius: 24px;
    }


    .modal-eva-area {

        min-height: 105px;

        padding:
            25px 65px 20px 20px;
    }


    .mini-eva {

        width: 62px;

        height: 62px;

        flex-basis: 62px;
    }


    .mini-eva-face {

        width: 45px;

        height: 45px;
    }


    .eva-dialogue h3 {

        font-size: 22px;
    }


    .eva-dialogue p {

        font-size: 12px;
    }


    .modal-content {

        padding:
            25px 18px 30px;
    }


    .category-heading h2 {

        font-size: 35px;
    }


    .subcategory {

        padding: 13px;
    }


    .sub-icon {

        width: 46px;

        height: 46px;

        flex-basis: 46px;

        font-size: 22px;
    }


    .sub-text strong {

        font-size: 15px;
    }


    .sub-text small {

        font-size: 11px;
    }


    /* STORY */

    .story-screen {

        width: 100%;

        height:
            calc(100vh - 24px);

        max-height:
            calc(100vh - 24px);

        grid-template-columns: 1fr;

        overflow-y: auto;

        border-radius: 24px;
    }


    .story-visual {

        min-height: 300px;

        height: 300px;

        flex-shrink: 0;
    }


    .story-emoji {

        width: 120px;

        height: 120px;

        font-size: 55px;
    }


    .story-eva {

        bottom: 15px;
    }


    .story-eva-head {

        width: 62px;

        height: 62px;
    }


    .story-eva-body {

        width: 68px;

        height: 68px;
    }


    .story-text {

        height: auto;

        min-height: 420px;

        padding:
            35px 25px 45px;

        overflow: visible;
    }


    .story-text h2 {

        font-size: 40px;
    }


    .story-close,
    .modal-close {

        width: 42px !important;

        height: 42px !important;

        font-size: 26px !important;
    }

}


@media (max-width: 480px) {

    .program-hero h1 {

        font-size: 44px;
    }


    .program-hero {

        padding-top: 45px;
    }


    .program-eva {

        min-height: 360px;
    }


    .eva-character {

        transform:
            scale(.85);
    }


    .program-intro {

        padding-top: 35px;
    }


    .program-intro h2 {

        font-size: 38px;
    }


    .main-program-card {

        min-height: 360px;

        padding:
            30px 25px;
    }


    .card-content h3 {

        font-size: 34px;
    }


    .story-text h2 {

        font-size: 34px;
    }


    .story-next {

        width: 100%;

        justify-content: center;
    }

}
/* =========================================================
   EVO - CORRECT CINEMATIC SPEAKING ANIMATION
   IMPORTANT:
   "evo-speaking" is added to #storyEvo (.evo-character)
========================================================= */


/* ---------------------------------------------------------
   EVO IDLE / BREATHING
--------------------------------------------------------- */

#storyEvo .story-evo-mascot {
    transform-origin: 50% 88%;
    animation: evoIdleMovie 4s ease-in-out infinite;
    will-change: transform;
}


/* Gentle cinematic breathing */
@keyframes evoIdleMovie {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }

    25% {
        transform:
            translate3d(-1px, -2px, 0)
            rotate(-0.25deg)
            scale(1.003);
    }

    50% {
        transform:
            translate3d(0, -4px, 0)
            rotate(0.25deg)
            scale(1.006);
    }

    75% {
        transform:
            translate3d(1px, -2px, 0)
            rotate(-0.15deg)
            scale(1.003);
    }
}


/* ---------------------------------------------------------
   SPEAKING BODY MOVEMENT
--------------------------------------------------------- */

/*
   evo-speaking is on #storyEvo itself.
*/

#storyEvo.evo-speaking .story-evo-mascot {

    animation:
        evoSpeakingMovie
        0.78s
        ease-in-out
        infinite;

}


@keyframes evoSpeakingMovie {

    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }

    20% {
        transform:
            translate3d(-2px, -2px, 0)
            rotate(-0.35deg)
            scale(1.004);
    }

    40% {
        transform:
            translate3d(2px, -5px, 0)
            rotate(0.45deg)
            scale(1.008);
    }

    60% {
        transform:
            translate3d(-1px, -3px, 0)
            rotate(-0.30deg)
            scale(1.005);
    }

    80% {
        transform:
            translate3d(1px, -6px, 0)
            rotate(0.35deg)
            scale(1.009);
    }

    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }
}


/* ---------------------------------------------------------
   EVO CHARACTER BODY / GESTURE
--------------------------------------------------------- */

#storyEvo.evo-speaking {

    animation:
        evoBodyGesture
        1.25s
        ease-in-out
        infinite;

    transform-origin:
        50% 82%;

}


@keyframes evoBodyGesture {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }

    25% {
        transform:
            translate3d(-2px, -1px, 0)
            rotate(-0.35deg);
    }

    50% {
        transform:
            translate3d(2px, -3px, 0)
            rotate(0.45deg);
    }

    75% {
        transform:
            translate3d(-1px, -2px, 0)
            rotate(-0.25deg);
    }

}


/* ---------------------------------------------------------
   LIP MOVEMENT
--------------------------------------------------------- */

#storyEvo .evo-lip-sync {

    position: absolute !important;

    left: 50% !important;
    top: 18% !important;

    width: 27px !important;
    height: 10px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse,
            rgba(150, 58, 67, .78) 0%,
            rgba(150, 58, 67, .45) 48%,
            rgba(150, 58, 67, 0) 76%
        ) !important;

    opacity: 0 !important;

    transform:
        translate(-50%, -50%)
        scale(.80, .25) !important;

    transform-origin: center !important;

    z-index: 50 !important;

    pointer-events: none !important;

}


/* Lip animation ONLY while Evo is speaking */

#storyEvo.evo-speaking .evo-lip-sync {

    opacity: .60 !important;

    animation:
        evoLipMovie
        .15s
        steps(3, end)
        infinite
        alternate !important;

}


@keyframes evoLipMovie {

    0% {
        transform:
            translate(-50%, -50%)
            scale(.75, .25);
    }

    30% {
        transform:
            translate(-50%, -50%)
            scale(.90, .50);
    }

    60% {
        transform:
            translate(-50%, -50%)
            scale(1.00, .78);
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1.08, 1.08);
    }

}


/* ---------------------------------------------------------
   DIFFERENT SPEAKING RHYTHMS FOR EACH SCENE
--------------------------------------------------------- */

#storyScreen[data-scene="1"]
#storyEvo.evo-speaking
.story-evo-mascot {
    animation-duration: .90s !important;
}

#storyScreen[data-scene="2"]
#storyEvo.evo-speaking
.story-evo-mascot {
    animation-duration: .78s !important;
}

#storyScreen[data-scene="3"]
#storyEvo.evo-speaking
.story-evo-mascot {
    animation-duration: 1.02s !important;
}

#storyScreen[data-scene="4"]
#storyEvo.evo-speaking
.story-evo-mascot {
    animation-duration: .70s !important;
}

#storyScreen[data-scene="5"]
#storyEvo.evo-speaking
.story-evo-mascot {
    animation-duration: 1.08s !important;
}

#storyScreen[data-scene="6"]
#storyEvo.evo-speaking
.story-evo-mascot {
    animation-duration: .82s !important;
}

#storyScreen[data-scene="7"]
#storyEvo.evo-speaking
.story-evo-mascot {
    animation-duration: .64s !important;
}

#storyScreen[data-scene="8"]
#storyEvo.evo-speaking
.story-evo-mascot {
    animation-duration: 1.18s !important;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 980px) {

    #storyEvo .story-evo-mascot {
        animation-duration: 4s;
    }

    #storyEvo.evo-speaking .story-evo-mascot {
        animation-duration: .82s !important;
    }

}


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

@media (prefers-reduced-motion: reduce) {

    #storyEvo .story-evo-mascot,
    #storyEvo.evo-speaking .story-evo-mascot,
    #storyEvo.evo-speaking,
    #storyEvo.evo-speaking .evo-lip-sync {

        animation: none !important;
        transform: none !important;

    }

}