/* ========================================
   OziTV V2
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #202747;

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(255, 218, 77, .23),
            transparent 27%
        ),

        radial-gradient(
            circle at 85% 25%,
            rgba(37, 190, 176, .17),
            transparent 30%
        ),

        #fffdf3;

}


button {
    font-family: inherit;
}


.page {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}


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

.topbar {

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

    margin:
        25px auto 0;

    padding:
        18px 25px;

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

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

    border-radius: 30px;

    box-shadow:
        0 15px 45px
        rgba(42,62,80,.10);

    backdrop-filter:
        blur(12px);

}


.brand {

    display: flex;
    align-items: center;

    gap: 14px;

}


.brand-star {

    width: 60px;
    height: 60px;

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

    border-radius: 50%;

    background:
        #25aaa4;

    color:
        #ffd64c;

    font-size: 30px;

}


.brand-text {

    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 31px;

}


.brand-text strong {

    color:
        #202747;

}


.brand-text span {

    color:
        #25aaa4;

    font-weight:
        900;

}


.menu-button {

    width: 57px;
    height: 57px;

    border:
        none;

    border-radius:
        50%;

    background:
        #ffefb5;

    color:
        #202747;

    font-size:
        27px;

    cursor:
        pointer;

}


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

.hero {

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

    min-height:
        660px;

    margin:
        25px auto;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        44px;

    background:

        radial-gradient(
            circle at 85% 75%,
            rgba(255,210,71,.25),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #fff6d6 0%,
            #fffefa 55%,
            #e8faf5 100%
        );

    box-shadow:
        0 25px 65px
        rgba(38,57,75,.11);

}


/* ========================================
   LEFT CONTENT
======================================== */

.content {

    position:
        relative;

    z-index:
        5;

    padding:
        80px 30px 55px 70px;

}


.mini-title {

    display:
        inline-block;

    padding:
        11px 18px;

    border-radius:
        18px;

    background:
        white;

    color:
        #7059d7;

    font-size:
        17px;

    font-weight:
        900;

    box-shadow:
        0 8px 25px
        rgba(40,50,80,.08);

}


h1 {

    margin-top:
        25px;

    font-size:
        clamp(50px,6vw,80px);

    line-height:
        .98;

    letter-spacing:
        -2px;

    color:
        #202747;

}


h1 span {

    display:
        block;

    color:
        #25aaa4;

}


.content p {

    max-width:
        480px;

    margin-top:
        25px;

    color:
        #687184;

    font-size:
        20px;

    line-height:
        1.65;

}


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

.buttons {

    margin-top:
        33px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}


.btn {

    border:
        none;

    padding:
        15px 21px;

    border-radius:
        18px;

    font-size:
        16px;

    font-weight:
        900;

    cursor:
        pointer;

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

}


.btn:hover {

    transform:
        translateY(-4px)
        scale(1.02);

}


.btn:active {

    transform:
        scale(.96);

}


.primary {

    background:
        #25b4a9;

    color:
        white;

    box-shadow:
        0 10px 25px
        rgba(37,180,169,.25);

}


.yellow {

    background:
        #ffd352;

    color:
        #503713;

}


.orange {

    background:
        #ff7353;

    color:
        white;

}


.purple {

    background:
        #7664dc;

    color:
        white;

}


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

.status-box {

    margin-top:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        12px 17px;

    border-radius:
        17px;

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

    color:
        #60706f;

    font-weight:
        800;

}


.status-dot {

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        #35c4a7;

    box-shadow:
        0 0 0 5px
        rgba(53,196,167,.15);

}


/* ========================================
   OZI AREA
======================================== */

.ozi-area {

    min-height:
        660px;

    position:
        relative;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    padding-bottom:
        40px;

}


.ozi-character {

    width:
        min(440px,87%);

    position:
        relative;

    cursor:
        pointer;

    transform-origin:
        center bottom;

    animation:
        oziFloat
        3.3s
        ease-in-out
        infinite;

}


.ozi-character img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    position:
        relative;

    z-index:
        2;

    object-fit:
        contain;

    user-select:
        none;

    filter:
        drop-shadow(
            0 25px 18px
            rgba(0,0,0,.13)
        );

    transition:
        opacity .08s ease,
        transform .15s ease;

}


/* ========================================
   SHADOW
======================================== */

.ozi-shadow {

    position:
        absolute;

    width:
        65%;

    height:
        27px;

    left:
        50%;

    bottom:
        4px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(32,43,54,.18);

    filter:
        blur(9px);

    z-index:
        1;

    animation:
        shadowPulse
        3.3s
        ease-in-out
        infinite;

}


/* ========================================
   SPEECH
======================================== */

.speech-bubble {

    position:
        absolute;

    top:
        70px;

    left:
        5px;

    z-index:
        10;

    max-width:
        310px;

    padding:
        18px 24px;

    border:
        4px solid
        rgba(37,170,164,.15);

    border-radius:
        25px;

    background:
        white;

    color:
        #6251c6;

    font-size:
        20px;

    font-weight:
        900;

    line-height:
        1.35;

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

    transition:
        opacity .15s ease,
        transform .15s ease;

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

}


.speech-bubble::after {

    content:
        "";

    position:
        absolute;

    right:
        30px;

    bottom:
        -17px;

    border-left:
        15px solid transparent;

    border-right:
        5px solid transparent;

    border-top:
        18px solid white;

}


/* ========================================
   DECORATIONS
======================================== */

.decor {

    position:
        absolute;

    pointer-events:
        none;

}


.star {

    color:
        #ffb650;

    animation:
        rotateStar
        9s linear infinite;

}


.star1 {

    top:
        85px;

    right:
        55px;

    font-size:
        42px;

}


.star2 {

    top:
        220px;

    left:
        30px;

    color:
        #30c5bd;

    font-size:
        25px;

    animation-duration:
        13s;

}


.star3 {

    right:
        80px;

    bottom:
        120px;

    color:
        #7a66dd;

    font-size:
        30px;

}


.circle {

    width:
        170px;

    height:
        170px;

    border-radius:
        50%;

    background:
        rgba(255,210,71,.16);

}


.circle1 {

    right:
        -45px;

    bottom:
        25px;

}


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

.categories {

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

    margin:
        0 auto 50px;

    display:
        grid;

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

    gap:
        18px;

}


.category {

    min-height:
        112px;

    padding:
        20px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    text-align:
        left;

    border:
        none;

    border-radius:
        26px;

    background:
        white;

    cursor:
        pointer;

    box-shadow:
        0 15px 35px
        rgba(34,54,70,.08);

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

}


.category:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 20px 40px
        rgba(34,54,70,.13);

}


.category-icon {

    width:
        65px;

    height:
        65px;

    flex:
        0 0 65px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        19px;

    background:
        #fff4c6;

    font-size:
        31px;

}


.category strong {

    display:
        block;

    color:
        #252d4c;

    font-size:
        21px;

}


.category span {

    display:
        block;

    margin-top:
        5px;

    color:
        #7d8593;

    font-size:
        15px;

}


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

@keyframes oziFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-14px);

    }

}


@keyframes shadowPulse {

    0%,
    100% {

        transform:
            translateX(-50%)
            scale(1);

        opacity:
            .8;

    }

    50% {

        transform:
            translateX(-50%)
            scale(.84);

        opacity:
            .48;

    }

}


@keyframes bubbleFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-2deg);

    }

    50% {

        transform:
            translateY(-6px)
            rotate(1deg);

    }

}


@keyframes rotateStar {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* ========================================
   JUMP
======================================== */

.ozi-character.jump {

    animation:
        oziJump
        .8s
        ease !important;

}


@keyframes oziJump {

    0% {

        transform:
            translateY(0)
            scale(1);

    }

    28% {

        transform:
            translateY(-80px)
            scale(1.06);

    }

    52% {

        transform:
            translateY(0)
            scale(.94,1.07);

    }

    72% {

        transform:
            translateY(-18px)
            scale(1.02);

    }

    100% {

        transform:
            translateY(0)
            scale(1);

    }

}


/* ========================================
   HAPPY
======================================== */

.ozi-character.happy {

    animation:
        happyJump
        .9s
        ease !important;

}


@keyframes happyJump {

    0% {

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

    }

    25% {

        transform:
            translateY(-65px)
            rotate(-7deg)
            scale(1.06);

    }

    50% {

        transform:
            translateY(-40px)
            rotate(7deg)
            scale(1.08);

    }

    75% {

        transform:
            translateY(-15px)
            rotate(-4deg);

    }

    100% {

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

    }

}


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

@media
(max-width: 850px) {

    .topbar {

        width:
            calc(100% - 24px);

        margin-top:
            12px;

    }


    .brand-text {

        font-size:
            23px;

    }


    .brand-star {

        width:
            48px;

        height:
            48px;

    }


    .menu-button {

        width:
            48px;

        height:
            48px;

    }


    .hero {

        width:
            calc(100% - 24px);

        grid-template-columns:
            1fr;

        min-height:
            auto;

    }


    .content {

        padding:
            45px 25px 10px;

        text-align:
            center;

    }


    .content p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .buttons {

        justify-content:
            center;

    }


    .status-box {

        margin-bottom:
            10px;

    }


    .ozi-area {

        min-height:
            520px;

        padding-bottom:
            25px;

    }


    .ozi-character {

        width:
            min(360px,88%);

    }


    .speech-bubble {

        top:
            25px;

        left:
            50%;

        width:
            78%;

        max-width:
            350px;

        text-align:
            center;

        transform:
            translateX(-50%);

    }


    .speech-bubble::after {

        right:
            50%;

    }


    .categories {

        width:
            calc(100% - 24px);

        grid-template-columns:
            1fr;

    }

}