/* AY CORE: isolated art direction for the homepage. */
.hero.ay-core {
    min-height: 100svh;
    padding: 0;
    overflow: clip;
    display: block;
}

.ay-core__stage {
    position: relative;
    height: 100svh;
    min-height: 660px;
    display: grid;
    align-items: center;
    padding-top: var(--nav-h);
    isolation: isolate;
}

.ay-core__copy.hero__body {
    z-index: 2;
    width: 100%;
    gap: clamp(1.5rem, 2.8vw, 2.5rem);
    padding-block: 3rem 5rem;
    pointer-events: none;
}

.ay-core__copy > * { max-width: 36%; }
.ay-core__copy .hero__title {
    font-size: clamp(3.3rem, 6.65vw, 7.25rem);
    line-height: .91;
    letter-spacing: -.055em;
}
.ay-core__copy .hero__row--indent > span { padding-left: 8vw; }
.ay-core__copy .hero__meta { display: block; }
.ay-core__copy .hero__desc { max-width: 29ch; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.55; }
.ay-core__copy .hero__desc b { font-weight: 400; }
.ay-core__copy .hero__actions { margin-top: .35rem; gap: .75rem; pointer-events: auto; max-width: 40%; }
.ay-core__copy .btn { font-size: .88rem; padding: 1rem 1.25rem; }

.ay-core__art {
    position: absolute;
    z-index: 1;
    inset: calc(var(--nav-h) + 2vh) .5% 7vh 35%;
    min-width: 0;
}

.ay-core__art canvas,
.ay-core__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ay-core__art canvas { opacity: 0; transition: opacity .5s var(--ease); }
.ay-core__poster { display: block; pointer-events: none; opacity: 1; transition: opacity .5s var(--ease); }
.ay-core__poster img { width: 100%; height: 100%; object-fit: contain; }
.ay-core[data-ay-state="ready"] canvas { opacity: 1; }
.ay-core[data-ay-state="ready"] .ay-core__poster { opacity: 0; }

.ay-core__scroll {
    position: absolute;
    bottom: 2rem;
    left: var(--gut);
    color: var(--muted);
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    z-index: 3;
}
.ay-core__scroll svg { color: var(--flame); }

@media (min-width: 1520px) {
    .ay-core__art { left: calc(50% - 225px); right: calc((100vw - 1520px) / 2); }
    .ay-core__copy .hero__row--indent > span { padding-left: 120px; }
    .ay-core__scroll { left: max(var(--gut), calc((100vw - 1520px) / 2 + var(--gut))); }
}

@media (min-width: 900px) and (max-height: 740px) {
    .ay-core__stage { min-height: 560px; }
    .ay-core__copy .hero__title { font-size: clamp(3.3rem, 6.1vw, 6.2rem); }
    .ay-core__copy.hero__body { gap: 1.25rem; padding-block: 1rem 4rem; }
    .ay-core__copy .hero__desc { font-size: 1rem; }
}

@media (max-width: 1100px) and (min-width: 900px) {
    .ay-core__copy .btn { padding: .9rem 1rem; font-size: .8rem; }
    .ay-core__copy .hero__actions { max-width: 40%; gap: .5rem; }
}

@media (max-width: 899px) {
    .hero.ay-core { min-height: auto; }
    .ay-core__stage { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; align-items: stretch; padding-top: var(--nav-h); }
    .ay-core__copy.hero__body { flex: none; gap: 1.4rem; padding-block: 2.5rem 0; }
    .ay-core__copy > * { max-width: 100%; }
    .ay-core__copy .hero__title { font-size: clamp(3.1rem, 10.4vw, 5.6rem); }
    .ay-core__copy .hero__row--indent > span { padding-left: 16vw; }
    .ay-core__copy .hero__desc { max-width: 34ch; font-size: 1rem; line-height: 1.5; }
    .ay-core__copy .hero__actions { max-width: 100%; gap: .5rem; margin: 0; }
    .ay-core__copy .btn { padding: .9rem 1rem; font-size: .78rem; }
    .ay-core__art { position: relative; inset: auto; width: 100%; aspect-ratio: 1.23; margin-top: .5rem; flex: none; }
    .ay-core__scroll { position: relative; inset: auto; align-self: flex-start; margin: .75rem var(--gut) 2rem; font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hero.ay-core { min-height: 100svh; }
    .ay-core__stage { position: relative; }
    .ay-core__art canvas, .ay-core__poster { transition: none; }
    .ay-core[data-ay-state="ready"] canvas { opacity: 0; }
    .ay-core[data-ay-state="ready"] .ay-core__poster { opacity: 1; }
}