/* ═══════════════════════════════════════════════════════════════════════════
   Hero — cinematic full-viewport entry (homepage only)
   ═══════════════════════════════════════════════════════════════════════════

   Theme behaviour
   ───────────────
   Light mode  → warm cream/ivory wash over video  · dark text · dark CTAs
   Dark mode   → deep charcoal veil over video     · white text · cream CTAs

   All mode-specific values live in the custom property blocks below.
   The component styles reference only vars — zero duplicate rule sets.
*/

/* ─── Light-mode tokens (default) ────────────────────────────────────────── */

:root {
    /* Fallback background shown before the video loads */
    --hero-bg-fallback:         #f8f5f0;

    /* ── Overlays ──────────────────────────────────────────────────────── */
    /* Sun-washed cream veil — gives an editorial "morning light" feel */
    --hero-overlay-base:    rgba(248, 246, 242, 0.60);
    --hero-overlay-top:     linear-gradient(
                                to bottom,
                                rgba(248, 246, 242, 0.92) 0%,
                                rgba(248, 246, 242, 0.22) 32%,
                                transparent               58%
                            );
    --hero-overlay-bottom:  linear-gradient(
                                to top,
                                rgba(236, 233, 226, 0.90) 0%,
                                rgba(236, 233, 226, 0.36) 34%,
                                transparent               62%
                            );

    /* ── Text ──────────────────────────────────────────────────────────── */
    --hero-title-color:         rgba(22, 20, 17, 0.96);
    --hero-title-em-color:      rgba(22, 20, 17, 0.76);
    --hero-subtitle-color:      rgba(22, 20, 17, 0.52);

    /* ── Scroll indicator ──────────────────────────────────────────────── */
    --hero-scroll-end-color:    rgba(22, 20, 17, 0.38);

    /* ── CTA — primary (dark button, cream text) ───────────────────────── */
    --hero-cta-p-bg:            rgba(22, 20, 17, 0.90);
    --hero-cta-p-color:         rgba(250, 248, 243, 0.97);
    --hero-cta-p-bg-hover:      rgba(10, 8, 5, 1);
    --hero-cta-p-color-hover:   rgba(250, 248, 243, 1);

    /* ── CTA — ghost (dark border, dark text) ──────────────────────────── */
    --hero-cta-g-color:         rgba(22, 20, 17, 0.80);
    --hero-cta-g-border:        rgba(22, 20, 17, 0.24);
    --hero-cta-g-bg-hover:      rgba(22, 20, 17, 0.07);
    --hero-cta-g-border-hover:  rgba(22, 20, 17, 0.52);
    --hero-cta-g-color-hover:   rgba(22, 20, 17, 0.97);
}

/* ─── Dark-mode tokens (explicit toggle) ────────────────────────────────── */

[data-theme="dark"] {
    --hero-bg-fallback:         #141210;

    --hero-overlay-base:    rgba(12, 10, 8, 0.58);
    --hero-overlay-top:     linear-gradient(
                                to bottom,
                                rgba(10, 8, 6, 0.80) 0%,
                                rgba(10, 8, 6, 0.28) 28%,
                                transparent          58%
                            );
    --hero-overlay-bottom:  linear-gradient(
                                to top,
                                rgba(8, 6, 4, 0.92) 0%,
                                rgba(8, 6, 4, 0.48) 32%,
                                transparent          62%
                            );

    --hero-title-color:         rgba(255, 255, 255, 0.97);
    --hero-title-em-color:      rgba(255, 255, 255, 0.82);
    --hero-subtitle-color:      rgba(255, 255, 255, 0.52);

    --hero-scroll-end-color:    rgba(255, 255, 255, 0.55);

    --hero-cta-p-bg:            rgba(245, 241, 232, 0.97);
    --hero-cta-p-color:         #141210;
    --hero-cta-p-bg-hover:      rgba(255, 252, 246, 1);
    --hero-cta-p-color-hover:   #141210;

    --hero-cta-g-color:         rgba(255, 255, 255, 0.86);
    --hero-cta-g-border:        rgba(255, 255, 255, 0.26);
    --hero-cta-g-bg-hover:      rgba(255, 255, 255, 0.07);
    --hero-cta-g-border-hover:  rgba(255, 255, 255, 0.54);
    --hero-cta-g-color-hover:   rgba(255, 255, 255, 0.97);
}

/* ─── Dark-mode tokens (system preference) ──────────────────────────────── */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --hero-bg-fallback:         #141210;

        --hero-overlay-base:    rgba(12, 10, 8, 0.58);
        --hero-overlay-top:     linear-gradient(
                                    to bottom,
                                    rgba(10, 8, 6, 0.80) 0%,
                                    rgba(10, 8, 6, 0.28) 28%,
                                    transparent          58%
                                );
        --hero-overlay-bottom:  linear-gradient(
                                    to top,
                                    rgba(8, 6, 4, 0.92) 0%,
                                    rgba(8, 6, 4, 0.48) 32%,
                                    transparent          62%
                                );

        --hero-title-color:         rgba(255, 255, 255, 0.97);
        --hero-title-em-color:      rgba(255, 255, 255, 0.82);
        --hero-subtitle-color:      rgba(255, 255, 255, 0.52);

        --hero-scroll-end-color:    rgba(255, 255, 255, 0.55);

        --hero-cta-p-bg:            rgba(245, 241, 232, 0.97);
        --hero-cta-p-color:         #141210;
        --hero-cta-p-bg-hover:      rgba(255, 252, 246, 1);
        --hero-cta-p-color-hover:   #141210;

        --hero-cta-g-color:         rgba(255, 255, 255, 0.86);
        --hero-cta-g-border:        rgba(255, 255, 255, 0.26);
        --hero-cta-g-bg-hover:      rgba(255, 255, 255, 0.07);
        --hero-cta-g-border-hover:  rgba(255, 255, 255, 0.54);
        --hero-cta-g-color-hover:   rgba(255, 255, 255, 0.97);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Component styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Shell ──────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    height: 100dvh;
    min-height: 580px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--hero-bg-fallback);
    transition: background-color 400ms ease;
}

/* ─── Background layer ───────────────────────────────────────────────────── */

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ── Overlays — three-layer atmospheric system ───────────────────────────── */

.hero__overlay {
    position: absolute;
    inset: 0;
    transition: background-color 400ms ease;
}

/* 1. Base veil: minimum legibility over any video frame */
.hero__overlay--base {
    background-color: var(--hero-overlay-base);
}

/* 2. Top: blends hero into the navbar zone */
/* Note: gradient values can't CSS-transition, but the base + text transitions
   create enough perceived smoothness on theme switch. */
.hero__overlay--top {
    background: var(--hero-overlay-top);
}

/* 3. Bottom: rich ground beneath the CTA row */
.hero__overlay--bottom {
    background: var(--hero-overlay-bottom);
}

/* ─── Content ────────────────────────────────────────────────────────────── */

.hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 var(--space-6);
    max-width: 860px;
    width: 100%;
}

/* ─── Title ──────────────────────────────────────────────────────────────── */

.hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 9vw, 6rem);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -0.025em;
    color: var(--hero-title-color);
    margin-bottom: var(--space-6);
    transition: color 400ms ease;
    opacity: 0;
    animation: hero-fade-up 1000ms cubic-bezier(0.16, 1, 0.3, 1) 320ms forwards;
}

.hero__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--hero-title-em-color);
    transition: color 400ms ease;
}

/* ─── Subtitle ───────────────────────────────────────────────────────────── */

.hero__subtitle {
    font-size: clamp(var(--text-sm), 1.9vw, var(--text-lg));
    color: var(--hero-subtitle-color);
    line-height: 1.75;
    max-width: 520px;
    margin-inline: auto;
    margin-bottom: var(--space-10);
    transition: color 400ms ease;
    opacity: 0;
    animation: hero-fade-up 1000ms cubic-bezier(0.16, 1, 0.3, 1) 480ms forwards;
}

/* ─── Heritage mark — Since · 1989 ──────────────────────────────────────── */

.hero__heritage {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-8);
    opacity: 0;
    animation: hero-fade-up 900ms cubic-bezier(0.16, 1, 0.3, 1) 480ms forwards;
}

.hero__heritage::before,
.hero__heritage::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background-color: var(--accent-gold);
    opacity: 0.40;
}

.hero__heritage::before { margin-bottom: var(--space-3); }
.hero__heritage::after  { margin-top: var(--space-3); }

.hero__heritage-since {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: var(--accent-gold);
    opacity: 0.65;
    line-height: 1;
    margin-bottom: var(--space-1);
}

.hero__heritage-year {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5.5vw, 3.5rem);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--accent-gold);
    line-height: 1;
    text-shadow: 0 2px 24px rgba(201, 169, 110, 0.16);
}

/* ─── Actions ────────────────────────────────────────────────────────────── */

.hero__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: hero-fade-up 900ms cubic-bezier(0.16, 1, 0.3, 1) 620ms forwards;
}

/* ── CTA buttons — override base .btn styles for the hero surface ─────────── */

.hero__cta-primary {
    background-color: var(--hero-cta-p-bg);
    color: var(--hero-cta-p-color);
    border: 1px solid transparent;
    transition:
        background-color 200ms ease,
        color            200ms ease;
}

.hero__cta-primary:hover {
    background-color: var(--hero-cta-p-bg-hover);
    color: var(--hero-cta-p-color-hover);
    filter: none; /* disable .btn--primary brightness filter if inherited */
}

.hero__cta-ghost {
    background-color: transparent;
    color: var(--hero-cta-g-color);
    border: 1px solid var(--hero-cta-g-border);
    transition:
        background-color 200ms ease,
        border-color     200ms ease,
        color            200ms ease;
}

.hero__cta-ghost:hover {
    background-color: var(--hero-cta-g-bg-hover);
    border-color: var(--hero-cta-g-border-hover);
    color: var(--hero-cta-g-color-hover);
}

/* ─── Scroll indicator ───────────────────────────────────────────────────── */

.hero__scroll {
    position: absolute;
    bottom: var(--space-10);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    opacity: 0;
    animation: hero-fade-up 800ms cubic-bezier(0.16, 1, 0.3, 1) 1100ms forwards;
}

.hero__scroll-line {
    display: block;
    width: 1px;
    height: 52px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--hero-scroll-end-color)
    );
    transform-origin: top center;
    animation: scroll-breathe 2.6s ease-in-out 1.5s infinite;
}

@keyframes scroll-breathe {
    0%   { transform: scaleY(1);    opacity: 0.55; }
    50%  { transform: scaleY(0.55); opacity: 1;    }
    100% { transform: scaleY(1);    opacity: 0.55; }
}

/* ─── Entrance keyframe ──────────────────────────────────────────────────── */

@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    /* Video cannot be CSS-paused; for full compliance a small JS snippet
       calling video.pause() on the prefers-reduced-motion media query is
       recommended. Entrance + scroll animations are disabled here. */
    .hero__scroll-line { animation: none; opacity: 0.45; }

    .hero__title,
    .hero__subtitle,
    .hero__heritage,
    .hero__actions,
    .hero__scroll {
        animation: none;
        opacity: 1;
    }
}