/* =========================================================
   Space Vanta — Hero Navigation
   V1-B — Cool Graphite Spatial Frame

   Responsibility:
   - Hero navigation button visual language
   - Silver / grey translucent frame
   - Floating / elevated appearance
   - Cool blue edge reflection on hover
   - Dark cool-graphite arrow for image readability
   - Spatial arrow movement
   - Press / focus states
   - Reduced motion fallback

   Structural positioning remains in:
   public/hero/hero-carousel.css
   ========================================================= */


/* ---------------------------------------------------------
   01. Base Navigation Frame
   --------------------------------------------------------- */

.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, 0.58);

    border-radius: 2px;

    background: rgba(205, 210, 214, 0.22);

    /*
    Cool graphite arrow.

    Dark enough for bright Hero imagery,
    but not pure black.
    */

    color: rgba(58, 65, 72, 0.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, 0.12),
        0 2px 5px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.055);

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s cubic-bezier(.22, .61, .36, 1);

}


/* ---------------------------------------------------------
   02. Arrow
   --------------------------------------------------------- */

.sv-hero__arrow {

    font-size: 21px;

    font-weight: 500;

    line-height: 1;

    /*
    Very subtle light edge keeps the graphite
    arrow from visually sinking into darker imagery.
    */

    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.24);

}


/* ---------------------------------------------------------
   03. Navigation Position
   --------------------------------------------------------- */

.sv-hero__arrow--prev {

    left: 20px;

}


.sv-hero__arrow--next {

    right: 20px;

}


/* ---------------------------------------------------------
   04. Idle — Cool Graphite / Soft Silver
   --------------------------------------------------------- */

.sv-hero__arrow {

    border-color:
        rgba(185, 191, 197, 0.58);

    background:
        rgba(205, 210, 214, 0.22);

    color:
        rgba(58, 65, 72, 0.94);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.12),
        0 2px 5px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.055);

}


/* ---------------------------------------------------------
   05. Hover — Cool Blue Edge Reflection
   --------------------------------------------------------- */

.sv-hero__arrow:hover {

    border-color:
        rgba(55, 165, 235, 0.94);

    background:
        rgba(190, 200, 210, 0.24);

    /*
    Shift from graphite toward cool silver-blue.
    */

    color:
        rgba(38, 82, 108, 0.98);

    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.15),
        0 3px 7px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(105, 195, 245, 0.10),
        0 0 8px rgba(55, 165, 235, 0.15);

}


/* ---------------------------------------------------------
   06. Spatial Arrow Shift
   --------------------------------------------------------- */

.sv-hero__arrow--prev:hover {

    transform:
        translate(-3px, -50%);

}


.sv-hero__arrow--next:hover {

    transform:
        translate(3px, -50%);

}


/* ---------------------------------------------------------
   07. Active / Press
   --------------------------------------------------------- */

.sv-hero__arrow:active {

    background:
        rgba(175, 190, 205, 0.28);

    border-color:
        rgba(55, 165, 235, 0.86);

    color:
        rgba(35, 70, 90, 0.98);

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(105, 195, 245, 0.08);

    transition-duration:
        0.08s;

}


.sv-hero__arrow--prev:active {

    transform:
        translate(-1px, -50%)
        scale(0.96);

}


.sv-hero__arrow--next:active {

    transform:
        translate(1px, -50%)
        scale(0.96);

}


/* ---------------------------------------------------------
   08. Keyboard Focus
   --------------------------------------------------------- */

.sv-hero__arrow:focus-visible {

    outline:
        1px solid rgba(55, 165, 235, 0.92);

    outline-offset:
        3px;

}


/* ---------------------------------------------------------
   09. Disabled State
   --------------------------------------------------------- */

.sv-hero__arrow:disabled {

    cursor: default;

    opacity: 0.58;

}


/*
Do not allow disabled buttons to trigger
the spatial hover movement.
*/

.sv-hero__arrow:disabled:hover {

    transform:
        translateY(-50%);

    border-color:
        rgba(185, 191, 197, 0.58);

    background:
        rgba(205, 210, 214, 0.22);

    color:
        rgba(58, 65, 72, 0.94);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.12),
        0 2px 5px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.055);

}


/* ---------------------------------------------------------
   10. Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .sv-hero__arrow {

        display: none;

    }

}


/* ---------------------------------------------------------
   11. Reduced Motion
   --------------------------------------------------------- */

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

    .sv-hero__arrow {

        transition: none;

    }


    .sv-hero__arrow--prev:hover,
    .sv-hero__arrow--next:hover,
    .sv-hero__arrow--prev:active,
    .sv-hero__arrow--next:active {

        transform:
            translateY(-50%);

    }

}