:root {
    --bg: #070707;
    --line: #1e1e1e;
    --yellow: #e8ff00;
    --yellow-hover: #f1ff4d;
    --purple: #6b45c8;
    --purple-hover: #7c58dc;
    --cream: #fbfbe6;
    --dark: #141414;

    --header-h: 88px;
    --bg-ratio: 2.7176; /* 1424 / 524 */

    --font-display: var(--family-alumni-sans, "Alumni Sans"), "Arial Narrow", sans-serif;
    --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html,
body {
    height: 100%;
}

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: #fff;
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    cursor: pointer; /* whole page is a link (see links.js) */
}

img {
    display: block;
    max-width: 100%;
}

/* ---------- Full-page backdrop (blurred copy of the artwork) ---------- */

.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(28px) brightness(.55) saturate(1.25);
    transform: scale(1.2);
    animation: drift 30s ease-in-out infinite alternate;
}

/* vignette so the edges and the header area stay calm */
.backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 70% at 50% 55%, transparent 40%, rgba(7, 7, 7, .7) 100%),
        linear-gradient(to bottom, rgba(7, 7, 7, .5) 0, transparent 25%, transparent 75%, rgba(7, 7, 7, .6) 100%);
}

/* ---------- Header ---------- */

.header {
    flex: none;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(7, 7, 7, .55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    position: relative;
    z-index: 5;
}

.header__logo img {
    width: 200px;
    height: auto;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0) scale(.98);
}

.btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.btn--sm {
    height: 52px;
    padding: 0 16px;
    font-size: 16px;
}

.btn--yellow {
    background: var(--yellow);
    color: var(--dark);
}

.btn--yellow:hover {
    background: var(--yellow-hover);
    box-shadow: 0 10px 32px -6px rgba(232, 255, 0, .55);
}

.btn--purple {
    background: var(--purple);
    color: #fff;
}

.btn--purple:hover {
    background: var(--purple-hover);
    box-shadow: 0 10px 32px -6px rgba(124, 88, 220, .7);
}

.btn__icon {
    width: 1.35em;
    height: 1.35em;
    flex: none;
    transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}

.btn:hover .btn__icon--ball {
    transform: rotate(180deg);
}

.btn:hover .btn__icon--dice {
    transform: rotate(-20deg) scale(1.1);
}

/* ---------- Hero ---------- */

.hero {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Stage keeps the artwork proportions and fits the free space */
.stage {
    position: relative;
    container-type: inline-size;
    width: min(100%, calc((100dvh - var(--header-h) - 32px) * var(--bg-ratio)), 1600px);
    aspect-ratio: 1424 / 524;
}

.scene {
    position: absolute;
    inset: 0;
}

.scene__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transform: translate3d(var(--px, 0), var(--py, 0), 0);
    transition: transform .6s ease-out;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 8%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 8%, #000 86%, transparent 100%);
    mask-composite: intersect;
}

.scene__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 60%;
    animation: kenburns 24s ease-in-out infinite alternate;
    transition: filter .12s ease;
}

.scene.is-flash .scene__bg img {
    filter: brightness(1.35) saturate(1.15);
}

/* Lightning glow — sits over the bolt in the artwork */
.scene__flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 10% 45% at 50% 55%, rgba(240, 255, 120, .9), transparent 70%),
        radial-gradient(ellipse 30% 60% at 50% 55%, rgba(170, 120, 255, .45), transparent 75%);
    mix-blend-mode: screen;
    opacity: 0;
}

.scene.is-flash .scene__flash {
    animation: flash .55s ease-out;
}

.scene__sparks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero__head {
    position: absolute;
    top: 2cqi;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    text-transform: uppercase;
    color: var(--cream);
    text-shadow: 0 4px 30px rgba(0, 0, 0, .65);
    transform: translate3d(var(--px, 0), var(--py, 0), 0);
    transition: transform .6s ease-out;
}

.hero__title {
    margin: 0;
    font-size: 7.1cqi;
    font-weight: 800;
    line-height: .95;
    letter-spacing: .01em;
    animation: rise .9s cubic-bezier(.2, .8, .2, 1) both .1s;
}

.hero__subtitle {
    margin: .6cqi 0 0;
    font-size: 3.5cqi;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .02em;
    animation: rise .9s cubic-bezier(.2, .8, .2, 1) both .3s;
}

.hero__actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1cqi;
    display: flex;
    justify-content: center;
    gap: 2.8cqi;
}

.btn--lg {
    width: 21.7cqi;
    height: clamp(40px, 3.85cqi, 60px);
    font-size: clamp(13px, 1.15cqi, 18px);
    animation: rise .8s cubic-bezier(.2, .8, .2, 1) both;
}

.btn--lg:nth-child(1) { animation-delay: .5s; }
.btn--lg:nth-child(2) { animation-delay: .6s; }

/* ---------- Short screens ---------- */

@media (max-height: 560px) and (min-width: 768px) {
    :root { --header-h: 64px; }
    .btn--sm { height: 44px; font-size: 14px; }
    .header__logo img { width: 160px; }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    :root { --header-h: 64px; }

    .header {
        padding: 0 16px 0 0;
    }

    .header__logo {
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--header-h);
        border-right: 1px solid var(--line);
    }

    .header__logo img {
        width: 40px;
        height: 40px;
    }

    .btn--sm {
        height: 40px;
        font-size: 14px;
    }

    .hide-mobile {
        display: none;
    }
}

/* ---------- Mobile + portrait tablets: stacked hero ---------- */

@media (max-width: 767px), (orientation: portrait) and (max-width: 1024px) {
    .hero {
        padding: 0;
        align-items: stretch;
    }

    .stage {
        width: 100%;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
    }

    /* artwork grows with free height, but not so much that only the bolt is left */
    .scene {
        position: relative;
        inset: auto;
        flex: 1 1 auto;
        max-height: 85cqi;
        min-height: 0;
    }

    @media (min-width: 768px) {
        .scene { max-height: 65cqi; }
    }

    .scene__bg {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 78%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 78%, transparent 100%);
        -webkit-mask-composite: source-over;
        mask-composite: add;
    }

    .scene__bg img {
        object-position: 50% 50%;
    }

    .hero__head {
        top: 6cqi;
        padding: 0 12px;
    }

    .hero__title {
        font-size: 9.8cqi;
    }

    .hero__subtitle {
        margin-top: 1.4cqi;
        font-size: 6.4cqi;
    }

    .hero__actions {
        position: static;
        flex: none;
        margin-top: auto;
        gap: 4.2cqi;
        padding: 4cqi 4.2cqi calc(4.2cqi + env(safe-area-inset-bottom, 0px));
    }

    .btn--lg {
        flex: 1 1 0;
        width: auto;
        height: clamp(44px, 11.5cqi, 72px);
        font-size: clamp(15px, 4.6cqi, 26px);
    }
}

/* ---------- Phones: dedicated vertical artwork fills the screen ---------- */

@media (max-width: 767px) {
    .backdrop img {
        filter: none;
        /* pinned to the top: on short screens only the floor gets cropped, not the space under the title */
        object-position: 50% 0;
        transform-origin: 50% 0;
        animation: kenburns-mobile 20s ease-in-out infinite alternate;
    }

    .backdrop::after {
        background: linear-gradient(to bottom, rgba(7, 7, 7, .35) 0, transparent 22%, transparent 72%, rgba(7, 7, 7, .5) 100%);
    }

    .header {
        background: rgba(7, 7, 7, .35);
    }

    .scene {
        max-height: none;
    }

    .scene__bg {
        display: none;
    }

    .hero__actions {
        padding-bottom: calc(4.2cqi + 100px + env(safe-area-inset-bottom, 0px));
    }

    @media (max-height: 600px) {
        .hero__actions {
            padding-bottom: calc(4.2cqi + 20px + env(safe-area-inset-bottom, 0px));
        }
    }

    /* glow over the bolt of the mobile artwork */
    .scene__flash {
        background:
            radial-gradient(ellipse 16% 32% at 54% 30%, rgba(240, 255, 120, .8), transparent 70%),
            radial-gradient(ellipse 45% 45% at 54% 32%, rgba(170, 120, 255, .4), transparent 75%);
    }
}

/* ---------- Animations ---------- */

@keyframes kenburns {
    from { transform: scale(1.04) translate3d(-.6%, 0, 0); }
    to   { transform: scale(1.12) translate3d(.6%, -1%, 0); }
}

@keyframes drift {
    from { transform: scale(1.2) translate3d(-2%, 0, 0); }
    to   { transform: scale(1.3) translate3d(2%, -2%, 0); }
}

@keyframes kenburns-mobile {
    from { transform: scale(1); }
    to   { transform: scale(1.06) translate3d(0, -1%, 0); }
}

@keyframes flash {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    18%  { opacity: .2; }
    28%  { opacity: .85; }
    100% { opacity: 0; }
}

@keyframes rise {
    /* `translate`, not `transform` — so hover transforms keep working */
    from { opacity: 0; translate: 0 24px; }
    to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
    .scene__sparks { display: none; }
}