/**
 * Home hero — Hemikra refined
 */

.home-hero {
    position: relative;
    overflow: clip;
    border-block-end: 1px solid var(--hemik-color-border-soft);
    background:
        radial-gradient(circle at 78% 18%, rgb(216 180 254 / 0.30), transparent 27%),
        radial-gradient(circle at 92% 70%, rgb(139 92 246 / 0.10), transparent 28%),
        linear-gradient(180deg, var(--hemik-color-surface-elevated) 0%, var(--hemik-color-brand-mist) 100%);
}

.home-hero::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(109 40 217 / 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgb(109 40 217 / 0.028) 1px, transparent 1px);
    background-size: 4.5rem 4.5rem;
    content: "";
    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 0.2) 55%, #000 100%);
    pointer-events: none;
}

.home-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: clamp(35rem, 72vh, 48rem);
    align-items: center;
    gap: clamp(var(--hemik-space-10), 6vw, var(--hemik-space-20));
    padding-block: clamp(var(--hemik-space-16), 9vw, var(--hemik-space-24));
}

.home-hero__content {
    position: relative;
    z-index: 2;
    max-width: 50rem;
}

.home-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--hemik-space-3);
    margin-block-end: var(--hemik-space-5);
    color: var(--hemik-color-brand);
    font-size: var(--hemik-font-size-xs);
    font-weight: var(--hemik-font-weight-semibold);
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.home-hero__eyebrow-mark {
    width: 1.75rem;
    height: 1px;
    background: var(--hemik-color-action);
}

.home-hero__title {
    max-width: 12.5ch;
    color: var(--hemik-color-brand-deep);
    font-size: clamp(2.75rem, 2rem + 2.8vw, 5.2rem);
    font-weight: var(--hemik-font-weight-semibold);
    letter-spacing: -0.045em;
    line-height: 1.03;
}

.home-hero__description {
    max-width: 40rem;
    margin-block-start: var(--hemik-space-6);
    color: var(--hemik-color-text-soft);
    font-size: clamp(1.05rem, 1rem + 0.32vw, 1.3rem);
    line-height: 1.78;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hemik-space-3);
    margin-block-start: var(--hemik-space-8);
}

.home-hero__note {
    display: flex;
    max-width: 38rem;
    align-items: flex-start;
    gap: var(--hemik-space-2);
    margin-block-start: var(--hemik-space-6);
    color: var(--hemik-color-text-muted);
    font-size: var(--hemik-font-size-xs);
    line-height: 1.55;
}

.home-hero__note::before {
    flex: 0 0 auto;
    width: 0.4rem;
    height: 0.4rem;
    margin-block-start: 0.42rem;
    border-radius: 50%;
    background: var(--hemik-color-action);
    content: "";
}

.home-hero__visual {
    position: relative;
    min-height: 25rem;
    isolation: isolate;
}

.home-hero__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(34rem, 78vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgb(255 255 255 / 0.92) 0 28%, rgb(237 233 254 / 0.78) 29% 48%, rgb(216 180 254 / 0.18) 49% 62%, transparent 63%);
    transform: translate(-50%, -50%);
}

.home-hero__symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13rem;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.home-hero__symbol-core,
.home-hero__symbol-ring {
    position: absolute;
    border-radius: 50%;
}

.home-hero__symbol-core {
    inset: 37%;
    background: linear-gradient(145deg, var(--hemik-color-brand) 0%, var(--hemik-color-action) 100%);
    box-shadow: 0 12px 32px rgb(109 40 217 / 0.18);
}

.home-hero__symbol-ring {
    border: 1px solid rgb(109 40 217 / 0.18);
}

.home-hero__symbol-ring--one {
    inset: 25%;
}

.home-hero__symbol-ring--two {
    inset: 10%;
    border-color: rgb(139 92 246 / 0.16);
}

.home-hero__symbol-ring--three {
    inset: -8%;
    border-color: rgb(216 180 254 / 0.34);
}

.home-hero__principle {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    padding-inline: var(--hemik-space-4);
    border: 1px solid rgb(233 213 255 / 0.95);
    border-radius: var(--hemik-radius-pill);
    background: rgb(255 254 255 / 0.86);
    box-shadow: var(--hemik-shadow-sm);
    color: var(--hemik-color-brand-deep);
    font-size: var(--hemik-font-size-sm);
    font-weight: var(--hemik-font-weight-medium);
    backdrop-filter: blur(10px);
}

.home-hero__principle--information {
    top: 14%;
    left: 4%;
}

.home-hero__principle--experience {
    top: 42%;
    right: 0;
}

.home-hero__principle--community {
    bottom: 13%;
    left: 12%;
}

@media (min-width: 64rem) {
    .home-hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(24rem, 0.85fr);
    }
}

@media (max-width: 63.999rem) {
    .home-hero__inner {
        padding-block-start: var(--hemik-space-16);
    }

    .home-hero__visual {
        min-height: 20rem;
    }
}

@media (max-width: 35.999rem) {
    .home-hero__title {
        font-size: clamp(2.35rem, 12vw, 3.35rem);
    }

    .home-hero__actions {
        display: grid;
    }

    .home-hero__actions .hemik-button {
        width: 100%;
    }

    .home-hero__visual {
        min-height: 17rem;
    }

    .home-hero__principle {
        min-height: 2.4rem;
        padding-inline: var(--hemik-space-3);
        font-size: var(--hemik-font-size-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero {
        background: linear-gradient(180deg, var(--hemik-color-surface-elevated), var(--hemik-color-brand-mist));
    }
}

@media (prefers-reduced-transparency: reduce) {
    .home-hero__principle {
        background: var(--hemik-color-surface);
        backdrop-filter: none;
    }
}