/* =========================================
   Stylish Play Button (drop-in) — BASE
   ========================================= */
.play-btn {
  --size: clamp(64px, 12vw, 112px);
  --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);

  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,.05) 0%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 10px 28px -6px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.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,.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 .35s ease, filter .35s ease;
}
.play--gear-spinning:hover .play-icon {
  fill: red !important;
  filter: drop-shadow(0 0 6px rgba(255,80,80,.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,.06), transparent 100%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  position: relative;
}
.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: .95;
}
.play--spectrum .play-icon { transition: fill .25s ease, filter .25s ease; }
.play--spectrum:hover .play-icon { fill: #ffd166; filter: drop-shadow(0 0 8px rgba(255,209,102,.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,.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 .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,.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 .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;
  }
}

/* ============================================================
   ===== Demo Page Helpers & Native Audio Player Styles =====

   This section includes CSS used for the *demo page layout* and
   the *native audio player* example. It’s meant to make the demo
   look complete and show potential usage of the custom play
   buttons in a real-world layout.

   🔸 Not required for the play button styling or functionality.
   🔸 Safe to remove or replace with your own site’s layout styles.
   🔸 Included here only to demonstrate spacing, typography, and
     how the custom button can complement a native audio player.

   In short — this section exists purely for presentation and
   to showcase integration with the native audio element.
   ============================================================ */



.play-btn {
  margin: 50px;
}
body {
  background: #292929;
  overflow-x:hidden;
}
.grid {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  padding-bottom: 100px;
  padding-top: 100px;
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.play-header {
  text-align: center;
  width: 100%;
  color: #fff;
  font-family: "Montserrat", Arial, sans-serif;
  background: #111;
  padding: 3rem 1rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.play-header h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3.2rem);
  margin: 0 0 0.3em 0;
  color: hotpink;
  text-transform: uppercase;
  letter-spacing:5px;
}

.play-header p {
  font-size: clamp(1rem, 1.25vw + 0.5rem, 1.3rem);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.8rem 0;
  letter-spacing:1px;
}
#playPauseBtn {
  margin-bottom: -30px;
}
/* Audio player layout */
.custom-audio-player {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 25px;
}
/* Controls row: 2 cols (button | everything else) */
.controls {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-items: center; /* center content in each column */
  gap: 16px;
  text-align: center;
}



/* Right-side group stacks seek on top of time row */
.ctrl-right {
  width: 100%;
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  gap: 8px;
}

/* Seek bar fills available width nicely */
#seekBar {
  width: 100%;
}

/* Time row: inline and centered */
.time-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

/* Small screens controls */
@media (max-width: 980px) {
  .controls {
    gap: 12px;
    width:80%;
    margin:0 auto;
 
  }
  .time-row {
    gap: 4px;
  }
  .ctrl-right {
transform: scale(0.60);
}
  

}
/* Player button tweaks for audio player demo  */

.play--eclipse-dashed:hover .play-icon, .paused:hover .play-icon {fill: hotpink !important}
.playing::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);
  }
}
.audio-footer {
  text-align: center;
  width: 100%;
  color: #fff;
  font-family: "Montserrat", Arial, sans-serif;
  background: #111;
  padding: 3rem 1rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.audio-footer  h2 {
  font-size: clamp(2rem, 3vw + 1rem, 3.2rem);
  margin: 0 0 0.3em 0;
  color: hotpink;
  text-transform: uppercase;
  letter-spacing:5px;
}

/* ===== Pulsing Heart Animation ===== */
.heart {
  display: inline-block;
  font-size: 1.4em; /* adjust size as needed */
  transform-origin: center;
  animation: heartPulse 1.25s ease-in-out infinite;
}

/* keyframes for soft heartbeat pulse */
@keyframes heartPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(255, 0, 85, 0.25));
  }
  30% {
    transform: scale(1.25);
    filter: drop-shadow(0 0 8px rgba(255, 0, 100, 0.45));
  }
  60% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px rgba(255, 0, 85, 0.35));
  }
}


/* ==== Fun, colorful title animation ==== */
.demo-title {
  --h1-size: clamp(2rem, 4vw + 1rem, 5rem);
  --speed-hue: 14s;        /* overall hue cycle */
  --speed-shine: 2.75s;    /* shimmer sweep */
  --sat: 92%;
  --light: 55%;

  margin: 0;
  font: 800 var(--h1-size)/1.05 "Montserrat", system-ui, Arial, sans-serif;
  letter-spacing: .02em;

  /* Animated rainbow gradient */
  background:
    conic-gradient(
      from 0deg,
      hsl(0   , var(--sat), var(--light)),
      hsl(40  , var(--sat), var(--light)),
      hsl(80  , var(--sat), var(--light)),
      hsl(160 , var(--sat), var(--light)),
      hsl(200 , var(--sat), var(--light)),
      hsl(260 , var(--sat), var(--light)),
      hsl(300 , var(--sat), var(--light)),
      hsl(360 , var(--sat), var(--light))
    ) 50% 50% / 200% 200%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Soft outline for legibility on dark backgrounds */
  -webkit-text-stroke: .75px rgba(0,0,0,.25);

  /* Shimmer mask sweep */
  -webkit-mask:
    linear-gradient(120deg,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,.9) 50%,
      rgba(0,0,0,0) 65%) 0 0/300% 100%;
          mask:
    linear-gradient(120deg,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,.9) 50%,
      rgba(0,0,0,0) 65%) 0 0/300% 100%;

  animation:
    hueShift var(--speed-hue) linear infinite,
    shine    var(--speed-shine) ease-in-out infinite;
}

/* Optional: animated underline that “grows in” on loop */
/* ===== Base animation rules ===== */

/* Pause animations by default */
.demo-title,
.demo-title::after {
  animation-play-state: paused;
}

/* Run animations only while audio is playing */
.demo-title.is-animating,
.demo-title.is-animating::after {
  animation-play-state: running;
}

/* Keyframes */
@keyframes hueShift {
  to { filter: hue-rotate(360deg); }
}
@keyframes shine {
  0%   { -webkit-mask-position:   0% 0; mask-position:   0% 0; }
  100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
@keyframes underlineGrow {
  0%, 100% { transform: scaleX(.1); }
  50%      { transform: scaleX(1); }
}

/* Respect motion prefs */
@media (prefers-reduced-motion: reduce) {
  .demo-title,
  .demo-title::after {
    animation: none;
  }
}

/* ===== Default H1 Style (idle) ===== */
.play-header h1 {
  --h1-size: clamp(1.6rem, 2.5vw + 1rem, 3.5rem);
  --sat: 85%;
  --light: 60%;
  font: 800 var(--h1-size)/1.1 "Montserrat", system-ui, sans-serif;
  letter-spacing: 0.015em;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  letter-spacing:5px;
  background: linear-gradient(
    90deg,
    hsl(0, var(--sat), var(--light)),
    hsl(45, var(--sat), var(--light)),
    hsl(180, var(--sat), var(--light)),
    hsl(300, var(--sat), var(--light))
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.9;
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.15);
  transition: filter 0.4s ease, opacity 0.4s ease;
}

/* ===== Animated Version While Playing ===== */
.play-header h1.demo-title {
  background: conic-gradient(
    from 0deg,
    hsl(0, var(--sat), var(--light)),
    hsl(60, var(--sat), var(--light)),
    hsl(120, var(--sat), var(--light)),
    hsl(180, var(--sat), var(--light)),
    hsl(240, var(--sat), var(--light)),
    hsl(300, var(--sat), var(--light)),
    hsl(360, var(--sat), var(--light))
  ) 50% 50% / 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hueShift 14s linear infinite, shine 3s ease-in-out infinite;
  opacity: 1;
}

/* ===== Thinner Underline Animation ===== */
.play-header h1.demo-title::after {
  content: "";
  display: block;
  height: 0.1em; /* thinner line */
  margin-top: 0.25em;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    hsl(200, var(--sat), 55%),
    hsl(300, var(--sat), 60%),
    hsl(40, var(--sat), 55%)
  );
  animation: underlineGrow 2.75s ease-in-out infinite;
  transform-origin: left center;
  opacity: 0.9;
}

/* ===== Motion Safe ===== */
@media (prefers-reduced-motion: reduce) {
  .play-header h1.demo-title,
  .play-header h1.demo-title::after {
    animation: none;
  }
}
/* ===== Subtitle Styling ===== */
#demo-subtitle {
  --fs-subtitle: clamp(0.95rem, 1vw + 0.75rem, 1.5rem);
  font: 700 var(--fs-subtitle)/1.4 "Montserrat", system-ui, sans-serif;
  text-align: center;
  margin-top: 0.75em;    /* extra space below h1 */
  margin-bottom: 1.5em;  /* comfortable spacing before next section */
  color: #fff;
  opacity: 0.85;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: opacity 0.4s ease;
}

/* Subtitle variant while audio is playing */
.play-header .demo-title.is-animating + #demo-subtitle {
  opacity: 1;
  background: linear-gradient(
    90deg,
    hsl(200, 85%, 65%),
    hsl(320, 85%, 65%),
    hsl(40, 85%, 65%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}