/* ══════════════════════════════════════════════════════════
   Fortune Wheel — CSS-стили колеса
   ══════════════════════════════════════════════════════════ */

/* Контейнер колеса вращается через JS transform */
#wheel-canvas {
    transition: none; /* Анимация управляется из JS */
    will-change: transform;
}

/* Когда колесо крутится — CSS transition */
.wheel-wrapper--spinning #wheel-canvas {
    transition: transform 5s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

/* Внешнее кольцо колеса — декоративные точки */
.wheel-wrapper::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        var(--cc-red) 0deg 5deg,
        transparent 5deg 10deg,
        var(--cc-accent) 10deg 15deg,
        transparent 15deg 20deg
    );
    opacity: 0.15;
    z-index: -1;
}

/* Внутренний блик на колесе */
.wheel-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 40%,
        transparent 60%,
        rgba(0, 0, 0, 0.15) 100%
    );
    pointer-events: none;
    z-index: 10;
}

/* Пульсация колеса когда можно крутить */
.wheel-wrapper--ready {
    animation: wheel-pulse 2.5s ease-in-out infinite;
}

@keyframes wheel-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 12px var(--cc-dark-light),
            0 0 0 16px rgba(230, 57, 70, 0.3),
            0 0 40px rgba(230, 57, 70, 0.15),
            0 10px 40px rgba(0,0,0,0.4);
    }
    50% {
        box-shadow:
            0 0 0 12px var(--cc-dark-light),
            0 0 0 16px rgba(230, 57, 70, 0.5),
            0 0 60px rgba(230, 57, 70, 0.3),
            0 10px 40px rgba(0,0,0,0.4);
    }
}

/* Секторы колеса — дополнительные стили для текста */
.wheel-sector-label {
    font-family: var(--font-display);
    font-weight: 700;
    fill: white;
    text-anchor: middle;
    dominant-baseline: middle;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}