.hero__visual--intro {
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 0;
}

.hero-intro {
    --hi-stone: #ADAC9B;
    --hi-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    isolation: isolate;
}

.hero-intro::before {
    content: '';
    position: absolute;
    inset: -14%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 50% 46%, rgba(255, 210, 63, 0.5), rgba(245, 183, 177, 0.26) 46%, rgba(245, 240, 232, 0) 72%);
    opacity: 1;
    transition: opacity 1.1s var(--hi-ease) 0.25s;
}

.hero-intro::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56%;
    aspect-ratio: 3 / 4;
    z-index: -1;
    pointer-events: none;
    border-radius: 50% 50% 0 0 / 60% 60% 0 0;
    background: linear-gradient(180deg, var(--color-coral, #F5B7B1), var(--color-accent, #FFD23F) 52%, rgba(255, 210, 63, 0) 100%);
    transform: translateX(-50%) scaleY(1);
    transform-origin: 50% 100%;
    opacity: 0.32;
    transition: opacity 0.9s var(--hi-ease) 0.15s, transform 1.1s var(--hi-ease) 0.15s;
}

.hero-intro--ready:not(.is-in)::before { opacity: 0; }
.hero-intro--ready:not(.is-in)::after { opacity: 0; transform: translateX(-50%) scaleY(0.62); }

.hero-intro__grid {
    position: absolute;
    inset: 0;
    will-change: opacity;
}

.hero-intro__tile {
    position: absolute;
    display: block;
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.4);
    transition: opacity 0.6s var(--hi-ease), transform 0.75s var(--hi-ease);
}

.hero-intro.is-in .hero-intro__tile { opacity: 1; transform: none; }
.hero-intro.is-in .hero-intro__tile--edge { opacity: 0.6; }
.hero-intro.is-in .hero-intro__tile--faint { opacity: 0.32; }

.hero-intro__chip {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 12px;
    background: var(--color-ink, #1A1A2E);
}

.hero-intro__tile--edge .hero-intro__chip {
    inset: 26%;
    border-radius: 999px;
}

.hero-intro__tile--ink .hero-intro__chip { background: var(--color-ink, #1A1A2E); }
.hero-intro__tile--stone .hero-intro__chip { background: var(--hi-stone); }
.hero-intro__tile--yellow .hero-intro__chip { background: var(--color-accent, #FFD23F); }
.hero-intro__tile--mint .hero-intro__chip { background: var(--color-mint, #7BC4B0); }
.hero-intro__tile--coral .hero-intro__chip { background: var(--color-coral, #F5B7B1); }

@media (max-width: 900px) {
    .hero-intro {
        max-width: 26rem;
        margin: 0 auto;
        overflow-x: clip;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-intro__tile {
        transform: none;
        opacity: 0;
        transition-property: opacity !important;
        transition-duration: 0.6s !important;
        transition-timing-function: var(--hi-ease) !important;
    }
    .hero-intro.is-in .hero-intro__tile--edge { opacity: 0.6; }
    .hero-intro.is-in .hero-intro__tile--faint { opacity: 0.32; }
    .hero-intro::before {
        transition: none;
        opacity: 1;
    }
    .hero-intro::after {
        transition: none;
        opacity: 0.32;
        transform: translateX(-50%) scaleY(1);
    }
}