/* =====================================================
   Hayfala Shared Component Styles
   Extracted from inline styles across all pages
   ===================================================== */

/* Alpine.js cloak utility */
[x-cloak] {
    display: none !important;
}

/* --- FADE-UP ANIMATION (IntersectionObserver) --- */
.fade-up-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-up-active {
    opacity: 1;
    transform: translateY(0);
}

/* --- BUTTON SHINE SWEEP --- */
.btn-shine {
    position: relative;
    overflow: hidden;
}

.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
}

@media (hover: hover) {
    .btn-shine:hover::after {
        animation: shine-sweep 0.75s;
    }
}

@keyframes shine-sweep {
    100% {
        left: 125%;
    }
}

/* --- CAPSULE HEADER --- */
#main-header.is-shrunk {
    top: 1.5rem;
    width: 92%;
    left: 4%;
    height: 64px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    justify-content: center;
    padding: 0 2rem;
    box-shadow: 0 10px 40px -10px rgba(0, 166, 169, 0.15);
}

#main-header.menu-open {
    background-color: white;
    height: auto;
    border-radius: 20px;
    width: 100%;
    left: 0;
    top: 0;
    padding: 1.5rem;
    max-height: 85vh;
    overflow-y: auto;
}

/* --- HIDE SCROLLBAR UTILITY --- */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* --- SWIPE AREA UTILITY --- */
.swipe-area {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}