/* Custom Styles that can't be handled by Tailwind directly */

/* Smooth Scrolling is handled by html class="scroll-smooth" but we can enforce it here too */
html {
    scroll-behavior: smooth;
}

/* Custom Text Selection Color */
::selection {
    background: #C4A484; /* siam-gold */
    color: #1A1A1A;
}

/* Typography Enhancements */
.font-serif {
    font-feature-settings: "liga", "kern";
}

/* Navigation Blur Effect on Scroll */
.nav-scrolled {
    background-color: rgba(26, 26, 26, 0.9);
    backdrop-filter: blur(10px);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    mix-blend-mode: normal !important;
}

/* Loader Animation */
#loader-logo {
    animation: fadeIn 1s ease-out forwards;
}

#loader-line {
    animation: growLine 1.5s ease-in-out 0.5s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes growLine {
    to { width: 100px; }
}

/* Custom Cursor (Optional for Luxury Feel - skipping for simplicity but keeping structure if needed) */

/* Image Hover Effects */
.sense-card img {
    will-change: transform;
}

/* Utility for text reveal masking */
.reveal-mask {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.reveal-mask.visible {
    clip-path: inset(0 0 0 0);
}

/* Mobile Menu Overlay */
.mobile-menu-open {
    overflow: hidden;
}

/* Fix for mix-blend-mode in some browsers */
nav {
    transform: translateZ(0);
}