/* Copyright (c) 2025 Melwyn Francis Carlo */

.kannada-script {
    font-family: "Noto Sans Kannada", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.devanagari-script {
    font-family: "Noto Sans Devanagari", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

#hero-section {
    position: relative;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hero-section-color-top-half {
    position: absolute;
    width: 100%;
    height: 75%;
    top: 0;
    background-color: #8fd4ef;
}

#hero-section-color-bottom-half {
    position: absolute;
    width: 100%;
    height: 25%;
    top: 75%;
    background-color: #568f56;
}

#hero-section-overlay-container {
    position: relative;
    overflow: hidden;
    padding: 0;
    height: 100%;
}

@media only screen and (orientation: landscape) {
    [id|="hero-image"] {
        width: 100%;
        height: 100%;
    }

    @keyframes anim-hero-mini-me-head-move-up-down {
        from {
            transform: translateY(0%);
        }
        to {
            transform: translateY(1.5%);
        }
    }

    @keyframes anim-hero-me-head-move-up-down {
        from {
            transform: translateY(0%);
        }
        to {
            transform: translateY(2%);
        }
    }

    @keyframes anim-hero-me-body-move-up-down {
        from {
            transform: translateY(0%);
        }
        to {
            transform: translateY(-2%);
        }
    }

    @keyframes anim-hero-me-head-bobble {
        0% {
            transform: translateY(0%) rotate(0deg) scale(100%);
        }
        25% {
            transform: translateY(1.5%) rotate(-15deg) scale(104%);
        }
        50% {
            transform: translateY(3%) rotate(15deg) scale(108%);
        }
        75% {
            transform: translateY(4.5%) rotate(-15deg) scale(112%);
        }
        100% {
            transform: translateY(6%) rotate(15deg) scale(116%);
        }
    }
}

@media only screen and (orientation: portrait) {
    [id|="hero-image"] {
        margin: 0 !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: 90% !important;
        height: 90% !important;
    }

    @keyframes anim-hero-mini-me-head-move-up-down {
        from {
            transform: translate(-50%, -50%);
        }
        to {
            transform: translate(-50%, -48.5%);
        }
    }

    @keyframes anim-hero-me-head-move-up-down {
        from {
            transform: translate(-50%, -50%);
        }
        to {
            transform: translate(-50%, -48%);
        }
    }

    @keyframes anim-hero-me-body-move-up-down {
        from {
            transform: translate(-50%, -50%);
        }
        to {
            transform: translate(-50%, -52%);
        }
    }

    @keyframes anim-hero-me-head-bobble {
        0% {
            transform: translate(-50%, -50%) rotate(0deg) scale(100%);
        }
        25% {
            transform: translate(-50%, -48.5%) rotate(-15deg) scale(104%);
        }
        50% {
            transform: translate(-50%, -47%) rotate(15deg) scale(108%);
        }
        75% {
            transform: translate(-50%, -45.5%) rotate(-15deg) scale(112%);
        }
        100% {
            transform: translate(-50%, -44%) rotate(15deg) scale(116%);
        }
    }
}

[id|="hero-image"] {
    position: absolute;
}

.hero-mini-me-head-move-up-down {
    animation: anim-hero-mini-me-head-move-up-down 0.15s alternate infinite;
    animation-timing-function: ease-in-out;
}

.hero-me-head-move-up-down {
    animation: anim-hero-me-head-move-up-down 0.35s alternate 8;
    animation-timing-function: ease-in-out;
}

.hero-me-body-move-up-down {
    animation: anim-hero-me-body-move-up-down 0.35s alternate 8;
    animation-timing-function: ease-in-out;
}

.hero-me-head-bobble {
    animation: anim-hero-me-head-bobble 1.5s alternate 2;
    animation-timing-function: ease-in-out;
}

#hero-image-me-head {
    transform-origin: 52.849742% 30.155438%;
}

#info-section {
    background-color: #813142;
}

#hero-section-overlay-container {
    box-shadow: 0px 1vw 2vw 1vw #222222;
}

#tunnel-drive-game, #apple-doktor-game {
    box-shadow: 0px 0px 0.4vw 0.2vw #222222;
}

#apple-doktor-game-container {
    background-color: #ebd687;
}

#tunnel-drive-game-container {
    background-color: #111111;
}

@media only screen and (orientation: landscape) {
    #hero-section-overlay-container, #tunnel-drive-game, #apple-doktor-game {
        max-height: 75vh;
        width: auto;
    }
    .card {
        max-width: 50vw;
    }
}

#hero-section-overlay-container, #tunnel-drive-game, [id|="tdg"]:not(#tdg-score, #tdg-321, #tdg-inside-wall-separator-1), #apple-doktor-game, [id|="adg"] {
    aspect-ratio: 2;
}

[id|="tdg"]:not(#tdg-score, #tdg-321), [id|="adg"] {
    background-repeat: no-repeat;
    background-size: contain;
}

#tunnel-drive-game, #tdg-outside-wall, #apple-doktor-game {
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
}

#tunnel-drive-game {
    position: relative;
}

#tdg-outside-wall {
    position: absolute;
    background-image: url("../images/tunnel_drive_thru/outside_wall.png");
}

#apple-doktor-game {
    position: relative;
    background-image: url("../images/apple_doktor/landscape.png");
}

[id|="tdg"]:not(#tdg-score, #tdg-321), [id|="adg"] {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

[id|="tdg-inside-wall"] {
    position: absolute;
}

#tdg-inside-wall {
    background-image: url("../images/tunnel_drive_thru/inside_wall.png");
}

#tdg-inside-wall-separator-8 {
    background-image: url("../images/tunnel_drive_thru/inside_wall_separator_7.png");
}

#tdg-inside-wall-separator-7 {
    background-image: url("../images/tunnel_drive_thru/inside_wall_separator_7.png");
}

#tdg-inside-wall-separator-6 {
    background-image: url("../images/tunnel_drive_thru/inside_wall_separator_6.png");
}

#tdg-inside-wall-separator-5 {
    background-image: url("../images/tunnel_drive_thru/inside_wall_separator_5.png");
}

#tdg-inside-wall-separator-4 {
    background-image: url("../images/tunnel_drive_thru/inside_wall_separator_4.png");
}

#tdg-inside-wall-separator-3 {
    background-image: url("../images/tunnel_drive_thru/inside_wall_separator_3.png");
}

#tdg-inside-wall-separator-2 {
    background-image: url("../images/tunnel_drive_thru/inside_wall_separator_2.png");
}

#tdg-inside-wall-separator-1 {
    aspect-ratio: 1;
    top: -50%;
    background-image: url("../images/tunnel_drive_thru/inside_wall_separator_1.png");
}

@keyframes anim-tdg-inside-wall-separator-1-scale-updown {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.275);
    }
}
@keyframes anim-tdg-inside-wall-separator-2-scale-updown {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.29);
    }
}
@keyframes anim-tdg-inside-wall-separator-3-scale-updown {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.275);
    }
}
@keyframes anim-tdg-inside-wall-separator-4-scale-updown {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.32);
    }
}
@keyframes anim-tdg-inside-wall-separator-5-scale-updown {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.3);
    }
}
@keyframes anim-tdg-inside-wall-separator-6-scale-updown {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.4);
    }
}
@keyframes anim-tdg-inside-wall-separator-7-scale-updown {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.535);
    }
}

.tdg-inside-wall-separator-1-scale-updown {
    animation: anim-tdg-inside-wall-separator-1-scale-updown 2s linear infinite;
}
.tdg-inside-wall-separator-2-scale-updown {
    animation: anim-tdg-inside-wall-separator-2-scale-updown 2s linear infinite;
}
.tdg-inside-wall-separator-3-scale-updown {
    animation: anim-tdg-inside-wall-separator-3-scale-updown 2s linear infinite;
}
.tdg-inside-wall-separator-4-scale-updown {
    animation: anim-tdg-inside-wall-separator-4-scale-updown 2s linear infinite;
}
.tdg-inside-wall-separator-5-scale-updown {
    animation: anim-tdg-inside-wall-separator-5-scale-updown 2s linear infinite;
}
.tdg-inside-wall-separator-6-scale-updown {
    animation: anim-tdg-inside-wall-separator-6-scale-updown 2s linear infinite;
}
.tdg-inside-wall-separator-7-scale-updown {
    animation: anim-tdg-inside-wall-separator-7-scale-updown 2s linear infinite;
}

#tdg-barrier {
    position: relative;
    background-image: url("../images/tunnel_drive_thru/game_start_barrier.png");
}

#tdg-entrance {
    position: relative;
    pointer-events: none;
    background-image: url("../images/tunnel_drive_thru/entrance.png");
}

@media only screen and (orientation: landscape) {
    #tdg-score, #tdg-321 {
        
    }
}

#tdg-score, #tdg-321 {
    display: none;
    position: absolute;
    top: calc(75vh * 2 * 0.04);
    text-align: center;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: red;
    background-color: #444444;
    border: 5px solid #222222;
    box-shadow: 0px 0px 10px 10px rgba(25,25,25);
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

#tdg-score {
    left: calc(92.5% - (70vw * 0.12));
    width: calc(70vw * 0.12);
    font-size: calc(70vw * 0.03);
}

#tdg-321 {
    left: calc(70vw * 0.055);
    width: calc(70vw * 0.12);
    font-size: calc(70vw * 0.05);
}

@keyframes anim-tdg-car-initial-motion-half-up-1 {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-1%);
    }
}

@keyframes anim-tdg-321-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.tdg-321-fade-out {
    animation-name: anim-tdg-321-fade-out;
    animation-duration: 2s;
}

#tdg-how-to {
    position: absolute;
    background-image: url("../images/tunnel_drive_thru/how_to.png");
}

#tdg-play-again {
    display: none;
    position: absolute;
    background-image: url("../images/tunnel_drive_thru/play_again.png");
}

#tdg-car {
    position: absolute;
    background-image: url("../images/tunnel_drive_thru/car_0.png");
    touch-action: none;
}

@keyframes anim-tdg-car-initial-motion-half-up-1 {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-2%);
    }
}

@keyframes anim-tdg-car-initial-motion-half-up-2 {
    from {
        transform: translateY(2%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes anim-tdg-car-initial-motion-up {
    from {
        transform: translateY(2%);
    }
    to {
        transform: translateY(-2%);
    }
}

@keyframes anim-tdg-car-initial-motion-down {
    from {
        transform: translateY(-2%);
    }
    to {
        transform: translateY(2%);
    }
}

[class|="tdg-car-initial-motion"], #tdg-321 {
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

.tdg-car-initial-motion-half-up-1 {
    animation-name: anim-tdg-car-initial-motion-half-up-1;
    animation-duration: 0.5s;
}

.tdg-car-initial-motion-half-up-2 {
    animation-name: anim-tdg-car-initial-motion-half-up-2;
    animation-duration: 0.5s;
}

.tdg-car-initial-motion-up {
    animation-name: anim-tdg-car-initial-motion-up;
    animation-duration: 1s;
}

.tdg-car-initial-motion-down {
    animation-name: anim-tdg-car-initial-motion-down;
    animation-duration: 1s;
}

#adg-doktor {
    position: absolute;
    background-image: url("../images/apple_doktor/doktor_calm.png");
}

#adg-how-to {
    position: absolute;
    background-image: url("../images/apple_doktor/how_to.png");
}

#apple {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 5%;
    top: 5%;
    cursor: grab;
    width: 8%;
    touch-action: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

#apple:active {
    cursor: grabbing;
}