/* ======================================================
   BIOLOGY BRAIN
   A1.1 WATER MINI-SITE
====================================================== */


/* ======================================================
   ROOT VARIABLES
====================================================== */

:root {

    --green:
        #1e7e34;

    --green-dark:
        #176329;

    --green-soft:
        #e7f4eb;

    --green-pale:
        #f3faf5;

    --background:
        #edf7f5;

    --background-blue:
        #eef8fa;

    --white:
        #ffffff;

    --text:
        #18221c;

    --muted:
        #69756e;

    --border:
        #d8e5df;

    --blue:
        #347c8b;

    --gold:
        #c59c3d;

}


/* ======================================================
   RESET
====================================================== */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    min-height:
        100vh;

    background:
        linear-gradient(
            135deg,
            var(--background) 0%,
            var(--background-blue) 100%
        );

    color:
        var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

}

/* =========================================================
   BIOLOGY BRAIN LOGO
========================================================= */
.site-brand {
    position: absolute;

    top: 14px;
    left: 14px;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    width: 190px;
    height: 150px;

    text-decoration: none;

    z-index: 10;
}


.site-brand-logo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: left top;
}



/* =========================================================
   A1.1 WATER
   QUIZ PREVIEW CARD
========================================================= */


/* =========================================================
   CARD
========================================================= */

.quiz-preview-card {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   QUIZ PREVIEW AREA
========================================================= */

.quiz-preview-area {
    position: relative;

    width: 100%;

    margin-top: 14px;

    padding: 0 2px;

    box-sizing: border-box;
}


/* =========================================================
   QUESTION
========================================================= */

.quiz-preview-question {
    margin: 0 0 12px;

    color: #24352b;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}


/* =========================================================
   ANSWER GRID
========================================================= */

.quiz-preview-options {
    display: grid;

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

    gap: 8px;

    width: 100%;
}


/* =========================================================
   INDIVIDUAL ANSWER
========================================================= */

.quiz-preview-option {
    position: relative;

    display: flex;
    align-items: center;

    min-width: 0;
    min-height: 42px;

    padding: 8px 10px;

    background: #ffffff;

    border: 1px solid #d9e4dd;

    border-radius: 9px;

    color: #34463b;

    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;

    box-sizing: border-box;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* =========================================================
   ANSWER LETTER
========================================================= */

.quiz-preview-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 23px;
    height: 23px;

    margin-right: 7px;

    background: #eef4f0;

    border-radius: 6px;

    color: #54675a;

    font-size: 10px;
    font-weight: 800;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}


/* =========================================================
   CORRECT-ANSWER CHECKMARK

   Hidden before hover.
========================================================= */

.quiz-preview-check {
    position: absolute;

    top: 50%;
    right: 8px;

    transform:
        translateY(-50%)
        scale(0.3);

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;

    opacity: 0;

    transition:
        opacity 0.2s ease,
        transform 0.25s ease;
}


/* =========================================================
   MAKE ROOM FOR CHECKMARK ON CORRECT OPTION
========================================================= */

.quiz-preview-option-correct {
    padding-right: 28px;
}


/* =========================================================
   HOVER:
   SMALL MOVEMENT TO SIMULATE ANSWER SELECTION
========================================================= */

.quiz-preview-card:hover
.quiz-preview-option-correct {
    transform: translateY(-2px);

    background: #1e7e34;

    border-color: #1e7e34;

    color: #ffffff;

    box-shadow:
        0 5px 12px
        rgba(30, 126, 52, 0.18);
}


/* =========================================================
   CORRECT ANSWER LETTER
========================================================= */

.quiz-preview-card:hover
.quiz-preview-option-correct
.quiz-preview-letter {
    background: rgba(255, 255, 255, 0.2);

    color: #ffffff;
}


/* =========================================================
   SHOW CHECKMARK
========================================================= */

.quiz-preview-card:hover
.quiz-preview-option-correct
.quiz-preview-check {
    opacity: 1;

    transform:
        translateY(-50%)
        scale(1);
}


/* =========================================================
   OTHER ANSWERS DIM SLIGHTLY

   Keeps them visible while directing attention
   toward the selected correct answer.
========================================================= */

.quiz-preview-card:hover
.quiz-preview-option:not(
    .quiz-preview-option-correct
) {
    opacity: 0.72;
}


/* =========================================================
   SLIGHT DELAY

   Makes it feel like the answer is being selected
   rather than already being highlighted.
========================================================= */

.quiz-preview-card
.quiz-preview-option-correct {
    transition-delay: 0s;
}


.quiz-preview-card:hover
.quiz-preview-option-correct {
    transition-delay: 0.12s;
}


.quiz-preview-card:hover
.quiz-preview-option-correct
.quiz-preview-check {
    transition-delay: 0.27s;
}


/* =========================================================
   FOOTER

   Keep footer visually separated from mini quiz.
========================================================= */

.quiz-preview-card
.activity-card-footer {
    margin-top: 16px;
}


/* =========================================================
   ACCESSIBILITY:
   KEYBOARD FOCUS

   Give keyboard users the same preview.
========================================================= */

.quiz-preview-card:focus-visible
.quiz-preview-option-correct {
    transform: translateY(-2px);

    background: #1e7e34;

    border-color: #1e7e34;

    color: #ffffff;

    box-shadow:
        0 5px 12px
        rgba(30, 126, 52, 0.18);
}


.quiz-preview-card:focus-visible
.quiz-preview-option-correct
.quiz-preview-letter {
    background: rgba(255, 255, 255, 0.2);

    color: #ffffff;
}


.quiz-preview-card:focus-visible
.quiz-preview-option-correct
.quiz-preview-check {
    opacity: 1;

    transform:
        translateY(-50%)
        scale(1);
}


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

@media (
    max-width: 700px
) {

    .quiz-preview-question {
        font-size: 13px;
    }


    .quiz-preview-option {
        min-height: 40px;

        padding-top: 7px;
        padding-bottom: 7px;

        font-size: 11px;
    }


    .quiz-preview-letter {
        width: 21px;
        height: 21px;

        font-size: 9px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .quiz-preview-option,
    .quiz-preview-letter,
    .quiz-preview-check {
        transition: none;
    }


    .quiz-preview-card:hover
    .quiz-preview-option-correct,
    .quiz-preview-card:focus-visible
    .quiz-preview-option-correct {
        transform: none;
    }

}


/* ======================================================
   HEADER
====================================================== */

.water-header {

    width:
        100%;

    padding:
        24px 30px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        24px;

}

.water-logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--text);

    text-decoration:
        none;

    font-size:
        16px;

    font-weight:
        850;

}


.water-logo img {

    width:
        42px;

    height:
        42px;

    object-fit:
        contain;

}

/* ======================================================
   HEADER ACTIONS
====================================================== */

.water-header-actions {

    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

}

/* ======================================================
   LEVEL TOGGLE
====================================================== */

.level-toggle {

    display:
        inline-flex;

    padding:
        4px;

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

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

}


.level-button {

    min-width:
        52px;

    padding:
        9px 13px;

    border:
        none;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;

}


.level-button.active {

    background:
        var(--green);

    color:
        white;

}


/* ======================================================
   HEADER CTA
====================================================== */

.progress-button {

    padding:
        11px 16px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

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

    color:
        var(--text);

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.progress-button:hover {

    background:
        white;

    border-color:
        #a9c9b3;

    transform:
        translateY(-1px);

}


.header-signup-button {

    background:
        var(--green);

    color:
        white;

    border-color:
        var(--green);

    text-decoration:
        none;

}


.header-signup-button:hover {

    background:
        var(--green-dark);

    border-color:
        var(--green-dark);

    color:
        white;

}


/* ======================================================
   MAIN HUB
====================================================== */

.water-hub {

    width:
        min(
            1460px,
            calc(100% - 64px)
        );

    margin:
        0 auto;

    padding:
        18px 0 60px;

}


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

.water-intro {

    max-width:
        850px;

    margin:
        4px auto 40px;

    text-align:
        center;

}


.water-course-label {

    margin:
        0 0 8px;

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .18em;

}


.water-intro h1 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        clamp(
            44px,
            5vw,
            66px
        );

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.045em;

}


.water-intro h1 span {

    margin-right:
        9px;

    color:
        var(--green);

}


.water-intro-copy {

    margin:
        14px 0 0;

    color:
        #53645a;

    font-size:
        17px;

    font-weight:
        500;

}


.water-topic-pills {

    margin-top:
        19px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.water-topic-pills span {

    padding:
        7px 11px;

    border:
        1px solid
        rgba(
            30,
            126,
            52,
            .13
        );

    border-radius:
        999px;

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

    color:
        #526159;

    font-size:
        11px;

    font-weight:
        750;

}


/* ======================================================
   MAIN DASHBOARD
====================================================== */

.water-dashboard-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    gap:
        34px;

    align-items:
        start;

}


.water-activities-column {

    min-width:
        0;

}


/* ======================================================
   SECTIONS
====================================================== */

.activity-section {

    margin-bottom:
        32px;

}


.section-heading {

    margin-bottom:
        13px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        25px;

}


.section-heading > div {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


.section-icon {

    width:
        39px;

    height:
        39px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    font-size:
        19px;

}


.section-heading p {

    margin:
        0 0 2px;

    color:
        var(--green);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .11em;

}


.section-heading h2 {

    margin:
        0;

    font-size:
        23px;

    line-height:
        1.05;

}


/* ======================================================
   ACTIVITY GRIDS
====================================================== */

.activity-grid {

    display:
        grid;

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

    gap:
        15px;

}


.assess-grid {

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

}


/* ======================================================
   STANDARD ACTIVITY CARD
====================================================== */

.activity-card {

    position:
        relative;

    min-width:
        0;

    min-height:
        180px;

    padding:
        18px;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

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

    border:
        1px solid
        var(--border);

    border-radius:
        17px;

    box-shadow:
        0 6px 20px
        rgba(
            35,
            70,
            53,
            .055
        );

    color:
        inherit;

    text-decoration:
        none;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}


.activity-card.available {

    cursor:
        pointer;

}


.activity-card.available:hover {

    transform:
        translateY(-4px);

    border-color:
        #9fc8ac;

    box-shadow:
        0 12px 26px
        rgba(
            35,
            70,
            53,
            .11
        );

}


.activity-card.coming-soon {

    cursor:
        default;

}


/* ======================================================
   STANDARD CARD TOP
====================================================== */

.activity-card-top {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

}


.activity-icon {

    width:
        47px;

    height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--green-soft);

    border-radius:
        13px;

    font-size:
        25px;

}


.activity-status-dot {

    flex:
        0 0 auto;

    width:
        11px;

    height:
        11px;

    margin-top:
        4px;

    border-radius:
        50%;

    background:
        #d1ddd5;

}


.activity-status-dot.started {

    background:
        #dcb44e;

}


.activity-status-dot.complete {

    background:
        var(--green);

}


/* ======================================================
   STANDARD CARD TEXT
====================================================== */

.activity-card-content {

    margin-top:
        17px;

}


.activity-type {

    margin:
        0 0 5px;

    color:
        var(--green);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.activity-card h3 {

    margin:
        0;

    font-size:
        16px;

    line-height:
        1.25;

}


.activity-card-footer {

    margin-top:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

}


.activity-progress-label {

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        700;

}


.activity-progress-label.complete {

    color:
        var(--green);

}


.activity-progress-label.started {

    color:
        #9b7725;

}


.activity-arrow {

    color:
        var(--green);

    font-size:
        20px;

    font-weight:
        900;

}


/* ======================================================
   HL LABEL
====================================================== */

.hl-label {

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    z-index:
        20;

    padding:
        4px 7px;

    background:
        #f6e8bc;

    color:
        #755811;

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        900;

}


/* ======================================================
   COMING SOON
====================================================== */

.coming-soon-message {

    position:
        absolute;

    inset:
        0;

    z-index:
        30;

    padding:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            26,
            55,
            40,
            .92
        );

    color:
        white;

    text-align:
        center;

    font-size:
        13px;

    font-weight:
        800;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .18s ease,
        visibility .18s ease;

}


.activity-card.coming-soon:hover
.coming-soon-message {

    opacity:
        1;

    visibility:
        visible;

}


/* ======================================================
   LARGE VISUAL LEARNING CARDS
====================================================== */

.visual-activity-card {

    min-height:
        350px;

    padding:
        20px;

    justify-content:
        flex-start;

}


/* ======================================================
   VISUAL CARD TITLE
====================================================== */

.visual-card-heading {

    position:
        relative;

    z-index:
        10;

    width:
        100%;

    display:
        grid;

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

    align-items:
        start;

    gap:
        14px;

}


.visual-card-heading h3 {

    margin:
        0;

    padding-right:
        5px;

    color:
        var(--text);

    font-size:
        19px;

    font-weight:
        850;

    line-height:
        1.22;

    letter-spacing:
        -.02em;

}


/* ======================================================
   VISUAL CARD FOOTER
====================================================== */

.visual-activity-card
.activity-card-footer {

    width:
        100%;

    margin-top:
        auto;

}


.visual-activity-card
.activity-progress-label {

    font-size:
        13px;

    font-weight:
        800;

}


.visual-activity-card
.activity-arrow {

    font-size:
        28px;

    line-height:
        1;

    transition:
        transform .22s ease;

}


.visual-activity-card:hover
.activity-arrow {

    transform:
        translateX(5px);

}


/* ======================================================
   VISUAL CARD HOVER
====================================================== */

.visual-activity-card.available:hover {

    transform:
        translateY(-5px);

    border-color:
        #8fc5a0;

    box-shadow:
        0 16px 34px
        rgba(
            35,
            70,
            53,
            .14
        );

}


/* ======================================================
   MODULE 1
   WATER MOLECULES & HYDROGEN BONDING
====================================================== */

.water-molecule-preview {

    position:
        relative;

    width:
        100%;

    height:
        215px;

    margin:
        4px 0 8px;

    overflow:
        hidden;

    background:
        transparent;

    border:
        none;

}


.preview-water-molecule {

    position:
        absolute;

    top:
        50%;

    width:
        285px;

    height:
        285px;

    max-width:
        none;

    object-fit:
        contain;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

    transform-origin:
        center center;

    transition:
        left .48s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        ),

        right .48s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        ),

        top .48s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        ),

        transform .48s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        ),

        filter .3s ease;

}


.preview-water-molecule-left {

    left:
        -78px;

    top:
        51%;

    transform:
        translateY(-50%)
        rotate(-8deg);

}


.preview-water-molecule-right {

    right:
        -78px;

    top:
        51%;

    transform:
        translateY(-50%)
        rotate(8deg);

}


.visual-activity-card:hover
.preview-water-molecule-left {

    left:
        -39px;

    top:
        46%;

    transform:
        translateY(-50%)
        rotate(-12deg)
        scale(1.03);

}


.visual-activity-card:hover
.preview-water-molecule-right {

    right:
        15px;

    top:
        49%;

    transform:
        translateY(-50%)
        rotate(20deg)
        scale(1.04);

}


/* ======================================================
   MODULE 2
   COHESION, ADHESION & SURFACE TENSION
====================================================== */

.cohesion-water-row-card {

    min-height:
        350px;

}


.cohesion-water-preview {

    position:
        relative;

    width:
        calc(100% + 40px);

    height:
        215px;

    margin:
        4px -20px 8px;

    overflow:
        hidden;

    background:
        transparent;

    border:
        none;

}


.cohesion-water-track {

    position:
        absolute;

    left:
        0;

    top:
        50%;

    display:
        flex;

    align-items:
        center;

    width:
        max-content;

    transform:
        translate3d(
            0,
            -50%,
            0
        );

    will-change:
        transform;

}


.cohesion-water-row-image {

    flex:
        0 0 auto;

    width:
        285px;

    height:
        285px;

    max-width:
        none;

    margin-right:
        -78px;

    object-fit:
        contain;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

}


.cohesion-water-row-card:hover
.cohesion-water-track {

    animation:
        cohesionWaterFlow
        5.5s
        linear
        infinite;

}


.cohesion-water-row-card:hover
.cohesion-water-row-image {

    filter:
        drop-shadow(
            0 8px 9px
            rgba(
                30,
                70,
                48,
                .14
            )
        );

}


@keyframes cohesionWaterFlow {

    from {

        transform:
            translate3d(
                0,
                -50%,
                0
            );

    }


    to {

        transform:
            translate3d(
                calc(-50% + 39px),
                -50%,
                0
            );

    }

}


/* ======================================================
   MODULE 3
   WATER'S PHYSICAL PROPERTIES
====================================================== */

.physical-properties-card {

    min-height:
        350px;

}


.physical-properties-preview {

    position:
        relative;

    width:
        calc(100% + 40px);

    height:
        215px;

    margin:
        4px -20px 8px;

    overflow:
        hidden;

    background:
        transparent;

    border:
        none;

}


/* ======================================================
   MODULE 3 STATIC ENVIRONMENT
====================================================== */

.physical-properties-background {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center center;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

}


/* ======================================================
   MODULE 3 LOON
====================================================== */

.physical-properties-loon {

    position:
        absolute;

    left:
        -170px;

    top:
        55%;

    z-index:
        3;

    width:
        155px;

    height:
        auto;

    max-width:
        none;

    object-fit:
        contain;

    transform:
        translateY(-50%);

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

    will-change:
        left,
        top,
        transform,
        filter;

}


.physical-properties-card:hover
.physical-properties-loon {

    animation:
        loonSwimAcross
        3.8s
        linear
        infinite;

    filter:
        drop-shadow(
            0 7px 7px
            rgba(
                20,
                55,
                43,
                .16
            )
        );

}


@keyframes loonSwimAcross {

    0% {

        left:
            -170px;

        top:
            55%;

        transform:
            translateY(-50%)
            rotate(0deg);

    }


    20% {

        top:
            53%;

        transform:
            translateY(-50%)
            rotate(-1deg);

    }


    45% {

        top:
            56%;

        transform:
            translateY(-50%)
            rotate(0deg);

    }


    70% {

        top:
            53%;

        transform:
            translateY(-50%)
            rotate(1deg);

    }


    100% {

        left:
            calc(100% + 40px);

        top:
            55%;

        transform:
            translateY(-50%)
            rotate(0deg);

    }

}


/* ======================================================
   MODULE 4 — HL
   ORIGIN OF WATER ON EARTH
====================================================== */

.origin-water-card {

    position:
        relative;

    min-height:
        350px;

    padding:
        20px;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 38% 38%,
            #1b2940 0%,
            #0e192a 52%,
            #080e19 100%
        );

    border-color:
        #9fc8ac;

}


/* ======================================================
   MODULE 4 TITLE
====================================================== */

.origin-water-card
.visual-card-heading {

    position:
        relative;

    z-index:
        15;

}


.origin-water-card
.visual-card-heading h3 {

    color:
        #ffffff;

}


/* ======================================================
   MODULE 4 FOOTER
====================================================== */

.origin-water-card
.activity-card-footer {

    position:
        absolute;

    left:
        20px;

    right:
        20px;

    bottom:
        20px;

    z-index:
        15;

    width:
        auto;

    margin:
        0;

}


.origin-water-card
.activity-progress-label {

    color:
        rgba(
            255,
            255,
            255,
            .82
        );

}


.origin-water-card
.activity-progress-label.started {

    color:
        #f0c968;

}


.origin-water-card
.activity-progress-label.complete {

    color:
        #7fdf99;

}


.origin-water-card
.activity-arrow {

    color:
        #74d88e;

}


/* ======================================================
   MODULE 4 FULL-CARD SPACE STAGE
====================================================== */

.origin-water-preview {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    width:
        100%;

    height:
        100%;

    margin:
        0;

    overflow:
        hidden;

    background:
        transparent;

    border:
        none;

}


/* ======================================================
   MODULE 4 SUBTLE TITLE GRADIENT
====================================================== */

.origin-water-preview::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,

            rgba(
                4,
                9,
                17,
                .34
            )
            0%,

            rgba(
                4,
                9,
                17,
                .06
            )
            24%,

            rgba(
                4,
                9,
                17,
                0
            )
            45%,

            rgba(
                4,
                9,
                17,
                0
            )
            100%
        );

}


/* ======================================================
   MODULE 4 EARTH

   Positioned using TOP rather than BOTTOM so
   responsive rules cannot accidentally throw
   the planet to the bottom edge of the card.
====================================================== */

.origin-water-earth {

    position:
        absolute;

    left:
        46px;

    top:
        120px;

    z-index:
        4;

    width:
        235px;

    height:
        235px;

    max-width:
        none;

    object-fit:
        contain;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

}


/* ======================================================
   MODULE 4 ASTEROID

   Starts just outside upper-right edge.

   Only transform and opacity are animated.
====================================================== */

.origin-water-asteroid {

    position:
        absolute;

    right:
        -74px;

    top:
        70px;

    z-index:
        7;

    width:
        92px;

    height:
        92px;

    max-width:
        none;

    object-fit:
        contain;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

    opacity:
        1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        rotate(-28deg)
        scale(1);

    transform-origin:
        center center;

    will-change:
        transform,
        opacity;

}


/* ======================================================
   MODULE 4 ASTEROID HOVER
====================================================== */

.origin-water-card:hover
.origin-water-asteroid {

    animation:
        originAsteroidImpact
        1.15s
        linear
        forwards;

}


/* ======================================================
   MODULE 4 ASTEROID FLIGHT

   The asteroid crosses into Earth's upper-right edge.

   0% to 90% is one continuous linear motion.
   It then enters Earth and disappears.
====================================================== */

@keyframes originAsteroidImpact {

    0% {

        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(-28deg)
            scale(1);

        opacity:
            1;

    }


    90% {

        transform:
            translate3d(
                -118px,
                91px,
                0
            )
            rotate(-118deg)
            scale(.90);

        opacity:
            1;

    }


    94% {

        transform:
            translate3d(
                -132px,
                101px,
                0
            )
            rotate(-132deg)
            scale(.70);

        opacity:
            0;

    }


    100% {

        transform:
            translate3d(
                -132px,
                101px,
                0
            )
            rotate(-132deg)
            scale(.70);

        opacity:
            0;

    }

}


/* ======================================================
   MODULE 4 IMPACT FLASH

   Positioned on Earth's upper-right edge at the
   asteroid's collision point.
====================================================== */

.origin-water-impact {

    position:
        absolute;

    left:
        263px;

    top:
        184px;

    z-index:
        8;

    width:
        17px;

    height:
        17px;

    border-radius:
        50%;

    background:
        #ffd35a;

    box-shadow:
        0 0 13px
        rgba(
            255,
            207,
            76,
            .98
        ),

        0 0 27px
        rgba(
            255,
            117,
            47,
            .92
        ),

        0 0 48px
        rgba(
            255,
            76,
            35,
            .65
        );

    opacity:
        0;

    transform:
        scale(.2);

    pointer-events:
        none;

}


/* ======================================================
   MODULE 4 IMPACT FLASH TRIGGER
====================================================== */

.origin-water-card:hover
.origin-water-impact {

    animation:
        originImpactFlash
        .42s
        ease-out
        .98s
        forwards;

}


/* ======================================================
   MODULE 4 IMPACT FLASH ANIMATION
====================================================== */

@keyframes originImpactFlash {

    0% {

        opacity:
            0;

        transform:
            scale(.2);

    }


    15% {

        opacity:
            1;

        transform:
            scale(.75);

    }


    45% {

        opacity:
            1;

        transform:
            scale(1.8);

    }


    100% {

        opacity:
            0;

        transform:
            scale(3.2);

    }

}


/* ======================================================
   MODULE 4 STARS
====================================================== */

.origin-star {

    position:
        absolute;

    z-index:
        3;

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

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

    pointer-events:
        none;

}


.origin-star-1 {

    left:
        18%;

    top:
        28%;

}


.origin-star-2 {

    left:
        42%;

    top:
        37%;

    width:
        2px;

    height:
        2px;

}


.origin-star-3 {

    left:
        68%;

    top:
        24%;

}


.origin-star-4 {

    left:
        79%;

    top:
        48%;

    width:
        2px;

    height:
        2px;

}


.origin-star-5 {

    left:
        56%;

    top:
        63%;

}

/* ======================================================
   WATER BADGE — COMPLETED UNIT
====================================================== */

.sidebar-progress-card.water-badge-earned {

    position:
        relative;

    overflow:
        hidden;

    padding:
        30px 24px;

    border:
        1px solid
        #efd79a;

    background:
        linear-gradient(
            145deg,
            #fffdf5 0%,
            #fff7df 100%
        );

}


/* ======================================================
   BADGE CELEBRATION
====================================================== */

.water-badge-celebration {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

}


/* ======================================================
   EYEBROW
====================================================== */

.water-badge-eyebrow {

    margin:
        0 0 8px;

    color:
        var(--green);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .13em;

}


/* ======================================================
   BADGE IMAGE
====================================================== */

.water-badge-image {

    width:
        min(
            190px,
            75%
        );

    height:
        auto;

    margin:
        4px auto 16px;

    display:
        block;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 13px 18px
            rgba(
                147,
                101,
                7,
                .17
            )
        );

    user-select:
        none;

    -webkit-user-drag:
        none;

    animation:
        waterBadgeEnter
        .6s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        )
        both;

}


/* ======================================================
   BADGE HEADING
====================================================== */

.water-badge-celebration h2 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        26px;

    line-height:
        1.1;

    letter-spacing:
        -.025em;

}


/* ======================================================
   COPY
====================================================== */

.water-badge-copy {

    max-width:
        280px;

    margin:
        10px auto 15px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.55;

}


/* ======================================================
   EARNED LABEL
====================================================== */

.water-badge-earned-label {

    padding:
        9px 13px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        1px solid
        rgba(
            30,
            126,
            52,
            .18
        );

    border-radius:
        999px;

    background:
        #edf8ef;

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        900;

}


.water-badge-earned-label span {

    width:
        20px;

    height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--green);

    color:
        white;

    font-size:
        10px;

}


/* ======================================================
   REVIEW COPY
====================================================== */

.water-badge-review-copy {

    max-width:
        275px;

    margin:
        16px auto 12px;

    color:
        #758078;

    font-size:
        10px;

    line-height:
        1.5;

}


/* ======================================================
   REVIEW BUTTON
====================================================== */

.water-badge-review-button {

    width:
        100%;

    padding:
        12px 15px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--green);

    color:
        white;

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        850;

    cursor:
        pointer;

    transition:
        transform .18s ease,
        background-color .18s ease,
        box-shadow .18s ease;

}


.water-badge-review-button:hover {

    transform:
        translateY(-2px);

    background:
        var(--green-dark);

    box-shadow:
        0 8px 18px
        rgba(
            30,
            126,
            52,
            .16
        );

}


/* ======================================================
   BADGE ENTRANCE
====================================================== */

@keyframes waterBadgeEnter {

    0% {

        opacity:
            0;

        transform:
            translateY(12px)
            scale(.88);

    }


    65% {

        opacity:
            1;

        transform:
            translateY(-3px)
            scale(1.04);

    }


    100% {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ======================================================
   CONFETTI
====================================================== */

.water-badge-confetti {

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

}


.water-badge-confetti span {

    position:
        absolute;

    width:
        7px;

    height:
        7px;

    border-radius:
        2px;

    opacity:
        .75;

}


.water-badge-confetti span:nth-child(1) {

    top:
        8%;

    left:
        8%;

    background:
        #e5a514;

    transform:
        rotate(25deg);

}


.water-badge-confetti span:nth-child(2) {

    top:
        16%;

    right:
        9%;

    background:
        #3e9bd4;

    transform:
        rotate(-18deg);

}


.water-badge-confetti span:nth-child(3) {

    top:
        35%;

    left:
        4%;

    background:
        #64aa6e;

    transform:
        rotate(42deg);

}


.water-badge-confetti span:nth-child(4) {

    top:
        42%;

    right:
        5%;

    background:
        #eab43d;

    transform:
        rotate(16deg);

}


.water-badge-confetti span:nth-child(5) {

    top:
        60%;

    left:
        13%;

    background:
        #4597cf;

    transform:
        rotate(-36deg);

}


.water-badge-confetti span:nth-child(6) {

    top:
        67%;

    right:
        11%;

    background:
        #78b67e;

    transform:
        rotate(33deg);

}



/* ======================================================
   SIDEBAR
====================================================== */

.water-sidebar {

    position:
        sticky;

    top:
        22px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;

}


.sidebar-card {

    padding:
        23px;

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

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    box-shadow:
        0 8px 24px
        rgba(
            35,
            70,
            53,
            .06
        );

}


.sidebar-card-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

}


.sidebar-eyebrow {

    margin:
        0 0 5px;

    color:
        var(--green);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .11em;

}


.sidebar-card h2 {

    margin:
        0;

    font-size:
        21px;

    line-height:
        1.15;

}


.sidebar-progress-percent {

    color:
        var(--green);

    font-size:
        25px;

    font-weight:
        900;

}


.sidebar-progress-track {

    height:
        9px;

    margin:
        19px 0 10px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #dce9e0;

}


.sidebar-progress-fill {

    width:
        0;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--green);

    transition:
        width .35s ease;

}


.sidebar-progress-copy {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.5;

}


.sidebar-next-card {

    margin-top:
        19px;

    padding:
        15px;

    background:
        var(--green-pale);

    border:
        1px solid
        #dceade;

    border-radius:
        13px;

}


.sidebar-next-card > span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--green);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .11em;

}


.sidebar-next-card strong {

    display:
        block;

    color:
        var(--text);

    font-size:
        13px;

    line-height:
        1.35;

}


.sidebar-next-card a {

    display:
        inline-block;

    margin-top:
        10px;

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        850;

    text-decoration:
        none;

}


.sidebar-next-card a:hover {

    text-decoration:
        underline;

}


.sidebar-detail-button {

    width:
        100%;

    margin-top:
        15px;

    padding:
        10px 12px;

    border:
        1px solid
        #bad2c1;

    border-radius:
        10px;

    background:
        white;

    color:
        var(--green-dark);

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;

}


.sidebar-detail-button:hover {

    background:
        #f4faf5;

}


/* ======================================================
   SIGNUP CARD
====================================================== */

.signup-card {

    background:
        linear-gradient(
            150deg,
            rgba(
                255,
                255,
                255,
                .96
            ),
            rgba(
                232,
                247,
                238,
                .96
            )
        );

}


.signup-icon {

    width:
        43px;

    height:
        43px;

    margin-bottom:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        white;

    border:
        1px solid
        var(--border);

    font-size:
        20px;

}


.signup-copy {

    margin:
        11px 0 18px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.55;

}


.signup-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.signup-label {

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        800;

}


.signup-form input {

    width:
        100%;

    padding:
        12px 13px;

    border:
        1px solid
        #cbdcd1;

    border-radius:
        10px;

    background:
        white;

    color:
        var(--text);

    font:
        inherit;

    font-size:
        12px;

    outline:
        none;

}


.signup-form input:focus {

    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(
            30,
            126,
            52,
            .09
        );

}


.signup-form button {

    padding:
        12px 13px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--green);

    color:
        white;

    font-size:
        11px;

    font-weight:
        850;

    cursor:
        pointer;

}


.signup-form button:hover {

    background:
        var(--green-dark);

}


.signup-message {

    min-height:
        18px;

    margin:
        10px 0 0;

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        750;

}


.signup-small-print {

    margin:
        4px 0 0;

    color:
        #819087;

    font-size:
        9px;

    line-height:
        1.4;

}


/* ======================================================
   PROGRESS OVERLAY
====================================================== */

.progress-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        190;

    background:
        rgba(
            16,
            28,
            21,
            .35
        );

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;

}


.progress-overlay.show {

    opacity:
        1;

    visibility:
        visible;

}


/* ======================================================
   PROGRESS DRAWER
====================================================== */

.progress-drawer {

    position:
        fixed;

    top:
        0;

    right:
        0;

    z-index:
        200;

    width:
        min(
            440px,
            100%
        );

    height:
        100vh;

    padding:
        30px;

    overflow-y:
        auto;

    background:
        white;

    box-shadow:
        -12px 0 35px
        rgba(
            20,
            45,
            30,
            .13
        );

    transform:
        translateX(100%);

    transition:
        transform .28s ease;

}


.progress-drawer.open {

    transform:
        translateX(0);

}


.progress-drawer-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

}


.progress-drawer-header p {

    margin:
        0 0 4px;

    color:
        var(--green);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .1em;

}


.progress-drawer-header h2 {

    margin:
        0;

    font-size:
        30px;

}


.progress-close {

    width:
        42px;

    height:
        42px;

    border:
        none;

    border-radius:
        50%;

    background:
        #edf3ef;

    font-size:
        25px;

    cursor:
        pointer;

}


/* ======================================================
   PROGRESS SUMMARY
====================================================== */

.progress-summary {

    margin-top:
        36px;

    padding:
        23px;

    background:
        #f4f9f6;

    border-radius:
        16px;

}


.progress-percentage-row {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.progress-percentage-row span {

    color:
        var(--muted);

    font-size:
        13px;

    font-weight:
        700;

}


.progress-percentage-row strong {

    color:
        var(--green);

    font-size:
        27px;

}


.progress-track {

    height:
        10px;

    margin:
        15px 0 10px;

    overflow:
        hidden;

    background:
        #dce8e0;

    border-radius:
        999px;

}


.progress-fill {

    width:
        0;

    height:
        100%;

    background:
        var(--green);

    border-radius:
        inherit;

    transition:
        width .3s ease;

}


.progress-completed-copy {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        12px;

}


/* ======================================================
   PROGRESS CATEGORIES
====================================================== */

.progress-category-list {

    margin-top:
        27px;

}


.progress-category {

    padding:
        18px 0;

    border-bottom:
        1px solid
        #e8eeea;

}


.progress-category-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        13px;

}


.progress-category-heading strong {

    font-size:
        14px;

}


.progress-category-heading span {

    color:
        var(--muted);

    font-size:
        12px;

}


.progress-activity {

    padding:
        7px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    color:
        var(--muted);

    font-size:
        12px;

}


.progress-activity.complete {

    color:
        var(--green);

}


/* ======================================================
   PROGRESS NOTE
====================================================== */

.progress-note {

    margin-top:
        28px;

    padding:
        17px;

    display:
        flex;

    gap:
        12px;

    background:
        #eef7f5;

    border-radius:
        13px;

}


.progress-note p {

    margin:
        5px 0 0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.5;

}


/* ======================================================
   LEGAL FOOTER
====================================================== */

.legal-footer {

    width:
        min(
            900px,
            calc(100% - 40px)
        );

    margin:
        10px auto 24px;

    padding-top:
        14px;

    border-top:
        1px solid
        rgba(
            105,
            117,
            110,
            .18
        );

    text-align:
        center;

    color:
        #87918b;

    font-size:
        10px;

    line-height:
        1.5;

}


.legal-footer p {

    margin:
        3px 0;

}


.legal-footer p:first-child {

    max-width:
        760px;

    margin-left:
        auto;

    margin-right:
        auto;

}


/* ======================================================
   QUIZ SETUP OVERLAY
====================================================== */

.quiz-setup-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        300;

    padding:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            16,
            28,
            21,
            .42
        );

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .22s ease,
        visibility .22s ease;

}


.quiz-setup-overlay.show {

    opacity:
        1;

    visibility:
        visible;

}


.quiz-setup-modal {

    position:
        relative;

    width:
        min(
            520px,
            100%
        );

    padding:
        38px;

    background:
        white;

    border:
        1px solid
        var(--border);

    border-radius:
        24px;

    box-shadow:
        0 24px 70px
        rgba(
            26,
            55,
            40,
            .18
        );

    text-align:
        center;

    transform:
        translateY(12px)
        scale(.98);

    transition:
        transform .22s ease;

}


.quiz-setup-overlay.show
.quiz-setup-modal {

    transform:
        translateY(0)
        scale(1);

}


.quiz-setup-close {

    position:
        absolute;

    top:
        16px;

    right:
        16px;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        50%;

    background:
        #edf3ef;

    color:
        var(--text);

    font-size:
        23px;

    cursor:
        pointer;

}


.quiz-setup-icon {

    width:
        60px;

    height:
        60px;

    margin:
        0 auto 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--green-soft);

    border-radius:
        17px;

    font-size:
        30px;

}


.quiz-setup-eyebrow {

    margin:
        0 0 5px;

    color:
        var(--green);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .12em;

}


.quiz-setup-modal h2 {

    margin:
        0;

    font-size:
        30px;

    letter-spacing:
        -.02em;

}


/* ======================================================
   QUIZ SETUP GROUPS
====================================================== */

.quiz-setup-group {

    margin-top:
        24px;

    text-align:
        left;

}


.quiz-setup-group-label {

    margin:
        0 0 10px;

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* ======================================================
   QUIZ LENGTH
====================================================== */

.quiz-length-options {

    display:
        grid;

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

    gap:
        11px;

}


.quiz-length-button {

    min-height:
        105px;

    padding:
        15px 10px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    border:
        2px solid
        var(--border);

    border-radius:
        16px;

    background:
        white;

    color:
        var(--text);

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        transform .18s ease;

}


.quiz-length-button:hover {

    transform:
        translateY(-2px);

    border-color:
        #9fc8ab;

}


.quiz-length-button.selected {

    border-color:
        var(--green);

    background:
        var(--green-soft);

}


.quiz-length-button strong {

    color:
        var(--green);

    font-size:
        28px;

    line-height:
        1;

}


.quiz-length-button span {

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        700;

}


/* ======================================================
   QUIZ MODE
====================================================== */

.quiz-mode-options {

    display:
        grid;

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

    gap:
        11px;

}


.quiz-mode-button {

    min-height:
        90px;

    padding:
        15px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border:
        2px solid
        var(--border);

    border-radius:
        16px;

    background:
        white;

    color:
        var(--text);

    text-align:
        left;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        transform .18s ease;

}


.quiz-mode-button:hover {

    transform:
        translateY(-2px);

    border-color:
        #9fc8ab;

}


.quiz-mode-button.selected {

    border-color:
        var(--green);

    background:
        var(--green-soft);

}


.quiz-mode-icon {

    flex:
        0 0 auto;

    font-size:
        25px;

}


.quiz-mode-button div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.quiz-mode-button strong {

    font-size:
        14px;

}


.quiz-mode-button div span {

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.35;

}


/* ======================================================
   QUIZ START
====================================================== */

.quiz-start-button {

    width:
        100%;

    margin-top:
        22px;

    padding:
        14px 20px;

    border:
        none;

    border-radius:
        13px;

    background:
        var(--green);

    color:
        white;

    font-size:
        15px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        background-color .18s ease,
        transform .18s ease;

}


.quiz-start-button:hover {

    background:
        var(--green-dark);

    transform:
        translateY(-1px);

}


/* ======================================================
   PRACTICE PREVIEW CARDS

   Shared structure for Practice cards that visually
   demonstrate the activity on hover.
====================================================== */

.practice-preview-card {

    min-height:
        220px;

    padding:
        18px;

}


/* ======================================================
   PRACTICE PREVIEW HEADING
====================================================== */

.practice-preview-heading {

    position:
        relative;

    z-index:
        5;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

}


.practice-preview-heading > div {

    min-width:
        0;

}


.practice-preview-heading h3 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        16px;

    line-height:
        1.25;

}


/* ======================================================
   FLASHCARDS PREVIEW
====================================================== */

.flashcards-preview-card {

    min-height:
        240px;

}


/* ======================================================
   FLASHCARD PREVIEW AREA
====================================================== */

.flashcard-preview-area {

    position:
        relative;

    width:
        100%;

    height:
        125px;

    margin:
        14px 0 8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    perspective:
        900px;

}


/* ======================================================
   MINI FLASHCARD
====================================================== */

.flashcard-preview-card {

    width:
        min(
            210px,
            92%
        );

    height:
        112px;

    position:
        relative;

}


/* ======================================================
   FLASHCARD INNER ROTATING LAYER
====================================================== */

.flashcard-preview-inner {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    transform-style:
        preserve-3d;

    transition:
        transform
        .58s
        cubic-bezier(
            .2,
            .75,
            .25,
            1
        );

}


/* ======================================================
   WHOLE CARD HOVER TRIGGERS FLASHCARD FLIP
====================================================== */

.flashcards-preview-card:hover
.flashcard-preview-inner {

    transform:
        rotateY(180deg);

}


/* ======================================================
   FLASHCARD FACES
====================================================== */

.flashcard-preview-face {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    padding:
        14px 16px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        1px solid
        #cddfd3;

    border-radius:
        15px;

    background:
        #ffffff;

    box-shadow:
        0 7px 18px
        rgba(
            35,
            70,
            53,
            .08
        );

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

    text-align:
        center;

}


/* ======================================================
   FLASHCARD FRONT
====================================================== */

.flashcard-preview-front {

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

}


.flashcard-preview-front strong {

    color:
        var(--text);

    font-size:
        21px;

    font-weight:
        850;

    line-height:
        1.1;

}


/* ======================================================
   FLASHCARD BACK
====================================================== */

.flashcard-preview-back {

    transform:
        rotateY(180deg);

    background:
        var(--green-soft);

    border-color:
        #b9d8c2;

}


.flashcard-preview-back p {

    margin:
        0;

    max-width:
        180px;

    color:
        #34493c;

    font-size:
        11px;

    font-weight:
        650;

    line-height:
        1.38;

}


/* ======================================================
   FLASHCARD SMALL LABEL
====================================================== */

.flashcard-preview-label {

    color:
        var(--green);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .11em;

}


/* ======================================================
   FLASHCARD HINT
====================================================== */

.flashcard-preview-hint {

    color:
        var(--muted);

    font-size:
        8px;

    font-weight:
        700;

}


/* ======================================================
   FLASHCARD CHECKMARK
====================================================== */

.flashcard-preview-check {

    width:
        22px;

    height:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--green);

    color:
        white;

    font-size:
        12px;

    font-weight:
        900;

}


/* ======================================================
   FLASHCARD HOVER DEPTH
====================================================== */

.flashcards-preview-card:hover
.flashcard-preview-face {

    box-shadow:
        0 10px 24px
        rgba(
            35,
            70,
            53,
            .13
        );

}


/* ======================================================
   FLASHCARD FOOTER
====================================================== */

.flashcards-preview-card
.activity-card-footer {

    width:
        100%;

    margin-top:
        auto;

}


.flashcards-preview-card
.activity-progress-label {

    font-size:
        11px;

    font-weight:
        800;

}


.flashcards-preview-card
.activity-arrow {

    transition:
        transform
        .22s
        ease;

}


.flashcards-preview-card:hover
.activity-arrow {

    transform:
        translateX(5px);

}


/* ======================================================
   FLASHCARDS — PHONE
====================================================== */

@media (
    max-width:
    520px
) {

    .flashcards-preview-card {

        min-height:
            255px;

    }


    .flashcard-preview-area {

        height:
            135px;

    }


    .flashcard-preview-card {

        width:
            min(
                230px,
                94%
            );

        height:
            118px;

    }


    /*
        Phones do not have dependable hover.

        Keep the front visible rather than forcing
        an automatic flip.
    */

    .flashcards-preview-card:hover
    .flashcard-preview-inner {

        transform:
            none;

    }

}


/* ======================================================
   FLASHCARDS — REDUCED MOTION
====================================================== */

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

    .flashcard-preview-inner {

        transition:
            none;

    }


    .flashcards-preview-card:hover
    .flashcard-preview-inner {

        transform:
            none;

    }

}

/* ======================================================
   DATA INVESTIGATION CARD
====================================================== */

.data-investigation-preview-card {

    overflow:
        hidden;

}


/* ======================================================
   GRAPH PREVIEW AREA
====================================================== */

.data-investigation-preview-area {

    flex:
        1;

    min-height:
        230px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

}


/* ======================================================
   MINI GRAPH
====================================================== */

.data-preview-graph {

    position:
        relative;

    width:
        min(
            300px,
            90%
        );

    height:
        170px;

    overflow:
        hidden;

    border:
        1px solid
        #d5e1da;

    border-radius:
        12px;

    background-color:
        #fbfdfc;


    /*
        GRAPH PAPER
    */

    background-image:

        linear-gradient(
            rgba(30, 126, 52, .07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(30, 126, 52, .07) 1px,
            transparent 1px
        ),

        linear-gradient(
            rgba(30, 126, 52, .12) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(30, 126, 52, .12) 1px,
            transparent 1px
        );


    background-size:

        15px 15px,
        15px 15px,
        75px 75px,
        75px 75px;

}


/* ======================================================
   GRAPH AXES
====================================================== */

.data-preview-axis {

    position:
        absolute;

    z-index:
        2;

    display:
        block;

    background:
        #435148;

}


.data-preview-axis-x {

    left:
        24px;

    right:
        12px;

    bottom:
        21px;

    height:
        2px;

}


.data-preview-axis-y {

    left:
        24px;

    top:
        12px;

    bottom:
        21px;

    width:
        2px;

}


/* ======================================================
   DATA POINTS
====================================================== */

.data-preview-point {

    position:
        absolute;

    z-index:
        5;

    width:
        11px;

    height:
        11px;

    border:
        2px solid
        white;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(
            30,
            126,
            52,
            .12
        );

    opacity:
        .15;

    transform:
        scale(.75);

}


/* Point positions approximate the activity dataset */

.data-preview-point-1 {

    left:
        31px;

    bottom:
        28px;

}


.data-preview-point-2 {

    left:
        72px;

    bottom:
        36px;

}


.data-preview-point-3 {

    left:
        126px;

    bottom:
        53px;

}


.data-preview-point-4 {

    left:
        177px;

    bottom:
        78px;

}


.data-preview-point-5 {

    left:
        230px;

    bottom:
        111px;

}


.data-preview-point-6 {

    left:
        270px;

    bottom:
        139px;

}


/* ======================================================
   TREND LINE SVG
====================================================== */

.data-preview-trend {

    position:
        absolute;

    z-index:
        4;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        visible;

    pointer-events:
        none;

}


.data-preview-trend-line {

    fill:
        none;

    stroke:
        #3e7f8d;

    stroke-width:
        3;

    stroke-linecap:
        round;

    stroke-dasharray:
        500;

    stroke-dashoffset:
        500;

}


/* ======================================================
   CAPTION
====================================================== */

.data-preview-caption {

    color:
        #748078;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .04em;

    transition:
        color .2s ease;

}


/* ======================================================
   HOVER — PLOT THE GRAPH
====================================================== */

.data-investigation-preview-card:hover
.data-preview-point {

    opacity:
        1;

    transform:
        scale(1);

}


/* ======================================================
   POINT SEQUENCE
====================================================== */

.data-investigation-preview-card:hover
.data-preview-point-1 {

    transition:
        opacity .18s ease .05s,
        transform .18s ease .05s;

}


.data-investigation-preview-card:hover
.data-preview-point-2 {

    transition:
        opacity .18s ease .14s,
        transform .18s ease .14s;

}


.data-investigation-preview-card:hover
.data-preview-point-3 {

    transition:
        opacity .18s ease .23s,
        transform .18s ease .23s;

}


.data-investigation-preview-card:hover
.data-preview-point-4 {

    transition:
        opacity .18s ease .32s,
        transform .18s ease .32s;

}


.data-investigation-preview-card:hover
.data-preview-point-5 {

    transition:
        opacity .18s ease .41s,
        transform .18s ease .41s;

}


.data-investigation-preview-card:hover
.data-preview-point-6 {

    transition:
        opacity .18s ease .50s,
        transform .18s ease .50s;

}


/* ======================================================
   DRAW TREND LINE AFTER POINTS
====================================================== */

.data-investigation-preview-card:hover
.data-preview-trend-line {

    animation:
        dataPreviewDrawTrend
        .75s
        ease
        .58s
        forwards;

}


@keyframes dataPreviewDrawTrend {

    from {

        stroke-dashoffset:
            500;

    }


    to {

        stroke-dashoffset:
            0;

    }

}


/* ======================================================
   CAPTION HOVER
====================================================== */

.data-investigation-preview-card:hover
.data-preview-caption {

    color:
        var(--green);

}


/* ======================================================
   PRACTICE PREVIEW CARD
   SHARED FOUNDATION
====================================================== */

.practice-preview-card {

    min-height:
        245px;

    padding:
        18px;

    justify-content:
        flex-start;

}


.practice-preview-heading {

    position:
        relative;

    z-index:
        5;

    width:
        100%;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

}


.practice-preview-heading
.activity-type {

    margin:
        0 0 5px;

}


.practice-preview-heading h3 {

    margin:
        0;

    font-size:
        16px;

    line-height:
        1.25;

}


.practice-preview-card
.activity-card-footer {

    width:
        100%;

    margin-top:
        auto;

}


/* ======================================================
   WATER PROPERTIES MATCH
====================================================== */

.matching-preview-card {

    min-height:
        245px;

}


/* ======================================================
   MATCHING PREVIEW AREA

   Four mini cards:

   LEFT COLUMN:
   water properties

   RIGHT COLUMN:
   definitions

   Definitions begin deliberately crossed.
====================================================== */

.matching-preview-area {

    position:
        relative;

    width:
        100%;

    height:
        145px;

    margin:
        13px 0 10px;

}


/* ======================================================
   ALL MATCHING TILES
====================================================== */

.matching-preview-tile {

    position:
        absolute;

    width:
        calc(50% - 7px);

    min-height:
        58px;

    padding:
        9px 10px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        3px;

    border:
        1px solid
        #d5e2da;

    border-radius:
        10px;

    background:
        #ffffff;

    box-shadow:
        0 3px 10px
        rgba(
            35,
            70,
            53,
            .055
        );

    transition:
        top .55s
        cubic-bezier(
            .22,
            .8,
            .22,
            1
        ),

        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

}


/* ======================================================
   PROPERTY TILES

   Left side never moves.
====================================================== */

.matching-preview-term {

    left:
        0;

    background:
        var(--green-soft);

    border-color:
        #cce2d2;

}


.matching-preview-term-cohesion {

    top:
        7px;

}


.matching-preview-term-adhesion {

    top:
        78px;

}


.matching-preview-term strong {

    color:
        var(--green-dark);

    font-size:
        12px;

}


/* ======================================================
   DEFINITION TILES

   Right side begins in the WRONG positions.

   Adhesion definition starts beside Cohesion.

   Cohesion definition starts beside Adhesion.
====================================================== */

.matching-preview-definition {

    right:
        0;

    color:
        #53645a;

    font-size:
        9px;

    line-height:
        1.25;

}


.matching-preview-definition-adhesion {

    top:
        7px;

}


.matching-preview-definition-cohesion {

    top:
        78px;

}


/* ======================================================
   SMALL CATEGORY LABEL
====================================================== */

.matching-preview-category {

    color:
        var(--green);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* ======================================================
   HOVER

   THE DEFINITIONS SWITCH PLACES.

   Adhesion definition moves DOWN.

   Cohesion definition moves UP.
====================================================== */

.matching-preview-card:hover
.matching-preview-definition-adhesion {

    top:
        78px;

}


.matching-preview-card:hover
.matching-preview-definition-cohesion {

    top:
        7px;

}


/* ======================================================
   CORRECT MATCH STYLING

   Once hovered, all four tiles visually read
   as completed pairs.
====================================================== */

.matching-preview-card:hover
.matching-preview-tile {

    border-color:
        #8fc5a0;

    box-shadow:
        0 5px 14px
        rgba(
            30,
            126,
            52,
            .10
        );

}


.matching-preview-card:hover
.matching-preview-definition {

    background:
        #f1faf4;

}


.matching-preview-card:hover
.matching-preview-term {

    background:
        #dff2e4;

}


/* ======================================================
   MATCH CHECKMARKS

   Hidden until hover.
====================================================== */

.matching-preview-check {

    position:
        absolute;

    right:
        -2px;

    z-index:
        8;

    width:
        20px;

    height:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--green);

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        900;

    opacity:
        0;

    transform:
        scale(.55);

    transition:
        opacity .18s ease .42s,
        transform .18s ease .42s;

}


.matching-preview-check-top {

    top:
        25px;

}


.matching-preview-check-bottom {

    top:
        96px;

}


.matching-preview-card:hover
.matching-preview-check {

    opacity:
        1;

    transform:
        scale(1);

}


/* ======================================================
   SMALL SUCCESS EFFECT

   After matching, the whole miniature game gets
   a tiny lift without moving the actual parent card.
====================================================== */

.matching-preview-card:hover
.matching-preview-area {

    transform:
        translateY(-1px);

}


/* ======================================================
   MATCHING CARD ARROW
====================================================== */

.matching-preview-card
.activity-arrow {

    transition:
        transform .22s ease;

}


.matching-preview-card:hover
.activity-arrow {

    transform:
        translateX(4px);

}


/* ======================================================
   PHONE
====================================================== */

@media (
    max-width:
    520px
) {

    .matching-preview-area {

        height:
            154px;

    }


    .matching-preview-tile {

        min-height:
            62px;

        padding:
            9px;

    }


    .matching-preview-term-cohesion,
    .matching-preview-definition-adhesion {

        top:
            7px;

    }


    .matching-preview-term-adhesion,
    .matching-preview-definition-cohesion {

        top:
            84px;

    }


    .matching-preview-card:hover
    .matching-preview-definition-adhesion {

        top:
            84px;

    }


    .matching-preview-card:hover
    .matching-preview-definition-cohesion {

        top:
            7px;

    }


    .matching-preview-definition {

        font-size:
            9px;

    }


    .matching-preview-check-top {

        top:
            27px;

    }


    .matching-preview-check-bottom {

        top:
            104px;

    }

}

/* ======================================================
   PRACTICE CARD
   DRAW A WATER NETWORK

   The finished molecule remains clearly visible.

   On hover:
   - title remains visible
   - status remains visible
   - pencil traces around the molecule
====================================================== */

.drawing-preview-card {

    position:
        relative;

    min-height:
        180px;

    overflow:
        hidden;

}


/* ======================================================
   CARD HEADING

   Stays visible during hover.
====================================================== */

.drawing-preview-heading {

    position:
        relative;

    z-index:
        6;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

}


/* ======================================================
   DRAWING PREVIEW AREA
====================================================== */
.drawing-preview-stage {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        155px;

    margin-top:
        4px;

    overflow:
        hidden;

}
/* ======================================================
   FINISHED WATER MOLECULE DRAWING

   This should now be the BLACK version
   of water-network-drawing.png.
====================================================== */
.drawing-preview-molecule {

    position:
        absolute;

    left:
        50%;

    top:
        52%;

    width:
        220px;

    height:
        220px;

    max-width:
        none;

    object-fit:
        contain;

    transform:
        translate(
            -50%,
            -50%
        );

    opacity:
        1;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

    transition:
        transform .25s ease,
        filter .25s ease;

}
/* ======================================================
   PENCIL

   Starts beside the molecule.
====================================================== */

.drawing-preview-pencil {

    position:
        absolute;

    left:
        47%;

    top:
        24%;

    z-index:
        5;

    width:
        31px;

    height:
        auto;

    max-width:
        none;

    object-fit:
        contain;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(-35deg);

    transform-origin:
        center center;

    opacity:
        .95;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

    will-change:
        left,
        top,
        transform;

}


/* ======================================================
   HOVER — MOLECULE RESPONSE
====================================================== */
.drawing-preview-card:hover
.drawing-preview-molecule {

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.03);

    filter:
        drop-shadow(
            0 4px 6px
            rgba(
                30,
                70,
                48,
                .08
            )
        );

}


/* ======================================================
   HOVER — PENCIL TRACE
====================================================== */

.drawing-preview-card:hover
.drawing-preview-pencil {

    animation:
        drawingPencilTrace
        2.8s
        ease-in-out
        infinite;

}


/* ======================================================
   PENCIL TRACE

   Pencil moves around:
   O → left H → center → right H → O
====================================================== */

@keyframes drawingPencilTrace {

    0% {

        left:
            48%;

        top:
            24%;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(-35deg);

    }


    18% {

        left:
            42%;

        top:
            38%;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(-48deg);

    }


    36% {

        left:
            35%;

        top:
            63%;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(-62deg);

    }


    52% {

        left:
            50%;

        top:
            49%;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(-8deg);

    }


    70% {

        left:
            66%;

        top:
            63%;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(28deg);

    }


    86% {

        left:
            57%;

        top:
            38%;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(-18deg);

    }


    100% {

        left:
            48%;

        top:
            24%;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(-35deg);

    }

}


/* ======================================================
   FOOTER

   Remains visible during hover.
====================================================== */

.drawing-preview-card
.activity-card-footer {

    position:
        relative;

    z-index:
        7;

}


/* ======================================================
   CARD HOVER
====================================================== */

.drawing-preview-card:hover {

    transform:
        translateY(-4px);

    border-color:
        #9fc8ac;

    box-shadow:
        0 12px 26px
        rgba(
            35,
            70,
            53,
            .11
        );

}

/* =========================================================
   PRACTICE CARD
   CONTEXT VOCABULARY CHALLENGE
========================================================= */


/* =========================================================
   CARD
========================================================= */

.vocabulary-fill-preview-card {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   PREVIEW AREA
========================================================= */

.vocabulary-fill-preview-area {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    min-height: 150px;

    margin-top: 12px;
    padding: 18px 20px;

    background: #f8fbf9;

    border: 1px solid #dce8e1;
    border-radius: 14px;
}


/* =========================================================
   SENTENCE
========================================================= */

.vocabulary-fill-sentence {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;

    gap: 5px;

    max-width: 100%;

    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;

    color: #24312a;

    text-align: center;
}


/* =========================================================
   VOCABULARY BLANK
========================================================= */

.vocabulary-fill-blank {
    position: relative;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-width: 92px;
    height: 30px;

    margin: 0 2px;

    vertical-align: middle;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.vocabulary-fill-placeholder {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    font-weight: 700;
    letter-spacing: 2px;

    color: #6f7c75;

    opacity: 1;

    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}


/* =========================================================
   ANSWER

   Hidden until hover.
========================================================= */

.vocabulary-fill-answer {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -35%)
        scale(0.9);

    padding: 3px 9px;

    border-radius: 7px;

    background: #e8f6ed;

    color: #1e7e34;

    font-weight: 800;

    opacity: 0;

    transition:
        opacity 0.28s ease,
        transform 0.32s ease;
}


/* =========================================================
   HOVER — REMOVE PLACEHOLDER
========================================================= */

.vocabulary-fill-preview-card:hover
.vocabulary-fill-placeholder {
    opacity: 0;

    transform:
        translate(-50%, -65%)
        scale(0.9);
}


/* =========================================================
   HOVER — FILL IN ANSWER
========================================================= */

.vocabulary-fill-preview-card:hover
.vocabulary-fill-answer {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* =========================================================
   CONFIRMATION
========================================================= */

.vocabulary-fill-confirmation {
    display: flex;
    align-items: center;

    gap: 6px;

    height: 22px;

    margin-top: 10px;

    color: #1e7e34;

    font-size: 13px;
    font-weight: 700;

    opacity: 0;

    transform:
        translateY(5px);

    transition:
        opacity 0.25s ease 0.16s,
        transform 0.25s ease 0.16s;
}


/* =========================================================
   CHECKMARK
========================================================= */

.vocabulary-fill-check {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    background: #1e7e34;

    color: white;

    font-size: 12px;
    font-weight: 800;

    transform:
        scale(0.7);

    transition:
        transform 0.25s ease 0.18s;
}


/* =========================================================
   HOVER — SHOW CONFIRMATION
========================================================= */

.vocabulary-fill-preview-card:hover
.vocabulary-fill-confirmation {
    opacity: 1;

    transform:
        translateY(0);
}


.vocabulary-fill-preview-card:hover
.vocabulary-fill-check {
    transform:
        scale(1);
}


/* =========================================================
   CARD HOVER POLISH
========================================================= */

.vocabulary-fill-preview-card
.vocabulary-fill-preview-area {
    transition:
        border-color 0.25s ease,
        background-color 0.25s ease;
}


.vocabulary-fill-preview-card:hover
.vocabulary-fill-preview-area {
    border-color: #bcdcc8;

    background: #fbfefc;
}


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

@media (
    max-width: 700px
) {

    .vocabulary-fill-preview-area {
        min-height: 140px;

        padding: 16px;
    }


    .vocabulary-fill-sentence {
        font-size: 14px;
    }


    .vocabulary-fill-blank {
        min-width: 84px;
    }

}


/* ======================================================
   PHONE
====================================================== */

@media (
    max-width:
    520px
) {

    .drawing-preview-stage {

        height:
            115px;

    }


    .drawing-preview-molecule {

        width:
            145px;

        height:
            145px;

    }


    .drawing-preview-pencil {

        width:
            30px;

    }

}


/* ======================================================
   REDUCED MOTION
====================================================== */

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

    .drawing-preview-card:hover
    .drawing-preview-pencil {

        animation:
            none;

    }

}


/* ======================================================
   RESPONSIVE — TABLET
====================================================== */

@media (
    max-width:
    1180px
) {

    .water-dashboard-layout {

        grid-template-columns:
            minmax(
                0,
                1fr
            )
            285px;

        gap:
            22px;

    }


    .activity-grid,
    .assess-grid {

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

    }


    /* ==================================================
       MODULE 2 — TABLET
    ================================================== */

    .cohesion-water-row-image {

        width:
            270px;

        height:
            270px;

    }


    /* ==================================================
       MODULE 3 — TABLET
    ================================================== */

    .physical-properties-loon {

        width:
            145px;

        left:
            -160px;

    }

}


/* ======================================================
   RESPONSIVE — SMALL TABLET
====================================================== */

@media (
    max-width:
    900px
) {

    .water-dashboard-layout {

        grid-template-columns:
            1fr;

    }


    .water-sidebar {

        position:
            static;

        display:
            grid;

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

        order:
            -1;

        margin-bottom:
            8px;

    }

}


/* ======================================================
   RESPONSIVE — MOBILE
====================================================== */

@media (
    max-width:
    700px
) {

    .water-header {

        padding:
            10px 18px;

    }


    .water-logo span {

        display:
            none;

    }


    .water-hub {

        width:
            calc(
                100% - 30px
            );

    }


    .water-intro {

        margin-bottom:
            30px;

    }


    .water-intro h1 {

        font-size:
            44px;

    }


    .water-sidebar {

        grid-template-columns:
            1fr;

    }


    .activity-grid,
    .assess-grid {

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

    }

}


/* ======================================================
   RESPONSIVE — PHONE
====================================================== */

@media (
    max-width:
    520px
) {

    .water-header-actions {

        gap:
            7px;

    }


    .progress-button {

        padding:
            10px 12px;

    }


    .water-topic-pills {

        gap:
            6px;

    }


    .water-topic-pills span {

        font-size:
            10px;

    }


    .activity-grid,
    .assess-grid {

        grid-template-columns:
            1fr;

    }


    .visual-activity-card {

        min-height:
            360px;

    }


    .visual-card-heading h3 {

        font-size:
            20px;

    }


    /* ==================================================
       MODULE 1 — PHONE
    ================================================== */

    .water-molecule-preview {

        height:
            220px;

    }


    .preview-water-molecule {

        width:
            285px;

        height:
            285px;

    }


    .preview-water-molecule-left {

        left:
            -66px;

        top:
            52%;

        transform:
            translateY(-50%)
            rotate(-14deg);

    }


    .preview-water-molecule-right {

        right:
            -66px;

        top:
            49%;

        transform:
            translateY(-50%)
            rotate(19deg);

    }


    /* ==================================================
       MODULE 2 — PHONE
    ================================================== */

    .cohesion-water-preview {

        height:
            220px;

    }


    .cohesion-water-row-image {

        width:
            285px;

        height:
            285px;

    }


    .cohesion-water-track {

        animation:
            cohesionWaterFlow
            7s
            linear
            infinite;

    }


    /* ==================================================
       MODULE 3 — PHONE
    ================================================== */

    .physical-properties-preview {

        height:
            220px;

    }


    .physical-properties-loon {

        width:
            150px;

        left:
            -165px;

        animation:
            loonSwimAcross
            4.6s
            linear
            infinite;

    }


    /* ==================================================
       MODULE 4 — PHONE
    ================================================== */

    .origin-water-card {

        min-height:
            360px;

    }


    .origin-water-earth {

        width:
            235px;

        height:
            235px;

        left:
            32px;

        top:
            105px;

    }


    .origin-water-asteroid {

        width:
            88px;

        height:
            88px;

        right:
            -68px;

        top:
            62px;

    }


    .origin-water-impact {

        left:
            249px;

        top:
            167px;

    }


    .origin-water-card:hover
    .origin-water-asteroid {

        animation:
            originAsteroidImpactPhone
            1.15s
            linear
            forwards;

    }


    @keyframes originAsteroidImpactPhone {

        0% {

            transform:
                translate3d(
                    0,
                    0,
                    0
                )
                rotate(-28deg)
                scale(1);

            opacity:
                1;

        }


        90% {

            transform:
                translate3d(
                    -108px,
                    86px,
                    0
                )
                rotate(-118deg)
                scale(.9);

            opacity:
                1;

        }


        94% {

            transform:
                translate3d(
                    -120px,
                    95px,
                    0
                )
                rotate(-130deg)
                scale(.72);

            opacity:
                0;

        }


        100% {

            transform:
                translate3d(
                    -120px,
                    95px,
                    0
                )
                rotate(-130deg)
                scale(.72);

            opacity:
                0;

        }

    }


    /* ==================================================
       QUIZ — PHONE
    ================================================== */

    .quiz-setup-modal {

        padding:
            32px 20px 24px;

    }


    .quiz-length-options {

        grid-template-columns:
            1fr;

    }


    .quiz-length-button {

        min-height:
            75px;

    }


    .quiz-mode-options {

        grid-template-columns:
            1fr;

    }

}




/* ======================================================
   REDUCED MOTION ACCESSIBILITY
====================================================== */

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

    .activity-card,
    .preview-water-molecule,
    .cohesion-water-row-image,
    .physical-properties-loon,
    .origin-water-asteroid,
    .origin-water-impact,
    .activity-arrow {

        transition:
            none;

    }


    .cohesion-water-row-card:hover
    .cohesion-water-track,
    .cohesion-water-track,
    .physical-properties-card:hover
    .physical-properties-loon,
    .physical-properties-loon,
    .origin-water-card:hover
    .origin-water-asteroid,
    .origin-water-card:hover
    .origin-water-impact {

        animation:
            none;

    }

}

/* ======================================================
   RESPONSIVE — VERY SMALL PHONE
   Prevent Biology Brain logo from overlapping hero title
====================================================== */

@media (
    max-width:
    400px
) {

    .site-brand {
        top:
            10px;

        left:
            12px;

        width:
            120px;

        height:
            95px;
    }

}

/* ======================================================
   HEADER CONTROLS
   Keep level selector clickable above floating logo
====================================================== */

.water-header-actions {
    position: relative;
    z-index: 30;
}

/* =======================================================
   A1.1 MASTERY — FULL SCREEN CONFETTI
======================================================= */

.mastery-confetti-container {
    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 99999;
}


.mastery-confetti-piece {
    position: absolute;

    top: -30px;

    width: 10px;
    height: 17px;

    border-radius: 2px;

    opacity: 0;

    animation-name:
        waterMasteryConfettiFall;

    animation-timing-function:
        cubic-bezier(.18, .7, .35, 1);

    animation-fill-mode:
        forwards;

    will-change:
        transform,
        opacity;
}


.mastery-confetti-piece.confetti-circle {
    width: 9px;
    height: 9px;

    border-radius: 50%;
}


@keyframes waterMasteryConfettiFall {

    0% {
        opacity: 0;

        transform:
            translate3d(
                0,
                -30px,
                0
            )
            rotate(0deg);
    }


    8% {
        opacity: 1;
    }


    85% {
        opacity: 1;
    }


    100% {
        opacity: 0;

        transform:
            translate3d(
                var(--confetti-drift),
                110vh,
                0
            )
            rotate(
                var(--confetti-rotation)
            );
    }

}


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

    .mastery-confetti-container {
        display: none;
    }

}