/**
 * Seasonal Theme Styles
 * Provides tasteful seasonal decorations and effects
 */

/* ============================================
   CHRISTMAS THEME
   ============================================ */

/* Subtle festive background pattern */
.seasonal-theme.seasonal-christmas {
    background-image:
        radial-gradient(circle at 20% 80%, rgba(22, 101, 52, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(153, 27, 27, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(202, 138, 4, 0.015) 0%, transparent 50%);
    background-attachment: fixed;
}

.dark.seasonal-theme.seasonal-christmas {
    background-image:
        radial-gradient(circle at 20% 80%, rgba(22, 101, 52, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(153, 27, 27, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(202, 138, 4, 0.03) 0%, transparent 50%);
    background-attachment: fixed;
}

/* Snow cap decoration using border-image technique (from your codepen) */
.seasonal-theme.seasonal-christmas .seasonal-decorated {
    position: relative;
    overflow: visible;
}

.seasonal-theme.seasonal-christmas .seasonal-decorated::before {
    --cap-height: 44px;
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 100%;
    height: var(--cap-height);
    background-image:
        linear-gradient(180deg, rgba(239, 246, 255, 0.96) 0%, rgba(225, 237, 255, 0.98) 100%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="120" viewBox="0 0 160 120"><g fill="%23c9d8ec" fill-opacity="0.42"><circle cx="12" cy="18" r="1.2"/><circle cx="48" cy="26" r="0.9"/><circle cx="86" cy="22" r="1.1"/><circle cx="124" cy="28" r="1.3"/><circle cx="20" cy="54" r="1.1"/><circle cx="62" cy="52" r="1.2"/><circle cx="104" cy="50" r="0.9"/><circle cx="142" cy="56" r="1.1"/><circle cx="32" cy="86" r="1.3"/><circle cx="74" cy="78" r="1.0"/><circle cx="118" cy="90" r="1.2"/><circle cx="18" cy="108" r="0.9"/><circle cx="92" cy="108" r="1.3"/><circle cx="150" cy="92" r="1.1"/></g></svg>');
    background-size:
        100% 100%,
        160px 120px;
    background-repeat: repeat, repeat;
    background-position: top left, top left;
    /* Mask the drip silhouette so texture stays inside the cap */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="44" viewBox="0 0 240 44"><path d="M0 0 H240 V16 C222 22 216 38 198 42 C178 38 166 20 148 26 C130 34 120 16 104 32 C86 46 72 14 56 30 C38 42 26 16 14 26 C6 32 2 22 0 16 Z" fill="black"/></svg>');
    -webkit-mask-size: 240px var(--cap-height);
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-position: top left;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="44" viewBox="0 0 240 44"><path d="M0 0 H240 V16 C222 22 216 38 198 42 C178 38 166 20 148 26 C130 34 120 16 104 32 C86 46 72 14 56 30 C38 42 26 16 14 26 C6 32 2 22 0 16 Z" fill="black"/></svg>');
    mask-size: 240px var(--cap-height);
    mask-repeat: repeat-x;
    mask-position: top left;
    filter:
        drop-shadow(0 1px 0 rgba(130, 160, 200, 0.35)) drop-shadow(0 7px 12px rgba(0, 0, 0, 0.24));
    pointer-events: none;
    z-index: 10;
    opacity: 1;
    clip-path: inset(0 0 -6px 0 round 10px 10px 0 0);
}

/* Dark mode snow caps - slightly tinted blue with stronger shadow for depth */
.dark .seasonal-theme.seasonal-christmas .seasonal-decorated::before {
    background-image:
        linear-gradient(180deg, rgba(245, 250, 255, 0.9) 0%, rgba(232, 242, 255, 0.93) 100%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="120" viewBox="0 0 160 120"><g fill="%23c7d9f7" fill-opacity="0.35"><circle cx="12" cy="18" r="1.3"/><circle cx="48" cy="26" r="1.0"/><circle cx="86" cy="22" r="1.2"/><circle cx="124" cy="28" r="1.4"/><circle cx="20" cy="54" r="1.2"/><circle cx="62" cy="52" r="1.3"/><circle cx="104" cy="50" r="1.0"/><circle cx="142" cy="56" r="1.2"/><circle cx="32" cy="86" r="1.4"/><circle cx="74" cy="78" r="1.1"/><circle cx="118" cy="90" r="1.3"/><circle cx="18" cy="108" r="1.0"/><circle cx="92" cy="108" r="1.4"/><circle cx="150" cy="92" r="1.2"/></g></svg>');
    background-size:
        100% 100%,
        160px 120px;
    background-repeat: repeat, repeat;
    background-position: top left, top left;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="44" viewBox="0 0 240 44"><path d="M0 0 H240 V16 C222 22 216 38 198 42 C178 38 166 20 148 26 C130 34 120 16 104 32 C86 46 72 14 56 30 C38 42 26 16 14 26 C6 32 2 22 0 16 Z" fill="black"/></svg>');
    -webkit-mask-size: 240px var(--cap-height);
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-position: top left;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="44" viewBox="0 0 240 44"><path d="M0 0 H240 V16 C222 22 216 38 198 42 C178 38 166 20 148 26 C130 34 120 16 104 32 C86 46 72 14 56 30 C38 42 26 16 14 26 C6 32 2 22 0 16 Z" fill="black"/></svg>');
    mask-size: 240px var(--cap-height);
    mask-repeat: repeat-x;
    mask-position: top left;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.24));
}

/* Sparkle effect for buttons and interactive elements */
.seasonal-theme.seasonal-christmas .seasonal-sparkle {
    position: relative;
    overflow: visible;
}

/* Multiple sparkles for better effect */
.seasonal-theme.seasonal-christmas .seasonal-sparkle::before,
.seasonal-theme.seasonal-christmas .seasonal-sparkle::after {
    content: '✨';
    position: absolute;
    font-size: 1.25rem;
    pointer-events: none;
    opacity: 0;
}

.seasonal-theme.seasonal-christmas .seasonal-sparkle::before {
    top: -10px;
    right: -10px;
    animation: sparkle-1 3s ease-in-out infinite;
}

.seasonal-theme.seasonal-christmas .seasonal-sparkle::after {
    top: -5px;
    left: -10px;
    animation: sparkle-2 3s ease-in-out infinite 1.5s;
}

@keyframes sparkle-1 {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }

    50% {
        opacity: 0.9;
        transform: scale(1) rotate(180deg);
    }
}

@keyframes sparkle-2 {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(180deg);
    }

    50% {
        opacity: 0.8;
        transform: scale(1) rotate(360deg);
    }
}

/* Subtle sparkle on mobile (smaller, less frequent) */
@media (max-width: 767px) {

    .seasonal-theme.seasonal-christmas .seasonal-sparkle::before,
    .seasonal-theme.seasonal-christmas .seasonal-sparkle::after {
        font-size: 1rem;
    }

    .seasonal-theme.seasonal-christmas .seasonal-sparkle::before {
        animation: sparkle-1 4s ease-in-out infinite;
    }

    .seasonal-theme.seasonal-christmas .seasonal-sparkle::after {
        animation: sparkle-2 4s ease-in-out infinite 2s;
    }
}

/* Christmas color accents - subtle and tasteful */
.seasonal-theme.seasonal-christmas {
    --seasonal-primary: var(--theme-primary, #166534);
    --seasonal-secondary: var(--theme-secondary, #991b1b);
    --seasonal-accent: var(--theme-accent, #ca8a04);
}

/* Add subtle festive border to decorated elements */
.seasonal-theme.seasonal-christmas .seasonal-decorated {
    border-top: 2px solid rgba(22, 101, 52, 0.15);
}

.dark .seasonal-theme.seasonal-christmas .seasonal-decorated {
    border-top: 2px solid rgba(22, 101, 52, 0.3);
}

/* Accent color for sparkle elements (buttons, headers) */
.seasonal-theme.seasonal-christmas .seasonal-sparkle {
    position: relative;
}

/* Seasonal button helpers */
.seasonal-theme .seasonal-btn-primary {
    background-color: var(--seasonal-primary) !important;
    border-color: var(--seasonal-primary) !important;
    color: #fff !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.14),
        0 2px 6px rgba(0, 0, 0, 0.08);
}

.seasonal-theme .seasonal-btn-primary:hover {
    background-color: color-mix(in srgb, var(--seasonal-primary) 88%, #000 12%) !important;
}

.seasonal-theme .seasonal-btn-primary:focus-visible {
    outline: 2px solid var(--seasonal-accent);
    outline-offset: 2px;
}

.seasonal-theme .seasonal-btn-secondary {
    background-color: var(--seasonal-secondary) !important;
    border-color: var(--seasonal-secondary) !important;
    color: #fff !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.14),
        0 2px 6px rgba(0, 0, 0, 0.08);
}

.seasonal-theme .seasonal-btn-secondary:hover {
    background-color: color-mix(in srgb, var(--seasonal-secondary) 88%, #000 12%) !important;
}

.seasonal-theme .seasonal-btn-secondary:focus-visible {
    outline: 2px solid var(--seasonal-accent);
    outline-offset: 2px;
}

.seasonal-theme .seasonal-btn-ghost {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--seasonal-primary) !important;
    border-color: color-mix(in srgb, var(--seasonal-primary) 80%, #fff 20%) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.seasonal-theme .seasonal-btn-ghost:hover {
    background-color: color-mix(in srgb, #fff 80%, var(--seasonal-primary) 20%) !important;
}

.dark .seasonal-theme .seasonal-btn-ghost {
    background-color: rgba(31, 41, 55, 0.7) !important;
    color: var(--seasonal-primary) !important;
    border-color: color-mix(in srgb, var(--seasonal-primary) 70%, #111 30%) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

/* Add subtle festive glow to buttons */
.seasonal-theme.seasonal-christmas button.seasonal-sparkle,
.seasonal-theme.seasonal-christmas .seasonal-sparkle button {
    box-shadow:
        0 0 0 1px rgba(202, 138, 4, 0.15) inset,
        0 2px 8px rgba(202, 138, 4, 0.1);
}

.seasonal-theme.seasonal-christmas button.seasonal-sparkle:hover,
.seasonal-theme.seasonal-christmas .seasonal-sparkle button:hover {
    box-shadow:
        0 0 0 2px rgba(202, 138, 4, 0.25) inset,
        0 4px 12px rgba(202, 138, 4, 0.15);
}

/* Add festive glow to active/focused elements */
.seasonal-theme.seasonal-christmas button:focus-visible,
.seasonal-theme.seasonal-christmas a:focus-visible {
    outline-color: var(--seasonal-accent);
}

/* Subtle festive accent on section dividers */
.seasonal-theme.seasonal-christmas hr {
    border-color: rgba(22, 101, 52, 0.2);
}

.dark .seasonal-theme.seasonal-christmas hr {
    border-color: rgba(22, 101, 52, 0.4);
}

/* Snow container */
#seasonal-snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Individual snowflake */
.snowflake {
    position: absolute;
    top: -10px;
    color: #9bb2d3;
    font-size: 1em;
    user-select: none;
    pointer-events: none;
    animation: fall linear infinite;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.45);
}

/* Darker snowflakes in light mode for visibility */
body:not(.dark) .snowflake {
    color: #7f97bd;
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.7),
        0 1px 2px rgba(140, 160, 190, 0.45);
}

/* Lighter snowflakes in dark mode */
.dark .snowflake {
    color: rgba(240, 247, 255, 0.9);
}

@keyframes fall {
    0% {
        transform: translateY(var(--start-offset, -12vh)) translateX(var(--start-drift, 0px)) rotate(0deg);
        opacity: var(--start-opacity, 0.85);
    }

    100% {
        transform: translateY(var(--end-offset, 120vh)) translateX(var(--drift, 0px)) rotate(360deg);
        opacity: 0.15;
    }
}

/* Reduce snowflakes on mobile */
@media (max-width: 767px) {
    .snowflake {
        font-size: 0.75em;
    }
}

/* Add festive accent to cards and containers */
.seasonal-theme.seasonal-christmas .bg-white,
.seasonal-theme.seasonal-christmas .dark\:bg-gray-800 {
    position: relative;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {

    .snowflake,
    .seasonal-sparkle::before,
    .seasonal-sparkle::after {
        animation: none !important;
        opacity: 0 !important;
    }

    .seasonal-theme.seasonal-christmas .seasonal-decorated::before {
        animation: none !important;
    }
}