/**
 * KSPAN Algeria – styles.css
 * Complementary styles for Tailwind CDN gaps and animations
 */

/* ============================================================
   FONTS
   ============================================================ */
* {
    box-sizing: border-box;
}

/* ============================================================
   REVEAL ANIMATIONS (works with Intersection Observer)
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for sibling .reveal elements */
.reveal:nth-child(2) {
    transition-delay: 0.1s;
}
.reveal:nth-child(3) {
    transition-delay: 0.2s;
}
.reveal:nth-child(4) {
    transition-delay: 0.3s;
}
.reveal:nth-child(5) {
    transition-delay: 0.4s;
}
.reveal:nth-child(6) {
    transition-delay: 0.5s;
}

/* ============================================================
   HERO FADE IN
   ============================================================ */
.animate-fade-in {
    animation: fadeInUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

.animate-fade-in:nth-child(1) {
    animation-delay: 0.1s;
}
.animate-fade-in:nth-child(2) {
    animation-delay: 0.3s;
}
.animate-fade-in:nth-child(3) {
    animation-delay: 0.5s;
}
.animate-fade-in:nth-child(4) {
    animation-delay: 0.7s;
}
.animate-fade-in:nth-child(5) {
    animation-delay: 0.9s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   GALLERY CARD ANIMATION
   ============================================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   FOCUS VISIBLE (Accessibility)
   ============================================================ */
*:focus-visible {
    outline: 2px solid #01a0c6;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ============================================================
   SLIDER TRANSITION
   ============================================================ */
.slide {
    transition: opacity 0.4s ease;
}

.slide.hidden {
    display: none;
}

/* ============================================================
   NAVBAR SCROLLED STYLE (shadow via JS + these utilities)
   ============================================================ */
#navbar-inner {
    will-change: box-shadow;
    transition:
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

/* ============================================================
   FORM INPUT FOCUS RING
   ============================================================ */
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* Remove number input arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================================
   SELECTION COLOR
   ============================================================ */
::selection {
    background-color: #01a0c6;
    color: #ffffff;
}

/* ============================================================
   SCROLLBAR (Webkit)
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #1e3a5f;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #01a0c6;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    #navbar,
    #back-to-top,
    .filter-btn {
        display: none !important;
    }
}

/* ============================================================
   MOBILE TOUCH TARGETS  (Accessibility)
   ============================================================ */
button,
a {
    min-height: 44px;
    min-width: 44px;
}

nav a,
footer a {
    min-height: unset;
    min-width: unset;
}

/* ============================================================
   HIGH CONTRAST / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .animate-fade-in,
    .slide,
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   ACCESSIBILITY WIDGET RUNTIME CLASSES
   ============================================================ */

/* Grayscale mode */
html.a11y-grayscale {
    filter: grayscale(100%);
}

/* High contrast mode */
html.a11y-high-contrast {
    filter: contrast(175%) brightness(105%);
}

/* High contrast + grayscale combined */
html.a11y-grayscale.a11y-high-contrast {
    filter: grayscale(100%) contrast(175%) brightness(105%);
}

/* Underline all links */
html.a11y-underline-links a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Smooth font-size transition on <html> */
html {
    transition: font-size 0.2s ease;
}

/* Font size levels */
html.a11y-font-lg {
    font-size: 112.5%; /* 18px base */
}

html.a11y-font-xl {
    font-size: 125%; /* 20px base */
}