/* tasarim/style.css */

/* Mobile App Feel Adjustments */
body {
    -webkit-tap-highlight-color: transparent;
    background-color: #FAFAFA;
    color: #1f2937;
    overscroll-behavior-y: none; /* Prevents pull-to-refresh glow */
}

/* Hide Scrollbar but keep functionality */
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
}

/* Scroll Lock Class */
.scroll-lock {
    overflow: hidden !important;
    touch-action: none;
}

/* General Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

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

/* Instagram Story-like Category Animations */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.story-anim {
    opacity: 0;
}

.reveal.active .story-anim {
    animation: slideInRight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Staggered Delays for Categories */
.story-anim:nth-child(1) { animation-delay: 0.1s; }
.story-anim:nth-child(2) { animation-delay: 0.2s; }
.story-anim:nth-child(3) { animation-delay: 0.3s; }
.story-anim:nth-child(4) { animation-delay: 0.4s; }
.story-anim:nth-child(5) { animation-delay: 0.5s; }
.story-anim:nth-child(6) { animation-delay: 0.6s; }

/* Horizontal Scroll Snap */
.snap-x-mandatory {
    scroll-snap-type: x mandatory;
}
.snap-center {
    scroll-snap-align: center;
}

/* Splash Screen */
#splash-screen {
    transition: opacity 0.3s ease-out, visibility 0.6s ease-out;
}

/* Modals Transition */
.modal-overlay {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-out;
}
.modal-overlay.open {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-overlay.open .modal-content {
    transform: translateY(0);
}

/* Mobile Menu Transition */
.side-menu {
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-overlay.open .side-menu {
    transform: translateX(0);
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(to right, #D4AF37, #AA8C2C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}