/* ========================================================================== 
   ARC GAMES — Hero
   Home-only presentation and Aurora background.
   ========================================================================== */

.arc-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: auto;
    overflow: hidden;

    background: var(--arc-bg-dark);
}


/* --------------------------------------------------------------------------
   Aurora background
   Effect values correspond to the approved React Bits reference.
   They are component-local variables, not global Design System tokens.
   -------------------------------------------------------------------------- */

.arc-hero__aurora {
    --arc-aurora-color-1: #ffffff;
    --arc-aurora-color-2: #00ddf9;
    --arc-aurora-color-3: #037e93;
    --arc-aurora-blend: 0.73;
    --arc-aurora-amplitude: 1;
    --arc-aurora-speed: 0.6;

    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;
    overflow: hidden;

    pointer-events: none;
}

.arc-hero__aurora canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Static visual fallback when WebGL2 is unavailable. */
.arc-hero__aurora--fallback {
    background:
        radial-gradient(
            circle at 18% 28%,
            color-mix(in srgb, var(--arc-aurora-color-1) 60%, transparent) 0,
            transparent 34%
        ),
        radial-gradient(
            circle at 52% 24%,
            color-mix(in srgb, var(--arc-aurora-color-2) 68%, transparent) 0,
            transparent 38%
        ),
        radial-gradient(
            circle at 82% 36%,
            color-mix(in srgb, var(--arc-aurora-color-3) 72%, transparent) 0,
            transparent 42%
        );
}


/* --------------------------------------------------------------------------
   Content readability layer
   -------------------------------------------------------------------------- */

.arc-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--arc-bg-dark) 14%, transparent) 0%,
        color-mix(in srgb, var(--arc-bg-dark) 38%, transparent) 58%,
        color-mix(in srgb, var(--arc-bg-dark) 76%, transparent) 100%
    );
}

.arc-hero__inner {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: clamp(1.5rem, 5vw, var(--arc-space-xl));

    min-height: inherit;
    padding-block: clamp(2.25rem, 7vw, 4rem);
}

.arc-hero__content {
    width: 100%;
    min-width: 0;
    max-width: 720px;
    text-align: center;
}

.arc-hero__title {
    max-width: 15ch;
    margin: 0 auto;

    color: var(--arc-text);
    font-family: var(--arc-font-heading);
    font-size: clamp(1.75rem, 6vw, 2.7rem);
    line-height: 1.1;
    text-align: inherit;
    text-transform: none;
    text-wrap: balance;

    text-shadow: var(--arc-glow-strong);
}

.arc-hero__subtitle {
    max-width: 42rem;
    margin: clamp(1rem, 3vw, var(--arc-space-lg)) auto 0;

    color: var(--arc-text);
    font-family: var(--arc-font-main);
    font-size: clamp(0.95rem, 2.6vw, 1.1rem);
    line-height: 1.55;
}

.arc-hero__cta {
    max-width: 100%;
    margin-top: clamp(1rem, 3vw, var(--arc-space-lg));
}

.arc-hero__visual {
    width: 100%;
    min-width: 0;
    max-width: 560px;
    height: clamp(320px, 62vw, 460px);
    justify-self: center;
}


/* --------------------------------------------------------------------------
   Small mobile
   -------------------------------------------------------------------------- */

@media (max-width: 479px) {
    .arc-hero__inner {
        gap: 1.5rem;
        padding-block: 2rem 2.5rem;
    }

    .arc-hero__content {
        max-width: 100%;
    }

    .arc-hero__title {
        max-width: 14ch;
        font-size: clamp(1.55rem, 8vw, 1.85rem);
        line-height: 1.08;
    }

    .arc-hero__subtitle {
        max-width: 28rem;
        margin-top: 1.25rem;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .arc-hero__cta {
        width: auto;
        max-width: 100%;
        margin-top: 1.25rem;
        padding-inline: 0.7rem;
        font-size: clamp(0.68rem, 3.4vw, 0.82rem);
        line-height: 1.2;
        white-space: normal;
        text-wrap: balance;
    }

    .arc-hero__visual {
        max-width: 100%;
        height: clamp(300px, 105vw, 360px);
    }
}


/* --------------------------------------------------------------------------
   Tablet / large mobile
   -------------------------------------------------------------------------- */

@media (min-width: 480px) and (max-width: 959px) {
    .arc-hero__inner {
        gap: clamp(1.5rem, 4vw, 2rem);
        padding-block: clamp(2.5rem, 6vw, 3.5rem);
    }

    .arc-hero__title {
        max-width: 15ch;
        font-size: clamp(2rem, 5.5vw, 2.65rem);
        line-height: 1.1;
    }

    .arc-hero__subtitle {
        max-width: 34rem;
        margin-top: 1.25rem;
    }

    .arc-hero__cta {
        margin-top: 1.4rem;
    }

    .arc-hero__visual {
        height: clamp(360px, 65vw, 470px);
    }
}


/* --------------------------------------------------------------------------
   Desktop — text left / spiral right
   -------------------------------------------------------------------------- */

@media (min-width: 960px) {
    .arc-hero {
        min-height: clamp(500px, 60svh, 620px);
    }

    .arc-hero__inner--with-spiral {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
        justify-items: stretch;
        gap: var(--arc-space-2xl);
        padding-block: 0;
    }

    .arc-hero__inner--with-spiral .arc-hero__content {
        max-width: 540px;
        text-align: left;
    }

    .arc-hero__inner--with-spiral .arc-hero__title {
        max-width: 100%;
        margin-inline: 0;
        font-size: clamp(1.7rem, 1.9vw, 2.21rem);
        line-height: 1.16;
        text-wrap: normal;
    }

    .arc-hero__inner--with-spiral .arc-hero__subtitle {
        max-width: 32rem;
        margin-inline: 0;
    }

    .arc-hero__visual {
        width: 100%;
        max-width: 600px;
        height: clamp(500px, 66svh, 620px);
        justify-self: end;
    }
}


/* --------------------------------------------------------------------------
   Reduced motion
   JavaScript renders a single Aurora frame instead of an animation.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .arc-hero__aurora canvas {
        opacity: 0.9;
    }
}