#hello-world
{
    min-height: 85vh;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    background:
        var(--pattern4),
        linear-gradient(90deg, rgba(9, 9, 9, 0.78) 0%, rgba(9, 9, 9, 0.46) 34%, rgba(9, 9, 9, 0.05) 66%, rgba(9, 9, 9, 0.24) 100%),
        linear-gradient(0deg, rgba(9, 9, 9, 0.82) 0%, rgba(9, 9, 9, 0) 42%),
        top / cover url("../images/helloworld.jpg");
    background-attachment: fixed;
}

#hello-world > .content
{
    align-items: flex-end;
    justify-content: space-between;
}

#hello-world .copy
{
    flex: 0 1 52rem;
    max-width: 52rem;
    z-index: 4;
}

#hello-world .copy h1
{
    font-size: clamp(4.2rem, 8vw, 7.5rem);
    line-height: 0.82;
}

#hello-world .copy h1 span
{
    display: block;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.25;
}

#hello-world .copy p
{
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.6;
}

#hello-world .tags
{
    margin: 0.7rem 0 0;
}

#hello-world .actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

#hello-world .steam:before
{
    content: "\f1b6";
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

#hello-world .trailer:before
{
    content: "\f04b";
}

#hello-world .shots
{
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    max-width: 34rem;
}

#hello-world .shots img
{
    width: 31%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid rgba(241, 224, 120, 0.35);
    opacity: 0.76;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#hello-world .shots img:hover
{
    opacity: 1;
    transform: translateY(-0.15rem);
}

#hello-world .media
{
    position: relative;
    z-index: 4;
    flex: 0 0 8rem;
    width: 8rem;
    height: 8rem;
    margin-right: clamp(0rem, 4vw, 3rem);
    margin-bottom: 0.5rem;
    animation: helloWorldFloat 6s ease-in-out infinite;
}

#hello-world .pixel
{
    position: relative;
    width: 4.9rem;
    height: 4.9rem;
    margin: 0 auto;
    background: linear-gradient(150deg, #282828, #111111);
    border: 1px solid rgb(40, 109, 152);
}

#hello-world .pixel:before,
#hello-world .pixel:after
{
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background: #EAF8FF;
}

#hello-world .pixel:before
{
    left: -1.5rem;
    top: 1.1rem;
    box-shadow: -0.7rem 0.8rem 0 rgba(118, 197, 234, 0.85);
    animation: helloWorldCharacterParticlePulse 2.4s steps(2, end) infinite;
}

#hello-world .pixel:after
{
    right: -1.2rem;
    bottom: 1rem;
    box-shadow: 0.8rem -0.9rem 0 rgba(229, 248, 255, 0.9);
    animation: helloWorldCharacterParticlePulse 2.4s 0.7s steps(2, end) infinite;
}

#hello-world .pixel-eyes
{
    position: absolute;
    top: 14px;
    left: 12px;
    display: flex;
    gap: 0.5rem;
    transform-origin: bottom center;
    animation: helloWorldEyeBlink 5.5s infinite;
}

#hello-world .pixel-eyes span
{
    width: 0.65rem;
    height: 1.0rem;
    background: var(--white);
}

#hello-world .pixel-shadow
{
    width: 4.4rem;
    height: 0.7rem;
    margin: 0.9rem auto 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    filter: blur(0.4rem);
}

#hello-world .particles
{
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    mix-blend-mode: screen;
}

#hello-world .particles span
{
    --pixel-size: 0.42rem;
    --sx: 0vw;
    --sy: 0vh;
    --move-delay: 0s;
    --move-duration: 8s;
    --blink-delay: 0s;
    --blink-duration: 3s;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--pixel-size);
    height: var(--pixel-size);
    animation: helloWorldParticleMove var(--move-duration) var(--move-delay) linear infinite;
}

#hello-world .particles span:before
{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(234, 248, 255, 0.95);
    box-shadow:
        0 0 0.35rem rgba(234, 248, 255, 0.9),
        0 0 1.15rem rgba(80, 170, 220, 0.95),
        0 0 2rem rgba(40, 109, 152, 0.55);
    opacity: 0;
    animation: helloWorldParticleBlink var(--blink-duration) var(--blink-delay) linear infinite;
}

#hello-world .particles span:nth-child(1) { --sx: -8vw; --sy: -1.5vh; --tx: -43vw; --ty: -8vh; --move-delay: -4.4s; --move-duration: 9.2s; --blink-delay: -1.7s; --blink-duration: 2.8s; }
#hello-world .particles span:nth-child(2) { --sx: 4vw; --sy: -7.8vh; --tx: 18vw; --ty: -35vh; --move-delay: -1.1s; --move-duration: 8.4s; --blink-delay: -0.4s; --blink-duration: 3.4s; }
#hello-world .particles span:nth-child(3) { --sx: -2.2vw; --sy: -8.6vh; --tx: -12vw; --ty: -47vh; --move-delay: -6.2s; --move-duration: 10.1s; --blink-delay: -2.9s; --blink-duration: 2.5s; }
#hello-world .particles span:nth-child(4) { --sx: 7.7vw; --sy: -2.3vh; --tx: 41vw; --ty: -12vh; --move-delay: -2.6s; --move-duration: 8.8s; --blink-delay: -1.1s; --blink-duration: 3.1s; }
#hello-world .particles span:nth-child(5) { --sx: -6.2vw; --sy: -6.2vh; --tx: -31vw; --ty: -31vh; --move-delay: -0.5s; --move-duration: 9.7s; --blink-delay: -3.3s; --blink-duration: 2.7s; }
#hello-world .particles span:nth-child(6) { --sx: 0.6vw; --sy: -8.8vh; --tx: 3vw; --ty: -44vh; --move-delay: -3.5s; --move-duration: 9s; --blink-delay: -0.8s; --blink-duration: 3.6s; }
#hello-world .particles span:nth-child(7) { --sx: -4.7vw; --sy: -8.9vh; --tx: -21vw; --ty: -40vh; --move-delay: -7.3s; --move-duration: 8.2s; --blink-delay: -2.1s; --blink-duration: 2.9s; }
#hello-world .particles span:nth-child(8) { --sx: 6.8vw; --sy: -5.6vh; --tx: 34vw; --ty: -28vh; --move-delay: -1.9s; --move-duration: 10.4s; --blink-delay: -4s; --blink-duration: 3.2s; }
#hello-world .particles span:nth-child(9) { --sx: -8.9vw; --sy: -4vw; --tx: -38vw; --ty: -17vh; --move-delay: -3.9s; --move-duration: 8.6s; --blink-delay: -0.2s; --blink-duration: 2.6s; }
#hello-world .particles span:nth-child(10) { --sx: 2.6vw; --sy: -9.1vh; --tx: 12vw; --ty: -42vh; --move-delay: -5.4s; --move-duration: 9.4s; --blink-delay: -2.5s; --blink-duration: 3.5s; }
#hello-world .particles span:nth-child(11) { --sx: -0.5vw; --sy: -8.2vh; --tx: -2vw; --ty: -33vh; --move-delay: -2.2s; --move-duration: 8.1s; --blink-delay: -1.4s; --blink-duration: 2.4s; }
#hello-world .particles span:nth-child(12) { --sx: 8.4vw; --sy: -4.4vh; --tx: 38vw; --ty: -20vh; --move-delay: -8.1s; --move-duration: 10s; --blink-delay: -3.7s; --blink-duration: 3s; }
#hello-world .particles span:nth-child(13) { --sx: -3.4vw; --sy: -6.5vh; --tx: -16vw; --ty: -34vh; --move-delay: -6.6s; --move-duration: 9.8s; --blink-delay: -1.9s; --blink-duration: 2.6s; }
#hello-world .particles span:nth-child(14) { --sx: 5.2vw; --sy: -4.2vh; --tx: 29vw; --ty: -23vh; --move-delay: -3s; --move-duration: 8.9s; --blink-delay: -2.8s; --blink-duration: 3.3s; }
#hello-world .particles span:nth-child(15) { --sx: -7vw; --sy: -3vh; --tx: -36vw; --ty: -15vh; --move-delay: -0.9s; --move-duration: 10.6s; --blink-delay: -0.7s; --blink-duration: 2.9s; }
#hello-world .particles span:nth-child(16) { --sx: 1.3vw; --sy: -7.4vh; --tx: 7vw; --ty: -39vh; --move-delay: -7.8s; --move-duration: 9.1s; --blink-delay: -3.2s; --blink-duration: 3.4s; }

html.lightbox-open,
body.lightbox-open
{
    overflow: hidden;
    overscroll-behavior: none;
}

#hello-world .lightbox
{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 4rem);
    background:
        var(--pattern4),
        rgba(9, 9, 9, 0.88);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

#hello-world .lightbox.visible
{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#hello-world .lightbox-frame
{
    width: min(72rem, 92vw);
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(241, 224, 120, 0.45);
    background: #000;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 1.5rem 5rem rgba(0, 0, 0, 0.7),
        0 0 4rem rgba(40, 109, 152, 0.35);
}

#hello-world .lightbox-frame iframe
{
    width: 100%;
    height: 100%;
    display: block;
}

#hello-world .lightbox-close
{
    position: absolute;
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    z-index: 1;
    width: 3rem;
    height: 3rem;
    color: var(--white);
    border: 1px solid rgba(241, 224, 120, 0.45);
    background: rgba(9, 9, 9, 0.75);
    font-size: 1.35rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#hello-world .lightbox-close:hover,
#hello-world .lightbox-close:focus-visible
{
    color: var(--yellow-2);
    border-color: var(--yellow-2);
    background: rgba(9, 9, 9, 0.95);
}

@keyframes helloWorldFloat
{
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.75rem); }
}

@keyframes helloWorldCharacterParticlePulse
{
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.65); }
}

@keyframes helloWorldEyeBlink
{
    0%, 91%, 94%, 97%, 100% { transform: scaleY(1); }
    92.5%, 95.5% { transform: scaleY(0.08); }
}

@keyframes helloWorldParticleMove
{
    0% { transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0.55); }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.85); }
}

@keyframes helloWorldParticleBlink
{
    0% { opacity: 0; }
    10% { opacity: 0.95; }
    18% { opacity: 0.25; }
    26% { opacity: 0.85; }
    68% { opacity: 0.25; }
    72% { opacity: 0.7; }
    80% { opacity: 0.72; }
    94% { opacity: 0.36; }
    100% { opacity: 0; }
}

@media screen and (max-width: 900px)
{
    #hello-world
    {
        min-height: auto;
        background-attachment: scroll;
    }

    #hello-world > .content
    {
        align-items: flex-start;
    }

    .copy
    {
        max-width: 42rem;
    }

    .copy h1
    {
        font-size: clamp(3.2rem, 12vw, 5rem);
        line-height: 0.8;
    }

    .media
    {
        margin-left: auto;
    }
}

@media screen and (max-width: 700px)
{
    #hello-world
    {
        padding: 5rem 1rem 6rem;
        background:
            var(--pattern4),
            linear-gradient(0deg, rgba(9, 9, 9, 0.9) 0%, rgba(9, 9, 9, 0.58) 52%, rgba(9, 9, 9, 0.72) 100%),
            center / cover url("../projects/32-Hello-World/Images/HW-05.jpg");
    }

    #hello-world > .content
    {
        gap: 2.5rem;
    }

    .copy h1
    {
        transform: scaleX(0.85);
    }

    .actions
    {
        align-items: flex-start;
        flex-direction: column;
    }

    .shots
    {
        max-width: 100%;
    }

    .media
    {
        width: 5.5rem;
        height: 5.5rem;
        margin: 0 auto;
    }

    .pixel
    {
        width: 4rem;
        height: 4rem;
    }

    .pixel-eyes
    {
        top: 1.25rem;
    }
}