/* Hero section keeps the slider constrained to the first viewport. */
.home-hero-section {
    position: relative;
    overflow: hidden;
    background: #161a1e;
}

/* Main slider stage for the left/right image animation. */
.home-slider {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 100vh;
    overflow: hidden;
}

/* Left and right tracks stack their images in the same grid cells. */
.home-slider-left,
.home-slider-right {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* Every slide is layered; JavaScript reveals the next slide with clip-path. */
.home-slider-item {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transition: clip-path 1.6s ease;
    z-index: 1;
}

/* Desktop: left reveals bottom→top, right reveals top→bottom. */
.home-slider-left .home-slider-item {
    clip-path: inset(100% 0 0 0);
}

.home-slider-right .home-slider-item {
    clip-path: inset(0 0 100% 0);
}

.home-slider-left .home-slider-item.is-active,
.home-slider-right .home-slider-item.is-active {
    clip-path: inset(0 0 0 0);
    z-index: 2;
}

.home-slider-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * AXI wordmark (transparent SVG).
 * Figma places the mark so the X sits on the vertical seam.
 * X optical centre ≈ 391.4 / 626 of the viewBox → translate by that %.
 */
.home-slider-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(43.5vw, 626px);
    max-width: min(43.5vw, 626px);
    height: auto;
    transform: translate(-62.52%, -50%);
    z-index: 4;
    pointer-events: none;
    background: transparent;
}

/* Vertical edge labels — Figma: Hanken Grotesk Regular 18 / tracking 10.8px / white. */
.home-slider-text {
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    text-align: center;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    pointer-events: none;
    color: var(--bw-white, #FFF);
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 10.8px;
}

.home-slider-ltext {
    left: 24px;
}

.home-slider-rtext {
    right: 24px;
}

/* Mobile: stacked halves + horizontal opposing wipe (Figma: “Mobile header animation is horizontal”). */
@media (max-width: 767px) {
    .home-hero-section {
        overflow: hidden;
        /* Fill the visible screen under the fixed header so both halves, the mark, and the labels stay in view. */
        height: calc(100vh - var(--header-height));
        height: calc(100svh - var(--header-height));
        height: calc(100dvh - var(--header-height));
    }

    .admin-bar .home-hero-section {
        height: calc(100vh - var(--header-height) - 46px);
        height: calc(100svh - var(--header-height) - 46px);
        height: calc(100dvh - var(--header-height) - 46px);
    }

    .home-slider {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        padding: 0;
        overflow: hidden;
    }

    .home-slider-left,
    .home-slider-right {
        flex: 1 1 0;
        width: 100%;
        min-height: 0;
        height: auto;
        overflow: hidden;
    }

    /* Top half: wipe in from the left. */
    .home-slider-left .home-slider-item {
        clip-path: inset(0 100% 0 0);
    }

    /* Bottom half: wipe in from the right. */
    .home-slider-right .home-slider-item {
        clip-path: inset(0 0 0 100%);
    }

    .home-slider-left .home-slider-item.is-active,
    .home-slider-right .home-slider-item.is-active {
        clip-path: inset(0 0 0 0);
    }

    .home-slider-center {
        left: 50%;
        top: 50%;
        width: min(53.07vw, 199px);
        max-width: min(53.07vw, 199px);
        transform: translate(-62.52%, -50%);
        z-index: 6;
    }

    .home-slider-text {
        left: 50%;
        right: auto;
        width: min(321px, calc(100% - 48px));
        transform: translateX(-50%);
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 10.8px;
        line-height: 1.5;
        text-align: center;
        z-index: 7;
    }

    .home-slider-ltext {
        top: 26px;
        bottom: auto;
    }

    .home-slider-rtext {
        top: auto;
        bottom: 26px;
    }
}