@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
/* Description Font (Fallback) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Khmer:wght@300;400;500;600;700&display=swap');

/* --- Fonts Setup --- */

/* MiSans Khmer - Regular */
@font-face {
    font-family: 'MiSans Khmer';
    src: url('img/MiSansKhmer-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* MiSans Khmer - Bold */
@font-face {
    font-family: 'MiSans Khmer';
    src: url('img/MiSansKhmer-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* --- GLOBAL FLUID TYPOGRAPHY (MEDIA QUERIES) --- */

html {
    font-size: 14px; /* Mobile: Base size is smaller */
}

@media (min-width: 640px) { /* Tablet (Small) */
    html {
        font-size: 15px; 
    }
}

@media (min-width: 1024px) { /* Desktop (Large) */
    html {
        font-size: 16px; /* Standard Desktop size */
    }
}

body {
    /* English first, then MiSans Khmer, then standard Noto fallback */
    font-family: 'Plus Jakarta Sans', 'MiSans Khmer', 'Noto Sans Khmer', sans-serif;
    -webkit-tap-highlight-color: transparent; /* Remove blue tap highlight on mobile */
    font-size: 1rem; /* Inherits from html */
    line-height: 1.5;
}

/* --- Custom Font Classes with Specific Media Queries --- */

/* UPDATED: Uses MiSans Khmer Bold for main titles */
.font-akbalthom {
    font-family: 'MiSans Khmer', 'Noto Sans Khmer', sans-serif;
    font-weight: bold; /* Forces use of the Bold font file */
}

/* Specific Mobile Override for Khmer Text:
   Khmer characters can be hard to read if too small. 
   This ensures they are never smaller than 1rem on mobile.
*/
.khmer-text {
    font-family: 'MiSans Khmer', 'Noto Sans Khmer', sans-serif;
}

@media (max-width: 639px) {
    .khmer-text {
        line-height: 1.7; /* Increase spacing on mobile for better readability */
    }
    
    /* Boost the font size slightly on very small screens if needed */
    .mobile-text-boost {
        font-size: 1.7rem !important;
    }
}

/* --- Utilities --- */

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

/* Safe Area Utilities (Crucial for Mobile Apps/iPhones) */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 20px);
}
.mb-safe {
    margin-bottom: env(safe-area-inset-bottom, 20px);
}
.pt-safe {
    padding-top: env(safe-area-inset-top, 20px);
}

/* --- Animations --- */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-slide-up {
    animation: slideUp 0.4s ease-out forwards;
}

/* Modal backdrop transition */
.modal-backdrop {
    transition: opacity 0.3s ease;
}

/* App-like Touch Feedback */
.touch-scale {
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.touch-scale:active {
    transform: scale(0.95);
}

/* --- SEASONAL EFFECTS: SNOW --- */
#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicking through snow */
    z-index: 9999; /* On top of everything */
    overflow: hidden;
    display: none; /* Hidden by default */
}

#snow-container.active {
    display: block;
}

.snowflake {
    position: absolute;
    top: -10px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: 0 0 5px rgba(255,255,255,0.8);
    animation: fall linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(-10vh) translateX(0px);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) translateX(20px);
        opacity: 0.3;
    }
}

/* --- SANTA FLYING ANIMATION --- */

#santa-fly-container {
    position: fixed;
    top: 15%; /* Adjusts how high in the sky he flies */
    left: 0;
    width: 100%;
    height: 0; /* Container doesn't take up layout space */
    z-index: 10000; /* Ensures he flies ON TOP of the menu/hero */
    pointer-events: none; /* Allows users to click through him */
}

.santa-img {
    position: absolute;
    width: 450px; /* UPDATED: Increased Size on Desktop (was 300px) */
    height: auto;
    /* Initial position: Off-screen to the LEFT */
    transform: translateX(-50vw); 
    /* Animation: Name | Duration | Timing | Delay | Iteration */
    animation: santaFlyBy 8s linear forwards; /* UPDATED: Reduced to 8s to match video length */
}

/* Keyframes for the movement (Left to Right) */
@keyframes santaFlyBy {
    0% {
        transform: translateX(-20vw) translateY(0); /* Start closer to screen edge */
        opacity: 1;
    }
    25% {
        transform: translateX(20vw) translateY(-20px); /* Bob up slightly */
    }
    50% {
        transform: translateX(60vw) translateY(0); /* Middle */
    }
    75% {
        transform: translateX(90vw) translateY(10px); /* Bob down slightly */
    }
    100% {
        transform: translateX(120vw) translateY(-10px); /* End far right */
        opacity: 1;
    }
}

/* Mobile Adjustment: Make Santa smaller on phones */
@media (max-width: 640px) {
    .santa-img {
        width: 250px; /* UPDATED: Increased Size on Mobile (was 180px) */
        top: 60px; /* Lower him slightly on mobile to avoid the logo */
        animation-duration: 8s; /* Flies faster on mobile */
    }
}