/* See https://codepen.io/mark_sottek/pen/gbPjyGP */
/* =========================================
   Stylish Play Button (drop-in) — BASE
   ========================================= */
.play-btn {
    --size: clamp(32px, 6vw, 56px);
    --bg-1: #fa183d; /* primary */
    --bg-2: #b01428; /* shade */
    --ring: rgba(255, 255, 255, 0.35);
    --glow: rgba(250, 24, 61, 0.28);
    --inner: rgba(255, 255, 255, 0.08);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* NOTE: center-over-media default */
    width: var(--size);
    height: var(--size);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    isolation: isolate;
    background:
        radial-gradient(60% 60% at 30% 30%, var(--inner) 0%, transparent 100%),
        linear-gradient(180deg, var(--bg-1), var(--bg-2));
    box-shadow:
        0 10px 28px -6px var(--glow),
        0 2px 0 rgba(0, 0, 0, 0.25) inset,
        0 12px 24px rgba(0, 0, 0, 0.35);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
    z-index: 10;
}

/* Base inner sheen */
.play-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        100% 100% at 50% 0%,
        rgba(255, 255, 255, 0.25),
        transparent 60%
    );
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Base static ring (no animation by default) */
.play-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size) + 8px);
    height: calc(var(--size) + 8px);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    box-shadow: 0 0 0 2px var(--ring);
    opacity: 0.6;
    pointer-events: none;
}

.play-icon {
    width: 58%;
    height: 58%;
    display: block;
    fill: #fff;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

/* Hover/Focus polish */
.play-btn:hover,
.play-btn:focus-visible {
    transform: translate(-50%, -50%) scale(1.04);
    box-shadow:
        0 16px 36px -6px var(--glow),
        0 2px 0 rgba(0, 0, 0, 0.25) inset,
        0 14px 28px rgba(0, 0, 0, 0.4);
    outline: none;
}

/* Keyboard focus ring */
.play-btn:focus-visible {
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.6),
        0 0 0 6px rgba(250, 24, 61, 0.35),
        0 12px 24px rgba(0, 0, 0, 0.4);
}

/* Active press */
.play-btn:active {
    transform: translate(-50%, -50%) scale(0.98);
    filter: brightness(0.98);
}

/* ================================
   EFFECT 1 — PULSE (soft breathe)
   Usage: <button class="play-btn play--pulse">
   ================================ */
.play--pulse {
    animation: btn-breathe 2.4s ease-in-out infinite;
}
.play--pulse::after {
    animation: play-ring-strong 1.6s ease-out infinite;
}
@keyframes btn-breathe {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 10px 28px -6px var(--glow),
            0 2px 0 rgba(0, 0, 0, 0.25) inset,
            0 12px 24px rgba(0, 0, 0, 0.35);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.04);
        box-shadow:
            0 18px 40px -6px var(--glow),
            0 2px 0 rgba(0, 0, 0, 0.25) inset,
            0 18px 34px rgba(0, 0, 0, 0.45);
    }
}
@keyframes play-ring-strong {
    0% {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0.95;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* ==========================================
   EFFECT 2 — RIPPLE (rotating dashed halo)
   Usage: <button class="play-btn play--ripple">
   ========================================== */
.play--ripple::after {
    width: calc(var(--size) + 14px);
    height: calc(var(--size) + 14px);
    box-shadow: none;
    opacity: 1;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(
        from 0deg,
        var(--ring) 0 8deg,
        transparent 8deg 20deg
    );
    border-radius: 50%;
    -webkit-mask: radial-gradient(
        circle,
        transparent 60%,
        #000 62%,
        #000 70%,
        transparent 72%
    );
    mask: radial-gradient(
        circle,
        transparent 60%,
        #000 62%,
        #000 70%,
        transparent 72%
    );
    animation: ripple-rotate 2.8s linear infinite;
}
@keyframes ripple-rotate {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ==============================================
   EFFECT 3 — SHINE (diagonal light sweep)
   Usage: <button class="play-btn play--shine">
   ============================================== */
.play--shine::before {
    background:
        radial-gradient(
            100% 100% at 50% 0%,
            rgba(255, 255, 255, 0.22),
            transparent 60%
        ),
        linear-gradient(
            115deg,
            transparent 35%,
            rgba(255, 255, 255, 0.55) 50%,
            transparent 65%
        );
    background-repeat: no-repeat;
    background-size:
        100% 100%,
        40% 140%;
    background-position:
        center,
        -150% 50%;
    animation: shine-sweep 2.2s ease-in-out infinite;
}
@keyframes shine-sweep {
    0%,
    25% {
        background-position:
            center,
            -150% 50%;
    }
    75%,
    100% {
        background-position:
            center,
            160% 50%;
    }
}

/* ====================================
   EFFECT 4 — BOB (gentle float)
   Usage: <button class="play-btn play--bob">
   ==================================== */
.play--bob {
    animation: bob-y 2.8s ease-in-out infinite;
}
@keyframes bob-y {
    0%,
    100% {
        transform: translate(-50%, -50%) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-16px);
    }
}

/* ==================================================
   EFFECT 5 — GHOST (transparent; solid on hover)
   Usage: <button class="play-btn play--ghost">
   ================================================== */
.play--ghost {
    background: transparent;
    box-shadow: none;
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: -2px;
}
.play--ghost::before {
    background: none;
}
.play--ghost::after {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
    opacity: 0.9;
}
.play--ghost .play-icon {
    fill: rgba(255, 255, 255, 0.85);
}
.play--ghost:hover {
    background: linear-gradient(
        180deg,
        rgba(250, 24, 61, 0.92),
        rgba(176, 20, 40, 0.92)
    );
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    outline-color: transparent;
}

/* ===========================================
   EFFECT 6 — GLASS (frosted; gains solidity)
   Usage: <button class="play-btn play--glass">
   =========================================== */
.play--glass {
    background:
        radial-gradient(
            60% 60% at 30% 30%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.06)
        );
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    box-shadow:
        0 10px 28px -6px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
.play--glass::before {
    background: radial-gradient(
        100% 100% at 50% 0%,
        rgba(255, 255, 255, 0.35),
        transparent 60%
    );
}
.play--glass::after {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
    opacity: 0.8;
}
.play--glass:hover {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.22),
        rgba(255, 255, 255, 0.1)
    );
    box-shadow:
        0 16px 36px -6px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

/* ==============================================
   EFFECT 7 — NEON (electric glow + flicker)
   Usage: <button class="play-btn play--neon">
   ============================================== */
.play--neon {
    --bg-1: #7a00ff;
    --bg-2: #3a00a1;
    --bg-hover-1: #ff00e6;
    --bg-hover-2: #9900ff;
    box-shadow:
        0 0 18px rgba(198, 0, 255, 0.45),
        0 0 42px rgba(120, 0, 255, 0.35),
        0 2px 0 rgba(0, 0, 0, 0.25) inset;
    animation: neon-flicker 4s ease-in-out infinite;
}
.play--neon::after {
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.45),
        0 0 26px rgba(200, 0, 255, 0.55);
    opacity: 0.9;
    animation: neon-ring 1.8s ease-out infinite;
}
@keyframes neon-flicker {
    0%,
    9%,
    11%,
    100% {
        filter: none;
    }
    10%,
    60% {
        filter: brightness(1.08) saturate(1.1);
    }
}
@keyframes neon-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0.95;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.55);
        opacity: 0;
    }
}

/* ==========================================
   EFFECT 8 — FLARE (rotating sun flare)
   Usage: <button class="play-btn play--flare">
   ========================================== */
.play--flare::before {
    background:
        conic-gradient(
            from 0deg,
            rgba(255, 255, 255, 0) 0 20%,
            rgba(255, 255, 255, 0.35) 25%,
            rgba(255, 255, 255, 0) 35%,
            rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
            100% 100% at 50% 0%,
            rgba(255, 255, 255, 0.25),
            transparent 60%
        );
    animation: flare-spin 2.6s linear infinite;
}
@keyframes flare-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================================
   EFFECT 9 — STRIPE (seamless diagonal scrolling stripes)
   Usage: <button class="play-btn play--stripe">
   ======================================================== */
.play--stripe {
    overflow: hidden;
    position: relative;
}
.play--stripe::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.12) 0 12px,
            rgba(255, 255, 255, 0.02) 12px 24px
        ),
        radial-gradient(
            100% 100% at 50% 0%,
            rgba(255, 255, 255, 0.25),
            transparent 60%
        );
    background-size:
        200% 200%,
        100% 100%;
    background-position:
        0 0,
        center;
    animation: stripe-scroll 6s linear infinite;
    z-index: 0;
}
@keyframes stripe-scroll {
    from {
        background-position:
            0 0,
            center;
    }
    to {
        background-position:
            200% 200%,
            center;
    }
}

/* ============================================
   EFFECT 10 — RAINBOW (flowing spectrum sweep)
   Usage: <button class="play-btn play--rainbow">
   ============================================ */
.play--rainbow {
    background:
        radial-gradient(
            60% 60% at 30% 30%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 100%
        ),
        linear-gradient(
            90deg,
            #ff0040,
            #ff7a00,
            #ffd400,
            #16c172,
            #1e88e5,
            #8e24aa,
            #ff0040
        );
    background-size: 300% 100%;
    animation: rainbow-flow 6s linear infinite;
}
.play--rainbow:hover {
    background-size: 400% 100%;
}
@keyframes rainbow-flow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 300% 50%;
    }
}

/* ====================================================
   EFFECT 11 — QUAKE (hover shock + burst wave)
   Usage: <button class="play-btn play--quake">
   ==================================================== */
.play--quake:hover {
    animation: quake-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1;
}
.play--quake::after {
    animation: none;
}
.play--quake:hover::after {
    content: "";
    width: calc(var(--size) + 16px);
    height: calc(var(--size) + 16px);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.85),
        0 0 36px rgba(255, 80, 120, 0.55);
    animation: quake-burst 0.6s ease-out 1;
}
@keyframes quake-shake {
    10%,
    90% {
        transform: translate(-50%, -50%) translateX(-1px);
    }
    20%,
    80% {
        transform: translate(-50%, -50%) translateX(2px);
    }
    30%,
    50%,
    70% {
        transform: translate(-50%, -50%) translateX(-4px);
    }
    40%,
    60% {
        transform: translate(-50%, -50%) translateX(4px);
    }
}
@keyframes quake-burst {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.95;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }
}

/* ======================================================
   EFFECT 12 — TURBINE (segmented dual counter-rotation)
   Usage: <button class="play-btn play--turbine">
   ====================================================== */
.play--turbine {
    position: relative;
    overflow: visible;
}
.play--turbine::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0.35) 0 10deg,
        transparent 10deg 20deg
    );
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
    mask: radial-gradient(circle, transparent 60%, #000 61%);
    animation: turbine-spin 5s linear infinite;
}
.play--turbine::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from 10deg,
        rgba(255, 255, 255, 0.22) 0 12deg,
        transparent 12deg 24deg
    );
    -webkit-mask: radial-gradient(circle, transparent 75%, #000 76%);
    mask: radial-gradient(circle, transparent 75%, #000 76%);
    animation: turbine-spin-rev 6s linear infinite;
}
@keyframes turbine-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes turbine-spin-rev {
    to {
        transform: rotate(-360deg);
    }
}

/* ==========================================================
   EFFECT 13 — ECLIPSE (translucent ring, fills on hover)
   Usage: <button class="play-btn play--eclipse">
   ========================================================== */
.play--eclipse {
    background: transparent;
    box-shadow: none;
    outline: 2px solid rgba(255, 255, 255, 0.35);
    outline-offset: -2px;
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    position: relative;
    overflow: visible;
}
.play--eclipse::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #ffd166 0 6%,
        transparent 6% 12%,
        #73c0ff 12% 18%,
        transparent 18% 24%,
        #c792ea 24% 30%,
        transparent 30% 36%,
        #ffd166 36% 42%,
        transparent 42% 48%,
        #73c0ff 48% 54%,
        transparent 54% 60%,
        #c792ea 60% 66%,
        transparent 66% 72%,
        #ffd166 72% 78%,
        transparent 78% 84%,
        #73c0ff 84% 90%,
        transparent 90% 96%,
        #c792ea 96% 100%
    );
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
    mask: radial-gradient(circle, transparent 60%, #000 61%);
    animation: eclipse-spin 7s linear infinite;
    opacity: 0.9;
}
@keyframes eclipse-spin {
    to {
        transform: rotate(360deg);
    }
}
.play--eclipse:hover {
    background:
        radial-gradient(
            60% 60% at 30% 30%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 100%
        ),
        linear-gradient(180deg, #222, #111);
    outline-color: transparent;
    box-shadow: 0 18px 40px -6px rgba(0, 0, 0, 0.4);
}

/* ==========================================================
   EFFECT 14 — VECTOR (minimal rotating outline)
   Usage: <button class="play-btn play--vector">
   ========================================================== */
.play--vector {
    position: relative;
}
.play--vector::before {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    animation: vector-rotate 6s linear infinite;
}
@keyframes vector-rotate {
    0% {
        transform: rotate(0deg);
        border-color: rgba(255, 255, 255, 0.25);
    }
    50% {
        transform: rotate(180deg);
        border-color: rgba(0, 255, 217, 0.65);
    }
    100% {
        transform: rotate(360deg);
        border-color: rgba(255, 255, 255, 0.25);
    }
}

/* =====================================================
   EFFECT 15 — SPARK (dotted orbit + shimmer pulse)
   Usage: <button class="play-btn play--spark">
   ===================================================== */
.play--spark {
    position: relative;
    overflow: visible;
}
.play--spark::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0.75) 0 6deg,
        rgba(255, 255, 255, 0) 6deg 12deg
    );
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
    mask: radial-gradient(circle, transparent 60%, #000 61%);
    animation: spark-spin 3.5s linear infinite;
}
@keyframes spark-spin {
    to {
        transform: rotate(360deg);
    }
}
.play--spark::after {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
    animation: spark-pulse 1.6s ease-in-out infinite;
}
@keyframes spark-pulse {
    0%,
    100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
    }
}

/* ============== SHARED KEYFRAMES ============== */
@keyframes eclipse-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes eclipse-spin-rev {
    to {
        transform: rotate(-360deg);
    }
}

/* =========================================================
   ECLIPSE — RAINBOW (flowing pride spectrum ring)
   ========================================================= */
.play--eclipse-rainbow {
    background: transparent;
    box-shadow: none;
    outline: 2px solid rgba(255, 255, 255, 0.35);
    outline-offset: -2px;
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    position: relative;
    overflow: visible;
}
.play--eclipse-rainbow::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(
        #ff0040,
        #ff7a00,
        #ffd400,
        #16c172,
        #1e88e5,
        #8e24aa,
        #ff0040
    );
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
    mask: radial-gradient(circle, transparent 60%, #000 61%);
    animation: eclipse-spin 6.5s linear infinite;
    opacity: 0.95;
}
.play--eclipse-rainbow:hover {
    background:
        radial-gradient(
            60% 60% at 30% 30%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 100%
        ),
        linear-gradient(180deg, #222, #111);
    outline-color: transparent;
    box-shadow: 0 18px 40px -6px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   ECLIPSE — DUO (inner + outer counter-rotating rings)
   ========================================================= */
.play--eclipse-duo {
    background: transparent;
    box-shadow: none;
    outline: 2px solid rgba(255, 255, 255, 0.28);
    outline-offset: -2px;
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    position: relative;
    overflow: visible;
}
.play--eclipse-duo::before,
.play--eclipse-duo::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.9;
}
/* Outer segmented ring */
.play--eclipse-duo::before {
    inset: -8px;
    background: conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0.55) 0 6%,
        transparent 6% 12%
    );
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
    mask: radial-gradient(circle, transparent 60%, #000 61%);
    animation: eclipse-spin 7s linear infinite;
}
/* Inner fine ring */
.play--eclipse-duo::after {
    inset: -2px;
    background: conic-gradient(
        from 10deg,
        rgba(255, 255, 255, 0.35) 0 8%,
        transparent 8% 16%
    );
    -webkit-mask: radial-gradient(circle, transparent 74%, #000 75%);
    mask: radial-gradient(circle, transparent 74%, #000 75%);
    animation: eclipse-spin-rev 6s linear infinite;
}
.play--eclipse-duo:hover {
    background:
        radial-gradient(
            60% 60% at 30% 30%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 100%
        ),
        linear-gradient(180deg, #222, #111);
    outline-color: transparent;
    box-shadow: 0 18px 40px -6px rgba(0, 0, 0, 0.4);
}

.play--eclipse-duo:hover .play-icon {
    fill: red;
}

/* =========================================================
   ECLIPSE — DASHED (clean dash marks + subtle glow)
   ========================================================= */
.play--eclipse-dashed {
    background: transparent;
    box-shadow: none;
    outline: 2px solid rgba(255, 255, 255, 0.26);
    outline-offset: -2px;
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    position: relative;
    overflow: visible;
}
.play--eclipse-dashed::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0.7) 0 4deg,
        transparent 4deg 14deg
    );
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
    mask: radial-gradient(circle, transparent 60%, #000 61%);
    animation: eclipse-spin 8s linear infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.25));
}
.play--eclipse-dashed:hover {
    background:
        radial-gradient(
            60% 60% at 30% 30%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 100%
        ),
        linear-gradient(180deg, #222, #111);
    outline-color: transparent;
    box-shadow: 0 18px 40px -6px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   ECLIPSE — GOLD (warm metallic ring + slower spin)
   ========================================================= */
.play--eclipse-gold {
    background: transparent;
    box-shadow: none;
    outline: 2px solid rgba(255, 221, 120, 0.28);
    outline-offset: -2px;
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    position: relative;
    overflow: visible;
}
.play--eclipse-gold::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #ffefba 0 10%,
        #ffd166 10% 20%,
        #f6c453 20% 30%,
        #b88a3e 30% 40%,
        #ffefba 40% 50%,
        #ffd166 50% 60%,
        #f6c453 60% 70%,
        #b88a3e 70% 80%,
        #ffefba 80% 90%,
        #ffd166 90% 100%
    );
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
    mask: radial-gradient(circle, transparent 60%, #000 61%);
    animation: eclipse-spin 9s linear infinite;
    filter: drop-shadow(0 2px 10px rgba(255, 220, 120, 0.25));
}
.play--eclipse-gold:hover {
    background:
        radial-gradient(
            60% 60% at 30% 30%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 100%
        ),
        linear-gradient(180deg, #24211b, #0f0e0b);
    outline-color: transparent;
    box-shadow: 0 18px 40px -6px rgba(0, 0, 0, 0.45);
}

/* HALO GEAR SPINNING — frosted body + rotating dashed halo (always spins) */
.play--gear-spinning {
    background:
        radial-gradient(
            60% 60% at 30% 30%,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.06)
        );
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    box-shadow:
        0 10px 28px -6px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    position: relative;
    overflow: visible;
}
.play--gear-spinning::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        100% 100% at 50% 0%,
        rgba(255, 255, 255, 0.35),
        transparent 60%
    );
    pointer-events: none;
}
.play--gear-spinning::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size) + 14px);
    height: calc(var(--size) + 14px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        var(--ring) 0 8deg,
        transparent 8deg 20deg
    );
    -webkit-mask: radial-gradient(
        circle,
        transparent 60%,
        #000 62%,
        #000 70%,
        transparent 72%
    );
    mask: radial-gradient(
        circle,
        transparent 60%,
        #000 62%,
        #000 70%,
        transparent 72%
    );
    animation: halo-gear-rotate 2.8s linear infinite;
    pointer-events: none;
}
.play--gear-spinning .play-icon {
    transition:
        fill 0.35s ease,
        filter 0.35s ease;
}
.play--gear-spinning:hover .play-icon {
    fill: red !important;
    filter: drop-shadow(0 0 6px rgba(255, 80, 80, 0.5));
}

/* SPECTRUM RING — rainbow sweep border (animates on hover) */
.play--spectrum {
    --bg-1: #1b1b1b;
    --bg-2: #101010;
    background:
        radial-gradient(
            60% 60% at 30% 30%,
            rgba(255, 255, 255, 0.06),
            transparent 100%
        ),
        linear-gradient(180deg, var(--bg-1), var(--bg-2));
}
.play--spectrum::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size) + 12px);
    height: calc(var(--size) + 12px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(from 0deg, #6fd3ff, #ffd166, #d06bff, #6fd3ff);
    -webkit-mask: radial-gradient(circle, transparent 63%, #000 65%);
    mask: radial-gradient(circle, transparent 63%, #000 65%);
    pointer-events: none;
    animation: none;
    opacity: 0.95;
}
.play--spectrum .play-icon {
    transition:
        fill 0.25s ease,
        filter 0.25s ease;
}
.play--spectrum:hover .play-icon {
    fill: #73c9ea;
    filter: drop-shadow(0 0 8px rgba(152, 184, 197, 0.6));
}

/* ZEBRA DASH — dashed dual-color orbit (animates on hover) */
.play--zebra {
    --bg-1: #13202a;
    --bg-2: #0e151b;
    background:
        radial-gradient(
            70% 70% at 28% 24%,
            rgba(255, 255, 255, 0.05),
            transparent 70%
        ),
        linear-gradient(180deg, var(--bg-1), var(--bg-2));
    position: relative;
}
.play--zebra::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size) + 14px);
    height: calc(var(--size) + 14px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background:
        repeating-conic-gradient(#7fffd4 0 10deg, transparent 10deg 20deg),
        repeating-conic-gradient(
            from 10deg,
            #ff71ce 0 10deg,
            transparent 10deg 20deg
        );
    mix-blend-mode: screen;
    -webkit-mask: radial-gradient(
        circle,
        transparent 60%,
        #000 62%,
        #000 70%,
        transparent 72%
    );
    mask: radial-gradient(
        circle,
        transparent 60%,
        #000 62%,
        #000 70%,
        transparent 72%
    );
    animation: none;
}
.play--zebra .play-icon {
    transition: fill 0.25s ease;
}
.play--zebra:hover .play-icon {
    fill: #7fffd4;
}
.play--zebra:hover::after {
    animation: zebra-spin 3.2s linear infinite;
}

/* METEOR TRACE — segmented arc + warm core (animates on hover) */
.play--meteor {
    --bg-1: #24111a;
    --bg-2: #160b10;
    background:
        radial-gradient(
            60% 60% at 30% 30%,
            rgba(255, 255, 255, 0.07),
            transparent 100%
        ),
        linear-gradient(180deg, var(--bg-1), var(--bg-2));
    position: relative;
}
.play--meteor::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size) + 10px);
    height: calc(var(--size) + 10px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0 40%,
        #ff9966 40% 48%,
        transparent 48% 68%,
        #ffd166 68% 76%,
        transparent 76% 100%
    );
    -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
    mask: radial-gradient(circle, transparent 62%, #000 64%);
    animation: none;
}
.play--meteor .play-icon {
    transition: fill 0.25s ease;
}
.play--meteor:hover .play-icon {
    fill: #ff9966;
}
.play--meteor:hover::after {
    animation: meteor-spin 2.6s linear infinite;
}

/* === Keyframes used by above variants === */
@keyframes halo-gear-rotate {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes ring-sweep {
    to {
        transform: rotate(360deg);
    }
}
@keyframes zebra-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes meteor-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* =========================================
   Reduced Motion — disable animations
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .play-btn,
    .play-btn::after,
    .play--pulse,
    .play--pulse::after,
    .play--ripple::after,
    .play--shine::before,
    .play--bob,
    .play--glass,
    .play--neon,
    .play--neon::after,
    .play--flare::before,
    .play--stripe::before,
    .play--rainbow,
    .play--quake:hover,
    .play--quake:hover::after,
    .play--turbine::before,
    .play--turbine::after,
    .play--eclipse::before,
    .play--vector::before,
    .play--spark::before,
    .play--spark::after {
        animation: none !important;
        transition: none !important;
    }

    .play--eclipse-rainbow::before,
    .play--eclipse-duo::before,
    .play--eclipse-duo::after,
    .play--eclipse-dashed::before,
    .play--eclipse-gold::before {
        animation: none !important;
    }
}