* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    color: #702936;

    overflow-x: hidden;
}


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

.page {
    min-height: 100vh;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 255, 255, 0.9),
            transparent 25%
        ),

        radial-gradient(
            circle at 85% 60%,
            rgba(255, 255, 255, 0.7),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(255, 210, 200, 0.5),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #ffe7ea 0%,
            #fff1ef 48%,
            #ffe0d4 100%
        );
}


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

header {
    height: 105px;

    padding: 20px 7%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    z-index: 20;
}


/* =========================================
   BRAND
========================================= */

.brand {
    display: flex;

    align-items: center;

    gap: 15px;
}

.big-strawberry {
    font-size: 58px;

    animation:
        strawberryFloat 3s ease-in-out infinite;

    filter:
        drop-shadow(
            0 8px 10px
            rgba(150, 50, 70, 0.15)
        );
}

.brand h1 {
    margin: 0;

    font-size: 35px;

    color: #c92e4b;

    letter-spacing: -1px;
}

.brand p {
    margin: 3px 0 0;

    font-size: 14px;

    color: #a95864;
}


/* =========================================
   API STATUS
========================================= */

.status {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 11px 20px;

    background:
        rgba(255, 255, 255, 0.78);

    border: 1px solid
        rgba(255, 255, 255, 0.9);

    border-radius: 30px;

    color: #a54e5c;

    font-size: 14px;

    box-shadow:
        0 8px 25px
        rgba(160, 60, 80, 0.08);

    backdrop-filter:
        blur(10px);
}

.status-dot {
    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #52b968;

    box-shadow:
        0 0 12px
        rgba(82, 185, 104, 0.8);
}


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

main {
    position: relative;

    z-index: 5;

    padding-top: 35px;
}


/* =========================================
   TITLE
========================================= */

.title {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 17px;
}

.title h2 {
    margin: 0;

    color: #762b3a;

    font-size: 42px;

    line-height: 1.2;

    text-align: center;
}

.title span {
    font-size: 30px;
}

.subtitle {
    text-align: center;

    margin: 10px 0 0;

    padding: 0 20px;

    font-size: 17px;

    color: #b25866;
}


/* =========================================
   ROAD SECTION
========================================= */

.road-section {
    width: 100%;

    margin-top: 55px;
}


/* =========================================
   ROAD LABEL
========================================= */

.road-label {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin-bottom: 25px;

    color: #a94d5b;

    font-size: 14px;

    letter-spacing: 5px;

    font-weight: bold;
}

.road-label span {
    width: 40px;

    height: 2px;

    background: #df8290;

    border-radius: 5px;
}


/* =========================================
   ROAD
========================================= */

.road {
    width: 100%;

    height: 180px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            180deg,
            #f49ca7 0%,
            #ee858f 50%,
            #e97884 100%
        );

    border-top:
        5px solid #ffc8ce;

    border-bottom:
        5px solid #ffc8ce;

    box-shadow:

        0 15px 35px
        rgba(160, 50, 70, 0.20),

        inset 0 10px 20px
        rgba(255, 255, 255, 0.25),

        inset 0 -10px 20px
        rgba(150, 40, 60, 0.08);
}


/* =========================================
   ROAD LIGHT
========================================= */

.road::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 14px;

    height: 3px;

    background:
        repeating-linear-gradient(
            90deg,
            white 0,
            white 30px,
            transparent 30px,
            transparent 55px
        );

    opacity: 0.8;

    z-index: 8;
}


/* =========================================
   ROAD BOTTOM LINE
========================================= */

.road::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 14px;

    height: 3px;

    background:
        repeating-linear-gradient(
            90deg,
            white 0,
            white 30px,
            transparent 30px,
            transparent 55px
        );

    opacity: 0.8;

    z-index: 8;
}


/* =========================================
   MARQUEE
========================================= */

.marquee {
    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    transform:
        translateY(-50%);

    height: 100px;

    overflow: hidden;

    display: flex;

    align-items: center;

    z-index: 4;
}


/* =========================================
   TRACK
========================================= */

.track {
    display: flex;

    width: max-content;

    align-items: center;

    gap: 0;

    flex-shrink: 0;

    will-change:
        transform;
}


/* =========================================
   WORD GROUP
========================================= */

.word-group {
    display: flex;

    align-items: center;

    gap: 25px;

    flex-shrink: 0;

    padding-right: 25px;
}


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

.word {
    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 150px;

    min-height: 60px;

    padding: 17px 30px;

    background:
        linear-gradient(
            180deg,
            #fffafa 0%,
            #fff1f2 100%
        );

    border:
        2px solid #ffc2c8;

    border-radius: 50px;

    color: #7e2e3d;

    font-size: 21px;

    font-weight: bold;

    white-space: nowrap;

    box-shadow:

        0 8px 20px
        rgba(120, 40, 60, 0.15),

        inset 0 2px 4px
        rgba(255, 255, 255, 0.8);

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


/* =========================================
   STRAWBERRY BEFORE WORD
========================================= */

.word::before {
    content: "🍓";

    font-size: 22px;

    line-height: 1;
}


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

.word:hover {
    transform:
        translateY(-5px)
        scale(1.05);

    box-shadow:

        0 14px 28px
        rgba(120, 40, 60, 0.22),

        inset 0 2px 4px
        rgba(255, 255, 255, 0.8);
}


/* =========================================
   MULTIPLE WORDS
========================================= */

.multiple-words {
    animation-timing-function:
        linear;

    animation-iteration-count:
        infinite;
}


/* =========================================
   SINGLE WORD
========================================= */

.single-word {
    animation-timing-function:
        linear;

    animation-iteration-count:
        infinite;
}


/* =========================================
   INFINITE LOOP
========================================= */

@keyframes infiniteMove {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }
}


/* =========================================
   SINGLE WORD MOVEMENT
========================================= */

@keyframes singleWordMove {

    from {
        transform:
            translateX(100vw);
    }

    to {
        transform:
            translateX(-100%);
    }
}


/* =========================================
   CURRENT WORD CARD
========================================= */

.current-card {
    width: 520px;

    max-width: 90%;

    margin: 55px auto 0;

    padding: 22px 35px;

    display: flex;

    align-items: center;

    gap: 20px;

    background:
        rgba(255, 255, 255, 0.86);

    border:
        1px solid
        rgba(255, 255, 255, 0.95);

    border-radius: 35px;

    box-shadow:
        0 20px 55px
        rgba(150, 50, 70, 0.12);

    backdrop-filter:
        blur(12px);
}


/* =========================================
   CURRENT ICON
========================================= */

.current-icon {
    font-size: 55px;

    flex-shrink: 0;

    animation:
        strawberryPulse 2s ease-in-out infinite;
}


/* =========================================
   CURRENT LABEL
========================================= */

.current-label {
    color: #b26772;

    font-size: 14px;

    margin-bottom: 4px;
}


/* =========================================
   CURRENT WORD
========================================= */

.current-word {
    font-size: 31px;

    font-weight: bold;

    color: #c42e49;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;

    word-break: break-word;
}


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

.bottom-text {
    width: fit-content;

    max-width: 90%;

    margin: 35px auto;

    padding: 14px 30px;

    border-radius: 30px;

    background:
        rgba(255, 255, 255, 0.75);

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

    color: #ad5965;

    font-size: 15px;

    text-align: center;

    box-shadow:
        0 8px 25px
        rgba(150, 50, 70, 0.06);
}


/* =========================================
   FLOATING STRAWBERRIES
========================================= */

.floating {
    position: absolute;

    z-index: 1;

    opacity: 0.18;

    font-size: 85px;

    pointer-events: none;

    user-select: none;

    animation:
        strawberryFloat 5s ease-in-out infinite;
}


/* LEFT TOP */

.berry-1 {
    left: 4%;

    top: 28%;
}


/* RIGHT TOP */

.berry-2 {
    right: 5%;

    top: 20%;

    animation-delay: 1s;
}


/* LEFT BOTTOM */

.berry-3 {
    left: 10%;

    bottom: 10%;

    animation-delay: 2s;
}


/* RIGHT BOTTOM */

.berry-4 {
    right: 10%;

    bottom: 15%;

    animation-delay: 3s;
}


/* =========================================
   FLOWERS
========================================= */

.flower {
    position: absolute;

    font-size: 55px;

    opacity: 0.35;

    z-index: 1;

    pointer-events: none;

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


.flower-1 {
    left: 2%;

    bottom: 25%;
}


.flower-2 {
    right: 3%;

    bottom: 28%;

    animation-delay: 1s;
}


.flower-3 {
    right: 18%;

    top: 33%;

    animation-delay: 2s;
}


/* =========================================
   ANIMATION — FLOAT
========================================= */

@keyframes strawberryFloat {

    0%,
    100% {

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

    50% {

        transform:
            translateY(-15px)
            rotate(3deg);
    }
}


/* =========================================
   ANIMATION — PULSE
========================================= */

@keyframes strawberryPulse {

    0%,
    100% {

        transform:
            scale(1);
    }

    50% {

        transform:
            scale(1.12);
    }
}


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

@media (max-width: 700px) {

    header {

        height: 85px;

        padding:
            15px 20px;
    }


    .brand {

        gap: 10px;
    }


    .brand h1 {

        font-size: 26px;
    }


    .brand p {

        display: none;
    }


    .big-strawberry {

        font-size: 42px;
    }


    .status {

        display: none;
    }


    main {

        padding-top: 25px;
    }


    .title {

        gap: 10px;

        padding:
            0 15px;
    }


    .title h2 {

        font-size: 29px;
    }


    .title span {

        font-size: 22px;
    }


    .subtitle {

        font-size: 14px;

        line-height: 1.5;
    }


    .road-section {

        margin-top: 40px;
    }


    .road-label {

        font-size: 10px;

        letter-spacing: 2px;

        gap: 8px;
    }


    .road-label span {

        width: 20px;
    }


    .road {

        height: 150px;
    }


    .marquee {

        height: 80px;
    }


    .word {

        min-width: 130px;

        min-height: 52px;

        padding:
            13px 20px;

        font-size: 17px;
    }


    .word::before {

        font-size: 18px;
    }


    .word-group {

        gap: 15px;

        padding-right: 15px;
    }


    .current-card {

        width: 90%;

        margin-top: 40px;

        padding:
            18px 22px;

        gap: 15px;
    }


    .current-icon {

        font-size: 42px;
    }


    .current-label {

        font-size: 12px;
    }


    .current-word {

        font-size: 25px;
    }


    .bottom-text {

        font-size: 13px;

        padding:
            12px 20px;
    }


    .floating {

        font-size: 55px;
    }


    .flower {

        font-size: 40px;
    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 420px) {

    .brand h1 {

        font-size: 23px;
    }


    .big-strawberry {

        font-size: 36px;
    }


    .title h2 {

        font-size: 25px;
    }


    .title span {

        font-size: 18px;
    }


    .road {

        height: 135px;
    }


    .word {

        font-size: 15px;

        min-width: 115px;

        padding:
            12px 17px;
    }


    .current-word {

        font-size: 22px;
    }

}