* {
    box-sizing: border-box;
}

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

body {
    min-height: 100vh;
    overflow: hidden;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: white;

    background:
        linear-gradient(
            180deg,
            #061a35 0%,
            #0b3967 28%,
            #3479a8 62%,
            #a9d0e5 100%
        );
}


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

.sky {
    position: fixed;
    inset: 0;

    overflow: hidden;

    z-index: 0;
}

.sky::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 50% 10%,
            rgba(255,255,255,.18),
            transparent 40%
        ),
        linear-gradient(
            120deg,
            transparent 25%,
            rgba(255,255,255,.035),
            transparent 70%
        );

    pointer-events: none;
}


.sun {
    position: absolute;

    width: 600px;
    height: 600px;

    right: -220px;
    top: -310px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.35),
            rgba(255,255,255,.08) 35%,
            transparent 70%
        );

    filter: blur(7px);
}


/* ============================================================
   CLOUDS
   ============================================================ */

.cloud {
    position: absolute;

    width: 360px;
    height: 95px;

    border-radius: 50%;

    opacity: .48;

    filter: blur(10px);

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.8),
            rgba(255,255,255,.32) 48%,
            transparent 74%
        );
}

.cloud::before,
.cloud::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    background: rgba(255,255,255,.55);
}

.cloud::before {
    width: 150px;
    height: 120px;

    left: 45px;
    bottom: 8px;
}

.cloud::after {
    width: 190px;
    height: 125px;

    right: 35px;
    bottom: 0;
}

.cloud-a {
    top: 15%;
    left: -150px;

    animation:
        cloud-a 44s linear infinite;
}

.cloud-b {
    top: 36%;
    right: -160px;

    opacity: .34;

    animation:
        cloud-b 54s linear infinite;
}

.cloud-c {
    top: 60%;
    left: -200px;

    opacity: .30;

    transform: scale(.85);

    animation:
        cloud-a 62s linear infinite reverse;
}

.cloud-d {
    bottom: -65px;
    left: 50%;

    width: 700px;
    height: 170px;

    transform: translateX(-50%);

    opacity: .62;

    filter: blur(16px);
}

@keyframes cloud-a {
    from {
        margin-left: -100px;
    }

    to {
        margin-left: 125vw;
    }
}

@keyframes cloud-b {
    from {
        margin-right: -100px;
    }

    to {
        margin-right: 125vw;
    }
}


/* ============================================================
   SKYDIVERS
   ============================================================ */

.skydiver {
    position: absolute;

    width: 240px;
    height: 190px;

    pointer-events: none;
}


/* wing */

.wing {
    position: absolute;

    width: 225px;
    height: 52px;

    left: 7px;
    top: 4px;

    border-radius:
        60% 60% 38% 38% /
        90% 90% 35% 35%;

    background:
        linear-gradient(
            180deg,
            #f9fcff 0%,
            #bddcf0 45%,
            #4c91bc 100%
        );

    box-shadow:
        0 10px 22px rgba(0,0,0,.16),
        inset 0 -5px rgba(25,70,105,.25);
}

.wing::after {
    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    top: 8px;
    bottom: 8px;

    border-top: 1px solid rgba(255,255,255,.75);
    border-bottom: 1px solid rgba(255,255,255,.28);

    border-radius: 50%;
}


/* lines */

.lines {
    position: absolute;

    width: 140px;
    height: 75px;

    left: 50px;
    top: 40px;

    background:
        linear-gradient(
            72deg,
            transparent 48.5%,
            rgba(255,255,255,.7) 49%,
            transparent 50%
        ),
        linear-gradient(
            108deg,
            transparent 48.5%,
            rgba(255,255,255,.7) 49%,
            transparent 50%
        );
}


/* person */

.person {
    position: absolute;

    width: 17px;
    height: 42px;

    left: 111px;
    top: 91px;

    border-radius: 9px;

    background:
        linear-gradient(
            90deg,
            #101820,
            #607287,
            #101820
        );

    box-shadow:
        0 8px 13px rgba(0,0,0,.25);
}

.person::before {
    content: "";

    position: absolute;

    width: 18px;
    height: 18px;

    left: 0;
    top: -16px;

    border-radius: 50%;

    background: #d8ae89;
}

.person::after {
    content: "";

    position: absolute;

    width: 57px;
    height: 9px;

    left: -20px;
    top: 18px;

    border-radius: 50%;

    background: #253340;

    transform: rotate(-10deg);
}


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

.diver-main {
    width: 390px;
    height: 290px;

    left: -40px;
    top: 9%;

    transform: scale(1.15) rotate(-7deg);

    animation:
        main-flight 18s ease-in-out infinite;
}

.diver-main .wing {
    width: 360px;
    height: 78px;
}

.diver-main .lines {
    width: 205px;
    height: 105px;

    left: 78px;
    top: 59px;
}

.diver-main .person {
    left: 170px;
    top: 138px;

    transform: scale(1.2);
}

@keyframes main-flight {

    0% {
        transform:
            translate(-30px, 20px)
            rotate(-8deg)
            scale(1.15);
    }

    25% {
        transform:
            translate(18vw, 55px)
            rotate(-3deg)
            scale(1.15);
    }

    50% {
        transform:
            translate(37vw, -10px)
            rotate(3deg)
            scale(1.15);
    }

    75% {
        transform:
            translate(55vw, 55px)
            rotate(7deg)
            scale(1.15);
    }

    100% {
        transform:
            translate(78vw, 5px)
            rotate(10deg)
            scale(1.15);
    }
}


/* ============================================================
   SECONDARY DIVERS
   ============================================================ */

.diver-left {
    top: 51%;
    left: -130px;

    opacity: .42;

    transform: scale(.56) rotate(8deg);

    animation:
        left-flight 36s linear infinite;
}

@keyframes left-flight {

    from {
        transform:
            translate(-150px, 50px)
            scale(.56)
            rotate(8deg);
    }

    to {
        transform:
            translate(125vw, -170px)
            scale(.56)
            rotate(-7deg);
    }
}


.diver-right {
    top: 25%;
    right: -160px;

    opacity: .32;

    transform: scale(.43) rotate(-8deg);

    animation:
        right-flight 43s linear infinite;
}

@keyframes right-flight {

    from {
        transform:
            translate(160px, 90px)
            scale(.43)
            rotate(-8deg);
    }

    to {
        transform:
            translate(-125vw, 230px)
            scale(.43)
            rotate(7deg);
    }
}


.diver-far {
    top: 66%;
    left: 36%;

    opacity: .20;

    transform: scale(.25);

    animation:
        far-flight 29s ease-in-out infinite;
}

@keyframes far-flight {

    0% {
        transform:
            translate(0, 0)
            scale(.25);
    }

    50% {
        transform:
            translate(180px, -90px)
            scale(.25);
    }

    100% {
        transform:
            translate(360px, -20px)
            scale(.25);
    }
}


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

.page {
    position: relative;

    z-index: 10;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;
}


/* ============================================================
   AVATAR
   ============================================================ */

.avatar {
    position: absolute;

    top: 25px;
    left: 30px;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    overflow: hidden;

    border: 2px solid rgba(255,255,255,.8);

    box-shadow:
        0 8px 30px rgba(0,0,0,.25);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.avatar:hover {
    transform: scale(1.08);

    box-shadow:
        0 12px 38px rgba(0,0,0,.34);
}


/* ============================================================
   CARD
   ============================================================ */

.card {
    width: min(510px, 94vw);

    padding: 43px 42px 29px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(5,22,44,.76),
            rgba(10,55,89,.60)
        );

    border:
        1px solid rgba(255,255,255,.22);

    box-shadow:
        0 30px 90px rgba(0,0,0,.30),
        inset 0 1px rgba(255,255,255,.12);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    animation:
        card-in 1s ease both;
}

@keyframes card-in {

    from {
        opacity: 0;
        transform:
            translateY(30px)
            scale(.97);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


.caption {
    text-align: center;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .22em;

    color:
        rgba(255,255,255,.62);
}

h1 {
    margin: 12px 0 0;

    text-align: center;

    font-size:
        clamp(40px, 7vw, 58px);

    line-height: 1;

    letter-spacing: -.04em;
}

.line {
    width: 55px;
    height: 2px;

    margin: 22px auto;

    border-radius: 4px;

    background:
        rgba(255,255,255,.82);
}

.text {
    max-width: 390px;

    margin: 0 auto 28px;

    text-align: center;

    font-size: 15px;

    line-height: 1.65;

    color:
        rgba(255,255,255,.78);
}


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

.socials {
    display: flex;

    flex-direction: column;

    gap: 13px;
}

.social {
    display: flex;

    align-items: center;

    min-height: 78px;

    padding: 12px 17px;

    color: white;

    text-decoration: none;

    border-radius: 18px;

    border:
        1px solid rgba(255,255,255,.15);

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

    box-shadow:
        0 8px 25px rgba(0,0,0,.12);

    transition:
        transform .28s ease,
        background .28s ease,
        box-shadow .28s ease;
}

.social:hover {
    transform:
        translateY(-4px);

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

    box-shadow:
        0 15px 35px rgba(0,0,0,.22);
}

.icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;

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

    border-radius: 15px;

    font-size: 15px;

    font-weight: 800;

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

    border:
        1px solid rgba(255,255,255,.16);
}

.label {
    display: flex;

    flex-direction: column;

    gap: 3px;

    margin-left: 15px;
}

.label strong {
    font-size: 16px;
}

.label small {
    font-size: 12px;

    color:
        rgba(255,255,255,.52);
}

.arrow {
    margin-left: auto;

    font-size: 22px;

    opacity: .65;

    transition:
        transform .28s ease,
        opacity .28s ease;
}

.social:hover .arrow {
    transform:
        translate(3px, -3px);

    opacity: 1;
}


/* ============================================================
   SIGNATURE
   ============================================================ */

.signature {
    display: flex;

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

    gap: 8px;

    margin-top: 25px;

    color:
        rgba(255,255,255,.45);

    font-size: 11px;

    letter-spacing: .04em;
}

.signature span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #8be0b1;

    box-shadow:
        0 0 10px rgba(139,224,177,.65);
}


/* ============================================================
   BACK
   ============================================================ */

.back {
    margin-top: 22px;

    color:
        rgba(255,255,255,.65);

    text-decoration: none;

    font-size: 13px;

    transition:
        color .25s ease,
        transform .25s ease;
}

.back:hover {
    color: white;

    transform:
        translateX(-3px);
}


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

@media (max-width: 600px) {

    body {
        overflow: auto;
    }

    .page {
        min-height: 100svh;

        padding:
            90px 15px 30px;
    }

    .avatar {
        top: 18px;
        left: 18px;

        width: 54px;
        height: 54px;
    }

    .card {
        padding:
            32px 20px 25px;

        border-radius: 23px;
    }

    .caption {
        font-size: 8px;

        letter-spacing: .16em;
    }

    h1 {
        font-size: 43px;
    }

    .text {
        font-size: 14px;
    }

    .diver-main {
        left: -125px;
        top: 3%;

        opacity: .30;

        transform: scale(.65);
    }

    .diver-left,
    .diver-right {
        opacity: .18;
    }

    .cloud-c {
        opacity: .20;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }
}