/**
 * Classic White & Red Striped Christmas Ornament Cluster
 * Mobile-first design with accessibility features
 * Version: 3.0 - Single Style
 */

/* ============================================
   ORNAMENT CONTAINER
   ============================================ */

.christmas-ornament-cluster {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.cluster-ornament-icon {
    background: transparent !important;
    border: none !important;
}

/* ============================================
   ORNAMENT CAP (Silver Top with Hook)
   ============================================ */

.ornament-cap {
    width: 14px;
    height: 10px;
    background: linear-gradient(180deg, #E8E8E8 0%, #C0C0C0 50%, #A9A9A9 100%);
    border-radius: 3px 3px 0 0;
    position: relative;
    z-index: 3;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Hook ring on top of cap */
.ornament-cap::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 7px;
    border: 2px solid #A9A9A9;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    background: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ============================================
   ORNAMENT BALL (White Base with Red Stripes)
   ============================================ */

.ornament-ball {
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* White glossy base */
    background: linear-gradient(135deg, 
        #FFFFFF 0%, 
        #F8F8F8 25%, 
        #F0F0F0 50%, 
        #E8E8E8 75%, 
        #E0E0E0 100%
    );
    
    /* Realistic ornament shadows and depth */
    box-shadow: 
        /* Outer glow - subtle white/silver */
        0 0 15px rgba(255, 255, 255, 0.4),
        0 0 30px rgba(220, 20, 60, 0.2),
        /* 3D depth */
        inset -6px -6px 12px rgba(0, 0, 0, 0.15),
        inset 6px 6px 12px rgba(255, 255, 255, 0.6),
        /* Bottom shadow */
        0 6px 18px rgba(0, 0, 0, 0.3);
    
    /* Subtle sway animation */
    animation: ornament-sway 5s ease-in-out infinite;
    z-index: 2;
}

/* Gentle swaying animation */
@keyframes ornament-sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(1.5deg);
    }
    75% {
        transform: rotate(-1.5deg);
    }
}

/* Disable sway animation for clusters with indicators */
.christmas-ornament-cluster.has-bestof .ornament-ball {
    animation: none;
}

/* ============================================
   GLASS SHINE EFFECT (Prominent Highlight)
   ============================================ */

.ornament-shine {
    position: absolute;
    top: 12%;
    left: 18%;
    width: 38%;
    height: 38%;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.75) 20%,
        rgba(255, 255, 255, 0.4) 45%,
        transparent 100%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    animation: shine-pulse 4s ease-in-out infinite;
}

@keyframes shine-pulse {
    0%, 100% {
        opacity: 0.85;
    }
    50% {
        opacity: 1;
    }
}

/* ============================================
   CLASSIC RED CANDY CANE STRIPES
   ============================================ */

.ornament-stripes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    
    /* Bold equal-width red and white stripes */
    background: repeating-linear-gradient(
        -45deg,
        #DC143C 0px,
        #DC143C 15px,
        transparent 15px,
        transparent 30px
    );
    
    opacity: 0.95;
    pointer-events: none;
    z-index: 3;
    
    /* Add subtle shadow to stripes for depth */
    box-shadow: inset 0 0 15px rgba(220, 20, 60, 0.3);
}

/* ============================================
   CLUSTER COUNT TEXT (High Contrast)
   ============================================ */

.cluster-count {
    position: relative;
    z-index: 5;
    font-weight: 700;
    color: #DC143C;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1;
    letter-spacing: -0.5px;
    
    /* Strong white outline for readability on stripes */
    text-shadow: 
        /* White glow */
        0 0 4px rgba(255, 255, 255, 1),
        0 0 8px rgba(255, 255, 255, 0.9),
        /* Outline */
        -1px -1px 0 rgba(255, 255, 255, 0.9),
        1px -1px 0 rgba(255, 255, 255, 0.9),
        -1px 1px 0 rgba(255, 255, 255, 0.9),
        1px 1px 0 rgba(255, 255, 255, 0.9),
        /* Depth shadow */
        0 2px 4px rgba(0, 0, 0, 0.3);
    
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   BEST OF INDICATOR (Golden Star Badge)
   ============================================ */

/* Container for clusters with Best Of addresses */
.christmas-ornament-cluster.has-bestof {
    /* No visual change to container, badge is added via ::after */
}

/* Dark border star (behind gold star) for clusters with Best Of */
.christmas-ornament-cluster.has-bestof .ornament-ball::before {
    content: '';
    position: absolute;
    top: 2%;
    right: 2%;
    width: 19px;
    height: 19px;
    z-index: 5;
    
    /* Create 5-pointed star shape */
    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
    );
    
    /* Solid black border */
    background: #000000;
    
    /* Subtle pulse animation */
    animation: bestof-badge-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

/* Golden star */
.christmas-ornament-cluster.has-bestof .ornament-ball::after {
    content: '';
    position: absolute;
    top: calc(2% + 1.5px);
    right: calc(2% + 1.5px);
    width: 16px;
    height: 16px;
    z-index: 6;
    
    /* Create 5-pointed star shape */
    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
    );
    
    /* Metallic gold gradient */
    background: linear-gradient(135deg,
        #FFD700 0%,
        #FFC700 25%,
        #FFE55C 50%,
        #DAA520 75%,
        #B8860B 100%
    );
    
    /* Inner shadows for depth */
    box-shadow:
        inset -1px -1px 2px rgba(184, 134, 11, 0.6),
        inset 1px 1px 2px rgba(255, 237, 78, 0.8);
    
    /* Subtle pulse animation */
    animation: bestof-badge-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

/* Pulse animation for Best Of badge */
@keyframes bestof-badge-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

/* Enhanced hover effect when cluster has Best Of */
@media (hover: hover) and (pointer: fine) {
    .christmas-ornament-cluster.has-bestof:hover .ornament-ball::before {
        transform: scale(1.2) rotate(15deg);
    }
    
    .christmas-ornament-cluster.has-bestof:hover .ornament-ball::after {
        transform: scale(1.2) rotate(15deg);
        box-shadow:
            0 0 10px rgba(255, 215, 0, 0.8),
            inset -1px -1px 2px rgba(184, 134, 11, 0.6),
            inset 1px 1px 2px rgba(255, 237, 78, 0.8);
    }
}

/* Mobile optimizations for Best Of badge */
@media (max-width: 768px) {
    .christmas-ornament-cluster.has-bestof .ornament-ball::before {
        width: 17px;
        height: 17px;
        animation: none;
    }
    
    .christmas-ornament-cluster.has-bestof .ornament-ball::after {
        width: 14px;
        height: 14px;
        top: calc(2% + 1.5px);
        right: calc(2% + 1.5px);
        animation: none;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .christmas-ornament-cluster.has-bestof .ornament-ball::after {
        animation: none;
    }
}

/* ============================================
   HOVER EFFECTS (Desktop)
   ============================================ */

@media (hover: hover) and (pointer: fine) {
    .christmas-ornament-cluster:hover {
        transform: scale(1.12) translateY(-4px);
    }
    
    .christmas-ornament-cluster:hover .ornament-ball {
        box-shadow: 
            /* Enhanced glow on hover */
            0 0 25px rgba(255, 255, 255, 0.6),
            0 0 45px rgba(220, 20, 60, 0.4),
            /* 3D depth */
            inset -6px -6px 12px rgba(0, 0, 0, 0.15),
            inset 6px 6px 12px rgba(255, 255, 255, 0.7),
            /* Larger shadow */
            0 10px 25px rgba(0, 0, 0, 0.4);
    }
    
    .christmas-ornament-cluster:hover .ornament-shine {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* Active/pressed state */
.christmas-ornament-cluster:active {
    transform: scale(1.05) translateY(-2px);
}

/* ============================================
   FOCUS STATE FOR KEYBOARD NAVIGATION
   ============================================ */

.christmas-ornament-cluster:focus {
    outline: 3px solid #2e7d32;
    outline-offset: 6px;
    border-radius: 50%;
}

.christmas-ornament-cluster:focus-visible {
    outline: 3px solid #2e7d32;
    outline-offset: 6px;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Ensure minimum touch target (44x44px) */
    .christmas-ornament-cluster {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* Reduce animation complexity for performance */
    .ornament-ball {
        animation-duration: 7s;
    }
    
    .ornament-shine {
        animation: none;
        opacity: 0.85;
    }
    
    /* Simpler shadows on mobile */
    .ornament-ball {
        box-shadow: 
            0 0 15px rgba(255, 255, 255, 0.4),
            0 0 25px rgba(220, 20, 60, 0.2),
            inset -5px -5px 10px rgba(0, 0, 0, 0.15),
            inset 5px 5px 10px rgba(255, 255, 255, 0.6),
            0 5px 15px rgba(0, 0, 0, 0.3);
    }
    
    /* Bold equal-width stripes on mobile */
    .ornament-stripes {
        background: repeating-linear-gradient(
            -45deg,
            #DC143C 0px,
            #DC143C 12px,
            transparent 12px,
            transparent 24px
        );
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .ornament-ball,
    .ornament-shine {
        animation: none;
    }
    
    .christmas-ornament-cluster:hover {
        transform: scale(1.08);
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .ornament-ball {
        border: 3px solid #DC143C;
    }
    
    .cluster-count {
        color: #000000;
        text-shadow: 
            -2px -2px 0 #FFFFFF,
            2px -2px 0 #FFFFFF,
            -2px 2px 0 #FFFFFF,
            2px 2px 0 #FFFFFF;
        font-weight: 900;
    }
    
    .ornament-stripes {
        opacity: 1;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .ornament-ball {
        box-shadow: 
            0 0 20px rgba(255, 255, 255, 0.5),
            0 0 35px rgba(220, 20, 60, 0.3),
            inset -6px -6px 12px rgba(0, 0, 0, 0.2),
            inset 6px 6px 12px rgba(255, 255, 255, 0.5),
            0 6px 18px rgba(0, 0, 0, 0.5);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .christmas-ornament-cluster {
        transform: none !important;
    }
    
    .ornament-ball,
    .ornament-shine {
        animation: none !important;
    }
    
    /* Ensure stripes are visible in print */
    .ornament-stripes {
        opacity: 1;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}