/* ============================================================
   Special Dates — CSS Effects
   Particle animations, theme banners, form micro-interactions
   ============================================================ */

/* ------------------------------------------------------------------
   Particle Container & Base Particle
   ------------------------------------------------------------------ */
.special-date-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 900;
    overflow: hidden;
}

.special-date-particle {
    position: absolute;
    pointer-events: none;
    animation: var(--sd-animation) var(--sd-duration) var(--sd-delay) infinite ease-in-out;
    left: var(--sd-x);
    font-size: var(--sd-size);
    opacity: 0.6;
}

/* ------------------------------------------------------------------
   Particle Keyframes
   ------------------------------------------------------------------ */

/* Hearts — rise from bottom with gentle horizontal sway */
@keyframes float-up {
    0% {
        transform: translateY(100vh) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    50% {
        transform: translateY(50vh) translateX(20px) scale(1.1);
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-10vh) translateX(-15px) scale(0.9);
        opacity: 0;
    }
}

/* Snowflakes — fall from top with horizontal drift */
@keyframes fall-down {
    0% {
        transform: translateY(-10vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    25% {
        transform: translateY(22vh) translateX(15px) rotate(90deg);
    }
    50% {
        transform: translateY(48vh) translateX(-10px) rotate(180deg);
    }
    75% {
        transform: translateY(72vh) translateX(20px) rotate(270deg);
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(105vh) translateX(-5px) rotate(360deg);
        opacity: 0;
    }
}

/* Leaves — fall with tumbling rotation */
@keyframes tumble-fall {
    0% {
        transform: translateY(-10vh) translateX(0) rotate(0deg) rotateY(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    30% {
        transform: translateY(25vh) translateX(30px) rotate(120deg) rotateY(90deg);
    }
    60% {
        transform: translateY(55vh) translateX(-20px) rotate(240deg) rotateY(180deg);
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(105vh) translateX(10px) rotate(360deg) rotateY(360deg);
        opacity: 0;
    }
}

/* Petals — gentle floating with subtle sway */
@keyframes float-petals {
    0% {
        transform: translateY(-5vh) translateX(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    15% {
        opacity: 0.5;
    }
    25% {
        transform: translateY(20vh) translateX(25px) rotate(45deg) scale(1.05);
    }
    50% {
        transform: translateY(45vh) translateX(-15px) rotate(90deg) scale(0.95);
    }
    75% {
        transform: translateY(70vh) translateX(20px) rotate(135deg) scale(1.05);
    }
    85% {
        opacity: 0.5;
    }
    100% {
        transform: translateY(105vh) translateX(-10px) rotate(180deg) scale(1);
        opacity: 0;
    }
}

/* ------------------------------------------------------------------
   Theme Banners
   ------------------------------------------------------------------ */
.special-date-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    z-index: 899;
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.special-date-banner-hidden {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.special-date-banner .sd-banner-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.special-date-banner .sd-banner-close:hover {
    opacity: 1;
}

/* Spacer element to push page content below the banner */
.special-date-banner-spacer {
    height: 40px;
    flex-shrink: 0;
}

/* Theme: Patriotic — red/white/blue */
.sd-theme-patriotic {
    background: linear-gradient(90deg, #b22234 0%, #ffffff 40%, #ffffff 60%, #3c3b6e 100%);
    color: #1a1a2e;
}
.sd-theme-patriotic .sd-banner-close { color: #1a1a2e; }

/* Theme: Valentine's — pink/red */
.sd-theme-valentines {
    background: linear-gradient(90deg, #ff6b9d, #c8385a, #ff6b9d);
    color: #ffffff;
}
.sd-theme-valentines .sd-banner-close { color: #ffffff; }

/* Theme: Easter — pastel */
.sd-theme-easter {
    background: linear-gradient(90deg, #ffd1dc, #c3aed6, #a8d8ea, #ffd1dc);
    color: #4a3f5c;
}
.sd-theme-easter .sd-banner-close { color: #4a3f5c; }

/* Theme: Spooky — dark purple/orange */
.sd-theme-spooky {
    background: linear-gradient(90deg, #2d1b4e, #ff6600, #2d1b4e);
    color: #ffffff;
}
.sd-theme-spooky .sd-banner-close { color: #ffffff; }

/* Theme: Autumn — warm orange/brown */
.sd-theme-autumn {
    background: linear-gradient(90deg, #d4740e, #8b4513, #d4740e);
    color: #ffffff;
}
.sd-theme-autumn .sd-banner-close { color: #ffffff; }

/* Theme: Christmas — red/green */
.sd-theme-christmas {
    background: linear-gradient(90deg, #c41e3a, #1a5c2a, #c41e3a);
    color: #ffffff;
}
.sd-theme-christmas .sd-banner-close { color: #ffffff; }

/* Theme: Earth — green */
.sd-theme-earth {
    background: linear-gradient(90deg, #2d6a4f, #40916c, #52b788, #40916c, #2d6a4f);
    color: #ffffff;
}
.sd-theme-earth .sd-banner-close { color: #ffffff; }

/* Theme: Spring — light green/pink */
.sd-theme-spring {
    background: linear-gradient(90deg, #a8e6cf, #ffd3b6, #ffaaa5, #ffd3b6, #a8e6cf);
    color: #3d3d3d;
}
.sd-theme-spring .sd-banner-close { color: #3d3d3d; }

/* ------------------------------------------------------------------
   Form Micro-Interactions
   ------------------------------------------------------------------ */
.sd-form-success {
    animation: sd-pulse 300ms ease-out;
}

@keyframes sd-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Sparkle dots — tiny radiating particles */
.sd-sparkle-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.sd-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sd-accent, #ff6b9d);
    pointer-events: none;
    animation: sd-sparkle-radiate 600ms ease-out forwards;
}

@keyframes sd-sparkle-radiate {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--sd-sparkle-x, 30px), var(--sd-sparkle-y, -30px)) scale(0);
        opacity: 0;
    }
}

/* Glow — accent-colored box-shadow */
.sd-glow {
    box-shadow: 0 0 12px 4px var(--sd-accent, #ff6b9d);
    transition: box-shadow 0.3s ease;
}

/* Checkmark — fade-in icon */
.sd-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: sd-checkmark-in 400ms ease-out forwards;
    opacity: 0;
    color: var(--sd-accent, #4caf50);
    font-size: 1.2rem;
}

@keyframes sd-checkmark-in {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    60% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ------------------------------------------------------------------
   Reduced Motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .special-date-particle {
        animation: none !important;
        opacity: 0.3;
    }

    .sd-form-success {
        animation: none !important;
    }

    .sd-sparkle {
        animation: none !important;
        opacity: 0;
    }

    .sd-checkmark {
        animation: none !important;
        opacity: 1;
    }
}