/* ==========================================================================
   Hero (Home): text + arch photo, soft glows, gentle waves
   ========================================================================== */

.hero {
    --wave-h: clamp(56px, 7vw, 120px);

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: clamp(640px, 100svh, 1000px);
    padding-top: var(--header-h);
    overflow: hidden;
    overflow: clip;
    background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 78%);
}

/* ---------- Background ---------- */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hero__glow {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
}

.hero__glow--a {
    top: -25vw;
    left: -25vw;
    width: max(420px, 70vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, transparent 65%);
}

.hero__glow--b {
    top: 5%;
    right: -18vw;
    width: max(380px, 60vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--color-secondary) 18%, transparent) 0%, transparent 62%);
}

/* Soft light that follows the pointer (desktop only, positioned by JS) */
.hero__cursor-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 520px;
    height: 520px;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-secondary) 16%, transparent) 0%, transparent 65%);
    opacity: 0;
    transition: opacity 0.8s var(--ease-out);
    will-change: transform;
}

.hero.is-pointer .hero__cursor-glow {
    opacity: 1;
}

.hero__stars {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.hero__star {
    --s: 10px;

    position: absolute;
    width: var(--s);
    height: var(--s);
    fill: var(--color-secondary);
    opacity: 0.85;
}

.hero__star--1 { --s: 10px; top: 20%; left: 6%; }
.hero__star--2 { --s: 14px; top: 14%; left: 46%; }
.hero__star--3 { --s: 9px;  top: 60%; left: 48%; }
.hero__star--4 { --s: 12px; top: 16%; right: 6%; }

@media (max-width: 767.98px) {
    .hero__star--3 {
        display: none;
    }
}

/* ---------- Layout ---------- */
.hero__inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: grid;
    align-items: center;
    gap: clamp(2.5rem, 2rem + 3vw, 4rem);
    padding-top: var(--space-2xl);
    padding-bottom: calc(var(--wave-h) + var(--space-xl));
}

@media (min-width: 900px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }
}

.hero__content {
    position: relative;
    max-width: 40rem;
}

.hero__title {
    margin-bottom: 0;
}

.hero__text p {
    margin: 0 0 var(--space-md);
    max-width: 36em;
}

.hero__text p:last-child {
    margin-bottom: 0;
}

.hero__text .hero__lead {
    font-size: var(--text-lead);
    color: var(--color-text);
}

.hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

@media (min-width: 480px) {
    .hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* ---------- Photo ---------- */
.hero__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 440px);
}

@media (min-width: 900px) {
    .hero__visual {
        justify-self: end;
        width: min(100%, 480px);
    }
}

.hero__halo {
    position: absolute;
    inset: -12% -16%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-secondary) 38%, transparent), transparent 100%);
    filter: blur(8px);
}

.hero__frame {
    --arch-v: 37.5%;

    aspect-ratio: 3 / 4;
    box-shadow: 0 30px 60px -30px rgb(31 77 54 / 0.4);
}

@media (max-width: 899.98px) {
    /* Slightly shorter arch on small screens */
    .hero__frame {
        --arch-v: 41.6%;

        aspect-ratio: 5 / 6;
    }
}

/* ---------- Waves ---------- */
.hero__waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 2;
    height: var(--wave-h);
    overflow: hidden;
    pointer-events: none;
}