/* ==========================================================
   LESSON 18 — CLOTHES
   SAME DESIGN SYSTEM AS THE OTHER LESSONS
========================================================== */

@import url("lesson-5.css");
@import url("lesson-17.css");


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

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


/* ==========================================================
   LESSON COLOURS
========================================================== */

.clothes-lesson-body .chapter-number,
.clothes-lesson-body .screen-label {
    color: #7b6b9e;
}


/* ==========================================================
   FLOATING CLOTHES
========================================================== */

.clothes-lesson-body .floating-weather-one {
    top: 17%;
    left: 5%;

    transform: rotate(-7deg);
}

.clothes-lesson-body .floating-weather-two {
    top: 44%;
    right: 5%;

    transform: rotate(7deg);
}

.clothes-lesson-body .floating-weather-three {
    bottom: 12%;
    left: 8%;

    transform: rotate(-5deg);
}


/* ==========================================================
   MAIN ICONS
========================================================== */

.clothes-lesson-body .story-book-icon,
.clothes-lesson-body .parts-heading-icon,
.clothes-lesson-body .active-part-icon,
.clothes-lesson-body .practice-heading-icon {
    background:
        linear-gradient(
            145deg,
            #f1eaff,
            #fff4dc
        );

    border-color: #ddd3ed;
    border-bottom-color: #c8b9dd;
}


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

.clothes-intro-page .story-book-icon {
    background:
        linear-gradient(
            145deg,
            #f1eaff,
            #e4d8f4
        );

    border-color:
        rgba(128, 102, 168, 0.16);

    box-shadow:
        0 15px 30px
        rgba(103, 77, 141, 0.09);
}

.clothes-intro-page .mission-icon {
    background:
        linear-gradient(
            145deg,
            #fff4d9,
            #f6e6b8
        );
}


/* ==========================================================
   OVERALL PROGRESS
========================================================== */

.clothes-lesson-body .weather-overall-fill {
    background:
        linear-gradient(
            90deg,
            #b7a5db,
            #efca73,
            #94cce4
        );
}


/* ==========================================================
   PART ICONS
========================================================== */

.clothes-lesson-body
.weather-progress-icon:nth-child(1).completed {
    background:
        linear-gradient(
            145deg,
            #eee8fa,
            #e2d7f2
        );

    border-color: #d2c2e5;
}

.clothes-lesson-body
.weather-progress-icon:nth-child(2).completed {
    background:
        linear-gradient(
            145deg,
            #fff2dc,
            #f3e4bd
        );

    border-color: #e4d3a4;
}

.clothes-lesson-body
.weather-progress-icon:nth-child(3).completed {
    background:
        linear-gradient(
            145deg,
            #e7f6ff,
            #d7ebf6
        );

    border-color: #b9d8e8;
}

.clothes-lesson-body #seasonsIcon {
    font-size: 29px;
    font-weight: 700;
}


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

.clothes-lesson-body
.weather-part-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #f0eafd,
            #fbf9ff
        );

    border-color: #e0d6ef;
    border-bottom-color: #c7b8dd;
}

.clothes-lesson-body
.weather-part-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #fff3df,
            #fffaf2
        );

    border-color: #efe1bd;
    border-bottom-color: #dcc89a;
}

.clothes-lesson-body
.weather-part-card:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #e8f6fc,
            #f7fcff
        );

    border-color: #d4e8f0;
    border-bottom-color: #bbd3de;
}


/* ==========================================================
   CLOTHES WORD PROGRESS
========================================================== */

.clothes-lesson-body
.weather-part-progress-fill {
    background:
        linear-gradient(
            90deg,
            #b7a5db,
            #efcf7d
        );
}


/* ==========================================================
   CLOTHES WORD CARD
========================================================== */

.clothes-word-demo {
    background:
        linear-gradient(
            180deg,
            #efe9ff 0%,
            #fff9f1 70%,
            #ded4ef 70%,
            #cbbce3 100%
        );

    border-color: #ddd3eb;
    border-bottom-color: #c6b6dc;
}

.clothes-word-demo .clothes-demo-icon {
    left: 50%;
    right: auto;
    top: 50%;

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

    font-size: 104px;

    filter:
        drop-shadow(
            0 10px 10px
            rgba(89, 70, 118, 0.15)
        );
}

.clothes-word-demo .weather-demo-cloud {
    display: none;
}


/* ==========================================================
   ONE OR TWO STAGE
========================================================== */

.clothes-grammar-stage {
    background:
        linear-gradient(
            180deg,
            #eee8fa 0%,
            #fff9ef 70%,
            #d9cfea 70%,
            #c8b9df 100%
        ) !important;

    border-color: #ddd3eb;
    border-bottom-color: #c5b5db;
}

.clothes-grammar-stage .season-sky {
    background:
        radial-gradient(
            circle at 25% 25%,
            rgba(255, 255, 255, 0.75),
            transparent 34%
        );
}

.clothes-grammar-stage .season-sun {
    width: 76px;
    height: 76px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #ffffff;

    color: #78689a;

    border: 3px solid #d8ccea;

    box-shadow:
        0 8px 16px
        rgba(81, 63, 111, 0.12);

    font-size: 34px;
    font-weight: 700;
}

.clothes-grammar-stage
.clothes-grammar-icon {
    bottom: 42px;

    font-size: 150px;

    filter:
        drop-shadow(
            0 12px 12px
            rgba(77, 59, 103, 0.12)
        );
}

.clothes-grammar-stage
.season-ground {
    background:
        linear-gradient(
            180deg,
            #d9cfea,
            #c6b6dc
        );
}


/* ==========================================================
   GRAMMAR INFORMATION
========================================================== */

.clothes-lesson-body
.season-info-card {
    background:
        linear-gradient(
            180deg,
            #fffefd,
            #f7f3fc
        );

    border-color: #e4dced;
    border-bottom-color: #cec0de;
}

.clothes-lesson-body
#grammarTypeLabel {
    display: inline-flex;

    padding: 6px 12px;

    border-radius: 999px;

    background: #eee8f7;

    color: #76668f;
}


/* ==========================================================
   GRAMMAR BUTTONS
========================================================== */

.clothes-lesson-body
.season-choice-button.active {
    background:
        linear-gradient(
            145deg,
            #eee7fa,
            #fff6df
        );

    border-color: #d8cae8;
    border-bottom-color: #bdabd4;

    color: #655875;
}


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

.clothes-lesson-body
.weather-rule-card {
    background:
        linear-gradient(
            145deg,
            #f0eafa,
            #fffafd
        );

    border-color: #dfd5eb;
    border-bottom-color: #c8b9da;
}

.clothes-lesson-body
.answer-rule-card {
    background:
        linear-gradient(
            145deg,
            #fff3dd,
            #fffaf1
        );

    border-color: #ede0bd;
    border-bottom-color: #dac799;
}


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

.clothes-lesson-body
.weather-question-scene {
    background:
        linear-gradient(
            145deg,
            #eee7fa,
            #fff5d8
        );

    border-color: #ddd1e8;
}


/* ==========================================================
   MAGIC WARDROBE
========================================================== */

.clothes-wardrobe-scene {
    background:
        linear-gradient(
            180deg,
            #eee8fa 0%,
            #fff8ee 68%,
            #d9cfea 68%,
            #c7b8df 100%
        );

    border-color: #ddd3eb;
    border-bottom-color: #c3b2d8;
}

.clothes-wardrobe-scene
.clothes-character-head {
    left: 50%;
    right: auto;
    top: 48px;

    transform: translateX(-50%);

    font-size: 88px;

    z-index: 9;
}

.clothes-wardrobe-scene
.clothes-character-outfit {
    inset: auto;

    left: 50%;
    top: 150px;

    width: 190px;
    height: 170px;

    transform: translateX(-50%);

    display: grid;
    place-items: center;

    overflow: visible;

    font-size: 135px;
    line-height: 1;

    z-index: 8;

    filter:
        drop-shadow(
            0 12px 12px
            rgba(71, 53, 98, 0.13)
        );
}

.clothes-wardrobe-scene
.station-cloud {
    color: #ffffff;

    font-size: 34px;

    opacity: 0.9;
}

.clothes-wardrobe-scene
.station-house,
.clothes-wardrobe-scene
.station-tree {
    font-size: 92px;
}


/* ==========================================================
   WARDROBE REPORT
========================================================== */

.clothes-lesson-body
.weather-report-card {
    background:
        linear-gradient(
            145deg,
            #f1ebfa,
            #fff9ee
        );

    border-color: #e0d5eb;
    border-bottom-color: #c9b9dc;
}


/* ==========================================================
   WARDROBE BUTTONS
========================================================== */

.clothes-lesson-body
.weather-control-button.active {
    background:
        linear-gradient(
            145deg,
            #eee7fa,
            #fff2d4
        );

    border-color: #d4c6e4;
    border-bottom-color: #bba8d2;

    color: #665879;
}


/* ==========================================================
   CLOTHES CHALLENGE
========================================================== */

.clothes-lesson-body
.reporter-weather-scene {
    background:
        linear-gradient(
            145deg,
            #eee7fa,
            #fff5d6
        );

    border-color: #ddd1e8;
}


/* ==========================================================
   ONE OR TWO SORTER
========================================================== */

.clothes-sort-buttons {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    max-width: 480px;

    margin: 0 auto;
}

.clothes-sort-buttons
.season-machine-button:first-child {
    background:
        linear-gradient(
            145deg,
            #eee8fa,
            #faf7ff
        );

    border-color: #d9cde8;
    border-bottom-color: #c0aed5;
}

.clothes-sort-buttons
.season-machine-button:last-child {
    background:
        linear-gradient(
            145deg,
            #fff2dc,
            #fffaf1
        );

    border-color: #ebddba;
    border-bottom-color: #d5c28f;
}

.clothes-sort-buttons
.season-machine-button.correct {
    background: #eaf3e3;

    border-color: #c4d5b8;
    border-bottom-color: #aabd97;
}

.clothes-sort-buttons
.season-machine-button.wrong {
    background: #f5e3df;

    border-color: #dcbcb4;
    border-bottom-color: #c99f96;
}


/* ==========================================================
   PRACTICE
========================================================== */

.clothes-lesson-body
.practice-heading-icon {
    background:
        linear-gradient(
            145deg,
            #eee7fa,
            #fff3d5
        );

    border-color: #dbd0e6;
    border-bottom-color: #c2b1d5;
}

.clothes-lesson-body
.active-practice-level {
    background:
        linear-gradient(
            145deg,
            #f0eafd,
            #ffffff
        );

    border-color: #d9ceE8;
    border-bottom-color: #bfafd3;
}


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

.clothes-lesson-body
.weather-question-visual {
    background:
        linear-gradient(
            145deg,
            #eee7fa,
            #fff6d8
        );

    border-color: #dcd1e7;
}


/* ==========================================================
   FINISH
========================================================== */

.clothes-lesson-body
.finish-main-icon {
    background:
        linear-gradient(
            145deg,
            #eee7fa,
            #fff4d0
        );
}

.clothes-lesson-body
.finish-badge {
    background:
        linear-gradient(
            145deg,
            #eee8fa,
            #fff6d8
        );
}


/* ==========================================================
   SPARKLES AND CONFETTI
========================================================== */

.lesson-sparkle,
.lesson-confetti {
    position: fixed;

    pointer-events: none;

    z-index: 10000;

    animation:
        clothesSparkleAway
        2.1s ease forwards;
}

.lesson-confetti {
    top: -30px !important;

    animation:
        clothesConfettiFall
        2.2s ease-in forwards;
}


@keyframes clothesSparkleAway {

    from {
        opacity: 1;

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

    to {
        opacity: 0;

        transform:
            translateY(-85px)
            rotate(120deg)
            scale(0.35);
    }
}


@keyframes clothesConfettiFall {

    from {
        opacity: 1;

        transform:
            translateY(0)
            rotate(0deg);
    }

    to {
        opacity: 0;

        transform:
            translateY(110vh)
            rotate(620deg);
    }
}


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

@media (max-width: 850px) {

    .clothes-sort-buttons {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 620px) {

    .clothes-word-demo
    .clothes-demo-icon {
        font-size: 86px;
    }

    .clothes-grammar-stage
    .clothes-grammar-icon {
        font-size: 118px;
    }

    .clothes-wardrobe-scene
    .clothes-character-outfit {
        top: 135px;

        font-size: 110px;
    }

    .clothes-wardrobe-scene
    .clothes-character-head {
        top: 42px;

        font-size: 72px;
    }

    .clothes-wardrobe-scene
    .station-house,
    .clothes-wardrobe-scene
    .station-tree {
        font-size: 72px;
    }
}