/**
 * JOY-TEX Homepage Hero
 *
 * Visual direction:
 * Technical Editorial / Quiet Precision / Material-Led
 *
 * Integration:
 * - Gutenberg Custom HTML
 * - WordPress Media Library image
 * - Transparent Light Header (12-04-TH)
 * - Shared joy-button / joy-link components
 *
 * @version 1.0.0
 */


/* =========================================================
   01. Hero Root
   ========================================================= */

.joy-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    background-color: var(--joy-color-canvas);
}


/* =========================================================
   02. Media Layer
   ========================================================= */

.joy-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;
    pointer-events: none;
}

/* Hero media overlay */

.joy-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgb(255 255 255 / 78%) 0%,
        rgb(255 255 255 / 60%) 38%,
        rgb(255 255 255 / 16%) 70%,
        rgb(255 255 255 / 0%) 100%
    );
}

.joy-hero__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}


/* =========================================================
   03. Content Container
   ========================================================= */

.joy-hero__container {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: inherit;

    padding:
        clamp(8rem, 12vh, 11rem)
        var(--joy-page-gutter)
        clamp(4rem, 8vh, 7rem);
}


.joy-hero__content {
    width: 100%;
    max-width: 40rem;
    transform: translateY(2rem);
}



/* Desktop H1 */

.joy-hero__title {
    margin: 0;
    max-width: 40rem;

    color: var(--joy-color-editorial-heading);

    font-family: var(--joy-font-sans);
    font-size: 2.25rem;
    font-weight: var(--joy-font-weight-medium);
    line-height: 1.24;
    letter-spacing: -0.015em;
}



/* Desktop description */

.joy-hero__description {
    margin: 1.25rem 0 0;
    max-width: 32.5rem;

    color: var(--joy-color-editorial-secondary);

    font-size: 1rem;
    font-weight: var(--joy-font-weight-regular);
    line-height: 1.7;
}


/* Desktop actions */

.joy-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--joy-space-5);
    margin-top: 1.75rem;
}

/* =========================================================
   06. Tablet
   ========================================================= */

@media (max-width: 999px) {

    .joy-hero__container {
        padding-top: clamp(7rem, 12vh, 9rem);
        padding-bottom: clamp(3.5rem, 7vh, 5rem);
    }

    .joy-hero__content {
        max-width: 34rem;
        transform: translateY(1rem);
    }

    .joy-hero__title {
        font-size: 2rem; /* 32px */
        line-height: 1.2;
    }

    .joy-hero__image {
        object-position: 40% center;
    }

}

/* Desktop transitional width: 1000–1199px */
@media (min-width: 1000px) and (max-width: 1199px) {
    .joy-hero__content,
    .joy-hero__title {
        max-width: 34rem;
    }
}


/* =========================================================
   07. Mobile
   ========================================================= */

@media (max-width: 767px) {

    .joy-hero {
        align-items: flex-start;
        min-height: 100svh;
    }

    .joy-hero__container {
        align-items: center;

        padding-top: 7rem;
        padding-bottom: 4rem;
    }

    .joy-hero__content {
        max-width: 100%;
        transform: none;
    }

    .joy-hero__title {
        font-size: 1.875rem; /* 30px */
        line-height: 1.22;
        letter-spacing: -0.02em;
    }

    .joy-hero__description {
        max-width: 32rem;
        margin-top: var(--joy-space-5);

        line-height: 1.6;
    }

    .joy-hero__actions {
        gap: var(--joy-space-5);
        margin-top: 1.75rem;
    }

    /* Mobile-specific media overlay */

    .joy-hero__media::after {
        background: linear-gradient(
            90deg,
            rgb(255 255 255 / 82%) 0%,
            rgb(255 255 255 / 72%) 45%,
            rgb(255 255 255 / 48%) 80%,
            rgb(255 255 255 / 20%) 100%
        );
    }

    .joy-hero__image {
        object-position: 30% center;
    }

}


/* =========================================================
   08. Narrow Mobile
   ========================================================= */

@media (max-width: 380px) {
    .joy-hero__actions {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--joy-space-4);
    }
}


/* =========================================================
   09. Hero Entrance Motion
   ========================================================= */

@keyframes joy-hero-enter {
    from {
        opacity: 0;
        translate: 0 var(--joy-hero-motion-distance, 14px);
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* H1 */

.joy-hero__title {
    --joy-hero-motion-distance: 14px;

    animation: joy-hero-enter 5000ms
        cubic-bezier(0.22, 1, 0.36, 1)
        1000ms both;
}

/* Description */

.joy-hero__description {
    --joy-hero-motion-distance: 14px;

    animation: joy-hero-enter 3000ms
        cubic-bezier(0.22, 1, 0.36, 1)
        400ms both;
}

/* CTA Group */

.joy-hero__actions {
    --joy-hero-motion-distance: 10px;

    animation: joy-hero-enter 3000ms
        cubic-bezier(0.22, 1, 0.36, 1)
        700ms both;
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .joy-hero__title,
    .joy-hero__description,
    .joy-hero__actions {
        animation: none;
        opacity: 1;
        translate: none;
    }

}