/* ==================================================
   LESSON 5 — COLORS & RAINBOW
================================================== */

@import url("lesson-4.css");


/* ==================================================
   BODY
================================================== */

.colors-lesson-body {
    font-family: "Fredoka", sans-serif;
}


/* ==================================================
   PARTS HEADING
================================================== */

.parts-heading {
    max-width: 700px;
    margin: 0 auto 30px;
    text-align: center;
}


.parts-heading-icon {
    width: 88px;
    height: 88px;

    margin: 0 auto 16px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #fff3f5,
            #f5f0ff,
            #eef8ff
        );

    border: 2px solid #e4dfe9;
    border-bottom: 6px solid #d0c6d9;
    border-radius: 28px;

    box-shadow:
        0 10px 24px
        rgba(95, 81, 110, 0.08);

    font-size: 46px;
}


.parts-heading h2 {
    margin: 0 0 10px;

    color: #514b59;

    font-size:
        clamp(
            38px,
            5vw,
            52px
        );
}


.parts-heading > p:last-child {
    margin: 0;

    color: #817b87;

    font-size: 15px;
    line-height: 1.5;
}


/* ==================================================
   RAINBOW PROGRESS CARD
================================================== */

.rainbow-progress-card {
    width: min(660px, 100%);

    margin: 0 auto 32px;

    padding: 24px;

    background:
        linear-gradient(
            135deg,
            #fffefc,
            #f8f4fa
        );

    border: 2px solid #e7dfe8;
    border-bottom: 6px solid #d5c9d7;
    border-radius: 27px;

    box-shadow:
        0 12px 28px
        rgba(98, 83, 110, 0.07);

    text-align: center;
}


/* ==================================================
   RAINBOW PREVIEW
================================================== */

.rainbow-preview {
    width: 220px;
    height: 112px;

    margin: 0 auto 18px;

    position: relative;

    overflow: hidden;
}


.rainbow-band {
    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    border-style: solid;

    border-color: #d8d8dd;

    border-bottom: 0;

    border-radius:
        999px
        999px
        0
        0;

    transition:
        border-color
        0.6s
        ease,
        filter
        0.6s
        ease,
        transform
        0.4s
        ease;

    filter:
        grayscale(1);
}


/* Outer band */

.rainbow-band:nth-child(1) {
    width: 220px;
    height: 110px;
    top: 0;
    border-width: 14px;
}


/* 2 */

.rainbow-band:nth-child(2) {
    width: 190px;
    height: 95px;
    top: 15px;
    border-width: 14px;
}


/* 3 */

.rainbow-band:nth-child(3) {
    width: 160px;
    height: 80px;
    top: 30px;
    border-width: 14px;
}


/* 4 */

.rainbow-band:nth-child(4) {
    width: 130px;
    height: 65px;
    top: 45px;
    border-width: 14px;
}


/* 5 */

.rainbow-band:nth-child(5) {
    width: 100px;
    height: 50px;
    top: 60px;
    border-width: 14px;
}


/* 6 */

.rainbow-band:nth-child(6) {
    width: 70px;
    height: 35px;
    top: 75px;
    border-width: 14px;
}


/* ==================================================
   RAINBOW COLORS
================================================== */

.rainbow-band.rainbow-active {
    filter:
        grayscale(0);

    transform:
        translateX(-50%)
        scale(1.02);
}


.rainbow-red.rainbow-active {
    border-color: #e88585;
}


.rainbow-orange.rainbow-active {
    border-color: #eda86c;
}


.rainbow-yellow.rainbow-active {
    border-color: #edcf69;
}


.rainbow-green.rainbow-active {
    border-color: #8dbb8b;
}


.rainbow-blue.rainbow-active {
    border-color: #86add0;
}


.rainbow-purple.rainbow-active {
    border-color: #a58cc5;
}


/* ==================================================
   RAINBOW PROGRESS INFO
================================================== */

.rainbow-progress-information {
    margin-bottom: 12px;
}


.rainbow-progress-information span {
    display: block;

    color: #8b8490;

    font-size: 11px;
}


.rainbow-progress-information strong {
    display: block;

    margin-top: 2px;

    color: #655e6c;

    font-size: 19px;
}


.rainbow-progress-message {
    margin:
        12px
        0
        0;

    color: #817988;

    font-size: 13px;
}


/* ==================================================
   PART MAP
================================================== */

.lesson-parts-map {
    width: min(820px, 100%);

    margin: 0 auto;

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

    gap: 22px;
}


/* ==================================================
   PART CARDS
================================================== */

.lesson-part-card {
    min-height: 330px;

    display: flex;
    flex-direction: column;
}


.color-example-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}


.mini-color {
    width: 24px;
    height: 24px;

    display: inline-block;

    border: 2px solid
        rgba(
            60,
            60,
            70,
            0.12
        );

    border-radius: 50%;
}


.red-color {
    background: #e88080;
}


.blue-color {
    background: #7fa8cf;
}


.yellow-color {
    background: #ebcf66;
}


.green-color {
    background: #83b887;
}


/* ==================================================
   ACTIVE PART HEADING
================================================== */

.active-part-heading {
    max-width: 700px;

    margin: 0 auto 24px;

    text-align: center;
}


.active-part-icon {
    width: 88px;
    height: 88px;

    margin: 0 auto 16px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #fff7ec,
            #f3eefb
        );

    border: 2px solid #e5dcea;
    border-bottom: 6px solid #d1c5dc;
    border-radius: 27px;

    font-size: 44px;
}


/* ==================================================
   RAINBOW SPECIAL WORD
================================================== */

.rainbow-word-card {
    width: min(660px, 100%);

    margin: 0 auto 22px;

    padding:
        18px
        20px;

    display: flex;
    align-items: center;

    gap: 16px;

    background:
        linear-gradient(
            135deg,
            #fff7ea,
            #f5effc,
            #eef8ff
        );

    border: 2px solid #e2d8e8;
    border-bottom: 6px solid #cec0d8;
    border-radius: 23px;

    text-align: left;
}


.rainbow-word-card[hidden] {
    display: none;
}


.rainbow-word-icon {
    width: 66px;
    height: 66px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    background: #fff;

    border-radius: 20px;

    font-size: 39px;
}


.rainbow-word-card span {
    display: block;

    margin-bottom: 2px;

    color: #9a819d;

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

    letter-spacing: 1px;
}


.rainbow-word-card strong {
    display: block;

    color: #5d5665;

    font-size: 25px;
}


.rainbow-word-card p {
    margin:
        2px
        0
        0;

    color: #837b88;

    font-size: 13px;
}


/* ==================================================
   COLOR LEARNING CARD
================================================== */

.color-learning-card {
    width: min(620px, 100%);

    min-height: 430px;

    margin: 0 auto;

    padding:
        25px
        28px
        28px;

    background:
        linear-gradient(
            180deg,
            #fffefc,
            #faf7f2
        );

    border: 2px solid #e7dfd7;
    border-bottom: 7px solid #d7cbc0;
    border-radius: 29px;

    box-shadow:
        0 14px 32px
        rgba(95, 78, 62, 0.07);

    text-align: center;
}


/* ==================================================
   BIG COLOR CIRCLE
================================================== */

.color-learning-visual {
    margin:
        14px
        auto
        10px;
}


.big-color-circle {
    width: 120px;
    height: 120px;

    margin: 0 auto;

    background: #ddd;

    border:
        6px
        solid
        rgba(
            255,
            255,
            255,
            0.8
        );

    border-radius: 50%;

    box-shadow:
        0 8px 20px
        rgba(
            62,
            51,
            72,
            0.12
        ),
        inset
        0
        0
        0
        2px
        rgba(
            50,
            45,
            60,
            0.07
        );

    transition:
        background
        0.35s
        ease,
        transform
        0.35s
        ease;
}


.big-color-circle.color-pop {
    animation:
        colorCirclePop
        0.45s
        ease;
}


@keyframes colorCirclePop {

    0% {
        transform:
            scale(0.7);
    }

    70% {
        transform:
            scale(1.12);
    }

    100% {
        transform:
            scale(1);
    }

}


/* ==================================================
   COLOR WORD
================================================== */

.color-learning-emoji {
    margin-bottom: 5px;

    font-size: 28px;
}


.color-learning-main {
    color: #5c5564;

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

    font-weight: 700;
}


.color-learning-translation {
    margin:
        6px
        0
        23px;

    color: #8a8290;

    font-size: 16px;
}


/* ==================================================
   EARNED COLOR DROP
================================================== */

.earned-color-drop {
    margin:
        12px
        0
        16px;

    font-size: 52px;

    animation:
        colorDropBounce
        0.55s
        ease;
}


@keyframes colorDropBounce {

    0% {
        opacity: 0;

        transform:
            translateY(-20px)
            scale(0.4);
    }

    65% {
        transform:
            translateY(5px)
            scale(1.2);
    }

    100% {
        opacity: 1;

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

}


/* ==================================================
   COLOR LAB
================================================== */

.color-lab-page {
    min-height: 760px;

    padding:
        52px
        42px
        55px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fffdfa,
            #f5f2fa
        );

    border: 2px solid #e7dfe8;
    border-radius: var(--card-radius);

    box-shadow:
        0 20px 55px
        rgba(
            105,
            89,
            116,
            0.08
        );

    text-align: center;
}


.color-lab-decoration {
    position: absolute;

    top: 20px;
    left: 0;
    right: 0;

    display: flex;
    justify-content: space-around;

    font-size: 24px;

    opacity: 0.72;

    pointer-events: none;
}


.color-lab-main-icon {
    margin:
        8px
        auto
        12px;

    font-size: 80px;

    animation:
        labFloat
        2.2s
        ease-in-out
        infinite;
}


@keyframes labFloat {

    50% {
        transform:
            translateY(-6px)
            rotate(3deg);
    }

}


.color-lab-page h2 {
    margin:
        0
        0
        12px;

    color: #554e5c;

    font-size:
        clamp(
            39px,
            5vw,
            54px
        );
}


.color-lab-description {
    max-width: 650px;

    margin:
        0
        auto
        28px;

    color: #817985;

    font-size: 15px;
    line-height: 1.55;
}


/* ==================================================
   LAB RAINBOW CARD
================================================== */

.lab-rainbow-card {
    width: min(650px, 100%);

    margin:
        0
        auto
        28px;

    padding:
        19px
        21px;

    display: flex;
    align-items: center;

    gap: 17px;

    background:
        linear-gradient(
            135deg,
            #fff6ea,
            #f2eef8,
            #eef8ff
        );

    border: 2px solid #e7d9df;
    border-bottom: 6px solid #d4c4ce;
    border-radius: 24px;

    text-align: left;
}


.lab-rainbow-icon {
    width: 76px;
    height: 76px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    background: #fff;

    border-radius: 22px;

    font-size: 44px;
}


.lab-rainbow-card span {
    display: block;

    margin-bottom: 3px;

    color: #987a9b;

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

    letter-spacing: 1.2px;
}


.lab-rainbow-card strong {
    display: block;

    margin-bottom: 4px;

    color: #625a68;

    font-size: 18px;
}


.lab-rainbow-card p {
    margin: 0;

    color: #817985;

    font-size: 13px;
    line-height: 1.45;
}


/* ==================================================
   COLOR LAB WORKSPACE
================================================== */

.color-lab-workspace {
    width: min(680px, 100%);

    margin:
        0
        auto
        25px;
}


.color-lab-challenge {
    padding:
        24px
        22px;

    background:
        linear-gradient(
            180deg,
            #fffefc,
            #faf7f2
        );

    border: 2px solid #e7dfd7;
    border-bottom: 6px solid #d6ccc0;
    border-radius: 25px;

    box-shadow:
        0 10px 24px
        rgba(
            95,
            77,
            61,
            0.06
        );
}


.color-lab-challenge-icon {
    margin-bottom: 10px;

    font-size: 60px;
}


.color-lab-challenge h3 {
    margin:
        0
        0
        8px;

    color: #5d5664;

    font-size: 25px;
}


.color-lab-challenge p {
    color: #817a85;

    font-size: 14px;
}


/* ==================================================
   COLOR CHOICES
================================================== */

.color-choice-grid {
    margin-top: 18px;

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

    gap: 12px;
}


.color-choice-button {
    min-height: 78px;

    padding: 10px;

    border:
        2px
        solid
        rgba(
            50,
            50,
            60,
            0.1
        );

    border-bottom-width: 5px;

    border-radius: 17px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform
        0.18s
        ease,
        box-shadow
        0.18s
        ease;
}


.color-choice-button:hover {
    transform:
        translateY(-2px);
}


.color-choice-button.correct {
    outline:
        4px
        solid
        rgba(
            116,
            170,
            107,
            0.25
        );
}


.color-choice-button.wrong {
    outline:
        4px
        solid
        rgba(
            210,
            112,
            112,
            0.25
        );
}


/* ==================================================
   PALETTE
================================================== */

.paint-palette {
    margin:
        20px
        auto;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;
}


.paint-color {
    width: 48px;
    height: 48px;

    border:
        4px
        solid
        #fff;

    border-radius: 50%;

    box-shadow:
        0 4px 12px
        rgba(
            49,
            42,
            57,
            0.16
        );

    cursor: pointer;

    transition:
        transform
        0.2s
        ease;
}


.paint-color:hover {
    transform:
        scale(1.1);
}


/* ==================================================
   PAINT TARGET
================================================== */

.paint-target-area {
    margin:
        20px
        auto;

    display: grid;
    place-items: center;
}


.paint-target {
    min-width: 130px;
    min-height: 130px;

    padding: 20px;

    display: grid;
    place-items: center;

    background: #dedde1;

    border:
        3px
        dashed
        #bbb6c1;

    border-radius: 26px;

    font-size: 72px;

    transition:
        background
        0.4s
        ease,
        transform
        0.3s
        ease;
}


.paint-target.paint-success {
    animation:
        paintSuccess
        0.45s
        ease;
}


@keyframes paintSuccess {

    50% {
        transform:
            scale(1.12);
    }

}


/* ==================================================
   COLOR TEXT INPUT
================================================== */

.color-text-input {
    width: min(280px, 100%);

    margin:
        15px
        auto;

    padding:
        12px
        14px;

    display: block;

    background: #fff;

    border: 2px solid #dad2e3;
    border-bottom: 5px solid #c8bdd5;
    border-radius: 15px;

    color: #5f5868;

    font-family: inherit;
    font-size: 20px;
    font-weight: 600;

    text-align: center;

    outline: none;
}


.color-text-input:focus {
    border-color: #b7a8ca;

    box-shadow:
        0
        0
        0
        5px
        rgba(
            181,
            166,
            207,
            0.12
        );
}


/* ==================================================
   MATCHING GAME
================================================== */

.color-connect-board {
    width: min(680px, 100%);

    margin:
        20px
        auto;

    position: relative;

    display: grid;
    grid-template-columns:
        1fr
        1fr;

    gap: 70px;
}


.color-connect-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.color-connect-card {
    min-height: 64px;

    padding:
        12px
        16px;

    position: relative;

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

    background: #fff;

    border: 2px solid #e1dbe5;
    border-bottom: 5px solid #cec4d5;
    border-radius: 17px;

    color: #625b6c;

    font-size: 16px;
    font-weight: 600;
}


.color-connect-dot {
    width: 18px;
    height: 18px;

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    background: #aaa3b2;

    border:
        4px
        solid
        #fff;

    border-radius: 50%;

    box-shadow:
        0
        0
        0
        2px
        #cbc2d1;

    cursor: pointer;

    z-index: 4;
}


.color-connect-left
.color-connect-dot {
    right: -10px;
}


.color-connect-right
.color-connect-dot {
    left: -10px;
}


.color-connect-svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    overflow: visible;

    z-index: 2;
}


.color-connect-line {
    fill: none;

    stroke: #afa2c4;

    stroke-width: 5;

    stroke-linecap: round;
}


.color-connect-line.correct-line {
    stroke: #89b17e;
}


/* ==================================================
   COLOR GAME CARD
================================================== */

.color-question-card {
    width: min(650px, 100%);

    margin: 0 auto;

    padding:
        24px
        22px;

    background:
        linear-gradient(
            180deg,
            #fffefb,
            #faf7f2
        );

    border: 2px solid #e8e0d7;
    border-bottom: 6px solid #d8cdc0;
    border-radius: 25px;

    text-align: center;
}


.color-question-circle {
    width: 110px;
    height: 110px;

    margin:
        0
        auto
        18px;

    border:
        5px
        solid
        #fff;

    border-radius: 50%;

    box-shadow:
        0 7px 20px
        rgba(
            65,
            53,
            74,
            0.14
        );
}


/* ==================================================
   COLOR WORD BUTTONS
================================================== */

.color-word-grid {
    margin-top: 18px;

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

    gap: 11px;
}


.color-word-button {
    padding:
        13px
        14px;

    background:
        linear-gradient(
            180deg,
            #f7f3fa,
            #eee9f4
        );

    border: 2px solid #ded6e7;
    border-bottom: 5px solid #c9bed7;
    border-radius: 15px;

    color: #675f73;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
}


.color-word-button.correct {
    background: #eef6e8;
    border-color: #bfd1ae;
}


.color-word-button.wrong {
    background: #faecec;
    border-color: #ddb1b1;
}


/* ==================================================
   VIDEO EXTRA
================================================== */

.rainbow-video-card
.video-card-illustration {
    background:
        linear-gradient(
            135deg,
            #fff1e9,
            #f5effd,
            #eef8ff
        );
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {

    .lesson-parts-map {
        grid-template-columns: 1fr;
    }


    .color-choice-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .color-connect-board {
        gap: 35px;
    }

}


@media (max-width: 560px) {

    .color-lab-page {
        padding:
            38px
            14px
            42px;
    }


    .lab-rainbow-card {
        flex-direction: column;

        text-align: center;
    }


    .rainbow-word-card {
        align-items: flex-start;
    }


    .color-choice-grid {
        grid-template-columns: 1fr;
    }


    .color-word-grid {
        grid-template-columns: 1fr;
    }


    .color-learning-card {
        padding:
            20px
            15px
            24px;
    }


    .big-color-circle {
        width: 100px;
        height: 100px;
    }


    .color-connect-board {
        gap: 25px;
    }


    .color-connect-card {
        padding:
            10px;
    }


    .rainbow-preview {
        transform:
            scale(0.85);

        margin-top: -8px;
        margin-bottom: 5px;
    }

}