/**
 * Syntribate cooldown clock — analog dial + digital mm:ss readout.
 * Reusable for email resend, SMS/email OTP, and any timed wait.
 *
 * Markup (ids optional — pass elements to SynCooldownClock.create):
 *   <div class="syn-cooldown-clock is-idle" id="…">
 *     <div class="syn-clock-dial" aria-hidden="true">
 *       <div class="syn-clock-ticks"></div>
 *       <div class="syn-clock-hand syn-clock-hand--sec"></div>
 *       <div class="syn-clock-hub"></div>
 *     </div>
 *     <div class="syn-clock-readout">
 *       <span class="syn-clock-label">Ready</span>
 *       <span class="syn-clock-digits">1:00</span>
 *     </div>
 *   </div>
 *
 * States: .is-idle (grey) · .is-active (pink glow, hand sweeps)
 * Legacy aliases: .gate-resend-clock, .gate-clock-* still work.
 */

/* Cluster: action button + clock side by side */
.syn-cooldown-cluster,
.gate-resend-cluster {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 0.85rem;
}

.syn-cooldown-clock,
.gate-resend-clock {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0.65rem 0.28rem 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(140, 130, 138, 0.28);
  background:
    linear-gradient(165deg, rgba(40, 36, 40, 0.95) 0%, rgba(22, 20, 22, 0.98) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 4px 12px rgba(0, 0, 0, 0.3);
  transition: border-color 0.25s, box-shadow 0.25s, filter 0.25s, opacity 0.25s;
  opacity: 0.72;
  filter: grayscale(0.55) brightness(0.88);
}

/* Active countdown — pink glow “lights up” */
.syn-cooldown-clock.is-active,
.gate-resend-clock.is-active {
  opacity: 1;
  filter: none;
  border-color: rgba(255, 180, 220, 0.4);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 4px 14px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(255, 80, 180, 0.28);
}

.syn-cooldown-clock.is-idle,
.gate-resend-clock.is-idle {
  opacity: 0.72;
  filter: grayscale(0.55) brightness(0.88);
}

.syn-clock-dial,
.gate-clock-dial {
  position: relative;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #2e2a2e 0%, #181618 55%, #0e0c0e 100%);
  border: 2px solid rgba(160, 150, 158, 0.4);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.syn-cooldown-clock.is-active .syn-clock-dial,
.syn-cooldown-clock.is-active .gate-clock-dial,
.gate-resend-clock.is-active .syn-clock-dial,
.gate-resend-clock.is-active .gate-clock-dial {
  background:
    radial-gradient(circle at 35% 30%, #3a2a34 0%, #1a1418 55%, #0e0b0e 100%);
  border-color: rgba(255, 190, 230, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5) inset,
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 0 12px rgba(255, 100, 180, 0.35);
}

/* 12 tick marks via repeating conic */
.syn-clock-ticks,
.gate-clock-ticks {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -1.5deg,
    rgba(160, 150, 158, 0.4) 0deg 2deg,
    transparent 2deg 30deg
  );
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  opacity: 0.7;
}

.syn-cooldown-clock.is-active .syn-clock-ticks,
.syn-cooldown-clock.is-active .gate-clock-ticks,
.gate-resend-clock.is-active .syn-clock-ticks,
.gate-resend-clock.is-active .gate-clock-ticks {
  background: repeating-conic-gradient(
    from -1.5deg,
    rgba(255, 180, 220, 0.55) 0deg 2deg,
    transparent 2deg 30deg
  );
  opacity: 0.9;
}

.syn-clock-hand,
.gate-clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  height: 38%;
  margin-left: -1px;
  transform-origin: 50% 100%;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #8a848a 0%, #5a545a 100%);
  box-shadow: none;
  transition: transform 0.2s linear, background 0.25s, box-shadow 0.25s;
}

.syn-clock-hand--sec,
.gate-clock-hand--sec {
  height: 42%;
  width: 1.5px;
  margin-left: -0.75px;
}

.syn-cooldown-clock.is-active .syn-clock-hand--sec,
.syn-cooldown-clock.is-active .gate-clock-hand--sec,
.gate-resend-clock.is-active .syn-clock-hand--sec,
.gate-resend-clock.is-active .gate-clock-hand--sec {
  background: linear-gradient(180deg, #ffd0f0 0%, #ff4db8 70%, #c00868 100%);
  box-shadow: 0 0 6px rgba(255, 80, 180, 0.65);
}

.syn-clock-hub,
.gate-clock-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #6a646a;
  box-shadow: none;
  transition: background 0.25s, box-shadow 0.25s;
}

.syn-cooldown-clock.is-active .syn-clock-hub,
.syn-cooldown-clock.is-active .gate-clock-hub,
.gate-resend-clock.is-active .syn-clock-hub,
.gate-resend-clock.is-active .gate-clock-hub {
  background: #ffb8f0;
  box-shadow: 0 0 6px rgba(255, 120, 200, 0.8);
}

.syn-clock-readout,
.gate-clock-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  min-width: 3.4rem;
}

.syn-clock-label,
.gate-clock-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a646a;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: color 0.25s;
}

.syn-cooldown-clock.is-active .syn-clock-label,
.syn-cooldown-clock.is-active .gate-clock-label,
.gate-resend-clock.is-active .syn-clock-label,
.gate-resend-clock.is-active .gate-clock-label {
  color: #ff9ad8;
}

.syn-clock-digits,
.gate-clock-digits {
  font-family: "SF Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #6a646a;
  text-shadow: none;
  transition: color 0.25s, text-shadow 0.25s;
}

.syn-cooldown-clock.is-active .syn-clock-digits,
.syn-cooldown-clock.is-active .gate-clock-digits,
.gate-resend-clock.is-active .syn-clock-digits,
.gate-resend-clock.is-active .gate-clock-digits {
  color: #ffb8f8;
  text-shadow: 0 0 10px rgba(255, 100, 190, 0.45);
}

/* Compact size for tight OTP rows */
.syn-cooldown-clock.is-compact .syn-clock-dial,
.syn-cooldown-clock.is-compact .gate-clock-dial {
  width: 2.2rem;
  height: 2.2rem;
}
.syn-cooldown-clock.is-compact .syn-clock-digits,
.syn-cooldown-clock.is-compact .gate-clock-digits {
  font-size: 0.92rem;
}