html,
body {
    height: 100vh;
}

@property --spot-x {
    syntax: "<length>";
    inherits: false;
    initial-value: 50vw;
}

@property --spot-y {
    syntax: "<length>";
    inherits: false;
    initial-value: 10vh;
}

body {
    margin: 0;
    line-height: 1.45;
    font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background:
        radial-gradient(circle farthest-corner at top left, #C09C87 0%, rgba(225, 243, 97,0) 50%),
        radial-gradient(circle farthest-side at top right, #7F7F80 0%, rgba(181, 176, 177,0) 10%),
        radial-gradient(circle farthest-corner at bottom right, #AF6071 0%, rgba(204, 104, 119, 0) 33%),
        radial-gradient(circle farthest-corner at top right, #839890 0%, rgba(155, 221, 240,0) 50%),
        radial-gradient(ellipse at bottom center, #D3AB88 0%, rgba(254, 43, 0, 0) 80%);
    display: grid;
    place-items: center;
    /* padding-bottom: 10vh; */
}

html.js .page-reveal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #fff;
    background-image: 
        radial-gradient(circle farthest-corner at top left, #7F7F80 0%, rgba(225, 243, 97,0) 50%),
        radial-gradient(circle farthest-corner at bottom right, #C09C87 0%, rgba(204, 104, 119, 0) 33%),
        radial-gradient(circle farthest-corner at top right, #D3AB88 0%, rgba(155, 221, 240,0) 50%),
        radial-gradient(ellipse at bottom center, #AF6071 0%, rgba(254, 43, 0, 0) 80%);
    opacity: 1;
    transition: opacity 1.5s ease-in;
}

html:not(.js) .page-reveal {
    display: none;
}

html.js .page-reveal.is-fading {
    opacity: 0;
}

.experience-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.experience-overlay.is-active {
    opacity: 1;
}

.experience-overlay__spotlight {
    --spot-x: 50vw;
    --spot-y: 10vh;
    --spot-r: 260px;

    position: fixed;
    inset: 0;
    background:
        radial-gradient(
            circle at var(--spot-x) var(--spot-y),
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0) calc(var(--spot-r) * 0.55),
            rgba(0, 0, 0, 0.12) calc(var(--spot-r) * 0.67),
            rgba(0, 0, 0, 0.28) calc(var(--spot-r) * 0.82),
            rgba(0, 0, 0, 0.5) var(--spot-r),
            rgba(0, 0, 0, 0.5) 100%
        );
}

@media (prefers-reduced-motion: reduce) {
    html.js .page-reveal {
        transition-duration: 1ms;
    }
}

html.js .letter {
    font-weight: inherit;
    display: inline-block;
    transform: scale(1);
    cursor: arrow;
    user-select: none;
    -webkit-user-select: none;
    transition:
        font-weight 180ms ease-in-out,
        transform 180ms ease-in-out var(--letter-disappear-delay, 0ms),
        opacity 180ms ease-in-out,
        text-shadow 180ms ease-in-out,
        margin-left 180ms ease-in-out,
        margin-right 180ms ease-in-out;
}

html.js .letter.is-match {
    --letter-disappear-delay: 20ms;
    transform: scale(0);
    /* text-shadow: 0 0 24px rgba(227, 235, 237, 0.8); */
}

html.js .letter.is-hidden {
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

html.js .word {
    white-space: nowrap;
    cursor: arrow;
    user-select: none;
    -webkit-user-select: none;
}

/* Intro card */
.intro-card {
    padding-left: 10vw;
    width: 90%;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.intro-title {
    margin: 0 0 12px;
    font-weight: 400;
    letter-spacing: 0.2px;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    line-height: 1.1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.intro-subtitle {
    margin: 0 0 22px;
    font-weight: 400;
    font-size: clamp(0.85rem, 1.55vw, 1.35rem);
    line-height: 1.45;
    color: var(--text-1);
    /* max-width: 62ch; */
}

.intro-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.intro-buttons button {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-0);
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.2px;
    transition: filter 180ms ease, background-color 180ms ease, border-color 180ms ease;
    cursor: pointer;
}

.intro-pill {
    position: relative;
    padding: 16px 28px;
    font-size: clamp(1.05rem, 1.2vw, 1.15rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(14px) saturate(145%);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    will-change: transform;
    animation: intro-orbit-cw 18s linear infinite;
}

.intro-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.intro-pill--experience {
    border-color: rgba(126, 231, 255, 0.46);
    background: linear-gradient(135deg, rgba(126, 231, 255, 0.16), rgba(179, 155, 255, 0.1));
    animation-name: intro-orbit-cw;
    animation-duration: 20s;
}

.intro-pill--info {
    border-color: rgba(179, 155, 255, 0.46);
    background: linear-gradient(135deg, rgba(179, 155, 255, 0.14), rgba(126, 231, 255, 0.08));
    animation-name: intro-orbit-ccw;
    animation-duration: 22s;
}

.intro-buttons button:hover {
    filter: brightness(1.06);
}

.intro-buttons button:active {
    filter: brightness(1.02);
}

.intro-buttons button:focus-visible {
    outline: 3px solid rgba(126, 231, 255, 0.55);
    outline-offset: 3px;
}

@keyframes intro-orbit-cw {
    0% { transform: rotate(0deg) translateX(12px) rotate(0deg) rotate(0.6deg); }
    25% { transform: rotate(90deg) translateX(12px) rotate(-90deg) rotate(1.4deg); }
    50% { transform: rotate(180deg) translateX(12px) rotate(-180deg) rotate(-1deg); }
    75% { transform: rotate(270deg) translateX(12px) rotate(-270deg) rotate(0.8deg); }
    100% { transform: rotate(360deg) translateX(12px) rotate(-360deg) rotate(0.6deg); }
}

@keyframes intro-orbit-ccw {
    0% { transform: rotate(0deg) translateX(14px) rotate(0deg) rotate(-0.8deg); }
    25% { transform: rotate(-90deg) translateX(14px) rotate(90deg) rotate(-1.3deg); }
    50% { transform: rotate(-180deg) translateX(14px) rotate(180deg) rotate(1deg); }
    75% { transform: rotate(-270deg) translateX(14px) rotate(270deg) rotate(-0.7deg); }
    100% { transform: rotate(-360deg) translateX(14px) rotate(360deg) rotate(-0.8deg); }
}

@media (prefers-reduced-motion: reduce) {
    .intro-pill {
        animation: none;
        transform: none;
        will-change: auto;
    }
}

.egg{
    font-size: min(1.5rem, 1.5vw);

    color: white;
    position: fixed;
    bottom: 2vh;
}