/* =============================================
   PAGE LOADER
============================================= */

#page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #0f172a; /* Slate 900 - Navy Blue background */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#page-loader.loader-out {
    opacity: 0;
    transform: scale(1.04);
    pointer-events: none;
}

/* Container for the 3D butterfly */
#page-loader .butterfly-container {
    perspective: 800px;
    width: 120px;
    height: 120px;
    position: relative;
    animation: hover 4s ease-in-out infinite alternate;
}

/* The SVG itself */
.butterfly-svg {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Wing Animations */
.wing-left {
    transform-origin: 50% 50%;
    animation: flap-left var(--flap-speed, 0.7s) ease-in-out infinite alternate;
}

.wing-right {
    transform-origin: 50% 50%;
    animation: flap-right var(--flap-speed, 0.7s) ease-in-out infinite alternate;
}

@keyframes flap-left {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(70deg);
    }
}

@keyframes flap-right {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-70deg);
    }
}

/* Keyframes for a very subtle hover */
@keyframes hover {
    0% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(10px);
    }
}

/* Minimalist shadow - adjusted for dark background */
#page-loader .shadow {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 5px;
    background: rgba(0, 0, 0, 0.4); /* Darker shadow for navy bg */
    border-radius: 50%;
    filter: blur(5px);
    animation: shadow-pulse 4s ease-in-out infinite alternate;
}

@keyframes shadow-pulse {
    0% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0.2;
    }
    100% {
        transform: translateX(-50%) scale(1.2);
        opacity: 0.6;
    }
}

/* Elegant silver loading text */
#page-loader .loading-text {
    color: #cbd5e1; /* Slate 300 - Silver text */
    font-size: 0.875rem; /* text-sm */
    letter-spacing: 0.25em;
    font-weight: 300;
}

#page-loader .loading-text span {
    display: inline-block;
    animation: fade 1.5s infinite ease-in-out both;
}

#page-loader .loading-text span:nth-child(1) {
    animation-delay: -0.32s;
}

#page-loader .loading-text span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes fade {
    0%,
    80%,
    100% {
        opacity: 0.3;
    }
    40% {
        opacity: 1;
    }
}


 @font-face {
     font-family: 'Pinyon Script';
     src: url('./fonts/Pinyon_Script/PinyonScript-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
 }

 /* Be Vietnam Pro */
 @font-face {
     font-family: 'Be Vietnam Pro';
     src: url('./fonts/Be_Vietnam_Pro/BeVietnamPro-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
 }

 /* Libre Franklin */
 @font-face {
     font-family: 'Libre Franklin';
     src: url('./fonts/Libre_Franklin/LibreFranklin-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Libre Franklin';
     src: url('./fonts/Libre_Franklin/LibreFranklin-Medium.ttf') format('truetype');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Libre Franklin';
     src: url('./fonts/Libre_Franklin/LibreFranklin-SemiBold.ttf') format('truetype');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
 }

 /* Playfair Display */
 @font-face {
     font-family: 'Playfair Display';
     src: url('./fonts/Playfair_Display/PlayfairDisplay-Medium.ttf') format('truetype');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Playfair Display';
     src: url('./fonts/Playfair_Display/PlayfairDisplay-SemiBold.ttf') format('truetype');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Playfair Display';
     src: url('./fonts/Playfair_Display/PlayfairDisplay-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
 }


 body {
     /* Subtle paper texture overlay */
     background-color: #0f172a;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
 }

 /* Decorative watercolor floral backgrounds (simulated with gradients for structural placeholder, real implementation would use images) */
 .floral-top-left {
     position: absolute;
     top: 0;
     left: 0;
     width: 350px;
     height: 350px;
     background: radial-gradient(circle at top left, rgba(244, 114, 182, 0.25) 0%, rgba(15, 23, 42, 0) 70%);
     z-index: 1;
     pointer-events: none;
 }

 .floral-bottom-right {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.15) 0%, rgba(15, 23, 42, 0) 70%);
     z-index: 1;
     pointer-events: none;
 }

 body {
     min-height: max(884px, 100dvh);
 }

 /* Header fix */
 header {
     border-bottom: 1px solid rgba(71, 85, 105, 0.3) !important;
 }

 /* SVG Icon color helpers */
 /* CSS filters calculated to approximate each color:
    primary: #e2c974  |  outline-variant: #94a3b8  |  on-primary: #0f172a  |  outline: #64748b */
 .icon {
     display: inline-block;
     flex-shrink: 0;
 }

 /* #cbd5e1 - primary (silver) */
 .icon-primary {
     filter: brightness(0) saturate(100%) invert(87%) sepia(15%) saturate(190%) hue-rotate(180deg) brightness(94%) contrast(89%);
 }

 /* #94a3b8 - outline-variant (Slate 400) */
 .icon-outline-variant {
     filter: brightness(0) saturate(100%) invert(72%) sepia(10%) saturate(600%) hue-rotate(178deg) brightness(90%) contrast(88%);
 }

 /* #0f172a - on-primary (Slate 900) */
 .icon-on-primary {
     filter: brightness(0) saturate(100%) invert(8%) sepia(17%) saturate(2331%) hue-rotate(185deg) brightness(94%) contrast(97%);
 }

 /* #64748b - outline (Slate 500) */
 .icon-outline {
     filter: brightness(0) saturate(100%) invert(48%) sepia(12%) saturate(830%) hue-rotate(178deg) brightness(92%) contrast(87%);
 }

 /* #cbd5e1 at 60% opacity approximation */
 .icon-primary-60 {
     filter: brightness(0) saturate(100%) invert(87%) sepia(15%) saturate(190%) hue-rotate(180deg) brightness(94%) contrast(89%) opacity(0.6);
 }

 /* Morphing Blob Mask & Slow Pan Animation */
 .blob-mask {
     border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
     animation: morph-blob 10s ease-in-out infinite alternate;
     will-change: border-radius;
 }

 @keyframes morph-blob {
     0% {
         border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
     }
     50% {
         border-radius: 40% 60% 50% 50% / 50% 45% 55% 50%;
     }
     100% {
         border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%;
     }
 }

 @keyframes slow-pan {
     0% {
         transform: scale(1.1) translate(0, 0);
     }
     100% {
         transform: scale(1.2) translate(-5px, -3px);
     }
 }

/* Remove default tap highlight on mobile for interactive elements */
button, a, .cursor-pointer {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}