/* Countdown swap: the old date (31.10.) in countdown tiles gets struck through + stamped, then shrinks away
   while the new countdown (14.11.) fades in (assets/js/countdown-swap.js). Without JS / reduced motion: final state. */
.cd-swap__stack { display: grid; justify-items: center; gap: var(--bk-space-3); }

.cd-old { position: relative; transform-origin: 50% 0; transition: transform .7s cubic-bezier(.34, 1.3, .64, 1), opacity .5s, filter .5s; }
.cd-old .bk-cd { justify-content: center; }
.cd-old .bk-cd__unit:last-of-type .bk-cd__num { color: var(--bk-text); }
.cd-old__strike { position: absolute; inset: 10% -4%; width: 108%; height: 80%; overflow: visible; pointer-events: none; }
.cd-old__strike path { fill: none; stroke: var(--bk-accent); stroke-width: 9; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .35)); }
.cd-old__stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-11deg); padding: 6px 18px; border: 4px solid var(--bk-accent);
  border-radius: 12px; background: rgba(43, 38, 35, .88); color: var(--bk-accent); font-family: var(--bk-font-display); font-size: clamp(26px, 4.4vw, 44px);
  line-height: 1; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); }

/* final state: old tiles small + faded above, new date + countdown below */
.cd-old { transform: scale(.62); opacity: .72; filter: saturate(.6); margin-top: 10px; margin-bottom: -28px; }
.cd-new__label { margin: 0; padding: 8px 18px; border-radius: var(--bk-radius-pill); background: var(--bk-green); color: var(--bk-black, #111);
  font-weight: 700; font-size: clamp(14px, 1.6vw, 17px); transform: rotate(-1.5deg); transition: opacity .5s .1s, transform .6s .1s cubic-bezier(.34, 1.56, .64, 1); }
.cd-new__label strong { font-weight: 800; }
.cd-new { transition: opacity .6s .25s, transform .7s .25s cubic-bezier(.34, 1.56, .64, 1); }

/* JS staging: before the section is seen, the old countdown stands big where the new one will appear */
.cd-swap.js-ready:not(.is-played) .cd-old { transform: translateY(var(--drop, 90px)) scale(1); opacity: 1; filter: none; }
.cd-swap.js-ready:not(.is-played) .cd-old__strike path { stroke-dashoffset: 1; }
.cd-swap.js-ready:not(.is-played) .cd-old__stamp { opacity: 0; transform: translate(-50%, -50%) rotate(-11deg) scale(2.2); }
.cd-swap.js-ready:not(.is-played) .cd-new__label,
.cd-swap.js-ready:not(.is-played) .cd-new { opacity: 0; transform: scale(.85); }

/* the sequence once it is played (strike -> stamp -> shrink + new one in) */
.cd-swap.is-played .cd-old__strike path { animation: cd-strike .55s ease-out both; }
.cd-swap.is-played .cd-old__strike path + path { animation-delay: .35s; }
.cd-swap.is-played .cd-old__stamp { animation: cd-stamp .5s cubic-bezier(.34, 1.56, .64, 1) .8s both; }
.cd-swap.is-played .cd-old { transition-delay: 1.7s; }
.cd-swap.is-played .cd-new__label { transition-delay: 2s; }
.cd-swap.is-played .cd-new { transition-delay: 2.2s; }
@keyframes cd-strike { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cd-stamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-11deg) scale(2.2); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(1); } }

@media (max-width: 480px) {
  .cd-old { transform: scale(.7); margin-top: 16px; margin-bottom: -22px; }
  .cd-old__stamp { font-size: 24px; border-width: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-old, .cd-new, .cd-new__label { transition: none !important; }
  .cd-swap.is-played .cd-old__strike path, .cd-swap.is-played .cd-old__stamp { animation: none; }
}