/**
 * Al-Amwaj Fishing Store — Homepage Stylesheet
 * Strict Separation of Concerns (Zero inline CSS in Razor)
 */

/* ==========================================================================
   0. Dynamic Cinematic Hero Slider (Crossfade, Ken Burns, Progress Pills)
   ========================================================================== */
.hero-slider {
    position: relative;
    outline: none;
}

.hero-slider-grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}

.hero-slide {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.65s ease;
    z-index: 1;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

/* Cinematic Ken Burns zoom effect */
.hero-slide .hero-slide-img {
    transform: scale(1.05);
    transition: transform 6.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.hero-slide.is-active .hero-slide-img {
    transform: scale(1);
}

/* Staggered entrance animations for content in active slide */
.hero-slide [data-hero-animate="pill"] {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}

.hero-slide [data-hero-animate="title"] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s;
}

.hero-slide [data-hero-animate="desc"] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s;
}

.hero-slide [data-hero-animate="cta"] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease 0.45s, transform 0.5s ease 0.45s;
}

.hero-slide.is-active [data-hero-animate] {
    opacity: 1;
    transform: translateY(0);
}

/* Pill Progress Bar Animation */
@keyframes heroProgressFill {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

.hero-indicator-pill .hero-indicator-fill {
    animation: heroProgressFill 6.5s linear forwards;
}

.hero-slider.is-paused .hero-indicator-fill {
    animation-play-state: paused !important;
}

/* Focus indicator for keyboard navigation */
.hero-slider:focus-visible {
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6);
}

/* ==========================================================================
   1. Category Carousel Scroll & Drag Controls
   ========================================================================== */
.home-category-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    user-select: none;
}

.home-category-scroll::-webkit-scrollbar {
    display: none;
}

.home-category-scroll.cursor-grabbing {
    cursor: grabbing !important;
    scroll-snap-type: none !important;
}

#categories {
    scroll-margin-top: 5rem;
}

/* ==========================================================================
   2. Mobile Navigation Drawer Transitions
   ========================================================================== */
body.mobile-drawer-open {
    overflow: hidden;
    touch-action: none;
}

[data-mobile-drawer-backdrop].is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

[data-mobile-drawer-panel].is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

/* ==========================================================================
   3. Tactile Micro-Interactions & Spring Feedback
   ========================================================================== */
.tactile-btn {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease;
}

.tactile-btn:active {
    transform: scale(0.96);
}

/* ==========================================================================
   4. Ambient Deep Ocean Backdrops
   ========================================================================== */
.ambient-glow-navy {
    background: radial-gradient(circle at 50% 50%, rgba(27, 95, 168, 0.25) 0%, rgba(10, 42, 80, 0) 70%);
}

.ambient-glow-cyan {
    background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.2) 0%, rgba(10, 42, 80, 0) 70%);
}

/* ==========================================================================
   5. Reduced Motion Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}