/* custom-properties */
:root {
    --color-void: #0a0a0f;
    --color-midnight: #12121c;
    --color-velvet: #1a1a2e;
    --color-gold: #d4af37;
    --color-gold-light: #f4e4bc;
    --color-bronze: #8b6914;
    --color-blood: #722f37;
}

/* Base resets */
body {
    background-color: var(--color-void);
    color: #e8e6e3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography Overrides */
h1, h2, h3 {
    font-weight: 400;
}

/* Lantern Effect */
.cursor-light {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(212,175,55,0.15) 0%, rgba(10,10,15,0) 70%);
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
    will-change: transform;
}

/* Glassmorphism Card */
.glass-card {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Gold Shimmer Animation */
@keyframes shimmer {
    0% { color: var(--color-gold); text-shadow: 0 0 5px rgba(212,175,55,0); }
    50% { color: var(--color-gold-light); text-shadow: 0 0 15px rgba(212,175,55,0.3); }
    100% { color: var(--color-gold); text-shadow: 0 0 5px rgba(212,175,55,0); }
}

.gold-shimmer {
    animation: shimmer 4s ease-in-out infinite;
}

/* Utility for disabling cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    .cursor-light {
        display: none;
    }
    body {
        cursor: auto;
    }
}

/* Wheel Styles */
.zodiac-segment {
    transform-origin: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.zodiac-segment:hover {
    filter: drop-shadow(0 0 8px rgba(212,175,55,0.4));
    transform: scale(1.05);
}

.zodiac-segment.active path {
    fill: rgba(212,175,55,0.15);
    stroke: var(--color-gold);
    stroke-width: 2px;
}

.zodiac-segment path {
    fill: transparent;
    stroke: rgba(212,175,55,0.3);
    stroke-width: 1px;
    transition: all 0.3s ease;
}

.zodiac-icon {
    font-size: 1.5rem; /* Fallback */
    pointer-events: none;
    fill: var(--color-gold);
}

/* Zodiac Segment Text inside wheel */
.segment-label {
    fill: var(--color-gold);
    font-family: 'Cinzel', serif;
    font-size: 10px;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0.7;
}

.zodiac-segment.active .segment-label {
    opacity: 1;
    font-weight: bold;
}