:root {
    --bg: #0a0908;
    --bg-mid: #14110e;
    --ink: #f3ebe0;
    --ink-muted: rgba(243, 235, 224, 0.68);
    --accent: #c4a574;
    --accent-soft: rgba(196, 165, 116, 0.35);
    --ridge: #1a1612;
    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Outfit", system-ui, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    min-height: 100dvh;
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Atmosphere — sierra night */
.sky {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 55% at 50% 100%, #2a2218 0%, transparent 55%),
        radial-gradient(ellipse 70% 40% at 70% 20%, rgba(80, 55, 30, 0.25) 0%, transparent 50%),
        linear-gradient(180deg, #060504 0%, var(--bg-mid) 45%, #1c1712 100%);
}

.sky__glow {
    position: absolute;
    left: 50%;
    bottom: 18%;
    width: min(70vw, 520px);
    height: min(40vw, 280px);
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 70%);
    filter: blur(40px);
    opacity: 0;
    animation: glow-in 2.4s ease-out 0.4s forwards;
}

.sky__stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 28% 42%, rgba(255, 255, 255, 0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 44% 12%, rgba(255, 248, 230, 0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 61% 28%, rgba(255, 255, 255, 0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 78% 8%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 88% 36%, rgba(255, 255, 255, 0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 18% 8%, rgba(255, 248, 230, 0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 52% 48%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
    opacity: 0;
    animation: stars-in 3s ease-out 0.8s forwards;
}

.sky__ridge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(120px, 28vh, 260px);
    background:
        linear-gradient(180deg, transparent 0%, rgba(10, 9, 8, 0.4) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath fill='%231a1612' d='M0 200V95l80-18 120 32 160-48 140 28 200-55 180 40 140-22 200 38 220-48V200z'/%3E%3Cpath fill='%23120f0c' d='M0 200V130l100-12 140 22 180-35 160 18 220-42 150 28 160-15 330 30V200z'/%3E%3C/svg%3E")
        bottom / 100% 100% no-repeat;
    opacity: 0;
    animation: ridge-in 1.8s ease-out 0.2s forwards;
}

/* Hero — one composition */
.hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100dvh;
    padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 12vh, 7rem);
}

.hero__mark {
    margin-bottom: 1.5rem;
    color: var(--accent);
    opacity: 0;
    transform: translateY(12px);
    animation: rise 1.1s ease-out 0.15s forwards;
}

.eagle {
    width: clamp(72px, 14vw, 110px);
    height: auto;
}

.eagle__wing--left {
    transform-origin: 58px 42px;
    animation: wing-left 4.5s ease-in-out 1.2s infinite;
}

.eagle__wing--right {
    transform-origin: 62px 42px;
    animation: wing-right 4.5s ease-in-out 1.2s infinite;
}

.hero__brand {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 9vw, 5.5rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: var(--ink);
    opacity: 0;
    transform: translateY(16px);
    animation: rise 1.1s ease-out 0.35s forwards;
}

.hero__headline {
    margin-top: 0.85rem;
    font-family: var(--font-body);
    font-size: clamp(0.7rem, 1.6vw, 0.85rem);
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: 0;
    transform: translateY(12px);
    animation: rise 1.1s ease-out 0.55s forwards;
}

.hero__lead {
    margin-top: 1.75rem;
    max-width: 28rem;
    font-size: clamp(1rem, 2.4vw, 1.15rem);
    font-weight: 300;
    line-height: 1.65;
    color: var(--ink-muted);
    opacity: 0;
    transform: translateY(12px);
    animation: rise 1.1s ease-out 0.75s forwards;
}

.hero__cta {
    margin-top: 2.25rem;
    opacity: 0;
    transform: translateY(12px);
    animation: rise 1.1s ease-out 0.95s forwards;
}

.link {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-soft);
    padding-bottom: 0.15em;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.link:hover,
.link:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
}

@keyframes rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glow-in {
    to {
        opacity: 1;
    }
}

@keyframes stars-in {
    to {
        opacity: 1;
    }
}

@keyframes ridge-in {
    to {
        opacity: 1;
    }
}

@keyframes wing-left {
    0%,
    100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-4deg);
    }
}

@keyframes wing-right {
    0%,
    100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(4deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero__mark,
    .hero__brand,
    .hero__headline,
    .hero__lead,
    .hero__cta,
    .sky__glow,
    .sky__stars,
    .sky__ridge {
        opacity: 1;
        transform: none;
    }
}
