@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');

        :root {
            --gold: #C5A46E;
            --red: #9F2A2A;
            --green: #1E3A2F;
        }

        body {
            font-family: 'Inter', system_ui, sans-serif;
        }

        .heading-serif {
            font-family: 'Playfair Display', Georgia, serif;
        }

        .santa-brand-link {
            display: flex;
            align-items: center;
            min-width: 0;
            gap: 0.75rem;
            text-decoration: none;
        }

        .santa-brand-icon {
            width: 3.55rem;
            height: 3.55rem;
            flex: 0 0 auto;
            border-radius: 999px;
            background-image: url("assets/images/oneshot-santa-brand-badge.webp");
            background-size: cover;
            background-position: center;
            box-shadow:
                0 0 0 1px rgba(197, 164, 110, 0.72),
                0 9px 22px rgba(0, 0, 0, 0.35);
        }

        .santa-brand-copy {
            display: block;
            min-width: 0;
            line-height: 1;
        }

        .santa-brand-main {
            display: block;
            color: #fff7e8;
            font-family: 'Playfair Display', Georgia, serif;
            font-size: clamp(1rem, 2.3vw, 1.35rem);
            font-weight: 700;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        .santa-brand-sub {
            display: block;
            color: #d9bd7d;
            font-size: 0.63rem;
            font-weight: 700;
            letter-spacing: 0.24em;
            margin-top: 0.34rem;
            text-transform: uppercase;
            white-space: nowrap;
        }

        /* Magical Glowing Background */
        .magic-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: radial-gradient(circle at 30% 20%, rgba(197,164,110,0.08) 0%, transparent 50%),
                        radial-gradient(circle at 70% 80%, rgba(159,42,42,0.06) 0%, transparent 60%),
                        linear-gradient(#0f172a, #1E3A2F);
            overflow: hidden;
        }

        #magic-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
            mix-blend-mode: screen;
        }

        /* Reindeer Traveling Strip */
        .reindeer-strip {
            background: linear-gradient(90deg, #0f172a, #1E3A2F, #0f172a);
            border-top: 1px solid rgba(197,164,110,0.3);
            border-bottom: 1px solid rgba(197,164,110,0.3);
            overflow: hidden;
            position: relative;
            height: 56px;
            width: 100%;
            cursor: grab;
            /* No edge masks: reindeer go FULL from far left edge to far right edge of the page without disappearing/fading */
        }

        .reindeer-strip:active {
            cursor: grabbing;
        }

        .reindeer-track {
            display: flex;
            align-items: center;
            white-space: nowrap;
            animation: reindeer-fly 58s linear infinite;
            gap: 0;
            font-size: 1.05rem;
            will-change: transform;
            height: 100%;
        }

        .reindeer-track:hover {
            animation-play-state: paused;
        }

        @keyframes reindeer-fly {
            /* -50% of the (now much longer duplicated) content scrolls teams L->R across the entire page width. Reindeer now in front (right of sleigh), lead has red nose, full edge-to-edge without fade/disappear */
            from { transform: translate3d(-50%, 0, 0); }
            to { transform: translate3d(0, 0, 0); }
        }

        .reindeer-gif-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            height: 100%;
            padding: 0;
        }

        .reindeer-gif-sequence {
            display: flex;
            align-items: center;
            justify-content: space-around;
            min-width: 100vw;
            padding: 0 6vw;
            gap: 0;
        }

        .reindeer-gif-item img {
            display: block;
            width: auto;
            height: 44px;
            object-fit: contain;
            border-radius: 0;
            box-shadow: none;
            filter: none;
        }

        @media (max-width: 640px) {
            .reindeer-strip {
                height: 48px;
            }

            .reindeer-track {
                gap: 0;
                animation-duration: 46s;
            }

            .reindeer-gif-item {
                padding: 0;
            }

            .reindeer-gif-sequence {
                min-width: 100vw;
                padding: 0 10vw;
                gap: 0;
            }

            .reindeer-gif-item img {
                height: 36px;
            }
        }

        .reindeer-item {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            color: #C5A46E;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-shadow: 0 0 10px rgba(197,164,110,0.5);
            flex-shrink: 0;
        }

        .reindeer-item svg {
            width: 28px;
            height: 20px;
            animation: gallop 0.65s infinite alternate ease-in-out;
        }

        /* Rudolph glowing red nose on the lead (front) reindeer */
        .reindeer-item.rudolph svg circle[fill="#FF0000"] {
            filter: drop-shadow(0 0 4px #FF0000) drop-shadow(0 0 8px #FF0000);
            animation: rudolph-pulse 1.2s infinite alternate ease-in-out;
        }

        @keyframes rudolph-pulse {
            from { opacity: 0.9; }
            to { opacity: 1; }
        }

        @keyframes gallop {
            from { transform: translateY(0) rotate(-2deg); }
            to { transform: translateY(-4px) rotate(2deg); }
        }

        /* Sleigh being pulled by reindeers */
        .sleigh-item {
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
            margin-left: 0.2rem;
        }

        .sleigh-item svg {
            width: 46px;
            height: 26px;
            animation: sleigh-rock 1.4s infinite alternate ease-in-out;
        }

        @keyframes sleigh-rock {
            from { transform: rotate(-1.5deg) translateY(0); }
            to { transform: rotate(1.5deg) translateY(1px); }
        }

        /* Dancing Christmas Trees for bottom strip */
        .tree-item {
            display: inline-flex;
            align-items: flex-end;
            flex-shrink: 0;
        }

        .tree-item svg {
            width: 26px;
            height: 34px;
            animation: tree-dance 0.85s infinite alternate ease-in-out;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
        }

        @keyframes tree-dance {
            from { transform: rotate(-3.5deg) translateY(0); }
            to { transform: rotate(3.5deg) translateY(-1px); }
        }

        /* Custom Present Box Cursor */
        .santa-cursor {
            position: fixed;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: transform 0.08s ease;
            filter: drop-shadow(0 0 8px rgba(197,164,110,0.65));
        }

        .santa-cursor.active {
            transform: translate(-50%, -50%) scale(0.82) rotate(-6deg);
        }

        /* Festive Card & Glow Effects */
        .magic-card {
            transition: all 0.4s cubic-bezier(0.23, 1.0, 0.32, 1);
            position: relative;
            overflow: hidden;
        }

        .magic-card:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
        }

        .magic-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 40%;
            height: 300%;
            background: linear-gradient(
                120deg,
                transparent,
                rgba(255,255,255,0.25),
                transparent
            );
            transition: all 0.6s;
            transform: skewX(-25deg);
        }

        .magic-card:hover::after {
            left: 150%;
        }

        .scene-glow {
            box-shadow: 0 0 25px -5px rgb(197 164 110 / 0.2),
                        0 10px 10px -5px rgb(0 0 0 / 0.1);
        }

        .section-header {
            position: relative;
            display: inline-block;
        }

        .section-header:after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 60%;
            height: 2px;
            background: linear-gradient(to right, #C5A46E, transparent);
        }

        .twinkle {
            animation: twinkle 1.5s ease-in-out infinite alternate;
        }

        @keyframes twinkle {
            from { opacity: 0.6; }
            to { opacity: 1; }
        }

        .santa-glow {
            animation: santa-glow-pulse 3s ease-in-out infinite;
        }

        .gallery-img {
            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
                        box-shadow 0.4s ease;
        }

        .gallery-img:hover {
            transform: scale(1.04);
            box-shadow: 0 0 0 8px rgba(197,164,110,0.15);
        }

        .nav-link {
            position: relative;
        }

        .nav-link:after {
            content: '';
            position: absolute;
            width: 0;
            height: 1.5px;
            bottom: -2px;
            left: 0;
            background-color: #C5A46E;
            transition: width 0.3s ease;
        }

        .nav-link:hover:after {
            width: 100%;
        }

        .festive-button {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .festive-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 40%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,0.35),
                transparent
            );
            transition: 0.6s;
        }

        .festive-button:hover::before {
            left: 250%;
        }

        .snowflake {
            position: absolute;
            color: #C5A46E;
            opacity: 0.7;
            pointer-events: none;
            animation: fall linear forwards;
            text-shadow: 0 0 4px #C5A46E;
            z-index: 1;
        }

        .magic-sparkle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #C5A46E;
            border-radius: 50%;
            box-shadow: 0 0 8px #C5A46E, 0 0 16px #C5A46E;
            pointer-events: none;
            animation: sparkle-pop 0.8s ease-out forwards;
            z-index: 50;
        }