/**
 * TRHeroSection Component Styles
 *
 * Full-screen hero sections with independent positioning zones.
 * Hero Copy and Hero CTA zones positioned independently for layout control.
 */

:root {
    /* Hero Copy positioning controls */
    --tr-hero-copy-top: 120px;

    /* Hero CTA positioning controls */
    --tr-hero-cta-bottom: calc(var(--tr-nav-total-height) + 48px);

    /* CTA spacing controls */
    --tr-cta-description-gap: 8px;
    --tr-cta-divider-gap: 10px;

    /* Discover spacing control */
    --tr-discover-gap: 8px;

    /* Divider width control */
    --tr-hero-divider-width: 80%;
}

.tr-hero-section {
    position: relative;
    width: 100%;
    height: var(--tr-section-height);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

/* ─── Background Visual Layer ─── */
.tr-hero-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.tr-hero-background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    transform:
        translate(
            calc(var(--tr-hero-image-position-x) * 1px),
            calc(var(--tr-hero-image-position-y) * 1px)
        )
        scale(var(--tr-hero-image-scale));
    transform-origin: center center;
}

.tr-hero-background-current,
.tr-hero-background-next {
    position: absolute;
    inset: 0;
}

.tr-hero-background-current {
    opacity: 1;
    z-index: 1;
}

.tr-hero-background-next {
    opacity: 0;
    z-index: 2;
}

.tr-hero-background-next.is-visible {
    opacity: 1;
    transition: opacity 1.2s ease;
}

/* ─── Top Readability Gradient ─── */
.tr-hero-top-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--tr-top-gradient-height);
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, var(--tr-top-gradient-opacity-0)) 0%,
        rgba(0, 0, 0, var(--tr-top-gradient-opacity-20)) var(--tr-top-gradient-position-20),
        rgba(0, 0, 0, var(--tr-top-gradient-opacity-40)) var(--tr-top-gradient-position-40),
        rgba(0, 0, 0, var(--tr-top-gradient-opacity-60)) var(--tr-top-gradient-position-60),
        rgba(0, 0, 0, var(--tr-top-gradient-opacity-80)) var(--tr-top-gradient-position-80),
        rgba(0, 0, 0, var(--tr-top-gradient-opacity-100)) 100%
    );
    pointer-events: none;
    z-index: 3;
}

/* ─── Bottom Readability Gradient ─── */
.tr-hero-bottom-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--tr-bottom-gradient-height);
    pointer-events: none;
    z-index: 3;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, var(--tr-bottom-gradient-opacity-0)) 0%,
        rgba(0, 0, 0, var(--tr-bottom-gradient-opacity-20)) var(--tr-bottom-gradient-position-20),
        rgba(0, 0, 0, var(--tr-bottom-gradient-opacity-40)) var(--tr-bottom-gradient-position-40),
        rgba(0, 0, 0, var(--tr-bottom-gradient-opacity-60)) var(--tr-bottom-gradient-position-60),
        rgba(0, 0, 0, var(--tr-bottom-gradient-opacity-80)) var(--tr-bottom-gradient-position-80),
        rgba(0, 0, 0, var(--tr-bottom-gradient-opacity-100)) 100%
    );
}

/* ─── Hero Copy Zone (Full grid width, centered) ─── */
.tr-hero-copy {
    position: absolute;
    top: var(--tr-hero-copy-top);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - (2 * var(--tr-grid-margin)));
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: var(--tr-space-md);
    text-align: center;
}

.tr-hero-copy-headline {
    font-family: var(--tr-font-garamond-book-condensed);
    font-size: var(--tr-hero-title-font-size);
    font-weight: 400;
    line-height: var(--tr-hero-title-leading);
    letter-spacing: var(--tr-hero-title-tracking);
    margin: 0;
    color: var(--tr-hero-title-color);
}

.tr-hero-copy-highlight {
    font-family: var(--tr-font-franklin-medium-condensed);
    font-size: var(--tr-hero-subtitle-font-size);
    font-weight: 500;
    line-height: var(--tr-hero-subtitle-leading);
    letter-spacing: var(--tr-hero-subtitle-tracking);
    margin: 0;
    margin-top: var(--tr-hero-title-subtitle-gap);
    color: var(--tr-hero-subtitle-color);
}

/* ─── Hero CTA Zone (Full grid width, flex vertical flow) ─── */
.tr-hero-cta {
    position: absolute;
    bottom: var(--tr-hero-cta-bottom);
    left: 50%;
    transform: translateX(-50%) translateY(var(--tr-hero-cta-top));
    width: calc(100% - (2 * var(--tr-grid-margin)));
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tr-hero-cta .tr-button {
    height: var(--tr-hero-cta-height);
    width: fit-content;
    padding: var(--tr-hero-cta-padding-top) var(--tr-hero-cta-padding-right) var(--tr-hero-cta-padding-bottom) var(--tr-hero-cta-padding-left);
    box-sizing: border-box;
    font-family: var(--tr-font-franklin-demi);
    font-size: var(--tr-header-button-font-size);
    letter-spacing: var(--tr-header-button-tracking);
    text-transform: uppercase;
    white-space: nowrap;
    border: var(--tr-button-border-width) solid var(--tr-color-green);
    background: #000000;
    color: var(--tr-color-green);
    border-radius: var(--tr-button-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--tr-hero-cta-description-gap);
}

.tr-hero-cta-description {
    font-family: var(--tr-font-franklin-book-condensed);
    font-size: var(--tr-hero-cta-description-font-size);
    line-height: var(--tr-hero-cta-description-leading);
    letter-spacing: var(--tr-hero-cta-description-tracking);
    color: var(--tr-hero-cta-description-color);
    margin: 0;
    text-align: center;
    width: 100%;
    margin-bottom: var(--tr-hero-description-divider-gap);
}

.tr-hero-cta-divider {
    width: 100%;
    height: var(--tr-divider-thickness);
    background: #ffffff;
    margin: 0;
    margin-bottom: var(--tr-hero-divider-discover-gap);
}