.eventscheduleheaderright {
  float: right
}

.eventscheduleheaderblockleft {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative
}

.eventscheduleheaderblockright {
  text-align: right;
  white-space: nowrap;
  margin-right: 5px
}

.eventscheduleheadertop a:link,
.eventscheduleheadertop a:visited,
.eventscheduleheadertop a:focus,
.eventscheduleheadertop a:active {
  text-decoration: none
}

/* SPARKLE - ROXO/PURPLE */
.event-sparkle {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        45deg,
        rgba(138, 43, 226, 0.1),
        rgba(168, 85, 247, 0.2),
        rgba(138, 43, 226, 0.1)
    );
    background-size: 200% 200%;
    animation: sparkleBackground 3s ease infinite;
}

@keyframes sparkleBackground {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.event-sparkle::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(168, 85, 247, 0.8), transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(147, 51, 234, 0.8), transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 80%, rgba(138, 43, 226, 0.8), transparent),
        radial-gradient(2px 2px at 10% 90%, white, transparent);
    background-size: 200% 200%;
    background-position: 0% 0%;
    animation: snowfall 8s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

.event-sparkle::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 40% 20%, white, transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(168, 85, 247, 0.6), transparent),
        radial-gradient(2px 2px at 15% 60%, white, transparent),
        radial-gradient(1px 1px at 85% 40%, rgba(147, 51, 234, 0.6), transparent);
    background-size: 250% 250%;
    background-position: 0% 0%;
    animation: snowfall 12s linear infinite;
    pointer-events: none;
    opacity: 0.4;
}

@keyframes snowfall {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
    100% {
        background-position: 50% 100%, 60% 100%, 70% 100%, 80% 100%, 90% 100%, 100% 100%, 110% 100%;
    }
}

.event-fire {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        45deg,
        rgba(255, 69, 0, 0.1),
        rgba(255, 140, 0, 0.2),
        rgba(255, 215, 0, 0.1)
    );
    background-size: 200% 200%;
    animation: fireGlow 2s ease infinite;
}

@keyframes fireGlow {
    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(1);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.2);
    }
}

.event-fire::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 25% 20%, rgba(255, 140, 0, 0.8), transparent),
        radial-gradient(1px 1px at 65% 40%, rgba(255, 69, 0, 0.9), transparent),
        radial-gradient(2px 2px at 45% 60%, rgba(255, 215, 0, 0.7), transparent),
        radial-gradient(1px 1px at 85% 30%, rgba(255, 140, 0, 0.8), transparent);
    background-size: 200% 200%;
    animation: embersRise 6s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.7;
}

@keyframes embersRise {
    0% {
        background-position: 0% 100%;
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
    100% {
        background-position: 100% 0%;
        opacity: 0;
    }
}

.event-magic {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        45deg,
        rgba(100, 200, 255, 0.1),
        rgba(135, 206, 250, 0.2),
        rgba(100, 200, 255, 0.1)
    );
    background-size: 200% 200%;
    animation: magicPulse 3s ease infinite;
}

@keyframes magicPulse {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: inset 0 0 10px rgba(135, 206, 250, 0.3);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: inset 0 0 20px rgba(173, 216, 230, 0.5);
    }
}

.event-magic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 30% 40%, rgba(173, 216, 230, 0.9), transparent),
        radial-gradient(1px 1px at 70% 20%, rgba(135, 206, 250, 0.8), transparent),
        radial-gradient(2px 2px at 50% 70%, rgba(176, 224, 230, 0.9), transparent),
        radial-gradient(1px 1px at 20% 80%, rgba(173, 216, 230, 0.8), transparent),
        radial-gradient(2px 2px at 90% 50%, rgba(135, 206, 250, 0.9), transparent);
    background-size: 300% 300%;
    animation: magicSparkle 4s linear infinite;
    pointer-events: none;
    opacity: 0.8;
}

@keyframes magicSparkle {
    0% {
        background-position: 0% 0%;
        transform: rotate(0deg);
    }
    100% {
        background-position: 100% 100%;
        transform: rotate(360deg);
    }
}

.event-text-glow {
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.5),
        0 0 10px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(255, 255, 255, 0.2);
    animation: textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% {
        text-shadow: 
            0 0 5px rgba(255, 255, 255, 0.5),
            0 0 10px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 20px rgba(255, 255, 255, 0.5),
            0 0 30px rgba(255, 255, 255, 0.3);
    }
}

/* UTILITY CLASSES */
.event-sparkle.calendar-event,
.event-fire.calendar-event,
.event-magic.calendar-event {
    border-radius: 2px;
}

.event-sparkle.faded,
.event-fire.faded,
.event-magic.faded {
    opacity: 0.6;
}

.event-sparkle.faded::before,
.event-sparkle.faded::after,
.event-fire.faded::before,
.event-magic.faded::before {
    opacity: 0.3;
}