* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    touch-action: manipulation;
}

body {
    min-height: 100dvh;
    font-family: Arial, Helvetica, sans-serif;

    background:
        linear-gradient(
            to bottom,
            #29b6f6 0%,
            #81d4fa 57%,
            #e8faff 100%
        );

    user-select: none;
    -webkit-user-select: none;
}

.screen {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;

    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}


/* =========================================================
   SKY
   ========================================================= */

.sun {
    position: absolute;
    top: 4%;
    right: 6%;

    width: 18vw;
    max-width: 100px;

    aspect-ratio: 1;

    border-radius: 50%;

    background: #ffeb3b;

    box-shadow:
        0 0 25px rgba(255, 235, 59, .9);
}

.cloud {
    position: absolute;

    font-size:
        clamp(
            3rem,
            15vw,
            6rem
        );

    opacity: .9;
}

.cloud-1 {
    top: 16%;
    left: -5%;
}

.cloud-2 {
    top: 41%;
    right: -7%;
}


/* =========================================================
   BIRTHDAY
   ========================================================= */

.birthday {
    position: relative;
    z-index: 5;

    width: 100%;

    padding:
        7vh
        15px
        0;

    text-align: center;
}

.birthday h1 {
    margin: 0;

    font-size:
        clamp(
            2.5rem,
            13vw,
            5rem
        );

    line-height: .9;

    color: #ff1744;

    text-shadow:
        3px 3px 0 #ffffff,
        6px 6px 0 #202020;

    transform:
        rotate(-2deg);
}

.name {
    margin-top: 18px;

    font-size:
        clamp(
            2rem,
            10vw,
            4rem
        );

    font-weight: 900;

    color: #202020;
}

.age {
    display: inline-block;

    font-size: 1.35em;

    color: #ffeb3b;

    text-shadow:
        2px 2px 0 #ff1744,
        4px 4px 0 #202020;
}


/* =========================================================
   AIRPLANE
   ========================================================= */

.plane-button {
    position: absolute;
    z-index: 30;

    left: 50%;
    top: 56%;

    width:
        min(
            92vw,
            470px
        );

    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;

    transform:
        translate(-50%, -50%)
        rotate(-3deg);

    filter:
        drop-shadow(
            0 12px 6px
            rgba(0, 0, 0, .28)
        );
}

.plane-button:active {
    scale: .95;
}

.plane-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}


/* =========================================================
   PROPELLER
   ========================================================= */

.propeller {
    transform-box: fill-box;
    transform-origin: center;

    animation:
        propellerIdle
        .28s
        linear
        infinite;
}

@keyframes propellerIdle {

    to {
        transform:
            rotate(360deg);
    }

}

.flying .propeller {
    animation-duration: .055s;
}


/* =========================================================
   TAP
   ========================================================= */

.tap-me {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 18%;

    text-align: center;

    font-size:
        clamp(
            1.5rem,
            7vw,
            2.5rem
        );

    font-weight: 900;

    color: #202020;

    animation:
        bounce
        1s
        infinite
        alternate;
}

@keyframes bounce {

    from {
        transform:
            translateY(0);
    }

    to {
        transform:
            translateY(-12px);
    }

}


/* =========================================================
   STAGE
   ========================================================= */

.stage {
    position: absolute;
    z-index: 10;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 14%;

    display: flex;

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

    background:
        linear-gradient(
            to bottom,
            #282828,
            #090909
        );

    border-top:
        6px solid #ff1744;

    font-size:
        clamp(
            1.7rem,
            8vw,
            3rem
        );
}


/* =========================================================
   FLIGHT
   ========================================================= */

.plane-button.flying {
    pointer-events: none;

    animation:
        airplaneFlight
        7s
        linear
        forwards;
}

@keyframes airplaneFlight {
0% { left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
15% { left: 30%; top: 60%; transform: translate(-50%, -50%) rotate(0deg) scale(.65); }
25% { left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(0deg) scale(.65); }
26.875% { left: calc(50% + min(8.1938vw, 6.2429vh)); top: calc(56% - min(0.807vw, 0.6149vh)); transform: translate(-50%, -50%) rotate(-11.25deg) scale(.65); }
28.75% { left: calc(50% + min(16.0727vw, 12.2459vh)); top: calc(56% - min(3.1971vw, 2.4359vh)); transform: translate(-50%, -50%) rotate(-22.5deg) scale(.65); }
30.625% { left: calc(50% + min(23.3339vw, 17.7782vh)); top: calc(56% - min(7.0783vw, 5.393vh)); transform: translate(-50%, -50%) rotate(-33.75deg) scale(.65); }
32.5% { left: calc(50% + min(29.6985vw, 22.6274vh)); top: calc(56% - min(12.3015vw, 9.3726vh)); transform: translate(-50%, -50%) rotate(-45deg) scale(.65); }
34.375% { left: calc(50% + min(34.9217vw, 26.607vh)); top: calc(56% - min(18.6661vw, 14.2218vh)); transform: translate(-50%, -50%) rotate(-56.25deg) scale(.65); }
36.25% { left: calc(50% + min(38.8029vw, 29.5641vh)); top: calc(56% - min(25.9273vw, 19.7541vh)); transform: translate(-50%, -50%) rotate(-67.5deg) scale(.65); }
38.125% { left: calc(50% + min(41.193vw, 31.3851vh)); top: calc(56% - min(33.8062vw, 25.7571vh)); transform: translate(-50%, -50%) rotate(-78.75deg) scale(.65); }
40% { left: calc(50% + min(42vw, 32vh)); top: calc(56% - min(42vw, 32vh)); transform: translate(-50%, -50%) rotate(-90deg) scale(.65); }
41.875% { left: calc(50% + min(41.193vw, 31.3851vh)); top: calc(56% - min(50.1938vw, 38.2429vh)); transform: translate(-50%, -50%) rotate(-101.25deg) scale(.65); }
43.75% { left: calc(50% + min(38.8029vw, 29.5641vh)); top: calc(56% - min(58.0727vw, 44.2459vh)); transform: translate(-50%, -50%) rotate(-112.5deg) scale(.65); }
45.625% { left: calc(50% + min(34.9217vw, 26.607vh)); top: calc(56% - min(65.3339vw, 49.7782vh)); transform: translate(-50%, -50%) rotate(-123.75deg) scale(.65); }
47.5% { left: calc(50% + min(29.6985vw, 22.6274vh)); top: calc(56% - min(71.6985vw, 54.6274vh)); transform: translate(-50%, -50%) rotate(-135deg) scale(.65); }
49.375% { left: calc(50% + min(23.3339vw, 17.7782vh)); top: calc(56% - min(76.9217vw, 58.607vh)); transform: translate(-50%, -50%) rotate(-146.25deg) scale(.65); }
51.25% { left: calc(50% + min(16.0727vw, 12.2459vh)); top: calc(56% - min(80.8029vw, 61.5641vh)); transform: translate(-50%, -50%) rotate(-157.5deg) scale(.65); }
53.125% { left: calc(50% + min(8.1938vw, 6.2429vh)); top: calc(56% - min(83.193vw, 63.3851vh)); transform: translate(-50%, -50%) rotate(-168.75deg) scale(.65); }
55% { left: calc(50% + min(0vw, 0vh)); top: calc(56% - min(84vw, 64vh)); transform: translate(-50%, -50%) rotate(-180deg) scale(.65); }
56.875% { left: calc(50% + max(-8.1938vw, -6.2429vh)); top: calc(56% - min(83.193vw, 63.3851vh)); transform: translate(-50%, -50%) rotate(-191.25deg) scale(.65); }
58.75% { left: calc(50% + max(-16.0727vw, -12.2459vh)); top: calc(56% - min(80.8029vw, 61.5641vh)); transform: translate(-50%, -50%) rotate(-202.5deg) scale(.65); }
60.625% { left: calc(50% + max(-23.3339vw, -17.7782vh)); top: calc(56% - min(76.9217vw, 58.607vh)); transform: translate(-50%, -50%) rotate(-213.75deg) scale(.65); }
62.5% { left: calc(50% + max(-29.6985vw, -22.6274vh)); top: calc(56% - min(71.6985vw, 54.6274vh)); transform: translate(-50%, -50%) rotate(-225deg) scale(.65); }
64.375% { left: calc(50% + max(-34.9217vw, -26.607vh)); top: calc(56% - min(65.3339vw, 49.7782vh)); transform: translate(-50%, -50%) rotate(-236.25deg) scale(.65); }
66.25% { left: calc(50% + max(-38.8029vw, -29.5641vh)); top: calc(56% - min(58.0727vw, 44.2459vh)); transform: translate(-50%, -50%) rotate(-247.5deg) scale(.65); }
68.125% { left: calc(50% + max(-41.193vw, -31.3851vh)); top: calc(56% - min(50.1938vw, 38.2429vh)); transform: translate(-50%, -50%) rotate(-258.75deg) scale(.65); }
70% { left: calc(50% + max(-42vw, -32vh)); top: calc(56% - min(42vw, 32vh)); transform: translate(-50%, -50%) rotate(-270deg) scale(.65); }
71.875% { left: calc(50% + max(-41.193vw, -31.3851vh)); top: calc(56% - min(33.8062vw, 25.7571vh)); transform: translate(-50%, -50%) rotate(-281.25deg) scale(.65); }
73.75% { left: calc(50% + max(-38.8029vw, -29.5641vh)); top: calc(56% - min(25.9273vw, 19.7541vh)); transform: translate(-50%, -50%) rotate(-292.5deg) scale(.65); }
75.625% { left: calc(50% + max(-34.9217vw, -26.607vh)); top: calc(56% - min(18.6661vw, 14.2218vh)); transform: translate(-50%, -50%) rotate(-303.75deg) scale(.65); }
77.5% { left: calc(50% + max(-29.6985vw, -22.6274vh)); top: calc(56% - min(12.3015vw, 9.3726vh)); transform: translate(-50%, -50%) rotate(-315deg) scale(.65); }
79.375% { left: calc(50% + max(-23.3339vw, -17.7782vh)); top: calc(56% - min(7.0783vw, 5.393vh)); transform: translate(-50%, -50%) rotate(-326.25deg) scale(.65); }
81.25% { left: calc(50% + max(-16.0727vw, -12.2459vh)); top: calc(56% - min(3.1971vw, 2.4359vh)); transform: translate(-50%, -50%) rotate(-337.5deg) scale(.65); }
83.125% { left: calc(50% + max(-8.1938vw, -6.2429vh)); top: calc(56% - min(0.807vw, 0.6149vh)); transform: translate(-50%, -50%) rotate(-348.75deg) scale(.65); }
85% { left: calc(50% + max(-0vw, -0vh)); top: calc(56% - min(0vw, 0vh)); transform: translate(-50%, -50%) rotate(-360deg) scale(.65); }
100% { left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(-363deg) scale(1); }
}

/* =========================================================
   ROCK FLASH
   ========================================================= */

.screen.rocking {
    animation:
        rockFlash
        .18s
        alternate
        10;
}

@keyframes rockFlash {

    from {
        filter:
            brightness(1)
            saturate(1);
    }

    to {
        filter:
            brightness(1.25)
            saturate(1.5);
    }

}


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

@media (max-height: 650px) {

    .birthday {
        padding-top: 4vh;
    }

    .plane-button {
        width:
            min(
                72vw,
                390px
            );
    }

    .tap-me {
        bottom: 16%;
    }

}


/* Image body, PHP name overlay, and independently animated side-view propeller. */
.aircraft { display: block; position: relative; width: 100%; }
.aircraft-body { display: block; width: 100%; height: auto; pointer-events: none; }
.fuselage-name {
    position: absolute; left: 33%; top: 41%; width: 26%; height: 12%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; white-space: nowrap; color: #171717;
    font-family: Arial, Helvetica, sans-serif; font-size: clamp(10px, 3.1vw, 17px);
    font-weight: 900; line-height: 1; text-shadow: 0 1px 0 #fff8;
}
.aircraft-propeller {
    position: absolute; left: 95%; top: 16%; width: 1.5%; height: 49%;
    border-radius: 50%; transform-origin: center;
    background: linear-gradient(to bottom, #ffeb00 0 10%, #222 10% 46%, #ddd 46% 54%, #222 54% 90%, #ffeb00 90%);
    box-shadow: 0 0 1px #111; animation: sidePropeller .16s linear infinite;
}
.flying .aircraft-propeller { animation-duration: .055s; }
@keyframes sidePropeller { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.06); } }
.plane-button:focus-visible { outline: 4px solid #ffeb00; outline-offset: 8px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
    .aircraft-propeller, .tap-me, .screen.rocking { animation: none; }
    .plane-button.flying { animation: none; }
}