/* ==========================================================================
   Animated Emoji Backgrounds — WebAppSchoolManager (Υγρός Στίβος Ρόδου)
   ==========================================================================
   
   Μια βιβλιοθήκη CSS με 12 μοναδικά εφέ κινούμενων emoji φόντων.
   A CSS library with 12 unique animated emoji background effects for
   calendar cells, cards, and UI elements in the swimming school app.

   USAGE:
     <div class="emoji-bg-flame">Flame emojis</div>
     <div class="emoji-bg-rainbow">Rainbow emojis</div>

   FullCalendar day-cell variants (smaller/subtle):
     Apply `.fc-day-emoji-flame` etc. to <td class="fc-daygrid-day"> elements.

   SPEED CONTROL:
     Set --emoji-speed on any element or :root (default: 1).
       <div class="emoji-bg-neon" style="--emoji-speed: 0.5">Slow</div>
       <div class="emoji-bg-neon" style="--emoji-speed: 2">Fast</div>

   GPU ACCELERATION:
     All animations use transform, opacity, and will-change for smooth 60fps.

   ACCESSIBILITY:
     All animations are disabled when prefers-reduced-motion: reduce is active.
   ========================================================================== */


/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
    --emoji-speed: 1;
    --border-speed: 1; /* backward compat alias */
}


/* ==========================================================================
   2. Base Styles — Preview Cards & General Elements
   ========================================================================== */

[class*="emoji-bg-"] {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

[class*="emoji-bg-"]::before,
[class*="emoji-bg-"]::after {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    will-change: transform, opacity;
}

/* Ensure card content stays above emoji layer */
[class*="emoji-bg-"] > * {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   3. Base Styles — FullCalendar Day Cells (JS particle system)
   ========================================================================== */

[class*="fc-day-emoji-"] {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

/* No ::before/::after for FC cells — emojis are JS-injected .emoji-particle spans */

[class*="fc-day-emoji-"] .fc-daygrid-day-top,
[class*="fc-day-emoji-"] .fc-daygrid-day-events,
[class*="fc-day-emoji-"] .fc-daygrid-day-frame {
    position: relative;
    z-index: 1;
}

/* ---------- Emoji Particle (JS-injected spans) ---------- */
.emoji-particle {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    will-change: transform, opacity;
    user-select: none;
}

/* --- 6 Animation types for variety --- */

/* Float upward with gentle sway */
@keyframes emoji-float-up {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); }
    25%  { transform: translateY(-30%) translateX(12px) rotate(15deg); }
    50%  { transform: translateY(-60%) translateX(-8px) rotate(-10deg); }
    75%  { transform: translateY(-90%) translateX(6px) rotate(20deg); }
    100% { transform: translateY(-120%) translateX(0) rotate(0deg); opacity: 0; }
}

/* Horizontal drift left-right */
@keyframes emoji-drift-lr {
    0%   { transform: translateX(0) translateY(0) scale(1); }
    20%  { transform: translateX(25px) translateY(-10px) scale(1.1); }
    40%  { transform: translateX(-15px) translateY(8px) scale(0.9); }
    60%  { transform: translateX(20px) translateY(-15px) scale(1.05); }
    80%  { transform: translateX(-10px) translateY(5px) scale(0.95); }
    100% { transform: translateX(0) translateY(0) scale(1); }
}

/* Spiral outward */
@keyframes emoji-spiral {
    0%   { transform: rotate(0deg) translateX(0) scale(0.8); opacity: 0.7; }
    25%  { transform: rotate(90deg) translateX(10px) scale(1.1); opacity: 0.5; }
    50%  { transform: rotate(180deg) translateX(15px) scale(0.9); opacity: 0.6; }
    75%  { transform: rotate(270deg) translateX(8px) scale(1.05); opacity: 0.4; }
    100% { transform: rotate(360deg) translateX(0) scale(0.8); opacity: 0.7; }
}

/* Gentle bounce */
@keyframes emoji-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    15%  { transform: translateY(-18px) scale(1.15); }
    30%  { transform: translateY(0) scale(0.95); }
    45%  { transform: translateY(-10px) scale(1.08); }
    60%  { transform: translateY(0) scale(0.98); }
    75%  { transform: translateY(-4px) scale(1.03); }
}

/* Zigzag descent */
@keyframes emoji-zigzag {
    0%   { transform: translate(0, -20px) rotate(0deg); opacity: 0.2; }
    15%  { transform: translate(15px, 0) rotate(25deg); opacity: 0.65; }
    30%  { transform: translate(-12px, 20px) rotate(-15deg); }
    45%  { transform: translate(18px, 40px) rotate(30deg); }
    60%  { transform: translate(-10px, 60px) rotate(-20deg); }
    75%  { transform: translate(14px, 80px) rotate(15deg); }
    100% { transform: translate(0, 110px) rotate(0deg); opacity: 0; }
}

/* Fade drift (very subtle, elegant) */
@keyframes emoji-fade-drift {
    0%   { transform: translate(0, 0) scale(0.7); opacity: 0; }
    20%  { opacity: 0.65; }
    50%  { transform: translate(10px, -15px) scale(1.1); opacity: 0.5; }
    80%  { opacity: 0.6; }
    100% { transform: translate(-5px, 10px) scale(0.7); opacity: 0; }
}


/* ==========================================================================
   4. FLAME 🔥  — Rising flickering flames
   ========================================================================== */

.emoji-bg-flame {
    background: linear-gradient(0deg, rgba(255,106,0,0.06) 0%, rgba(238,0,0,0.03) 50%, transparent 100%);
}
.emoji-bg-flame::before {
    content: '🔥  🔥  🔥  🔥  🔥';
    font-size: 2rem;
    letter-spacing: 1.5rem;
    bottom: -10%;
    left: -5%;
    opacity: 0.6;
    animation: flame-rise calc(3s / var(--emoji-speed, 1)) ease-in-out infinite;
}
.emoji-bg-flame::after {
    content: '🔥  🔥  🔥  🔥';
    font-size: 1.5rem;
    letter-spacing: 2rem;
    bottom: -20%;
    left: 20%;
    opacity: 0.4;
    animation: flame-rise calc(4s / var(--emoji-speed, 1)) ease-in-out infinite;
    animation-delay: calc(-1.5s / var(--emoji-speed, 1));
}

@keyframes flame-rise {
    0%   { transform: translateY(0) scaleY(1); opacity: 0.6; }
    30%  { transform: translateY(-30%) scaleY(1.1); opacity: 0.7; }
    60%  { transform: translateY(-60%) scaleY(0.9); opacity: 0.5; }
    100% { transform: translateY(-100%) scaleY(1); opacity: 0; }
}

/* FC variant — borders/gradient only; emojis injected by JS */
.fc-day-emoji-flame {
    background: linear-gradient(0deg, rgba(255,80,0,0.12) 0%, rgba(255,165,0,0.05) 50%, transparent 100%);
    border: 2px solid rgba(255,106,0,0.35) !important;
    box-shadow: inset 0 -8px 16px rgba(255,80,0,0.1);
}


/* ==========================================================================
   5. GREECE FLAG 🇬🇷  — Gentle float/drift
   ========================================================================== */

.emoji-bg-greece-flag {
    background: linear-gradient(135deg, rgba(13,94,175,0.04) 0%, rgba(255,255,255,0.02) 50%, rgba(13,94,175,0.04) 100%);
}
.emoji-bg-greece-flag::before {
    content: '🇬🇷  🏛️  ⭐  🇬🇷  🏛️';
    font-size: 2rem;
    letter-spacing: 1.5rem;
    top: 10%;
    left: -10%;
    opacity: 0.5;
    animation: greece-drift calc(10s / var(--emoji-speed, 1)) linear infinite;
}
.emoji-bg-greece-flag::after {
    content: '⭐  🇬🇷  🏛️  ⭐';
    font-size: 1.4rem;
    letter-spacing: 1.2rem;
    top: 55%;
    left: 40%;
    opacity: 0.35;
    animation: greece-drift-alt calc(14s / var(--emoji-speed, 1)) linear infinite;
    animation-delay: calc(-5s / var(--emoji-speed, 1));
}

@keyframes greece-drift {
    0%   { transform: translateX(0) translateY(0); }
    25%  { transform: translateX(15%) translateY(-8%); }
    50%  { transform: translateX(30%) translateY(5%); }
    75%  { transform: translateX(15%) translateY(10%); }
    100% { transform: translateX(0) translateY(0); }
}
@keyframes greece-drift-alt {
    0%   { transform: translateX(0) translateY(0); }
    25%  { transform: translateX(-12%) translateY(6%); }
    50%  { transform: translateX(-25%) translateY(-4%); }
    75%  { transform: translateX(-12%) translateY(-8%); }
    100% { transform: translateX(0) translateY(0); }
}

/* FC variant */
.fc-day-emoji-greece-flag {
    background: linear-gradient(135deg, rgba(13,94,175,0.1) 0%, rgba(255,255,255,0.95) 50%, rgba(13,94,175,0.08) 100%);
    border: 2px solid rgba(13,94,175,0.4) !important;
}


/* ==========================================================================
   6. CHRISTMAS 🎄  — Snowfall-like descent with sway
   ========================================================================== */

.emoji-bg-christmas {
    background: linear-gradient(180deg, rgba(200,0,0,0.04) 0%, rgba(0,100,0,0.04) 100%);
}
.emoji-bg-christmas::before {
    content: '🎄  🎅  ❄️  🎁  ⭐  🎄  🎅';
    font-size: 2rem;
    letter-spacing: 1.5rem;
    top: -20%;
    left: -10%;
    opacity: 0.55;
    animation: christmas-fall calc(8s / var(--emoji-speed, 1)) linear infinite;
}
.emoji-bg-christmas::after {
    content: '⭐  🎁  🎄  ❄️  🎅  ⭐';
    font-size: 1.4rem;
    letter-spacing: 1rem;
    top: -30%;
    left: 30%;
    opacity: 0.4;
    animation: christmas-fall-sway calc(11s / var(--emoji-speed, 1)) linear infinite;
    animation-delay: calc(-4s / var(--emoji-speed, 1));
}

@keyframes christmas-fall {
    0%   { transform: translateX(0) translateY(0); }
    100% { transform: translateX(-15%) translateY(130%); }
}
@keyframes christmas-fall-sway {
    0%   { transform: translateX(0) translateY(0); }
    25%  { transform: translateX(8%) translateY(30%); }
    50%  { transform: translateX(-5%) translateY(60%); }
    75%  { transform: translateX(10%) translateY(90%); }
    100% { transform: translateX(0) translateY(130%); }
}

/* FC variant */
.fc-day-emoji-christmas {
    background: linear-gradient(180deg, rgba(200,0,0,0.1) 0%, rgba(0,100,0,0.08) 100%);
    border: 2px solid rgba(200,0,0,0.3) !important;
    box-shadow: inset 0 0 12px rgba(0,100,0,0.06);
}



/* ==========================================================================
   7. EASTER 🐣  — Gentle bounce/float upward (spring feel)
   ========================================================================== */

.emoji-bg-easter {
    background: linear-gradient(180deg, rgba(255,183,197,0.05) 0%, rgba(255,218,185,0.04) 50%, rgba(176,224,230,0.04) 100%);
}
.emoji-bg-easter::before {
    content: '🐣  🥚  🌷  🐰  🌸  🐣  🥚';
    font-size: 2rem;
    letter-spacing: 1.2rem;
    bottom: -15%;
    left: -5%;
    opacity: 0.5;
    animation: easter-float calc(7s / var(--emoji-speed, 1)) ease-in-out infinite;
}
.emoji-bg-easter::after {
    content: '🌸  🐰  🌷  🥚  🐣';
    font-size: 1.5rem;
    letter-spacing: 1.5rem;
    bottom: 10%;
    left: 25%;
    opacity: 0.35;
    animation: easter-float-alt calc(9s / var(--emoji-speed, 1)) ease-in-out infinite;
    animation-delay: calc(-3s / var(--emoji-speed, 1));
}

@keyframes easter-float {
    0%   { transform: translateY(0) scale(1); opacity: 0.5; }
    25%  { transform: translateY(-20%) scale(1.05); opacity: 0.6; }
    50%  { transform: translateY(-40%) scale(1); opacity: 0.5; }
    75%  { transform: translateY(-60%) scale(1.03); opacity: 0.35; }
    100% { transform: translateY(-80%) scale(1); opacity: 0; }
}
@keyframes easter-float-alt {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0.35; }
    30%  { transform: translateY(-25%) rotate(5deg); opacity: 0.45; }
    60%  { transform: translateY(-50%) rotate(-3deg); opacity: 0.3; }
    100% { transform: translateY(-75%) rotate(0deg); opacity: 0; }
}

/* FC variant */
.fc-day-emoji-easter {
    background: linear-gradient(180deg, rgba(255,183,197,0.1) 0%, rgba(176,224,230,0.08) 100%);
    border: 2px solid rgba(255,150,180,0.35) !important;
}



/* ==========================================================================
   8. SNOWFALL ❄️  — Falling snow with gentle drift
   ========================================================================== */

.emoji-bg-snowfall {
    background: linear-gradient(180deg, rgba(135,206,235,0.05) 0%, rgba(200,220,240,0.04) 100%);
}
.emoji-bg-snowfall::before {
    content: '❄️  🌨️  ❄️  ⛄  ❄️  🌨️  ❄️';
    font-size: 2rem;
    letter-spacing: 1.3rem;
    top: -25%;
    left: -5%;
    opacity: 0.55;
    animation: snow-fall calc(7s / var(--emoji-speed, 1)) linear infinite;
}
.emoji-bg-snowfall::after {
    content: '⛄  ❄️  🌨️  ❄️  ⛄';
    font-size: 1.3rem;
    letter-spacing: 1.8rem;
    top: -35%;
    left: 20%;
    opacity: 0.35;
    animation: snow-fall-drift calc(10s / var(--emoji-speed, 1)) linear infinite;
    animation-delay: calc(-3s / var(--emoji-speed, 1));
}

@keyframes snow-fall {
    0%   { transform: translateY(0) translateX(0); }
    25%  { transform: translateY(30%) translateX(3%); }
    50%  { transform: translateY(60%) translateX(-2%); }
    75%  { transform: translateY(90%) translateX(4%); }
    100% { transform: translateY(130%) translateX(0); }
}
@keyframes snow-fall-drift {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); }
    33%  { transform: translateY(40%) translateX(-6%) rotate(60deg); }
    66%  { transform: translateY(80%) translateX(4%) rotate(120deg); }
    100% { transform: translateY(130%) translateX(-2%) rotate(180deg); }
}

/* FC variant */
.fc-day-emoji-snowfall {
    background: linear-gradient(180deg, rgba(135,206,235,0.1) 0%, rgba(200,220,240,0.06) 100%);
    border: 2px solid rgba(135,206,235,0.4) !important;
    box-shadow: inset 0 4px 12px rgba(135,206,235,0.08);
}



/* ==========================================================================
   9. CELEBRATION 🎉  — Burst outward / confetti scatter
   ========================================================================== */

.emoji-bg-celebration {
    background: radial-gradient(ellipse at center, rgba(255,215,0,0.06) 0%, transparent 70%);
}
.emoji-bg-celebration::before {
    content: '🎉  🎊  🥳  🎈  🎆  🎉';
    font-size: 2rem;
    letter-spacing: 1.3rem;
    top: 50%;
    left: 50%;
    opacity: 0.5;
    transform-origin: center center;
    animation: celebrate-burst calc(5s / var(--emoji-speed, 1)) ease-out infinite;
}
.emoji-bg-celebration::after {
    content: '🎈  🎆  🎉  🎊  🥳';
    font-size: 1.5rem;
    letter-spacing: 1.5rem;
    top: 40%;
    left: 30%;
    opacity: 0.35;
    animation: celebrate-burst-alt calc(6s / var(--emoji-speed, 1)) ease-out infinite;
    animation-delay: calc(-2.5s / var(--emoji-speed, 1));
}

@keyframes celebrate-burst {
    0%   { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 0.7; }
    40%  { transform: translate(-50%, -50%) scale(1.2) rotate(15deg); opacity: 0.5; }
    70%  { transform: translate(-30%, -70%) scale(1.4) rotate(-10deg); opacity: 0.3; }
    100% { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 0; }
}
@keyframes celebrate-burst-alt {
    0%   { transform: scale(0.4) rotate(0deg); opacity: 0.5; }
    35%  { transform: scale(1.1) rotate(-12deg); opacity: 0.4; }
    65%  { transform: scale(1.3) rotate(8deg); opacity: 0.2; }
    100% { transform: scale(0.4) rotate(0deg); opacity: 0; }
}

/* FC variant */
.fc-day-emoji-celebration {
    background: radial-gradient(ellipse at center, rgba(255,215,0,0.1) 0%, rgba(255,100,100,0.04) 50%, transparent 80%);
    border: 2px solid rgba(255,180,0,0.35) !important;
}



/* ==========================================================================
   10. OCEAN 🌊  — Wave-like horizontal motion
   ========================================================================== */

.emoji-bg-ocean {
    background: linear-gradient(180deg, rgba(0,105,148,0.04) 0%, rgba(0,150,200,0.06) 100%);
}
.emoji-bg-ocean::before {
    content: '🌊  🐠  🐚  🦀  🌊  🐠  🐚';
    font-size: 2rem;
    letter-spacing: 1.2rem;
    top: 25%;
    left: -15%;
    opacity: 0.5;
    animation: ocean-wave calc(6s / var(--emoji-speed, 1)) ease-in-out infinite;
}
.emoji-bg-ocean::after {
    content: '🦀  🌊  🐠  🐚  🦀  🌊';
    font-size: 1.5rem;
    letter-spacing: 1.5rem;
    top: 60%;
    left: 10%;
    opacity: 0.35;
    animation: ocean-wave-alt calc(8s / var(--emoji-speed, 1)) ease-in-out infinite;
    animation-delay: calc(-3s / var(--emoji-speed, 1));
}

@keyframes ocean-wave {
    0%   { transform: translateX(-5%) translateY(0); }
    25%  { transform: translateX(10%) translateY(-8%); }
    50%  { transform: translateX(25%) translateY(5%); }
    75%  { transform: translateX(10%) translateY(-5%); }
    100% { transform: translateX(-5%) translateY(0); }
}
@keyframes ocean-wave-alt {
    0%   { transform: translateX(5%) translateY(0); }
    25%  { transform: translateX(-8%) translateY(6%); }
    50%  { transform: translateX(-20%) translateY(-3%); }
    75%  { transform: translateX(-8%) translateY(8%); }
    100% { transform: translateX(5%) translateY(0); }
}

/* FC variant */
.fc-day-emoji-ocean {
    background: linear-gradient(180deg, rgba(0,105,148,0.08) 0%, rgba(0,180,220,0.1) 100%);
    border: 2px solid rgba(0,150,200,0.35) !important;
}



/* ==========================================================================
   11. RAINBOW 🌈  — Gentle sparkle/float
   ========================================================================== */

.emoji-bg-rainbow {
    background: linear-gradient(135deg,
        rgba(255,0,0,0.02) 0%, rgba(255,165,0,0.02) 20%,
        rgba(255,255,0,0.02) 40%, rgba(0,128,0,0.02) 60%,
        rgba(0,0,255,0.02) 80%, rgba(128,0,128,0.02) 100%);
}
.emoji-bg-rainbow::before {
    content: '🌈  ✨  💫  ⭐  🦋  🌈  ✨';
    font-size: 2rem;
    letter-spacing: 1.3rem;
    top: 10%;
    left: -10%;
    opacity: 0.5;
    animation: rainbow-sparkle calc(8s / var(--emoji-speed, 1)) ease-in-out infinite;
}
.emoji-bg-rainbow::after {
    content: '🦋  ⭐  🌈  💫  ✨';
    font-size: 1.5rem;
    letter-spacing: 1.5rem;
    top: 50%;
    left: 20%;
    opacity: 0.35;
    animation: rainbow-sparkle-alt calc(10s / var(--emoji-speed, 1)) ease-in-out infinite;
    animation-delay: calc(-4s / var(--emoji-speed, 1));
}

@keyframes rainbow-sparkle {
    0%   { transform: translateX(0) translateY(0) scale(1); opacity: 0.5; }
    25%  { transform: translateX(10%) translateY(-5%) scale(1.08); opacity: 0.6; }
    50%  { transform: translateX(20%) translateY(5%) scale(1); opacity: 0.45; }
    75%  { transform: translateX(10%) translateY(-3%) scale(1.05); opacity: 0.55; }
    100% { transform: translateX(0) translateY(0) scale(1); opacity: 0.5; }
}
@keyframes rainbow-sparkle-alt {
    0%   { transform: translateX(0) rotate(0deg) scale(1); opacity: 0.35; }
    33%  { transform: translateX(-10%) rotate(5deg) scale(1.1); opacity: 0.45; }
    66%  { transform: translateX(-20%) rotate(-3deg) scale(0.95); opacity: 0.3; }
    100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 0.35; }
}

/* FC variant */
.fc-day-emoji-rainbow {
    background: linear-gradient(135deg, rgba(255,0,0,0.05), rgba(255,165,0,0.04), rgba(0,128,0,0.04), rgba(0,0,255,0.05));
    border: 2px solid rgba(128,0,255,0.3) !important;
}



/* ==========================================================================
   12. NEON 💜  — Pulsing glow with scale
   ========================================================================== */

.emoji-bg-neon {
    background: radial-gradient(ellipse at center, rgba(57,255,20,0.04) 0%, rgba(128,0,255,0.03) 50%, transparent 80%);
}
.emoji-bg-neon::before {
    content: '💜  💙  💚  💛  🧡  💜  💙';
    font-size: 2.2rem;
    letter-spacing: 1rem;
    top: 20%;
    left: -5%;
    opacity: 0.5;
    animation: neon-pulse calc(4s / var(--emoji-speed, 1)) ease-in-out infinite;
}
.emoji-bg-neon::after {
    content: '🧡  💛  💚  💙  💜';
    font-size: 1.6rem;
    letter-spacing: 1.5rem;
    top: 55%;
    left: 15%;
    opacity: 0.35;
    animation: neon-pulse-alt calc(5s / var(--emoji-speed, 1)) ease-in-out infinite;
    animation-delay: calc(-2s / var(--emoji-speed, 1));
}

@keyframes neon-pulse {
    0%   { transform: scale(0.85); opacity: 0.3; filter: brightness(1); }
    50%  { transform: scale(1.15); opacity: 0.6; filter: brightness(1.3); }
    100% { transform: scale(0.85); opacity: 0.3; filter: brightness(1); }
}
@keyframes neon-pulse-alt {
    0%   { transform: scale(1.1) rotate(0deg); opacity: 0.4; filter: brightness(1.2); }
    50%  { transform: scale(0.8) rotate(3deg); opacity: 0.25; filter: brightness(0.9); }
    100% { transform: scale(1.1) rotate(0deg); opacity: 0.4; filter: brightness(1.2); }
}

/* FC variant */
.fc-day-emoji-neon {
    background: radial-gradient(ellipse at center, rgba(57,255,20,0.06) 0%, rgba(128,0,255,0.05) 50%, transparent 80%);
    border: 2px solid rgba(128,0,255,0.35) !important;
    box-shadow: inset 0 0 15px rgba(57,255,20,0.06);
}



/* ==========================================================================
   13. SPRING BLOOM 🌸  — Blooming/growing animation
   ========================================================================== */

.emoji-bg-spring-bloom {
    background: linear-gradient(180deg, rgba(144,238,144,0.04) 0%, rgba(255,182,193,0.04) 100%);
}
.emoji-bg-spring-bloom::before {
    content: '🌸  🌺  🌻  🌹  🌼  🌸  🌺';
    font-size: 2rem;
    letter-spacing: 1.2rem;
    top: 30%;
    left: -10%;
    opacity: 0;
    animation: bloom-grow calc(6s / var(--emoji-speed, 1)) ease-in-out infinite;
}
.emoji-bg-spring-bloom::after {
    content: '🌼  🌹  🌸  🌻  🌺';
    font-size: 1.5rem;
    letter-spacing: 1.5rem;
    top: 60%;
    left: 15%;
    opacity: 0;
    animation: bloom-grow-alt calc(8s / var(--emoji-speed, 1)) ease-in-out infinite;
    animation-delay: calc(-3s / var(--emoji-speed, 1));
}

@keyframes bloom-grow {
    0%   { transform: scale(0.2) rotate(-10deg); opacity: 0; }
    20%  { transform: scale(0.6) rotate(-5deg); opacity: 0.4; }
    50%  { transform: scale(1.1) rotate(3deg); opacity: 0.6; }
    80%  { transform: scale(1.0) rotate(0deg); opacity: 0.4; }
    100% { transform: scale(0.2) rotate(10deg); opacity: 0; }
}
@keyframes bloom-grow-alt {
    0%   { transform: scale(0.3) translateY(10%); opacity: 0; }
    30%  { transform: scale(0.8) translateY(-5%); opacity: 0.45; }
    60%  { transform: scale(1.05) translateY(-10%); opacity: 0.5; }
    100% { transform: scale(0.3) translateY(10%); opacity: 0; }
}

/* FC variant */
.fc-day-emoji-spring-bloom {
    background: linear-gradient(180deg, rgba(144,238,144,0.08) 0%, rgba(255,182,193,0.08) 100%);
    border: 2px solid rgba(144,238,144,0.35) !important;
}



/* ==========================================================================
   14. FIREWORKS 🎆  — Explosive burst from center
   ========================================================================== */

.emoji-bg-fireworks {
    background: radial-gradient(circle at 50% 50%, rgba(255,69,0,0.05) 0%, rgba(255,215,0,0.03) 40%, transparent 70%);
}
.emoji-bg-fireworks::before {
    content: '🎆  🎇  ✨  💥  🌟  🎆  🎇';
    font-size: 2rem;
    letter-spacing: 1.2rem;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform-origin: center;
    animation: firework-explode calc(4s / var(--emoji-speed, 1)) ease-out infinite;
}
.emoji-bg-fireworks::after {
    content: '🌟  💥  ✨  🎇  🎆';
    font-size: 1.5rem;
    letter-spacing: 1.5rem;
    top: 40%;
    left: 40%;
    opacity: 0;
    transform-origin: center;
    animation: firework-explode-alt calc(5s / var(--emoji-speed, 1)) ease-out infinite;
    animation-delay: calc(-2s / var(--emoji-speed, 1));
}

@keyframes firework-explode {
    0%   { transform: translate(-50%, -50%) scale(0.1) rotate(0deg); opacity: 0; }
    15%  { transform: translate(-50%, -50%) scale(0.5) rotate(30deg); opacity: 0.8; }
    40%  { transform: translate(-50%, -50%) scale(1.3) rotate(60deg); opacity: 0.5; }
    70%  { transform: translate(-50%, -50%) scale(1.6) rotate(90deg); opacity: 0.2; }
    100% { transform: translate(-50%, -50%) scale(2) rotate(120deg); opacity: 0; }
}
@keyframes firework-explode-alt {
    0%   { transform: scale(0.1); opacity: 0; }
    10%  { transform: scale(0.4); opacity: 0.7; }
    35%  { transform: scale(1.1) rotate(-20deg); opacity: 0.45; }
    65%  { transform: scale(1.5) rotate(-40deg); opacity: 0.15; }
    100% { transform: scale(1.8) rotate(-60deg); opacity: 0; }
}

/* FC variant */
.fc-day-emoji-fireworks {
    background: radial-gradient(circle at 50% 50%, rgba(255,69,0,0.08) 0%, rgba(255,215,0,0.05) 40%, transparent 70%);
    border: 2px solid rgba(255,100,0,0.35) !important;
}



/* ==========================================================================
   15. INDEPENDENCE 🇬🇷  — Parade-like horizontal march
   ========================================================================== */

.emoji-bg-independence {
    background: linear-gradient(90deg, rgba(13,94,175,0.05) 0%, rgba(255,255,255,0.02) 50%, rgba(13,94,175,0.05) 100%);
}
.emoji-bg-independence::before {
    content: '🇬🇷  🏛️  ⚔️  🦉  🫒  🇬🇷  🏛️  ⚔️';
    font-size: 2rem;
    letter-spacing: 1.3rem;
    top: 25%;
    left: -30%;
    opacity: 0.5;
    animation: parade-march calc(8s / var(--emoji-speed, 1)) linear infinite;
}
.emoji-bg-independence::after {
    content: '🦉  🫒  🇬🇷  🏛️  ⚔️  🦉';
    font-size: 1.4rem;
    letter-spacing: 1.5rem;
    top: 60%;
    left: 80%;
    opacity: 0.35;
    animation: parade-march-reverse calc(10s / var(--emoji-speed, 1)) linear infinite;
    animation-delay: calc(-4s / var(--emoji-speed, 1));
}

@keyframes parade-march {
    0%   { transform: translateX(0); }
    100% { transform: translateX(130%); }
}
@keyframes parade-march-reverse {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-130%); }
}

/* FC variant */
.fc-day-emoji-independence {
    background: linear-gradient(90deg, rgba(13,94,175,0.08) 0%, rgba(255,255,255,0.03) 50%, rgba(13,94,175,0.08) 100%);
    border: 2px solid rgba(13,94,175,0.35) !important;
}



/* ==========================================================================
   16. Accessibility — Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [class*="emoji-bg-"]::before,
    [class*="emoji-bg-"]::after {
        animation: none !important;
        opacity: 0.3 !important;
        transform: none !important;
    }
    .emoji-particle {
        animation: none !important;
        opacity: 0.25 !important;
        transform: none !important;
    }
}