/* --- Core Settings --- */
        body {
            /* Custom Unicorn Cursor with fallback */
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="%23FFD1DC" stroke="%234A235A" stroke-width="1.5"><path d="M12 2L15 9L22 9L16 14L18 21L12 17L6 21L8 14L2 9L9 9Z"/></svg>') 16 16, auto;
            transition: background-color 1.5s ease, color 1.5s ease;
            -webkit-tap-highlight-color: transparent;
            overflow-x: hidden;
        }

        /* Scroll offset for fixed navbar */
        section[id] {
            scroll-margin-top: 80px;
        }

        /* Day/Night Modes */
        body.day-mode {
            background: linear-gradient(135deg, #fff0f5 0%, #f3e8ff 50%, #e0f7fa 100%);
            color: #4a5568;
        }

        body.night-mode {
            background: linear-gradient(135deg, #0f172a 0%, #312e81 60%, #581c87 100%);
            color: #e2e8f0;
        }

        /* Dark mode gloomy filter for hero images */
        .dark #hero,
        body.night-mode #hero {
            filter: none;
        }

        .dark #hero img,
        .dark #cover-page img,
        body.night-mode #hero img,
        body.night-mode #cover-page img {
            filter: brightness(0.6) contrast(1.1) saturate(0.8) sepia(0.2);
            transition: filter 0.5s ease;
        }

        .dark #hero::before,
        body.night-mode #hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(15, 10, 40, 0.4), rgba(88, 28, 135, 0.3), rgba(15, 10, 40, 0.5));
            z-index: 1;
            pointer-events: none;
        }

        /* --- Magic Dust Cursor --- */
        .magic-dust {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            animation: sparkleFade 1s linear forwards;
            font-size: 1.2rem;
            text-shadow: 0 0 5px white;
        }

        /* --- Cute Frame --- */
        .unicorn-frame {
            position: fixed;
            inset: 10px;
            /* Offset from edge */
            border: 4px double rgba(255, 209, 220, 0.6);
            /* Soft pink double border */
            border-radius: 20px;
            pointer-events: none;
            z-index: 60;
            box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5);
        }

        /* Corner Decorations */
        .frame-corner {
            position: absolute;
            width: 40px;
            height: 40px;
            background-size: contain;
            background-repeat: no-repeat;
            opacity: 0.8;
        }

        .corner-tl {
            top: -15px;
            left: -15px;
            transform: rotate(0deg);
        }

        .corner-tr {
            top: -15px;
            right: -15px;
            transform: rotate(90deg);
        }

        .corner-br {
            bottom: -15px;
            right: -15px;
            transform: rotate(180deg);
        }

        .corner-bl {
            bottom: -15px;
            left: -15px;
            transform: rotate(270deg);
        }

        /* Glassmorphism */
        .glass {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.5s ease;
        }

        body.night-mode .glass {
            background: rgba(30, 41, 59, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .dark {
            --bg-primary: #1a1a2e;
            --text-primary: #ffffff;
            --glass-bg: rgba(20, 20, 30, 0.6);
            --glass-border: rgba(255, 255, 255, 0.1);

            --particle-1: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
            --particle-2: radial-gradient(circle, rgba(255, 209, 220, 0.5) 0%, transparent 70%);
        }

        /* Hidden Unicorn Styles */
        .hidden-unicorn {
            position: absolute;
            font-size: 2.5rem;
            opacity: 0.6;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 40;
            filter: grayscale(1) brightness(1.2);
            cursor: pointer;
            user-select: none;
            animation: float 4s ease-in-out infinite;
        }

        .hidden-unicorn:active,
        .hidden-unicorn:hover {
            opacity: 1;
            transform: scale(1.4) rotate(15deg);
            filter: grayscale(0) drop-shadow(0 0 10px gold);
        }

        .hidden-unicorn.found {
            pointer-events: none;
            animation: foundAnim 0.8s forwards;
        }

        @keyframes foundAnim {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.5) rotate(360deg);
                opacity: 1;
                filter: hue-rotate(90deg);
            }

            100% {
                transform: scale(0) translateY(-50px);
                opacity: 0;
            }
        }

        /* Lantern Animation */
        .lantern {
            position: fixed;
            bottom: -100px;
            width: 40px;
            height: 55px;
            background: linear-gradient(to top, #ff9800, #ffeb3b);
            border-radius: 8px 8px 20px 20px;
            box-shadow: 0 0 25px rgba(255, 193, 7, 0.8);
            z-index: 9999;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.8);
            animation: floatUp 12s linear forwards;
        }

        .lantern::after {
            content: '';
            position: absolute;
            top: 20%;
            left: 20%;
            width: 60%;
            height: 60%;
            background: radial-gradient(circle, #fff, transparent);
            opacity: 0.7;
            border-radius: 50%;
        }

        @keyframes floatUp {
            0% {
                transform: translateY(0) scale(0.6) rotate(0deg);
                opacity: 0;
            }

            10% {
                opacity: 1;
                transform: translateY(-10vh) scale(1) rotate(2deg);
            }

            50% {
                transform: translateY(-60vh) scale(0.9) rotate(-2deg);
            }

            100% {
                transform: translateY(-120vh) scale(0.5) rotate(5deg);
                opacity: 0;
            }
        }

        /* Scroll Reveal Animation */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            will-change: opacity, transform;
        }

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

        .animate-magical-glow {
            animation: magical-glow 3s ease-in-out infinite;
        }

        /* Custom Animations */
        @keyframes wiggle {

            0%,
            100% {
                transform: rotate(-3deg);
            }

            50% {
                transform: rotate(3deg);
            }
        }

        @keyframes spin-slow {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes float-slow {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes float-medium {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes magical-glow {

            0%,
            100% {
                text-shadow: 0 0 10px rgba(236, 72, 153, 0.5), 0 0 20px rgba(96, 165, 250, 0.3);
            }

            50% {
                text-shadow: 0 0 20px rgba(236, 72, 153, 0.8), 0 0 30px rgba(96, 165, 250, 0.6);
            }
        }

        @keyframes move-cloud {
            from {
                transform: translateX(-100%);
            }

            to {
                transform: translateX(100vw);
            }
        }

        /* Custom Animations */
        @keyframes ken-burns {
            0% {
                transform: scale(1);
            }

            100% {
                transform: scale(1.2);
            }
        }

        @keyframes float-firefly {

            0%,
            100% {
                transform: translate(0, 0);
                opacity: 0;
            }

            25% {
                opacity: 1;
            }

            50% {
                transform: translate(var(--move-x), var(--move-y));
                opacity: 0.5;
            }

            75% {
                opacity: 1;
            }
        }

        /* Utility Classes for Custom Animations */
        .animate-ken-burns {
            animation: ken-burns 20s ease-out infinite alternate;
        }

        .animate-firefly {
            animation: float-firefly var(--duration) ease-in-out infinite;
        }

        .animate-wiggle {
            animation: wiggle 1s ease-in-out infinite;
        }

        .animate-spin-slow {
            animation: spin-slow 10s linear infinite;
        }

        .animate-float-slow {
            animation: float-slow 6s ease-in-out infinite;
        }

        .animate-float-medium {
            animation: float-medium 4s ease-in-out infinite;
        }

        /* --- Animations (duplicates removed) --- */
        @keyframes sound-wave {
            0% {
                box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.7);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(96, 165, 250, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
            }
        }

        .music-playing {
            animation: sound-wave 1.5s infinite;
        }

        @keyframes heartbeat {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }
        }

        @keyframes sparkle-fade {
            0% {
                transform: scale(0);
                opacity: 0;
            }

            50% {
                transform: scale(1);
                opacity: 1;
            }

            100% {
                transform: scale(0);
                opacity: 0;
            }
        }

        @keyframes magical-glow {

            0%,
            100% {
                filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.4));
                transform: scale(1);
            }

            50% {
                filter: drop-shadow(0 0 25px rgba(236, 72, 153, 0.8)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
                transform: scale(1.02);
            }
        }

        @keyframes drift-right {
            from {
                transform: translateX(-10vw) rotate(0deg);
            }

            to {
                transform: translateX(110vw) rotate(360deg);
            }
        }

        .animate-float-slow {
            animation: float-slow 6s ease-in-out infinite;
        }

        .animate-float-medium {
            animation: float-medium 4s ease-in-out infinite;
        }

        .animate-heartbeat {
            animation: heartbeat 3s ease-in-out infinite;
        }

        .animate-magical-glow {
            animation: magical-glow 3s ease-in-out infinite;
        }

        /* Staggered Delays */
        .delay-100 {
            transition-delay: 100ms;
        }

        .delay-200 {
            transition-delay: 200ms;
        }

        .delay-300 {
            transition-delay: 300ms;
        }

        /* --- Pink Theme Glass --- */
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 8px 32px 0 rgba(255, 209, 220, 0.2);
            /* Pink shadow */
            transition: all 0.3s ease;
        }

        /* Dark Mode Glass */
        body.night-mode .glass {
            background: rgba(30, 20, 50, 0.6);
            /* Deep purple tint */
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
        }

        /* Interactive Elements Optimizations */
        button,
        a {
            touch-action: manipulation;
            /* Improves touch response */
        }

        /* Particle Container */
        #particles-container {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            background: radial-gradient(circle, #fff, transparent);
            border-radius: 50%;
            pointer-events: none;
        }

        /* --- Skeleton Loading Styles --- */
        .skeleton {
            background: linear-gradient(90deg,
                    rgba(200, 200, 200, 0.2) 25%,
                    rgba(220, 220, 220, 0.3) 50%,
                    rgba(200, 200, 200, 0.2) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s ease-in-out infinite;
            border-radius: inherit;
        }

        body.night-mode .skeleton,
        body.dark .skeleton {
            background: linear-gradient(90deg,
                    rgba(50, 50, 70, 0.3) 25%,
                    rgba(70, 70, 90, 0.4) 50%,
                    rgba(50, 50, 70, 0.3) 75%);
            background-size: 200% 100%;
        }

        @keyframes skeleton-shimmer {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        /* Skeleton for images */
        .skeleton-image {
            position: relative;
            overflow: hidden;
            background: linear-gradient(90deg,
                    #e0e0e0 25%,
                    #f0f0f0 50%,
                    #e0e0e0 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s ease-in-out infinite;
        }

        body.night-mode .skeleton-image,
        body.dark .skeleton-image {
            background: linear-gradient(90deg,
                    #2a2a3e 25%,
                    #3a3a4e 50%,
                    #2a2a3e 75%);
            background-size: 200% 100%;
        }

        /* Hide skeleton when image is loaded */
        .skeleton-image.loaded {
            animation: none;
            background: transparent;
        }

        /* Smooth fade-in for loaded images */
        .skeleton-image img {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .skeleton-image.loaded img {
            opacity: 1;
        }

        /* Skeleton wrapper for maintaining aspect ratio */
        .skeleton-wrapper {
            position: relative;
            overflow: hidden;
        }

        .skeleton-wrapper::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg,
                    rgba(200, 200, 200, 0.2) 25%,
                    rgba(220, 220, 220, 0.3) 50%,
                    rgba(200, 200, 200, 0.2) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s ease-in-out infinite;
            z-index: 1;
            pointer-events: none;
        }

        .skeleton-wrapper.loaded::before {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        body.night-mode .skeleton-wrapper::before,
        body.dark .skeleton-wrapper::before {
            background: linear-gradient(90deg,
                    rgba(50, 50, 70, 0.3) 25%,
                    rgba(70, 70, 90, 0.4) 50%,
                    rgba(50, 50, 70, 0.3) 75%);
            background-size: 200% 100%;
        }

        /* === GALLERY AUTO-SCROLL CAROUSEL === */
        #gallery-carousel {
            position: relative;
            padding: 1rem 0;
            -webkit-overflow-scrolling: touch;
        }

        #carousel-track {
            display: flex;
            will-change: transform;
            /* Force hardware acceleration on mobile */
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
        }

        /* Infinite scroll animation with hardware acceleration */
        @keyframes scroll-gallery {
            0% {
                transform: translate3d(0, 0, 0);
                -webkit-transform: translate3d(0, 0, 0);
            }
            100% {
                transform: translate3d(-50%, 0, 0);
                -webkit-transform: translate3d(-50%, 0, 0);
            }
        }

        @-webkit-keyframes scroll-gallery {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(-50%, 0, 0);
            }
        }

        .animate-scroll-gallery {
            animation: scroll-gallery 40s linear infinite;
            -webkit-animation: scroll-gallery 40s linear infinite;
            /* Ensure animation runs on mobile */
            animation-play-state: running;
            -webkit-animation-play-state: running;
        }

        /* Pause on hover (desktop only) */
        @media (hover: hover) {
            #gallery-carousel:hover .animate-scroll-gallery {
                animation-play-state: paused;
                -webkit-animation-play-state: paused;
            }
        }

        .gallery-photo {
            transition: transform 0.3s ease;
        }

        .gallery-photo:hover {
            z-index: 10;
            transform: scale(1.05);
        }

        /* === GALLERY SLIDESHOW === */
        .gallery-slideshow {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .slideshow-track {
            display: flex;
            width: 300%;
            height: 100%;
            animation: slideshow-slide 12s ease-in-out infinite;
            -webkit-animation: slideshow-slide 12s ease-in-out infinite;
        }

        .slideshow-photo {
            flex: 0 0 33.333%;
            width: 33.333%;
            height: 100%;
        }

        @keyframes slideshow-slide {
            0%, 30% {
                transform: translate3d(0%, 0, 0);
            }
            33.33%, 63.33% {
                transform: translate3d(-33.333%, 0, 0);
            }
            66.66%, 96.66% {
                transform: translate3d(-66.666%, 0, 0);
            }
            100% {
                transform: translate3d(0%, 0, 0);
            }
        }

        @-webkit-keyframes slideshow-slide {
            0%, 30% {
                -webkit-transform: translate3d(0%, 0, 0);
            }
            33.33%, 63.33% {
                -webkit-transform: translate3d(-33.333%, 0, 0);
            }
            66.66%, 96.66% {
                -webkit-transform: translate3d(-66.666%, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(0%, 0, 0);
            }
        }

        /* === SMALL CAROUSEL === */
        .animate-scroll-gallery-small {
            animation: scroll-gallery-small 20s linear infinite;
            -webkit-animation: scroll-gallery-small 20s linear infinite;
            animation-play-state: running;
            -webkit-animation-play-state: running;
            will-change: transform;
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
        }

        @keyframes scroll-gallery-small {
            0% {
                transform: translate3d(0, 0, 0);
            }
            100% {
                transform: translate3d(-50%, 0, 0);
            }
        }

        @-webkit-keyframes scroll-gallery-small {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(-50%, 0, 0);
            }
        }