/* SAFARI & PERFORMANCE RULES */
:root {
    --app-dvh: 100vh;
    /* Fallback */
}

/* 1. iOS Viewport Fix */
.h-dvh-safe {
    height: 100vh;
    /* Fallback for old browsers */
    height: 100dvh;
    /* Modern mobile browsers */
}

/* 2. Glassmorphism Safely */
.glass-panel {
    background-color: rgba(255, 255, 255, 0.85);
    /* Fallback solid-ish */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
    background-color: rgba(10, 46, 77, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 3. Hardware Acceleration & 3D Fixes */
.hardware-accel {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
}

/* 4. Scroll Reveal Classes */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

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

/* 5. Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #14558f;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0a2e4d;
}

/* Utility */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Custom Cursor */
.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: #f68e2f;
}

.cursor-outline {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(246, 142, 47, 0.5);
    transition: width 0.2s, height 0.2s, background-color 0.2s;
}

body:hover .cursor-outline {
    width: 40px;
    height: 40px;
}

/* Hover interaction for cursor */
body:has(a:hover) .cursor-outline,
body:has(button:hover) .cursor-outline {
    width: 60px;
    height: 60px;
    background-color: rgba(246, 142, 47, 0.1);
    border-color: #f68e2f;
}

/* Pulse Animation */
@keyframes pulse-custom {
    0% {
        box-shadow: 0 0 0 0 rgba(246, 142, 47, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(246, 142, 47, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(246, 142, 47, 0);
    }
}

.animate-pulse-custom {
    animation: pulse-custom 2s infinite;
}

@keyframes popUp {
    0% {
        opacity: 0;
        transform: scale(0) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --- EFFECT: EXPANDABLE CAPSULE HEADER --- */
#main-header {
    /* Smooth transition for all morphing effects */
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    overflow: hidden;
    /* Important for containing the sliding menu */
}

/* 1. SCROLLED STATE: The Floating Capsule */
/* Applied via Alpine.js when scrollProgress > 2 */
#main-header.is-shrunk {
    top: 1.5rem;
    width: 92%;
    left: 4%;
    height: 64px;
    /* Default compressed height */
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.85);
    /* Glass effect */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(42, 89, 79, 0.1);
    box-shadow: 0 20px 40px rgba(42, 89, 79, 0.1);
    padding: 0 2rem;
    justify-content: center;
    /* Center content vertically */
}

/* 2. OPEN STATE: The Expanded Card */
/* Applied via Alpine.js when mobileMenuOpen is true */
#main-header.menu-open {
    height: auto !important;
    /* Allow growing to fit menu items */
    min-height: 380px;
    /* Minimum height for the open menu */
    border-radius: 2rem !important;
    /* Less rounded corners for card look */
    background-color: rgba(255, 255, 255, 0.98);
    /* Solid background */
    backdrop-filter: blur(25px);

    /* Lock position to "Capsule" spot even if at top of page */
    top: 1.5rem !important;
    width: 92% !important;
    left: 4% !important;

    padding-bottom: 2rem;
    padding-top: 1rem;
    /* Restore top padding for expanded state */
    justify-content: flex-start;
    /* Flow from top */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.ease-cubic {
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

/* Mobile Carousel Styles */
@media (max-width: 767px) {
    .mobile-carousel {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        /* Reduced gap */
        padding-bottom: 2rem;
        /* Space for scrollbar or dots */
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
        padding-right: 0;
        /* Remove right padding to prevent offset */
    }

    .mobile-carousel::-webkit-scrollbar {
        display: none;
    }

    .mobile-carousel>* {
        flex: 0 0 100%;
        /* Show full single card */
        scroll-snap-align: center;
        /* Snap to center */
        min-width: 100%;
        /* Force full width */
    }
}

@media (min-width: 768px) {
    .mobile-carousel {
        display: grid;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .mobile-carousel>* {
        flex: none;
        scroll-snap-align: none;
    }
}

/* Auto Slide Animation for Mobile */
@media (max-width: 767px) {
    .mobile-auto-slide {
        animation: scrollCarousel 15s linear infinite alternate;
    }

    .mobile-auto-slide:hover {
        animation-play-state: paused;
    }
}

/* Note: Pure CSS auto-scroll on a flex container is tricky because it fights user scroll. 
           Better to rely on JS or just let it be user-scrollable with "snap". 
           For "auto slide" requirement, JS is safer for UX. 
           We will use a JS interval to scroll lightly if requested. 
        */

 /* New - Pop Letter Animation classes from JS logic */
 .pop-letter {
     display: inline-block;
     opacity: 0;
     transform: translateY(20px) scale(0);
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .pop-letter.popped {
     opacity: 1;
     transform: translateY(0) scale(1);
 }