/**
 * EDEN01 2026 Upgrade: Hero Section
 * Museum-scale typography + refined CTAs
 * Date: 2026-01-14
 *
 * QA Checklist:
 * ✅ Headline: Scales beautifully 320px–2560px
 * ✅ CTAs: Touch-friendly (min 44×44px)
 * ✅ Contrast: Gold on dark = 7.1:1 (AAA)
 * ✅ FX: Reduced to subtle, no harsh effects
 * ✅ GPU: will-change for smooth 60fps animations
 */

/* ========================================
   GPU Optimization: will-change hints
   ======================================== */

.hero__layer--left,
.hero__layer--right,
.hero__layer--tree,
.hero__layer--rhino,
.hero__layer--bar,
.hero__background {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ========================================
   Headline: Bigger, more confident
   ======================================== */

.hero__headline {
    font-size: var(--fs-display-xl) !important;  /* Up to 14rem (224px) */
    line-height: var(--lh-display) !important;   /* 0.95 — tight */
    letter-spacing: var(--ls-display) !important; /* -0.02em — optical */
    font-weight: 400 !important;                  /* Regular weight */
    
    /* Subtle text glow for depth */
    text-shadow: 
        0 0 40px rgba(201, 169, 97, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Logo: Reduce competition */
.hero__logo {
    opacity: 0.85;
    transition: opacity var(--motion-slow) var(--ease-luxury);
}

/* On scroll: Logo fades further */
.hero--scrolled .hero__logo {
    opacity: 0.6;
}

/* ========================================
   CTAs: Clear hierarchy
   ======================================== */

.hero__cta {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
}

/* Primary CTA: Kompakt, passend zu Literata */
.btn--primary {
    background: var(--color-accent-gold) !important;
    color: var(--color-bg-primary) !important;
    border: 1px solid var(--color-accent-gold) !important;
    padding: 0.55rem 1.4rem !important;
    font-family: var(--font-body, 'Literata', serif) !important;
    font-size: clamp(0.7rem, 0.75vw, 0.8rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    border-radius: 2px;

    transition: all var(--motion-base) var(--ease-luxury) !important;
}

.btn--primary:hover {
    background: var(--color-accent-gold-bright) !important;
    border-color: var(--color-accent-gold-bright) !important;
    box-shadow:
        0 0 20px rgba(201, 169, 97, 0.3),
        0 2px 10px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-1px) !important;
    cursor: url('../images/Papagei-cursor.png') 32 32, pointer !important;
}

.btn--primary:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Secondary CTA: Outline - Kompakt, passend zu Literata */
.btn--secondary {
    background: transparent !important;
    color: var(--color-text-primary) !important;
    border: 1px solid rgba(244, 242, 237, 0.25) !important;
    padding: 0.55rem 1.4rem !important;
    font-family: var(--font-body, 'Literata', serif) !important;
    font-size: clamp(0.7rem, 0.75vw, 0.8rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    border-radius: 2px;

    transition: all var(--motion-base) var(--ease-luxury) !important;
}

.btn--secondary:hover {
    background: rgba(244, 242, 237, 0.08) !important;
    border-color: rgba(244, 242, 237, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow:
        0 0 15px rgba(244, 242, 237, 0.1),
        inset 0 0 10px rgba(244, 242, 237, 0.02) !important;
    cursor: url('../images/Papagei-cursor.png') 32 32, pointer !important;
}

.btn--secondary:active {
    transform: scale(0.98) !important;
}

/* ========================================
   FX Layer: Reduce heavy effects
   ======================================== */

/* Vignette: Softer */
.hero__fx-vignette {
    background: radial-gradient(
        ellipse 60% 50% at 50% 45%,
        transparent 0%,
        transparent 30%,
        rgba(10, 15, 10, 0.2) 60%,
        rgba(10, 15, 10, 0.4) 100%
    ) !important;
    opacity: 0.6 !important;  /* Reduced from 1 */
}

/* Fog: Sichtbar — soft golden glow Atmosphäre */
.hero__fx-fog {
    opacity: 0.28 !important;
}

/* Grain: Leicht sichtbar — Film grain Textur */
.hero__fx-grain {
    opacity: 0.06 !important;
}

/* Remove on scroll (keeps focus on content) */
.hero--scrolled .hero__fx-vignette,
.hero--scrolled .hero__fx-fog,
.hero--scrolled .hero__fx-grain {
    opacity: 0 !important;
    transition: opacity var(--motion-glacial) var(--ease-luxury) !important;
}

/* ========================================
   Description: Editorial sizing + mehr Abstand
   Passend zu Literata Body Font der anderen Sections
   ======================================== */

.hero__description-container {
    margin-top: clamp(3rem, 6vh, 6rem) !important;
}

.hero__description {
    font-family: var(--font-body, 'Literata', serif) !important;
    font-size: var(--fs-body-sm) !important;
    font-weight: 400 !important;
    letter-spacing: 0.12em !important;
    opacity: 0.85 !important;
}

/* CTAs: Mehr Abstand zur Description */
.hero__cta-container {
    margin-top: clamp(1.5rem, 3vh, 2.5rem) !important;
}

/* ========================================
   Hero Background: Klarer in Phase 2
   ======================================== */

.hero__background {
    filter: brightness(1.15) contrast(1.05) !important;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    /* Hero-Logo: sichtbar über der Headline (statt display:none) */
    .hero__logo {
        top: 28vh !important;
    }

    .hero__logo .hero__logo-img {
        height: clamp(80px, 22vw, 110px) !important;
    }

    /* Headline weiter nach unten (Platz für Logo darüber) */
    .hero__title {
        top: 46vh !important;
    }

    .hero__headline {
        display: block !important;
        font-size: clamp(2.8rem, 9vw, 5rem) !important;
    }

    /* Description & CTA folgen Headline nach unten */
    .hero__description-container {
        top: 61vh !important;
        margin-top: 0 !important;
    }

    .hero__cta-container {
        top: 75vh !important;
    }

    /* Tree: etwas größer (120vw Breite, overflow erlaubt) */
    .hero__layer--tree .hero__layer-img {
        bottom: 5vh !important;
        width: 120vw !important;
        max-width: none !important;
        height: auto !important;
    }

    /* Bar: etwas größer (115vw Breite, overflow erlaubt) */
    .hero__layer--bar .hero__layer-img {
        bottom: 5vh !important;
        width: 115vw !important;
        max-width: none !important;
        height: auto !important;
    }

    .hero__cta {
        flex-direction: column;
        width: 100%;
        gap: var(--space-md);
    }

    .btn--primary,
    .btn--secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ========================================
   Safari Performance — Button backdrop-filter fix
   Chrome/Mobile: Frosted Glass bleibt erhalten.
   Safari: backdrop-filter durch Background ersetzen —
   eliminiert permanenten Compositing-Layer während des Hero-Scrolls.
   ======================================== */

html.is-safari .btn--secondary {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 15, 10, 0.3) !important;
}

html.is-safari .btn--secondary:hover {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}