/* ============================================
   SEASONAL THEME ANIMATIONS - ShifoLine
   Snowfall, Butterflies, Leaves, Waves
   ============================================ */

/* ============================================
   ❄️ WINTER - SNOWFALL ANIMATION
   ============================================ */
/* Snowflakes falling - Natural random movement */
.snowflake {
    position: fixed;
    top: -30px;
    pointer-events: none;
    z-index: 10;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
    animation: snowfall linear forwards;
    --drift: 0px;
}

.snowflake.small { font-size: 0.8rem; }
.snowflake.medium { font-size: 1.2rem; }
.snowflake.large { font-size: 1.6rem; }

@keyframes snowfall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
    }
    25% {
        transform: translateY(25vh) translateX(var(--drift)) rotate(90deg);
        opacity: 0.9;
    }
    50% {
        transform: translateY(50vh) translateX(calc(var(--drift) * -0.5)) rotate(180deg);
        opacity: 0.8;
    }
    75% {
        transform: translateY(75vh) translateX(var(--drift)) rotate(270deg);
        opacity: 0.6;
    }
    95% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(108vh) translateX(calc(var(--drift) * 0.5)) rotate(360deg);
        opacity: 0;
    }
}

/* Ice crystal decorations */
.ice-crystal {
    position: fixed;
    pointer-events: none;
    z-index: 10;
    opacity: 0.15;
    font-size: 4rem;
    color: #93C5FD;
    text-shadow: 0 0 20px rgba(147, 197, 253, 0.5);
}

.ice-crystal.top-left { top: 20px; left: 20px; transform: rotate(-15deg); }
.ice-crystal.top-right { top: 20px; right: 20px; transform: rotate(15deg); }
.ice-crystal.bottom-left { bottom: 20px; left: 20px; transform: rotate(15deg); }
.ice-crystal.bottom-right { bottom: 20px; right: 20px; transform: rotate(-15deg); }

/* Winter ambient glow */
.winter-ambient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    background: radial-gradient(ellipse at top, rgba(147, 197, 253, 0.1) 0%, transparent 60%);
}

/* ============================================
   🌸 SPRING - BUTTERFLY & FLOWER ANIMATION
   ============================================ */
.butterfly {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    font-size: 1.5rem;
    animation: butterflyFlight 15s ease-in-out infinite;
}

@keyframes butterflyFlight {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    25% {
        transform: translate(25vw, -15vh) rotate(15deg) scale(1.1);
    }
    50% {
        transform: translate(50vw, 10vh) rotate(-10deg) scale(0.9);
    }
    75% {
        transform: translate(75vw, -20vh) rotate(20deg) scale(1.05);
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translate(100vw, 0) rotate(0deg) scale(1);
        opacity: 0;
    }
}

/* Different butterfly flight paths */
.butterfly.butterfly-path-0 {
    animation-name: butterflyFlight0;
}

.butterfly.butterfly-path-1 {
    animation-name: butterflyFlight1;
}

.butterfly.butterfly-path-2 {
    animation-name: butterflyFlight2;
}

@keyframes butterflyFlight0 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 0.7; }
    25% { transform: translate(25vw, -20vh) rotate(10deg); }
    50% { transform: translate(55vw, 15vh) rotate(-5deg); }
    75% { transform: translate(80vw, -10vh) rotate(15deg); }
    95% { opacity: 0.7; }
    100% { transform: translate(105vw, 5vh) rotate(0deg); opacity: 0; }
}

@keyframes butterflyFlight1 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 0.7; }
    20% { transform: translate(20vw, 10vh) rotate(-10deg); }
    40% { transform: translate(45vw, -25vh) rotate(15deg); }
    60% { transform: translate(65vw, 5vh) rotate(-5deg); }
    80% { transform: translate(85vw, -15vh) rotate(10deg); }
    95% { opacity: 0.7; }
    100% { transform: translate(105vw, -5vh) rotate(0deg); opacity: 0; }
}

@keyframes butterflyFlight2 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 0.7; }
    30% { transform: translate(30vw, -5vh) rotate(5deg); }
    50% { transform: translate(50vw, 20vh) rotate(-15deg); }
    70% { transform: translate(75vw, -20vh) rotate(10deg); }
    95% { opacity: 0.7; }
    100% { transform: translate(105vw, 10vh) rotate(0deg); opacity: 0; }
}

/* Floating petals - Natural drift */
.petal {
    position: fixed;
    top: -30px;
    pointer-events: none;
    z-index: 1;
    font-size: 1.2rem;
    animation: petalFall ease-in-out forwards;
    --drift: 40px;
}

@keyframes petalFall {
    0% {
        transform: translateY(0) rotate(0deg) translateX(0);
        opacity: 0;
    }
    5% {
        opacity: 0.7;
    }
    25% {
        transform: translateY(25vh) rotate(90deg) translateX(var(--drift));
    }
    50% {
        transform: translateY(50vh) rotate(180deg) translateX(calc(var(--drift) * -0.6));
        opacity: 0.8;
    }
    75% {
        transform: translateY(75vh) rotate(270deg) translateX(var(--drift));
        opacity: 0.5;
    }
    95% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(108vh) rotate(360deg) translateX(calc(var(--drift) * -0.3));
        opacity: 0;
    }
}

/* Spring bloom effect */
.spring-bloom {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    opacity: 0.1;
    font-size: 5rem;
}

.spring-bloom.corner-tl { top: -20px; left: -20px; }
.spring-bloom.corner-tr { top: -20px; right: -20px; transform: scaleX(-1); }
.spring-bloom.corner-bl { bottom: -20px; left: -20px; transform: scaleY(-1); }
.spring-bloom.corner-br { bottom: -20px; right: -20px; transform: scale(-1); }

/* Spring gradient overlay */
.spring-ambient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.05) 0%, transparent 30%);
}

/* ============================================
   ☀️ SUMMER - BEAUTIFUL OCEAN & SUN
   ============================================ */

/* Beautiful Sun - Bottom left, non-intrusive */
.summer-sun {
    position: fixed;
    bottom: 150px;
    left: 30px;
    width: 80px;
    height: 80px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

.summer-sun .sun-core {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #FFD93D 0%, #FFA500 50%, transparent 70%);
    border-radius: 50%;
    animation: sunPulse 4s ease-in-out infinite;
}

.summer-sun .sun-rays {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255, 200, 50, 0.4) 5deg, transparent 10deg,
        transparent 20deg, rgba(255, 200, 50, 0.4) 25deg, transparent 30deg,
        transparent 40deg, rgba(255, 200, 50, 0.4) 45deg, transparent 50deg,
        transparent 60deg, rgba(255, 200, 50, 0.4) 65deg, transparent 70deg,
        transparent 80deg, rgba(255, 200, 50, 0.4) 85deg, transparent 90deg,
        transparent 100deg, rgba(255, 200, 50, 0.4) 105deg, transparent 110deg,
        transparent 120deg, rgba(255, 200, 50, 0.4) 125deg, transparent 130deg,
        transparent 140deg, rgba(255, 200, 50, 0.4) 145deg, transparent 150deg,
        transparent 160deg, rgba(255, 200, 50, 0.4) 165deg, transparent 170deg,
        transparent 180deg, rgba(255, 200, 50, 0.4) 185deg, transparent 190deg,
        transparent 200deg, rgba(255, 200, 50, 0.4) 205deg, transparent 210deg,
        transparent 220deg, rgba(255, 200, 50, 0.4) 225deg, transparent 230deg,
        transparent 240deg, rgba(255, 200, 50, 0.4) 245deg, transparent 250deg,
        transparent 260deg, rgba(255, 200, 50, 0.4) 265deg, transparent 270deg,
        transparent 280deg, rgba(255, 200, 50, 0.4) 285deg, transparent 290deg,
        transparent 300deg, rgba(255, 200, 50, 0.4) 305deg, transparent 310deg,
        transparent 320deg, rgba(255, 200, 50, 0.4) 325deg, transparent 330deg,
        transparent 340deg, rgba(255, 200, 50, 0.4) 345deg, transparent 350deg
    );
    border-radius: 50%;
    animation: sunRotate 60s linear infinite;
    opacity: 0.8;
}

.summer-sun .sun-glow-ring {
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 50, 0.3) 0%, transparent 70%);
    animation: sunGlow 3s ease-in-out infinite;
}

@keyframes sunPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

@keyframes sunRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes sunGlow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Sun Light Rays - Soft radial glow, dark-theme friendly */
.sun-light-rays {
    position: fixed;
    top: -20%;
    right: -20%;
    width: 80%;
    height: 80%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        ellipse at 100% 0%,
        rgba(255, 200, 100, 0.04) 0%,
        rgba(255, 180, 80, 0.02) 30%,
        transparent 70%
    );
    filter: blur(40px);
    opacity: 0.6;
}

/* Beautiful Ocean Waves - Seamless infinite loop, GPU optimized */
.ocean-waves {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    will-change: transform;
}

.ocean-waves .wave {
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 300%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: 33.333% 100%;
    will-change: transform;
    transform: translateZ(0);
}

.ocean-waves .wave-1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath fill='%230EA5E9' fill-opacity='0.5' d='M0,50 C100,80 200,20 300,50 C400,80 500,20 600,50 C700,80 800,20 900,50 C1000,80 1100,20 1200,50 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
    animation: seamlessWave 10s linear infinite;
    z-index: 3;
    opacity: 0.8;
}

.ocean-waves .wave-2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath fill='%2338BDF8' fill-opacity='0.4' d='M0,60 C150,30 300,70 450,40 C600,10 750,70 900,40 C1050,10 1200,60 1200,60 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
    animation: seamlessWave 14s linear infinite;
    z-index: 2;
    opacity: 0.6;
}

.ocean-waves .wave-3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath fill='%237DD3FC' fill-opacity='0.3' d='M0,70 C120,40 240,80 360,50 C480,20 600,70 720,40 C840,10 960,60 1080,30 C1200,0 1200,70 1200,70 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
    animation: seamlessWave 18s linear infinite;
    z-index: 1;
    opacity: 0.5;
}

.ocean-waves .foam {
    position: absolute;
    bottom: 50px;
    left: -100%;
    width: 300%;
    height: 8px;
    background: repeating-linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.5) 5%,
        rgba(255,255,255,0.7) 10%,
        transparent 15%,
        transparent 20%,
        rgba(255,255,255,0.4) 25%,
        rgba(255,255,255,0.6) 30%,
        transparent 35%
    );
    background-size: 33.333% 100%;
    animation: seamlessWave 8s linear infinite;
    z-index: 4;
    opacity: 0.7;
}

@keyframes seamlessWave {
    0% { transform: translateX(0) translateZ(0); }
    100% { transform: translateX(33.333%) translateZ(0); }
}

/* Floating Clouds */
.cloud {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    width: 100px;
    height: 40px;
    animation: cloudFloat linear infinite;
}

.cloud::before,
.cloud::after,
.cloud {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50px;
}

.cloud::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.cloud::after {
    content: '';
    position: absolute;
    top: -25px;
    left: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

@keyframes cloudFloat {
    0% { transform: translateX(-20vw); }
    100% { transform: translateX(120vw); }
}

/* Summer ambient */
.summer-ambient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(56, 189, 248, 0.08) 0%,
        rgba(14, 165, 233, 0.05) 30%,
        transparent 60%
    );
}

/* ============================================
   � AUTUMN - HALLOWEEN THEME
   ============================================ */

/* Spooky Moon - Bottom left, non-intrusive */
.halloween-moon {
    position: fixed;
    bottom: 180px;
    left: 30px;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #FFF8DC 0%, #FFE4B5 50%, #DEB887 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 20px 8px rgba(255, 248, 220, 0.2),
        0 0 40px 15px rgba(255, 228, 181, 0.1);
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
}

.halloween-moon::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 15px;
    width: 10px;
    height: 10px;
    background: rgba(139, 119, 101, 0.3);
    border-radius: 50%;
}

.halloween-moon::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 35px;
    width: 8px;
    height: 8px;
    background: rgba(139, 119, 101, 0.2);
    border-radius: 50%;
}

/* Spooky Fog */
.halloween-fog {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 150px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(100, 80, 120, 0.1) 30%,
        rgba(80, 60, 100, 0.2) 60%,
        rgba(60, 40, 80, 0.3) 100%
    );
    animation: fogDrift 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes fogDrift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-25%); }
}

/* Flying Bat */
.spooky-bat {
    position: fixed;
    left: -50px;
    font-size: 2rem;
    pointer-events: none;
    z-index: 1;
    animation: batFly 12s linear forwards;
}

@keyframes batFly {
    0% { 
        transform: translateX(0) translateY(0) scaleX(1);
        opacity: 0;
    }
    5% { opacity: 0.8; }
    25% { transform: translateX(30vw) translateY(-30px) scaleX(-1); }
    50% { transform: translateX(60vw) translateY(20px) scaleX(1); }
    75% { transform: translateX(85vw) translateY(-20px) scaleX(-1); }
    95% { opacity: 0.8; }
    100% { 
        transform: translateX(110vw) translateY(0) scaleX(1);
        opacity: 0;
    }
}

/* Floating spooky elements */
.spooky-float {
    position: fixed;
    top: -50px;
    font-size: 1.8rem;
    pointer-events: none;
    z-index: 1;
    animation: spookyFloat 10s ease-in-out forwards;
}

@keyframes spookyFloat {
    0% { 
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.8; }
    50% { transform: translateY(50vh) rotate(10deg); }
    90% { opacity: 0.8; }
    100% { 
        transform: translateY(110vh) rotate(-10deg);
        opacity: 0;
    }
}

/* Falling Leaves - Natural swaying */
.leaf {
    position: fixed;
    top: -50px;
    pointer-events: none;
    z-index: 1;
    font-size: 1.5rem;
    animation: leafFall linear forwards;
    --swing: 30px;
}

@keyframes leafFall {
    0% {
        transform: translateY(0) rotate(0deg) translateX(0);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
    }
    20% {
        transform: translateY(20vh) rotate(70deg) translateX(var(--swing));
    }
    40% {
        transform: translateY(40vh) rotate(140deg) translateX(calc(var(--swing) * -0.7));
    }
    60% {
        transform: translateY(60vh) rotate(220deg) translateX(var(--swing));
    }
    80% {
        transform: translateY(80vh) rotate(290deg) translateX(calc(var(--swing) * -0.5));
        opacity: 0.6;
    }
    95% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(108vh) rotate(360deg) translateX(calc(var(--swing) * 0.3));
        opacity: 0;
    }
}

/* Different leaf types */
.leaf.maple { content: '🍁'; }
.leaf.oak { content: '🍂'; }
.leaf.yellow { color: #F59E0B; }
.leaf.orange { color: #EA580C; }
.leaf.red { color: #DC2626; }

/* Wind gust effect */
.wind-gust {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(234, 88, 12, 0.2) 20%, 
        rgba(234, 88, 12, 0.4) 50%, 
        rgba(234, 88, 12, 0.2) 80%, 
        transparent 100%
    );
    animation: windMove 8s ease-in-out infinite;
}

@keyframes windMove {
    0% { transform: translateX(-100%) translateY(0); opacity: 0; }
    20% { opacity: 0.6; }
    80% { opacity: 0.6; }
    100% { transform: translateX(100vw) translateY(20px); opacity: 0; }
}

/* Autumn ambient warmth */
.autumn-ambient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: 
        radial-gradient(ellipse at bottom left, rgba(234, 88, 12, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at top right, rgba(220, 38, 38, 0.04) 0%, transparent 40%);
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */
.snowflake,
.butterfly,
.petal,
.leaf,
.sparkle {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Reduce animations on low-end devices */
@media (max-width: 768px) {
    .snowflake,
    .butterfly,
    .petal,
    .leaf {
        animation-duration: 20s;
    }
    
    .wave-container {
        height: 50px;
    }
}

/* Static mode for weak devices */
[data-static-mode="true"] .snowflake,
[data-static-mode="true"] .butterfly,
[data-static-mode="true"] .petal,
[data-static-mode="true"] .leaf,
[data-static-mode="true"] .sparkle,
[data-static-mode="true"] .wave,
[data-static-mode="true"] .sun-ray,
[data-static-mode="true"] .wind-gust {
    animation: none !important;
    display: none !important;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .snowflake,
    .butterfly,
    .petal,
    .leaf,
    .sparkle,
    .wave,
    .sun-ray,
    .wind-gust {
        animation: none !important;
    }
}

/* ============================================
   CORNER DECORATIONS - All Seasons
   ============================================ */
.theme-corner-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* Corner stickers are intentionally disabled across all themes. */
.theme-corner-decorations,
.corner-decoration,
#theme-corners,
[class*="corner-decoration"],
[class*="theme-corner"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.corner-decoration {
    position: fixed;
    font-size: 2.5rem;
    opacity: 0;
    visibility: hidden;
    display: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    z-index: 1;
    pointer-events: none;
}

.corner-decoration.top-left {
    top: 15px;
    left: 15px;
}

.corner-decoration.top-right {
    top: 15px;
    right: 15px;
}

.corner-decoration.bottom-left {
    bottom: 15px;
    left: 15px;
}

.corner-decoration.bottom-right {
    bottom: 15px;
    right: 15px;
}

/* Season-specific corner styles */
.corner-decoration.winter-corner {
    color: #93C5FD;
    text-shadow: 0 0 15px rgba(147, 197, 253, 0.5);
    animation: winterCornerPulse 4s ease-in-out infinite;
}

.corner-decoration.spring-corner {
    animation: springCornerBounce 3s ease-in-out infinite;
}

.corner-decoration.summer-corner {
    animation: summerCornerGlow 3s ease-in-out infinite;
}

.corner-decoration.autumn-corner {
    animation: autumnCornerSway 4s ease-in-out infinite;
}

@keyframes winterCornerPulse {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(1.05); }
}

@keyframes springCornerBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes summerCornerGlow {
    0%, 100% { opacity: 0.25; filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.2)); }
    50% { opacity: 0.4; filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.4)); }
}

@keyframes autumnCornerSway {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* ============================================
   FROST EDGES - Winter
   ============================================ */
.frost-edge {
    position: fixed;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

.frost-edge.frost-top {
    top: 0;
    height: 60px;
    background: linear-gradient(180deg, 
        rgba(147, 197, 253, 0.15) 0%,
        rgba(147, 197, 253, 0.08) 30%,
        transparent 100%
    );
}

.frost-edge.frost-bottom {
    bottom: 0;
    height: 40px;
    background: linear-gradient(0deg, 
        rgba(255, 255, 255, 0.2) 0%,
        rgba(147, 197, 253, 0.1) 50%,
        transparent 100%
    );
}

/* ============================================
   BEACH/SAND - Summer
   ============================================ */
.beach-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    pointer-events: none;
    z-index: 1;
}

.beach-bottom .sand {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background: linear-gradient(180deg,
        rgba(251, 191, 36, 0.08) 0%,
        rgba(217, 165, 32, 0.12) 100%
    );
}

.beach-bottom .wave-line {
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 200%;
    height: 8px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(14, 165, 233, 0.15) 25%,
        rgba(14, 165, 233, 0.25) 50%,
        rgba(14, 165, 233, 0.15) 75%,
        transparent 100%
    );
    border-radius: 50%;
    animation: beachWave 8s ease-in-out infinite;
}

.beach-bottom .wave-line.wave-2 {
    bottom: 30px;
    opacity: 0.6;
    animation-delay: -4s;
    animation-duration: 10s;
}

@keyframes beachWave {
    0%, 100% { transform: translateX(-25%); }
    50% { transform: translateX(0); }
}

/* ============================================
   SUN GLOW - Summer
   ============================================ */
.sun-glow {
    position: fixed;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle,
        rgba(251, 191, 36, 0.15) 0%,
        rgba(251, 191, 36, 0.08) 30%,
        rgba(251, 191, 36, 0.03) 50%,
        transparent 70%
    );
    animation: sunPulse 6s ease-in-out infinite;
}

@keyframes sunPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* ============================================
   IMPROVED SPARKLE - Summer
   ============================================ */
.sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    animation: sparkleFloat 3s ease-in-out infinite;
}

@keyframes sparkleFloat {
    0%, 100% { 
        opacity: 0; 
        transform: scale(0.5) translateY(0); 
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1) translateY(-10px); 
    }
}

/* Hide animations when disabled */
[data-animations="off"] .theme-corner-decorations,
[data-animations="off"] .theme-decoration-overlay,
[data-animations="off"] #theme-ambient,
[data-animations="off"] .snowflake,
[data-animations="off"] .butterfly,
[data-animations="off"] .petal,
[data-animations="off"] .leaf,
[data-animations="off"] .sparkle,
[data-animations="off"] .summer-sun,
[data-animations="off"] .ocean-waves,
[data-animations="off"] .cloud,
[data-animations="off"] .sun-light-rays,
[data-animations="off"] .halloween-fog,
[data-animations="off"] .halloween-moon,
[data-animations="off"] .spooky-bat,
[data-animations="off"] .spooky-float,
[data-animations="off"] .frost-edge,
[data-animations="off"] .beach-bottom,
[data-animations="off"] .sun-glow {
    display: none !important;
    animation: none !important;
}

/* ============================================
   � GLOBAL SMOOTH TRANSITIONS
   ============================================ */
*, *::before, *::after {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

a, button, .btn, .card, .nav-link, input, select, textarea {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   🎨 GLOBAL SEASONAL HOVER EFFECTS
   GPU Accelerated • 60fps • Smooth Animations
   ============================================ */

/* ===========================================
   ELEMENTS THAT GET HOVER EFFECTS
   =========================================== */
button,
[type="submit"],
[type="button"],
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-outline,
.btn-outline-primary,
.btn-outline-secondary,
.action-btn,
.filter-btn,
.card-action,
.region-btn,
.category-btn,
.specialty-card,
.department-card,
.hospital-card,
.clinic-card,
.menu-item,
.sidebar-menu a,
.admin-menu a,
.dropdown-item,
a.text-link,
a.inline-link,
.nav-link:not(.nav-container *),
.sidebar a:not(.sidebar-header *),
.menu-item a {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth hover lift for cards */
.specialty-card:hover,
.department-card:hover,
.hospital-card:hover,
.clinic-card:hover,
.card:hover {
    transform: translateY(-4px) scale(1.01);
}

/* GPU acceleration base for hover elements */
button::before,
button::after,
[type="submit"]::before,
[type="submit"]::after,
.btn::before,
.btn::after,
.btn-primary::before,
.btn-primary::after,
.btn-secondary::before,
.btn-secondary::after,
.btn-outline::before,
.btn-outline::after,
.action-btn::before,
.action-btn::after,
.filter-btn::before,
.filter-btn::after,
.region-btn::before,
.region-btn::after,
.category-btn::before,
.category-btn::after,
.menu-item::before,
.menu-item::after,
.sidebar-menu a::before,
.sidebar-menu a::after,
.dropdown-item::before,
.dropdown-item::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.4s ease;
    will-change: opacity, transform;
    transform: translateZ(0);
    z-index: 1;
}

/* ===========================================
   🚫 EXCLUDED ELEMENTS - No hover effects
   =========================================== */
.card:not(button)::before,
.card:not(button)::after,
.url-preview::before,
.url-preview::after,
.preview-card::before,
.preview-card::after,
input::before,
input::after,
textarea::before,
textarea::after,
select::before,
select::after,
.nav-container::before,
.nav-container::after,
.header-nav::before,
.header-nav::after,
.breadcrumb::before,
.breadcrumb::after,
.breadcrumb a::before,
.breadcrumb a::after {
    display: none !important;
}

/* ============================================
   ❄️ WINTER - Frost Glass + Ice Shimmer
   ============================================ */
[data-season="winter"] button:hover,
[data-season="winter"] [type="submit"]:hover,
[data-season="winter"] [type="button"]:hover,
[data-season="winter"] .btn:hover,
[data-season="winter"] .btn-primary:hover,
[data-season="winter"] .btn-secondary:hover,
[data-season="winter"] .btn-outline:hover,
[data-season="winter"] .action-btn:hover,
[data-season="winter"] .filter-btn:hover,
[data-season="winter"] .region-btn:hover,
[data-season="winter"] .category-btn:hover,
[data-season="winter"] .menu-item:hover,
[data-season="winter"] .dropdown-item:hover,
[data-season="winter"] .sidebar-menu a:hover,
[data-season="winter"] .admin-menu a:hover,
[data-season="winter"] .nav-link:hover,
[data-season="winter"] .sidebar a:hover {
    box-shadow: 
        0 0 20px rgba(147, 197, 253, 0.4),
        0 0 40px rgba(147, 197, 253, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* Frost glass overlay */
[data-season="winter"] button::before,
[data-season="winter"] [type="submit"]::before,
[data-season="winter"] .btn::before,
[data-season="winter"] .btn-primary::before,
[data-season="winter"] .btn-secondary::before,
[data-season="winter"] .btn-outline::before,
[data-season="winter"] .action-btn::before,
[data-season="winter"] .filter-btn::before,
[data-season="winter"] .region-btn::before,
[data-season="winter"] .menu-item::before,
[data-season="winter"] .dropdown-item::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(200, 230, 255, 0.15) 25%,
        rgba(147, 197, 253, 0.1) 50%,
        rgba(200, 230, 255, 0.15) 75%,
        rgba(255, 255, 255, 0.2) 100%
    );
    backdrop-filter: blur(2px);
}

/* Ice shimmer sweep */
[data-season="winter"] button::after,
[data-season="winter"] [type="submit"]::after,
[data-season="winter"] .btn::after,
[data-season="winter"] .btn-primary::after,
[data-season="winter"] .btn-secondary::after,
[data-season="winter"] .btn-outline::after,
[data-season="winter"] .action-btn::after,
[data-season="winter"] .filter-btn::after,
[data-season="winter"] .region-btn::after,
[data-season="winter"] .menu-item::after,
[data-season="winter"] .dropdown-item::after {
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.4) 40%,
        rgba(200, 230, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.4) 60%,
        transparent 80%
    );
    transform: translateX(-100%) translateZ(0);
}

[data-season="winter"] button:hover::before,
[data-season="winter"] [type="submit"]:hover::before,
[data-season="winter"] .btn:hover::before,
[data-season="winter"] .btn-primary:hover::before,
[data-season="winter"] .action-btn:hover::before,
[data-season="winter"] .filter-btn:hover::before,
[data-season="winter"] .region-btn:hover::before,
[data-season="winter"] .menu-item:hover::before,
[data-season="winter"] .dropdown-item:hover::before {
    opacity: 1;
}

[data-season="winter"] button:hover::after,
[data-season="winter"] [type="submit"]:hover::after,
[data-season="winter"] .btn:hover::after,
[data-season="winter"] .btn-primary:hover::after,
[data-season="winter"] .action-btn:hover::after,
[data-season="winter"] .filter-btn:hover::after,
[data-season="winter"] .region-btn:hover::after,
[data-season="winter"] .menu-item:hover::after,
[data-season="winter"] .dropdown-item:hover::after {
    opacity: 1;
    animation: iceShimmer 0.9s ease-out forwards;
}

@keyframes iceShimmer {
    0% { transform: translateX(-100%) translateZ(0); }
    100% { transform: translateX(100%) translateZ(0); }
}

/* ============================================
   ☀️ SUMMER - Warm Glow + Sun Shimmer
   ============================================ */
[data-season="summer"] button:hover,
[data-season="summer"] [type="submit"]:hover,
[data-season="summer"] [type="button"]:hover,
[data-season="summer"] .btn:hover,
[data-season="summer"] .btn-primary:hover,
[data-season="summer"] .btn-secondary:hover,
[data-season="summer"] .btn-outline:hover,
[data-season="summer"] .action-btn:hover,
[data-season="summer"] .filter-btn:hover,
[data-season="summer"] .region-btn:hover,
[data-season="summer"] .category-btn:hover,
[data-season="summer"] .menu-item:hover,
[data-season="summer"] .dropdown-item:hover,
[data-season="summer"] .sidebar-menu a:hover,
[data-season="summer"] .admin-menu a:hover,
[data-season="summer"] .nav-link:hover,
[data-season="summer"] .sidebar a:hover {
    box-shadow: 
        0 0 25px rgba(251, 191, 36, 0.5),
        0 0 50px rgba(251, 191, 36, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

/* Warm glow overlay */
[data-season="summer"] button::before,
[data-season="summer"] [type="submit"]::before,
[data-season="summer"] .btn::before,
[data-season="summer"] .btn-primary::before,
[data-season="summer"] .action-btn::before,
[data-season="summer"] .filter-btn::before,
[data-season="summer"] .region-btn::before,
[data-season="summer"] .menu-item::before,
[data-season="summer"] .dropdown-item::before {
    background: radial-gradient(
        ellipse at 30% 0%,
        rgba(251, 191, 36, 0.3) 0%,
        rgba(251, 191, 36, 0.1) 40%,
        transparent 70%
    );
}

/* Sun light sweep */
[data-season="summer"] button::after,
[data-season="summer"] [type="submit"]::after,
[data-season="summer"] .btn::after,
[data-season="summer"] .btn-primary::after,
[data-season="summer"] .action-btn::after,
[data-season="summer"] .filter-btn::after,
[data-season="summer"] .region-btn::after,
[data-season="summer"] .menu-item::after,
[data-season="summer"] .dropdown-item::after {
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(251, 191, 36, 0.4) 50%,
        rgba(255, 255, 255, 0.3) 60%,
        transparent 80%
    );
    transform: translateX(-100%) translateZ(0);
}

[data-season="summer"] button:hover::before,
[data-season="summer"] [type="submit"]:hover::before,
[data-season="summer"] .btn:hover::before,
[data-season="summer"] .btn-primary:hover::before,
[data-season="summer"] .action-btn:hover::before,
[data-season="summer"] .filter-btn:hover::before,
[data-season="summer"] .region-btn:hover::before,
[data-season="summer"] .menu-item:hover::before,
[data-season="summer"] .dropdown-item:hover::before {
    opacity: 1;
}

[data-season="summer"] button:hover::after,
[data-season="summer"] [type="submit"]:hover::after,
[data-season="summer"] .btn:hover::after,
[data-season="summer"] .btn-primary:hover::after,
[data-season="summer"] .action-btn:hover::after,
[data-season="summer"] .filter-btn:hover::after,
[data-season="summer"] .region-btn:hover::after,
[data-season="summer"] .menu-item:hover::after,
[data-season="summer"] .dropdown-item:hover::after {
    opacity: 1;
    animation: sunShimmer 1s ease-out forwards;
}

@keyframes sunShimmer {
    0% { transform: translateX(-100%) translateZ(0); }
    100% { transform: translateX(100%) translateZ(0); }
}

/* ============================================
   🍂 AUTUMN - Amber Glow + Wind Motion
   ============================================ */
[data-season="autumn"] button:hover,
[data-season="autumn"] [type="submit"]:hover,
[data-season="autumn"] [type="button"]:hover,
[data-season="autumn"] .btn:hover,
[data-season="autumn"] .btn-primary:hover,
[data-season="autumn"] .btn-secondary:hover,
[data-season="autumn"] .btn-outline:hover,
[data-season="autumn"] .action-btn:hover,
[data-season="autumn"] .filter-btn:hover,
[data-season="autumn"] .region-btn:hover,
[data-season="autumn"] .category-btn:hover,
[data-season="autumn"] .menu-item:hover,
[data-season="autumn"] .dropdown-item:hover,
[data-season="autumn"] .sidebar-menu a:hover,
[data-season="autumn"] .admin-menu a:hover,
[data-season="autumn"] .nav-link:hover,
[data-season="autumn"] .sidebar a:hover {
    box-shadow: 
        0 0 20px rgba(234, 88, 12, 0.4),
        0 0 40px rgba(180, 83, 9, 0.2),
        inset 0 1px 0 rgba(255, 200, 150, 0.3);
    transform: translateY(-1px);
}

/* Warm amber overlay */
[data-season="autumn"] button::before,
[data-season="autumn"] [type="submit"]::before,
[data-season="autumn"] .btn::before,
[data-season="autumn"] .btn-primary::before,
[data-season="autumn"] .action-btn::before,
[data-season="autumn"] .filter-btn::before,
[data-season="autumn"] .region-btn::before,
[data-season="autumn"] .menu-item::before,
[data-season="autumn"] .dropdown-item::before {
    background: linear-gradient(
        135deg,
        rgba(234, 88, 12, 0.2) 0%,
        rgba(245, 158, 11, 0.15) 50%,
        rgba(180, 83, 9, 0.1) 100%
    );
}

/* Wind sweep effect */
[data-season="autumn"] button::after,
[data-season="autumn"] [type="submit"]::after,
[data-season="autumn"] .btn::after,
[data-season="autumn"] .btn-primary::after,
[data-season="autumn"] .action-btn::after,
[data-season="autumn"] .filter-btn::after,
[data-season="autumn"] .region-btn::after,
[data-season="autumn"] .menu-item::after,
[data-season="autumn"] .dropdown-item::after {
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(245, 158, 11, 0.3) 35%,
        rgba(234, 88, 12, 0.4) 50%,
        rgba(245, 158, 11, 0.3) 65%,
        transparent 80%
    );
    transform: translateX(-100%) translateZ(0);
}

[data-season="autumn"] button:hover::before,
[data-season="autumn"] [type="submit"]:hover::before,
[data-season="autumn"] .btn:hover::before,
[data-season="autumn"] .btn-primary:hover::before,
[data-season="autumn"] .action-btn:hover::before,
[data-season="autumn"] .filter-btn:hover::before,
[data-season="autumn"] .region-btn:hover::before,
[data-season="autumn"] .menu-item:hover::before,
[data-season="autumn"] .dropdown-item:hover::before {
    opacity: 1;
}

[data-season="autumn"] button:hover::after,
[data-season="autumn"] [type="submit"]:hover::after,
[data-season="autumn"] .btn:hover::after,
[data-season="autumn"] .btn-primary:hover::after,
[data-season="autumn"] .action-btn:hover::after,
[data-season="autumn"] .filter-btn:hover::after,
[data-season="autumn"] .region-btn:hover::after,
[data-season="autumn"] .menu-item:hover::after,
[data-season="autumn"] .dropdown-item:hover::after {
    opacity: 1;
    animation: windSweep 0.95s ease-out forwards;
}

@keyframes windSweep {
    0% { transform: translateX(-100%) skewX(-5deg) translateZ(0); }
    100% { transform: translateX(100%) skewX(-5deg) translateZ(0); }
}

/* ============================================
   🌸 SPRING - Fresh Glow + Petal Shimmer
   ============================================ */
[data-season="spring"] button:hover,
[data-season="spring"] [type="submit"]:hover,
[data-season="spring"] [type="button"]:hover,
[data-season="spring"] .btn:hover,
[data-season="spring"] .btn-primary:hover,
[data-season="spring"] .btn-secondary:hover,
[data-season="spring"] .btn-outline:hover,
[data-season="spring"] .action-btn:hover,
[data-season="spring"] .filter-btn:hover,
[data-season="spring"] .region-btn:hover,
[data-season="spring"] .category-btn:hover,
[data-season="spring"] .menu-item:hover,
[data-season="spring"] .dropdown-item:hover,
[data-season="spring"] .sidebar-menu a:hover,
[data-season="spring"] .admin-menu a:hover,
[data-season="spring"] .nav-link:hover,
[data-season="spring"] .sidebar a:hover {
    box-shadow: 
        0 0 20px rgba(34, 197, 94, 0.35),
        0 0 40px rgba(249, 168, 212, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

/* Fresh bloom overlay */
[data-season="spring"] button::before,
[data-season="spring"] [type="submit"]::before,
[data-season="spring"] .btn::before,
[data-season="spring"] .btn-primary::before,
[data-season="spring"] .action-btn::before,
[data-season="spring"] .filter-btn::before,
[data-season="spring"] .region-btn::before,
[data-season="spring"] .menu-item::before,
[data-season="spring"] .dropdown-item::before {
    background: linear-gradient(
        135deg,
        rgba(249, 168, 212, 0.2) 0%,
        rgba(134, 239, 172, 0.15) 50%,
        rgba(249, 168, 212, 0.1) 100%
    );
}

/* Petal shimmer sweep */
[data-season="spring"] button::after,
[data-season="spring"] [type="submit"]::after,
[data-season="spring"] .btn::after,
[data-season="spring"] .btn-primary::after,
[data-season="spring"] .action-btn::after,
[data-season="spring"] .filter-btn::after,
[data-season="spring"] .region-btn::after,
[data-season="spring"] .menu-item::after,
[data-season="spring"] .dropdown-item::after {
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(249, 168, 212, 0.4) 40%,
        rgba(134, 239, 172, 0.5) 50%,
        rgba(249, 168, 212, 0.4) 60%,
        transparent 80%
    );
    transform: translateX(-100%) translateZ(0);
}

[data-season="spring"] button:hover::before,
[data-season="spring"] [type="submit"]:hover::before,
[data-season="spring"] .btn:hover::before,
[data-season="spring"] .btn-primary:hover::before,
[data-season="spring"] .action-btn:hover::before,
[data-season="spring"] .filter-btn:hover::before,
[data-season="spring"] .region-btn:hover::before,
[data-season="spring"] .menu-item:hover::before,
[data-season="spring"] .dropdown-item:hover::before {
    opacity: 1;
}

[data-season="spring"] button:hover::after,
[data-season="spring"] [type="submit"]:hover::after,
[data-season="spring"] .btn:hover::after,
[data-season="spring"] .btn-primary:hover::after,
[data-season="spring"] .action-btn:hover::after,
[data-season="spring"] .filter-btn:hover::after,
[data-season="spring"] .region-btn:hover::after,
[data-season="spring"] .menu-item:hover::after,
[data-season="spring"] .dropdown-item:hover::after {
    opacity: 1;
    animation: petalShimmer 0.9s ease-out forwards;
}

@keyframes petalShimmer {
    0% { transform: translateX(-100%) translateZ(0); }
    100% { transform: translateX(100%) translateZ(0); }
}

/* ============================================
   ♿ ACCESSIBILITY & PERFORMANCE
   ============================================ */

/* Reduced motion - disable animations */
@media (prefers-reduced-motion: reduce) {
    [data-season] button.btn::after,
    [data-season] button.btn-primary::after,
    [data-season] button.btn-secondary::after,
    [data-season] button[type="submit"]::after {
        animation: none !important;
        transform: none !important;
        opacity: 0 !important;
    }
    
    [data-season] button.btn:hover,
    [data-season] button.btn-primary:hover,
    [data-season] button.btn-secondary:hover {
        transform: none !important;
    }
}

/* Mobile - lighter effects */
@media (max-width: 768px) {
    [data-season] button.btn::after,
    [data-season] button.btn-primary::after,
    [data-season] button.btn-secondary::after {
        display: none;
    }
    
    [data-season] button.btn:hover,
    [data-season] button.btn-primary:hover,
    [data-season] button.btn-secondary:hover {
        transform: none;
    }
}

/* Disable when animations off */
[data-animations="off"] button.btn::before,
[data-animations="off"] button.btn::after,
[data-animations="off"] button.btn-primary::before,
[data-animations="off"] button.btn-primary::after,
[data-animations="off"] button.btn-secondary::before,
[data-animations="off"] button.btn-secondary::after,
[data-animations="off"] button[type="submit"]::before,
[data-animations="off"] button[type="submit"]::after {
    display: none !important;
}

/* ============================================
   🚫 EXPLICITLY EXCLUDE LINKS
   ============================================ */
a.btn::before,
a.btn::after,
a.btn-primary::before,
a.btn-primary::after,
a.btn-secondary::before,
a.btn-secondary::after,
.nav-link::before,
.nav-link::after,
.breadcrumb a::before,
.breadcrumb a::after,
.menu-link::before,
.menu-link::after,
.sidebar-link::before,
.sidebar-link::after {
    display: none !important;
}