/* ==========================================
   HERO CONTENT — Cinematic content page hero
   ========================================== */
.hero-content {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    background: var(--bg-color);
    padding: var(--section-padding);
    box-sizing: border-box;
}

/* --- Cinematic reveal overlay (wipes away on entrance) --- */
.hero-content__reveal {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--gold);
    z-index: 10;
    transform-origin: right center;
}

/* --- Decorative totem (half off-screen right) --- */
.hero-content__deco-totem {
    position: absolute;
    right: -15vw;
    top: 50%;
    transform: translateY(-50%);
    width: min(80vh, 560px);
    height: min(80vh, 560px);
    background: url('../../assets/images/content/jetee-graine.png') center center / cover no-repeat;
    -webkit-mask: url('../../assets/images/totem.svg') center center / contain no-repeat;
    mask: url('../../assets/images/totem.svg') center center / contain no-repeat;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    opacity: 0;
    will-change: transform, opacity;
}

/* --- Vertical gold accent line --- */
.hero-content__gold-line {
    position: absolute;
    left: 6vw;
    top: 0;
    width: 1px;
    height: 0%;
    background: linear-gradient(180deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
    opacity: 0.2;
    z-index: 2;
}

/* --- Inner content container --- */
.hero-content__inner {
    position: relative;
    z-index: 3;
    max-width: 940px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* --- Decorative totem --- */
.hero-content__totem {
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: scale(0.5) rotate(-180deg);
    will-change: transform, opacity;
}

.hero-content__totem svg {
    display: block;
    width: 36px;
    height: 36px;
}

/* --- Label --- */
.hero-content__label {
    display: inline-block;
    font-family: var(--font-family-base);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-eyebrow);
    color: var(--gold);
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateX(-40px);
    position: relative;
    padding-left: 28px;
}

.hero-content__label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    width: 16px;
    height: 1px;
    background: var(--gold);
    transition: var(--transition-transform);
}

.hero-content__label.is-visible::before {
    transform: translateY(-50%) scaleX(1);
}

/* --- Title --- */
.hero-content__title {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-h1);
    line-height: var(--line-height-heading);
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 2.5rem 0;
}

.hero-content__title-line {
    display: inline-block;
    overflow: hidden;
    line-height: var(--line-height-flat);
}

.hero-content__title-clip {
    display: inline-block;
    overflow: hidden;
    line-height: var(--line-height-flat);
}

.hero-content__title-word {
    display: inline-block;
    will-change: transform;
}

.hero-content__gold {
    color: var(--gold);
    font-style: normal;
}

/* --- Separator --- */
.hero-content__separator {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}

.hero-content__sep-line {
    display: block;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
    opacity: 0.4;
    transform: scaleX(0);
    transform-origin: left center;
}

/* --- Text --- */
.hero-content__text-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 560px;
}

.hero-content__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height-copy);
    color: var(--color-white);
    margin: 0;
}

.hero-content__text > * {
    margin: 0;
    font: inherit;
    line-height: inherit;
    color: inherit;
    opacity: 0;
    transform: translateX(-50px);
}

.hero-content__text > :where(ul, ol) {
    padding-left: 1.2em;
}

.hero-content__text a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* --- Scroll indicator --- */
.hero-content__scroll-hint {
    position: absolute;
    bottom: 0;
    right: 1vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
}

.hero-content__scroll-line {
    display: block;
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
    animation: heroScrollPulse 2.4s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes heroScrollPulse {
    0%, 100% { opacity: 0.2; transform: scaleY(1); }
    50%      { opacity: 0.7; transform: scaleY(1.4); }
}

.hero-content__scroll-text {
    font-family: var(--font-family-base);
    font-size: var(--font-size-3xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-section);
    color: rgba(var(--color-white-rgb), 0.25);
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1023px) {
    .hero-content {
        min-height: 100svh;
        padding: var(--section-padding-mobile-offset);
        align-items: flex-end;
    }

    .hero-content__gold-line {
        display: none;
    }

    .hero-content__deco-totem {
        width: min(50vh, 320px);
        height: min(50vh, 320px);
        right: -18vw;
    }

    .hero-content__inner {
        max-width: 100%;
        padding-left: 0;
    }

    .hero-content__totem {
        margin-bottom: 1.8rem;
    }

    .hero-content__totem svg {
        width: 28px;
        height: 28px;
    }

    .hero-content__label {
        font-size: var(--font-size-2xs);
        margin-bottom: 1.5rem;
    }

    .hero-content__title {
        font-size: clamp(2.1rem, 10.5vw, 3.2rem);
        line-height: var(--line-height-heading-relaxed);
        margin-bottom: 1.8rem;
        max-width: 100%;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -o-hyphens: auto;
        hyphens: auto;
    }

    .hero-content__title-line {
        display: inline;
        overflow: visible;
        line-height: inherit;
    }

    .hero-content__title-break {
        display: none;
    }

    .hero-content__title-clip {
        display: inline;
        overflow: visible;
        line-height: inherit;
    }

    .hero-content__title-word {
        display: inline;
        white-space: normal;
        transform: none;
        will-change: auto;
    }

    .hero-content__title-word em {
        display: inline;
        transform: none;
        will-change: auto;
    }

    .hero-content__separator {
        margin-bottom: 1.5rem;
    }

    .hero-content__text {
        font-size: var(--font-size-sm-6);
        line-height: var(--line-height-copy-medium);
    }

    .hero-content__text-wrap {
        max-width: 100%;
    }

    .hero-content__scroll-hint {
        display: none;
    }
}

/* ==========================================
   REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .hero-content__reveal {
        display: none;
    }

    .hero-content__scroll-line {
        animation: none;
        opacity: 0.5;
    }

    .hero-content__title-word {
        transform: none !important;
    }

    .hero-content__totem,
    .hero-content__label,
    .hero-content__text > *,
    .hero-content__scroll-hint,
    .hero-content__deco-totem {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-content__sep-line {
        transform: scaleX(1) !important;
    }

    .hero-content__gold-line {
        height: 100% !important;
    }

    .hero-content__label::before {
        transform: translateY(-50%) scaleX(1) !important;
    }
}