/* ==========================================================================
   15 countdown widget skins. Structure/sizing lives in countdown-base.css;
   this file is purely visual — colors/shapes/effects, all via tokens from
   variables.css so every skin still works across all 6 color schemes. Each
   skin also carries one small animated/interactive signature so the widget
   itself, not just the surrounding page, feels alive.
   ========================================================================== */

/* 1. Boxes — bordered card grid, with a light sweep across the top edge
   (templates/minimal) */
.cw--boxes .cw-unit {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-1);
  overflow: hidden;
}

.cw--boxes .cw-unit::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-accent-soft), transparent);
  animation: cw-boxes-sweep 4.5s ease-in-out infinite;
}

.cw--boxes .cw-unit:nth-child(2)::after { animation-delay: 0.4s; }
.cw--boxes .cw-unit:nth-child(3)::after { animation-delay: 0.8s; }
.cw--boxes .cw-unit:nth-child(4)::after { animation-delay: 1.2s; }

@keyframes cw-boxes-sweep {
  0%, 15% { left: -60%; }
  50%, 100% { left: 120%; }
}

/* 2. Ring — SVG progress ring, with a soft breathing glow (templates/bold) */
.cw--ring .cw-num {
  text-shadow: 0 0 24px var(--color-accent-soft);
  animation: cw-ring-breathe 3.4s ease-in-out infinite;
}

@keyframes cw-ring-breathe {
  0%, 100% { text-shadow: 0 0 14px var(--color-accent-soft); }
  50% { text-shadow: 0 0 28px var(--color-accent-soft), 0 0 8px var(--color-accent); }
}

/* 3. Flip — pulsing plain digits, with a mechanical flip-perspective tick
   (templates/split) */
.cw--flip .cw-num {
  font-size: calc(var(--fs-countdown-num) * 1.15);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-1);
  display: inline-block;
}

.cw--flip .unit-changed {
  animation: cw-flip-pulse 400ms ease-out;
}

@keyframes cw-flip-pulse {
  0% { background: var(--color-accent-soft); transform: perspective(200px) rotateX(50deg); }
  100% { background: transparent; transform: perspective(200px) rotateX(0deg); }
}

/* 4. Neon — dark card with a glowing accent tube that gently flickers */
.cw--neon .cw-unit {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-1);
  box-shadow: 0 0 16px var(--color-accent-soft), inset 0 0 8px var(--color-accent-soft);
  animation: cw-neon-flicker 5s linear infinite;
}

.cw--neon .cw-num {
  color: var(--color-accent);
  text-shadow: 0 0 8px var(--color-accent), 0 0 18px var(--color-accent-soft);
}

@keyframes cw-neon-flicker {
  0%, 3%, 6%, 100% { opacity: 1; }
  4% { opacity: 0.55; }
  5% { opacity: 1; }
  7% { opacity: 0.8; }
}

.cw--neon .cw-unit:nth-child(2) { animation-delay: 1.1s; }
.cw--neon .cw-unit:nth-child(3) { animation-delay: 2.3s; }
.cw--neon .cw-unit:nth-child(4) { animation-delay: 3.6s; }

/* 5. LED — 7-segment-style digits behind a scanning highlight sweep */
.cw--led .cw-unit {
  background: #0a0a0a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-1);
  overflow: hidden;
}

.cw--led .cw-unit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--color-accent-soft) 50%, transparent 100%);
  opacity: 0.3;
  transform: translateY(-100%);
  animation: cw-led-scan 3s linear infinite;
}

@keyframes cw-led-scan {
  to { transform: translateY(100%); }
}

.cw--led .cw-num {
  position: relative;
  font-family: "Courier New", ui-monospace, monospace;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  text-shadow: 0 0 6px var(--color-accent), 0 0 2px var(--color-accent);
}

/* 6. Digital — LCD panel with colon separators and a subtle CRT flicker */
.cw--digital {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  display: flex;
  align-items: baseline;
  justify-content: center;
  max-width: 420px;
  position: relative;
  animation: cw-digital-flicker 6s ease-in-out infinite;
}

@keyframes cw-digital-flicker {
  0%, 96%, 100% { filter: brightness(1); }
  97% { filter: brightness(1.15); }
  98% { filter: brightness(0.92); }
}

.cw--digital .cw-unit {
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
}

.cw--digital .cw-num {
  font-family: ui-monospace, "Courier New", monospace;
}

.cw--digital .cw-label {
  font-size: 10px;
}

.cw--digital .cw-unit:not(:last-child)::after {
  content: ":";
  font-size: var(--fs-countdown-num);
  font-weight: 800;
  color: var(--color-text-muted);
  margin-inline: 2px;
  animation: cw-digital-blink 1s steps(1) infinite;
}

@keyframes cw-digital-blink {
  50% { opacity: 0.25; }
}

/* 7. Pill — rounded pill badges that gently squash on each tick */
.cw--pill .cw-unit {
  background: var(--color-accent);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-1);
  transition: border-radius 0.3s ease;
}

.cw--pill .cw-num {
  color: var(--color-on-accent);
}

.cw--pill .cw-label {
  color: var(--color-on-accent);
  opacity: 0.8;
}

.cw--pill .unit-changed {
  animation: cw-pill-squash 350ms ease-out;
}

@keyframes cw-pill-squash {
  0% { transform: scaleX(1.12) scaleY(0.9); }
  100% { transform: scaleX(1) scaleY(1); }
}

/* 8. Hex — hexagon-clipped tiles that tilt gently toward the cursor */
.cw--hex .cw-unit {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  padding: var(--space-3) var(--space-2);
  aspect-ratio: 1 / 1;
  transition: transform 0.2s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .cw--hex .cw-unit:hover {
    transform: scale(1.06) rotate(-2deg);
  }
}

/* 9. Gradient — gradient-filled cards with a slow animated sheen */
.cw--gradient .cw-unit {
  background: linear-gradient(160deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  background-size: 200% 200%;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-1);
  box-shadow: var(--shadow-md);
  animation: cw-gradient-shift 6s ease-in-out infinite;
}

@keyframes cw-gradient-shift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

.cw--gradient .cw-num,
.cw--gradient .cw-label {
  color: var(--color-on-accent);
}

.cw--gradient .cw-label {
  opacity: 0.85;
}

/* 10. Outline — transparent ghost numbers with a stroke that draws in
   once on load */
.cw--outline .cw-unit {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-1);
  animation: cw-outline-draw 0.6s ease-out backwards;
}

.cw--outline .cw-unit:nth-child(2) { animation-delay: 0.1s; }
.cw--outline .cw-unit:nth-child(3) { animation-delay: 0.2s; }
.cw--outline .cw-unit:nth-child(4) { animation-delay: 0.3s; }

@keyframes cw-outline-draw {
  from { border-color: transparent; opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.cw--outline .cw-num {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-text);
}

/* 11. Bar — number with a thin progress bar underneath, shimmering */
.cw--bar .cw-unit {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-2) var(--space-3);
}

.cw-bar-fill {
  position: relative;
  overflow: hidden;
}

.cw-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: cw-bar-shimmer 2s linear infinite;
}

@keyframes cw-bar-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* 12. Stacked — label-left / number-right rows, with an accent bar that
   glows in on load */
.cw--stacked .cw-unit {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  animation: cw-stacked-glow 3.6s ease-in-out infinite;
}

@keyframes cw-stacked-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  50% { box-shadow: -4px 0 14px -6px var(--color-accent-soft); }
}

.cw--stacked .cw-num {
  font-size: calc(var(--fs-countdown-num) * 0.6);
}

/* 13. Inline — compact single-line reading, with an animated underline
   sweeping beneath the whole row */
.cw--inline {
  position: relative;
  padding-bottom: var(--space-2);
}

.cw--inline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40%;
  height: 2px;
  background: var(--color-accent);
  transform: translateX(-50%);
  animation: cw-inline-underline 3s ease-in-out infinite;
}

@keyframes cw-inline-underline {
  0%, 100% { width: 20%; opacity: 0.5; }
  50% { width: 70%; opacity: 1; }
}

.cw--inline .cw-num {
  font-size: calc(var(--fs-countdown-num) * 0.7);
}

.cw--inline .cw-label {
  font-size: 11px;
}

.cw--inline .cw-unit:not(:last-child)::after {
  content: "";
}

/* 14. Card-icon — card with a small decorative marker that pulses, tilts
   gently on hover */
.cw--card-icon .cw-unit {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-1) var(--space-2);
  transition: transform 0.2s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .cw--card-icon .cw-unit:hover {
    transform: perspective(400px) rotateX(6deg) translateY(-3px);
  }
}

.cw--card-icon .cw-unit::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-bottom: var(--space-1);
  box-shadow: 0 0 0 0 var(--color-accent-soft);
  animation: cw-card-pulse 2.2s ease-out infinite;
}

@keyframes cw-card-pulse {
  0% { box-shadow: 0 0 0 0 var(--color-accent-soft); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* 15. Circle-badge — solid filled circle with a holographic sweep and a
   slow orbiting highlight ring */
.cw--circle-badge {
  margin-bottom: var(--space-4); /* room for the label, positioned absolute below each circle */
}

.cw--circle-badge .cw-unit {
  background: var(--color-accent);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.cw--circle-badge .cw-unit::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255, 255, 255, 0.35) 8%, transparent 20%);
  animation: cw-badge-orbit 3.2s linear infinite;
}

@keyframes cw-badge-orbit {
  to { transform: rotate(360deg); }
}

.cw--circle-badge .cw-num {
  position: relative;
  color: var(--color-on-accent);
}

.cw--circle-badge .cw-label {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .cw--boxes .cw-unit::after,
  .cw--ring .cw-num,
  .cw--flip .unit-changed,
  .cw--neon .cw-unit,
  .cw--led .cw-unit::before,
  .cw--digital,
  .cw--digital .cw-unit:not(:last-child)::after,
  .cw--pill .unit-changed,
  .cw--hex .cw-unit,
  .cw--gradient .cw-unit,
  .cw--outline .cw-unit,
  .cw-bar-fill::after,
  .cw--stacked .cw-unit,
  .cw--inline::after,
  .cw--card-icon .cw-unit::before,
  .cw--circle-badge .cw-unit::before {
    animation: none !important;
    transition: none !important;
  }

  .cw--outline .cw-unit {
    opacity: 1;
    transform: none;
  }
}