/* ============================================
   Hero — Innovation Wealth
   Four craft tableaux + rotating kinetic typography
   ============================================ */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--header-h) + 4rem) 0 6rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #012647;
    isolation: isolate;
}

/* ---------- Atmospheric backdrop ---------- */
.hero__atmosphere {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.hero__grain {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(1, 38, 71, 0.85) 100%),
        linear-gradient(180deg, transparent 60%, #012647 100%);
}

.hero__spotlight {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 169, 97, 0.08) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    transition: left 0.4s var(--ease-out), top 0.4s var(--ease-out);
    left: 50%;
    top: 50%;
    pointer-events: none;
    filter: blur(50px);
}

/* ---------- Craft tableaux ---------- */
.hero__tableaux {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transform: translateZ(0);
}

.hero__tableau {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.4s var(--ease-out), transform 8s var(--ease-out);
}

.hero__tableau.is-active {
    opacity: 1;
    transform: scale(1);
}

/* Photographic backdrop — sits beneath the SVG craft motif */
.hero__tableau-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    filter: contrast(1.02) saturate(1.05);
}
/* Atmospheric scrim — darker behind headline area, photo stays visible elsewhere */
.hero__tableau-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 55%, rgba(8, 16, 28, 0.78) 0%, rgba(8, 16, 28, 0.5) 55%, rgba(8, 16, 28, 0.25) 90%),
        linear-gradient(180deg, rgba(8, 16, 28, 0.55) 0%, rgba(8, 16, 28, 0.15) 30%, rgba(8, 16, 28, 0.2) 70%, rgba(8, 16, 28, 0.75) 100%);
}

.hero__tableau svg {
    display: none;
}

/* Watch ticking animation */
.hero__tableau[data-tableau="watch"] .watch-hand-sec {
    transform-origin: 400px 400px;
    animation: watchTick 60s steps(60) infinite;
}
.hero__tableau[data-tableau="watch"] .watch-hand-min {
    transform-origin: 400px 400px;
    animation: watchTick 3600s linear infinite;
}
.hero__tableau[data-tableau="watch"] .watch-gear {
    animation: watchGear 80s linear infinite;
}
@keyframes watchTick {
    to { transform: rotate(360deg); }
}
@keyframes watchGear {
    to { transform: rotate(-360deg); }
}

/* ---------- Foreground content ---------- */
.hero__content {
    position: relative;
    z-index: 1;
    max-width: var(--max);
    margin: 0 auto;
    padding: 5rem var(--gutter) 0;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: heroFadeIn 1.2s var(--ease-out) 1.4s forwards;
}
.hero__eyebrow-line {
    width: 32px;
    height: 1px;
    background: var(--c-brass);
}
.hero__eyebrow-text {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-brass);
}

/* Headline */
.hero__headline {
    font-family: var(--f-serif);
    font-weight: 300;
    font-size: clamp(1.75rem, 3.6vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--c-bone);
    margin-bottom: 2.5rem;
    max-width: 100%;
}

.hero__headline-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35em;
    overflow: hidden;
    padding-bottom: 0.08em;
}

.hero__headline-row--rotating {
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.15em;
}
.hero__headline-row--rotating .hero__headline-prefix {
    white-space: nowrap;
}

.hero__headline-word {
    display: inline-block;
    transform: translateY(110%);
    animation: heroWordRise 1.4s var(--ease-out) forwards;
}
.hero__headline-row:nth-child(1) .hero__headline-word { animation-delay: 1.6s; }
.hero__headline-row:nth-child(2) .hero__headline-prefix { animation-delay: 1.75s; }

.hero__headline-prefix {
    display: inline-block;
    transform: translateY(110%);
    animation: heroWordRise 1.4s var(--ease-out) forwards;
    color: var(--c-mute);
    font-style: italic;
    font-weight: 300;
}

.hero__headline-word--italic {
    font-style: italic;
    font-weight: 300;
    color: var(--c-bone-soft);
}

@keyframes heroWordRise {
    to { transform: translateY(0); }
}

/* Rotating word — the magic moment */
.hero__rotator {
    position: relative;
    display: inline-block;
    height: 1em;
    overflow: hidden;
    color: var(--c-brass);
    font-style: italic;
    min-width: 8.5em;
    vertical-align: baseline;
    opacity: 0;
    animation: heroFadeIn 1s var(--ease-out) 2.3s forwards;
}

.hero__rotator-word {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}

.hero__rotator-word.is-active {
    opacity: 1;
    transform: translateY(0);
}

.hero__rotator-word.is-leaving {
    opacity: 0;
    transform: translateY(-100%);
}

/* Lede */
.hero__lede {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--c-bone-soft);
    max-width: 56ch;
    margin-bottom: 3rem;
    transition-delay: 2.5s;
    font-weight: 300;
}

/* Sub-line beneath rotating headline */
.hero__subline {
    font-size: 1.1875rem;
    line-height: 1.55;
    color: #f4efe6;
    max-width: 52ch;
    margin: 0 0 2.5rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 14px rgba(10, 18, 30, 0.85), 0 0 24px rgba(10, 18, 30, 0.5);
    transition-delay: 2.5s;
}

/* CTAs */
.hero__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 5rem;
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    border-radius: 100px;
    transition: all 0.4s var(--ease-out);
    transition-delay: 2.7s;
}

.hero__cta--primary {
    background: var(--c-brass);
    color: var(--c-ink);
    border: 1px solid var(--c-brass);
}
.hero__cta--primary:hover {
    background: transparent;
    color: var(--c-brass);
    transform: translateY(-2px);
}
.hero__cta--primary .hero__cta-arrow svg {
    width: 16px;
    height: 16px;
    transition: transform 0.4s var(--ease-out);
}
.hero__cta--primary:hover .hero__cta-arrow svg { transform: translateX(4px); }

.hero__cta--ghost {
    color: var(--c-bone-soft);
    border: 1px solid var(--c-line-strong);
    transition-delay: 2.85s;
}
.hero__cta--ghost:hover {
    color: var(--c-bone);
    border-color: var(--c-bone);
}

/* Trust strip */
.hero__trust {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--c-line);
    max-width: 640px;
    transition-delay: 3s;
}
.hero__trust-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.hero__trust-num {
    font-family: var(--f-serif);
    font-size: 1.875rem;
    font-weight: 300;
    color: var(--c-bone);
    letter-spacing: -0.02em;
    line-height: 1;
}
.hero__trust-label {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-mute);
    font-weight: 400;
}
.hero__trust-divider {
    width: 1px;
    height: 32px;
    background: var(--c-line);
}

/* Reveal trigger override for hero (auto-revealed on load) */
.hero [data-reveal] {
    transition-duration: 1.4s;
}

/* Scroll indicator */
.hero__scroll {
    position: absolute;
    bottom: 2.5rem;
    right: 3rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.875rem;
    color: var(--c-mute);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0;
    animation: heroFadeIn 1s var(--ease-out) 3.2s forwards;
    transition: color 0.3s var(--ease-out);
}
.hero__scroll:hover { color: var(--c-brass); }
.hero__scroll-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.hero__scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--c-brass), transparent);
    position: relative;
    overflow: hidden;
}
.hero__scroll-line::after {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--c-bone));
    animation: scrollLine 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollLine {
    to { top: 60px; }
}

@keyframes heroFadeIn {
    to { opacity: 1; }
}

/* ---------- Dark hero text overrides ---------- */
/* Hero is dark navy; override the light-theme CSS variables for elements inside it */
.hero__headline { color: #f4efe6; }
.hero__headline-prefix { color: rgba(244, 239, 230, 0.5); }
.hero__lede { color: rgba(244, 239, 230, 0.65); }
.hero__scroll { color: rgba(244, 239, 230, 0.45); }
.hero__scroll-line::after { background: linear-gradient(to bottom, transparent, #f4efe6); }

.hero__cta--ghost {
    color: rgba(244, 239, 230, 0.7);
    border-color: rgba(244, 239, 230, 0.2);
}
.hero__cta--ghost:hover {
    color: #f4efe6;
    border-color: rgba(244, 239, 230, 0.5);
}

/* ---------- Small mobile: long headline prefix ---------- */
/* Lives here (not responsive.css) because hero.css loads last and would override it */
@media (max-width: 540px) {
    .hero__headline {
        font-size: clamp(1.75rem, 8.5vw, 2.25rem);
        line-height: 1.15;
    }
    /* "crafted with the precision of a" wraps onto two balanced lines instead of clipping */
    .hero__headline-row--rotating .hero__headline-prefix {
        white-space: normal;
        text-wrap: balance;
        text-align: center;
    }
    /* Rotating word sits centred on its own line */
    .hero__rotator { min-width: 100%; }
    .hero__rotator-word { left: 0; right: 0; text-align: center; }
}