/*
Space Vanta Theme 1.0
Module: Hero Navigation
File: public/hero/navigation/arrow.css
Version: 1.3 Spatial Editorial
Responsibilities:
- Hero navigation button
- Cool graphite frame
- Silver translucent surface
- Spatial hover
- Focus state
- Press state
- Reduced motion
Structural positioning: Handled by hero-carousel.css
================================================
*/

/*
---
1. Base Navigation
---
*/
.sv-hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid rgba(185, 191, 197, .58);
    border-radius: 2px;
    background: rgba(205, 210, 214, .22);
    color: rgba(58, 65, 72, .94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transform: translateY(-50%);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .10), 0 2px 5px rgba(0, 0, 0, .06), inset 0 0 0 1px rgba(255, 255, 255, .06);
    transition: border-color .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

/*
---
2. Arrow
---
*/
.sv-hero__arrow {
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
    text-shadow: 0 0 1px rgba(255, 255, 255, .24);
}

/*
---
3. Position
---
*/
.sv-hero__arrow--prev {
    left: 20px;
}

.sv-hero__arrow--next {
    right: 20px;
}

/*
---
4. Hover
---
*/
.sv-hero__arrow:hover {
    border-color: rgba(120, 132, 142, .82);
    background: rgba(222, 225, 226, .28);
    color: rgba(45, 53, 60, .98);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12), 0 3px 7px rgba(0, 0, 0, .07), inset 0 0 0 1px rgba(255, 255, 255, .09);
}

.sv-hero__arrow--prev:hover {
    transform: translate(-3px, -50%);
}

.sv-hero__arrow--next:hover {
    transform: translate(3px, -50%);
}

/*
---
5. Active
---
*/
.sv-hero__arrow:active {
    background: rgba(190, 198, 202, .30);
    border-color: rgba(105, 116, 125, .86);
    color: rgba(38, 45, 51, .98);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .10), inset 0 0 0 1px rgba(255, 255, 255, .07);
    transition-duration: .08s;
}

.sv-hero__arrow--prev:active {
    transform: translate(-1px, -50%) scale(.96);
}

.sv-hero__arrow--next:active {
    transform: translate(1px, -50%) scale(.96);
}

/*
---
6. Focus
---
*/
.sv-hero__arrow:focus-visible {
    outline: 1px solid rgba(113, 139, 163, .78);
    outline-offset: 3px;
}

/*
---
7. Disabled
---
*/
.sv-hero__arrow:disabled {
    cursor: default;
    opacity: .58;
}

.sv-hero__arrow:disabled:hover {
    transform: translateY(-50%);
    border-color: rgba(185, 191, 197, .58);
    background: rgba(205, 210, 214, .22);
    color: rgba(58, 65, 72, .94);
}

/*
---
8. Mobile
---
*/
@media (max-width: 767px) {
    .sv-hero__arrow {
        display: none;
    }
}

/*
---
9. Reduced Motion
---
*/
@media (prefers-reduced-motion: reduce) {
    .sv-hero__arrow {
        transition: none;
    }

    .sv-hero_arrow--prev:hover,
    .sv-heroarrow--next:hover,
    .sv-heroarrow--prev:active,
    .sv-hero_arrow--next:active {
        transform: translateY(-50%);
    }
}