/* Custom Styles for YUJI Studio */

html {
    scroll-behavior: smooth;
    background-color: #090807;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #F6EEDF;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 217, 61, 0.22) 0%, transparent 24%),
        radial-gradient(circle at 82% 14%, rgba(68, 203, 207, 0.18) 0%, transparent 26%),
        radial-gradient(circle at 72% 72%, rgba(255, 107, 107, 0.14) 0%, transparent 24%),
        radial-gradient(circle at 18% 82%, rgba(254, 172, 220, 0.10) 0%, transparent 22%),
        linear-gradient(180deg, #0b0e16 0%, #11131b 48%, #0f1118 100%);
}

.glass-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 248, 235, 0.08) 0%, rgba(255, 248, 235, 0.04) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(245, 228, 198, 0.12);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(68, 203, 207, 0.04);
}

.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        600px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
        rgba(255, 255, 255, 0.06),
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: -1;
}

.glass-card:hover::before {
    opacity: 1;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

.gallery-track {
    width: max-content;
    min-width: max-content;
    will-change: transform, scroll-position;
}

.gallery-viewport {
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.gallery-viewport.is-dragging {
    cursor: grabbing;
}

@media (max-width: 768px) {
    body {
        background:
            radial-gradient(circle at 18% 12%, rgba(255, 217, 61, 0.24) 0%, transparent 40%),
            radial-gradient(circle at 82% 18%, rgba(68, 203, 207, 0.22) 0%, transparent 42%),
            radial-gradient(circle at 76% 56%, rgba(255, 107, 107, 0.18) 0%, transparent 38%),
            radial-gradient(circle at 22% 78%, rgba(254, 172, 220, 0.16) 0%, transparent 36%),
            linear-gradient(180deg, #0b0e16 0%, #11131b 48%, #0f1118 100%);
    }
}

.nav-scrolled {
    background: rgba(9, 8, 7, 0.72) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(68, 203, 207, 0.14);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24);
}

.parallax-card {
    --parallax-x: 0px;
    --parallax-y: 0px;
    --scroll-y: 0px;
    transform: translate3d(var(--parallax-x), calc(var(--parallax-y) + var(--scroll-y)), 0);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.parallax-card:hover {
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 231, 92, 0.08);
}

/* Hide scrollbar for webkit */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}