/* ========================================
   NAVIGATION - Ghost arrows on desktop, button style on mobile
   Breakpoints: 900px (exhibited/contained), 600px (large/small contained)
   ======================================== */

/* ========================================
   INPUT FOCUSED STATE - Hide navigation on mobile
   ======================================== */

body.input-focused .nav-arrow {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease;
}

body.input-focused .swipe-indicator {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ========================================
   NAV ARROWS - Base styles
   Ghost chevron style (desktop default)
   ======================================== */

:root {
    /* Gap between frame edge and arrow (desktop) */
    --arrow-gap-from-frame: 140px;
}

.nav-arrow {
    position: fixed;
    z-index: 5000;
    cursor: pointer;
    pointer-events: auto;
    
    /* Ghost style - no background */
    background: transparent;
    border: none;
    border-radius: 0;
    
    /* Color */
    color: rgba(255, 255, 255, 0.6);
    
    /* Glow effect */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
    
    /* Animation */
    animation: arrowPulseContinuous 3s ease-in-out infinite;
    transition: color 0.3s ease;
    
    /* Performance */
    will-change: filter;
    -webkit-transform: translateY(-50%) translateZ(0);
    transform: translateY(-50%) translateZ(0);
}

/* Subtle glow animation - ghost style */
@keyframes arrowPulseContinuous {
    0%, 100% {
        color: rgba(255, 255, 255, 0.4);
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.2));
    }
    50% {
        color: rgba(255, 255, 255, 0.8);
        filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.6));
    }
}

/* Hover state (desktop) */
.nav-arrow:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* SVG icon sizing */
.nav-arrow svg {
    width: 40px;
    height: 40px;
}

/* ========================================
   DESKTOP/EXHIBITED MODE: ≥ 900px
   Ghost arrows beside frame, vertically centered with frame
   ======================================== */

@media (min-width: 900px) {
    .nav-arrow {
        /* Vertically centered with frame (accounting for frame offset) */
        top: calc(var(--viewport-height, 100vh) / 2 - var(--frame-vertical-offset, 60px));
        transform: translateY(-50%);
    }
    
    /* Position arrows relative to frame edges, but never off-screen
       Uses max() to clamp: stay 20px from viewport edge minimum */
    .nav-arrow-left {
        left: max(20px, calc(50% - var(--frame-size, 700px) / 2 - var(--arrow-gap-from-frame) - 40px));
    }
    
    .nav-arrow-right {
        right: max(20px, calc(50% - var(--frame-size, 700px) / 2 - var(--arrow-gap-from-frame) - 40px));
    }
}

/* Short desktop - when height is limiting factor */
@media (min-width: 900px) and (max-height: 800px) {
    .nav-arrow svg {
        width: 36px;
        height: 36px;
    }
    
    .nav-arrow-left {
        left: max(20px, calc(50% - var(--frame-size, 700px) / 2 - var(--arrow-gap-from-frame) - 36px));
    }
    
    .nav-arrow-right {
        right: max(20px, calc(50% - var(--frame-size, 700px) / 2 - var(--arrow-gap-from-frame) - 36px));
    }
}

/* ========================================
   CONTAINED MODE: < 900px
   Button style, bottom corner positioning
   ======================================== */

@media (max-width: 899px) {
    .nav-arrow {
        top: auto;
        bottom: 3vh;
        
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        
        /* Button appearance */
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 50%;
        
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: rgba(255, 255, 255, 0.85);
        
        box-shadow: 
            0 0 15px 5px rgba(255, 255, 255, 0.2),
            0 0 30px 10px rgba(255, 255, 255, 0.1);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
        
        animation: mobileArrowGlow 3s ease-in-out infinite;
        transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
        
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    @supports not (backdrop-filter: blur(12px)) {
        .nav-arrow {
            background: rgba(0, 0, 0, 0.85);
        }
    }
    
    @keyframes mobileArrowGlow {
        0%, 100% {
            box-shadow: 
                0 0 12px 4px rgba(255, 255, 255, 0.15),
                0 0 25px 8px rgba(255, 255, 255, 0.08);
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
            border-color: rgba(255, 255, 255, 0.2);
        }
        50% {
            box-shadow: 
                0 0 20px 8px rgba(255, 255, 255, 0.3),
                0 0 40px 15px rgba(255, 255, 255, 0.15);
            filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
            border-color: rgba(255, 255, 255, 0.35);
        }
    }
    
    /* Active/pressed state - no scale to prevent jump */
    .nav-arrow:active {
        background: rgba(0, 0, 0, 0.9);
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 
            0 0 25px 10px rgba(255, 255, 255, 0.4),
            0 0 50px 20px rgba(255, 255, 255, 0.2);
    }
    
    .nav-arrow-left {
        left: 20px;
    }
    
    .nav-arrow-right {
        right: 20px;
    }
    
    .nav-arrow svg {
        width: 28px;
        height: 28px;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .nav-arrow.pulsing {
        animation: mobileArrowPulse 2s ease-in-out 3;
    }
    
    @keyframes mobileArrowPulse {
        0%, 100% {
            box-shadow: 
                0 0 12px 4px rgba(255, 255, 255, 0.15),
                0 0 25px 8px rgba(255, 255, 255, 0.08);
            background: rgba(0, 0, 0, 0.7);
        }
        50% {
            box-shadow: 
                0 0 25px 10px rgba(255, 255, 255, 0.35),
                0 0 50px 20px rgba(255, 255, 255, 0.2);
            background: rgba(0, 0, 0, 0.85);
        }
    }
}

/* ========================================
   EXTRA SMALL: < 400px
   ======================================== */

@media (max-width: 399px) {
    .nav-arrow {
        bottom: 20px;
        width: 50px;
        height: 50px;
    }
    
    .nav-arrow-left {
        left: 15px;
    }
    
    .nav-arrow-right {
        right: 15px;
    }
    
    .nav-arrow svg {
        width: 24px;
        height: 24px;
    }
}

/* ========================================
   TALL/NARROW DEVICES (Z Flip folded, etc.)
   ======================================== */

@media (max-aspect-ratio: 55/100) {
    .nav-arrow {
        bottom: 15px;
        width: 44px;
        height: 44px;
    }
    
    .nav-arrow-left {
        left: 10px;
    }
    
    .nav-arrow-right {
        right: 10px;
    }
    
    .nav-arrow svg {
        width: 22px;
        height: 22px;
    }
}

/* Z Flip specific */
@media (max-width: 320px) and (max-aspect-ratio: 55/100) {
    .nav-arrow {
        bottom: 10px;
        width: 40px;
        height: 40px;
    }
    
    .nav-arrow-left {
        left: 8px;
    }
    
    .nav-arrow-right {
        right: 8px;
    }
    
    .nav-arrow svg {
        width: 20px;
        height: 20px;
    }
}

/* ========================================
   SWIPE INDICATOR (contained mode only)
   ======================================== */

.swipe-indicator {
    position: fixed;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5000;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.swipe-indicator.visible {
    opacity: 1;
}

.swipe-indicator.fading {
    opacity: 0;
    transition: opacity 1.5s ease;
}

.swipe-icon {
    display: none;
}

.swipe-text {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

@media (max-width: 899px) {
    .swipe-indicator {
        display: flex;
    }
}

@media (max-width: 399px) {
    .swipe-indicator {
        bottom: 30px;
    }
    
    .swipe-text {
        font-size: 10px;
        letter-spacing: 1px;
    }
}

/* Tall/narrow swipe indicator */
@media (max-aspect-ratio: 55/100) {
    .swipe-indicator {
        bottom: 18px;
    }
    
    .swipe-text {
        font-size: 9px;
        letter-spacing: 1px;
    }
}

/* Z Flip - hide swipe indicator (not enough room) */
@media (max-width: 320px) and (max-aspect-ratio: 55/100) {
    .swipe-indicator {
        display: none;
    }
}

.swipe-indicator.pulsing .swipe-text {
    animation: textFadePulse 2s ease-in-out infinite;
}

@keyframes textFadePulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}