:root {
    --contact-color: #3a3a3a;
    --contact-size: clamp(0.85rem, 2.4vw, 1.05rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    overflow: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Rainbow backdrop. Image is the source of truth; the gradient below it
   keeps the look intact while the PNG loads (or if it fails). */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #f2c200;
    background-image:
        url("assets/colormix_background.png"),
        linear-gradient(105deg,
            #d5252f 0%,
            #ef7d22 18%,
            #f6c31c 34%,
            #f2e412 48%,
            #8cc63e 62%,
            #17a44a 74%,
            #0f8fa8 86%,
            #2452a3 100%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    animation: backdrop-in 900ms ease-out both;
}

.stage {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 6vh, 3.5rem);
    padding: 6vh 5vw;
}

.logo {
    display: block;
    width: min(596px, 70vw);
    height: auto;
    max-height: 55vh;
    object-fit: contain;
    animation: rise-in 900ms 120ms ease-out both;
}

.info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    animation: rise-in 900ms 320ms ease-out both;
}

.contact,
.social {
    margin: 0;
    font-size: var(--contact-size);
    letter-spacing: 0.01em;
    color: var(--contact-color);
    text-align: center;
}

.social {
    font-size: calc(var(--contact-size) * 0.92);
}

.social__icon {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.22em;
    margin: 0 0.15em 0 0.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

.social__icon-dot {
    fill: currentColor;
    stroke: none;
}

.contact__label {
    margin-right: 0.35em;
}

.contact__link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(58, 58, 58, 0.35);
    padding-bottom: 1px;
    transition: color 180ms ease, border-color 180ms ease;
}

.contact__link:hover,
.contact__link:focus-visible {
    color: #000;
    border-bottom-color: #000;
}

.contact__link:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.55);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Original layout pins the contact line near the bottom of the viewport.
   Reproduce that on screens tall enough to carry it. */
@media (min-height: 520px) {
    .stage {
        justify-content: center;
    }

    .info {
        position: fixed;
        left: 50%;
        top: 90%;
        transform: translate(-50%, -50%);
        width: max-content;
        max-width: 90vw;
    }
}

@media (max-width: 480px) {
    .logo {
        width: 82vw;
    }
}

@keyframes backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The pinned contact line is already transformed; animate opacity only. */
@media (min-height: 520px) {
    @keyframes rise-in-contact {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .info {
        animation-name: rise-in-contact;
    }
}

@media (prefers-reduced-motion: reduce) {
    .backdrop,
    .logo,
    .info {
        animation: none;
    }
}