/* =========================
   HERO
========================= */

.hero {
    display: grid;
    align-items: center;

    min-height: 100vh;

    color: var(--ivory);
}

/* =========================
   BACKGROUND
========================= */

.hero-bg {
    position: absolute;
    inset: -10%;

    z-index: 0;

    background:
            url("../assets/header-bg.png")
            center center /
    cover
            no-repeat;

    transform: scale(1.06);

    will-change: transform;

    animation:
            hero-ken-burns 13s ease-in-out infinite alternate;
}

/* =========================
   CINEMATIC OVERLAY
========================= */

.hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
            linear-gradient(
                    90deg,
                    rgba(5, 15, 13, 0.84) 0%,
                    rgba(8, 20, 17, 0.68) 34%,
                    rgba(8, 20, 17, 0.40) 65%,
                    rgba(5, 12, 11, 0.60) 100%
            ),
            linear-gradient(
                    180deg,
                    rgba(3, 9, 8, 0.30) 0%,
                    rgba(3, 9, 8, 0.08) 42%,
                    rgba(3, 9, 8, 0.56) 100%
            );
}

/* Soft warm light */
.hero-overlay::after {
    position: absolute;
    inset: -20%;

    content: "";

    background:
            radial-gradient(
                    circle at 76% 32%,
                    rgba(220, 200, 166, 0.23),
                    transparent 24%
            );

    opacity: 0.78;

    filter: blur(18px);

    animation:
            gold-bloom 6s ease-in-out infinite alternate;
}

/* =========================
   FOG
========================= */

.hero-fog {
    position: absolute;
    inset: -15%;

    z-index: 2;

    pointer-events: none;

    filter: blur(16px);

    opacity: 0.38;

    mix-blend-mode: screen;

    will-change: transform, opacity;
}

.hero-fog-one {
    background:
            radial-gradient(
                    ellipse at 8% 58%,
                    rgba(238, 238, 228, 0.75) 0%,
                    rgba(238, 238, 228, 0.35) 22%,
                    transparent 50%
            ),
            radial-gradient(
                    ellipse at 55% 42%,
                    rgba(220, 224, 213, 0.50) 0%,
                    rgba(220, 224, 213, 0.25) 24%,
                    transparent 55%
            );

    animation:
            fog-drift-one 8s ease-in-out infinite alternate;
}

.hero-fog-two {
    opacity: 0.25;

    filter: blur(28px);

    background:
            radial-gradient(
                    ellipse at 82% 68%,
                    rgba(245, 242, 230, 0.60) 0%,
                    rgba(245, 242, 230, 0.24) 23%,
                    transparent 48%
            ),
            radial-gradient(
                    ellipse at 35% 30%,
                    rgba(222, 227, 219, 0.44) 0%,
                    rgba(222, 227, 219, 0.18) 25%,
                    transparent 52%
            ),
            radial-gradient(
                    ellipse at 60% 78%,
                    rgba(230, 232, 222, 0.25) 0%,
                    transparent 42%
            );

    animation:
            fog-drift-two 13s ease-in-out infinite alternate;
}

/* =========================
   CONTENT
========================= */

.hero-grid {
    display: grid;

    grid-template-columns: 1fr;

    align-items: center;
    justify-items: center;
}

.hero-copy {
    max-width: 800px;

    text-align: center;
}

/* Shared readability treatment */
.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy .tagline,
.hero-copy .hero-text {
    text-shadow:
            0 0 18px rgba(220, 200, 166, 0.10),
            0 1px 4px rgba(0, 0, 0, 0.22);
}
.hero-emblem {
    display: flex;

    justify-content: center;

    margin-bottom: 28px;
}

.hero-mark {
    display: block;

    width: min(130px, 28vw);
    height: auto;

    filter:
            drop-shadow(0 0 18px rgba(220, 200, 166, 0.35));
}

.hero .eyebrow {
    color: #f2d8af;
}

.tagline {
    margin: 20px 0 18px;

    color: var(--gold);

    font-family: var(--serif);
    font-size: clamp(1.65rem, 3.4vw, 3rem);

    font-style: italic;

    line-height: 1.05;
}

.hero-text {
    max-width: 680px;

    margin-inline: auto;

    color: rgba(246, 244, 239, 0.84);

    font-size: 1rem;
}

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 14px;

    margin-top: 34px;
}

/* =========================
   STAGGERED HERO REVEAL
========================= */

.hero-item {
    transition:
            opacity 850ms ease,
            transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-item:nth-child(1) {
    transition-delay: 100ms;
}

.hero-item:nth-child(2) {
    transition-delay: 220ms;
}

.hero-item:nth-child(3) {
    transition-delay: 340ms;
}

.hero-item:nth-child(4) {
    transition-delay: 460ms;
}

.hero-item:nth-child(5) {
    transition-delay: 580ms;
}

.hero-item:nth-child(6) {
    transition-delay: 700ms;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes hero-ken-burns {
    0% {
        transform:
                scale(1.06)
                translate3d(-1%, -0.5%, 0);
    }

    100% {
        transform:
                scale(1.16)
                translate3d(1.2%, 0.8%, 0);
    }
}

@keyframes gold-bloom {
    0% {
        opacity: 0.45;

        transform:
                scale(0.92)
                translate3d(1%, 1%, 0);
    }

    100% {
        opacity: 0.82;

        transform:
                scale(1.10)
                translate3d(-2%, -1%, 0);
    }
}

@keyframes fog-drift-one {
    0% {
        transform:
                translate3d(-8%, 3%, 0)
                scale(1.02);

        opacity: 0.22;
    }

    50% {
        transform:
                translate3d(2%, -1%, 0)
                scale(1.08);

        opacity: 0.42;
    }

    100% {
        transform:
                translate3d(10%, -3%, 0)
                scale(1.14);

        opacity: 0.32;
    }
}

@keyframes fog-drift-two {
    0% {
        transform:
                translate3d(8%, 2%, 0)
                scale(1.06);

        opacity: 0.12;
    }

    50% {
        transform:
                translate3d(-2%, -2%, 0)
                scale(1.13);

        opacity: 0.28;
    }

    100% {
        transform:
                translate3d(-10%, -4%, 0)
                scale(1.18);

        opacity: 0.20;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 860px) {
    h1 {
        font-size:
                clamp(2.85rem, 17vw, 5.6rem);

        letter-spacing: 0.055em;
    }

    .hero-fog {
        filter: blur(20px);
    }

    .hero-fog-one {
        opacity: 0.23;
    }

    .hero-fog-two {
        opacity: 0.1;
    }
}

@media (max-width: 520px) {
    .hero {
        min-height: 100vh;
    }

    .hero-copy {
        width: 100%;
    }

    .hero-mark {
        width: min(105px, 25vw);
    }

    .hero-emblem {
        margin-bottom: 24px;
    }

    .hero-actions,
    .button {
        width: 100%;
    }
}

@media (max-width: 380px) {
    h1 {
        font-size:
                clamp(2.55rem, 15vw, 3.35rem);

        letter-spacing: 0.035em;
    }

    .hero-text {
        font-size: 0.94rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg,
    .hero-fog,
    .hero-overlay::after {
        animation: none !important;
    }
}