/* ===== Dark Cyber Countdown ===== */
:root {
  --cd-bg: #0b0b0d;
  --cd-ink: #cfeaff;
  --cd-neon: #00e5ff;
  --cd-accent: #8cff2e;
  --cd-mag: #ff2e9e;
  --cd-tile: #0f1113;
  --cd-glow: rgba(0, 229, 255, .22);
}

/* ================== WRAP ================== */
.cd-wrap {
  --gap: 16px;
  --radius: 14px;
  --tile-pad: 16px;
  --label: 11px;
  --val: 36px;

  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: var(--gap);
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #0f1113, #060607);
  box-shadow:
    0 30px 80px rgba(0,0,0,.75),
    0 0 40px rgba(0,229,255,0.05) inset;
  isolation: isolate;
}

/* scanlines & vignette for the whole block */
.cd-wrap::before,
.cd-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 18px;
  mix-blend-mode: multiply;
}

.cd-wrap::before {
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.12) 3px
    );
  opacity: .6;
}

.cd-wrap::after {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
  opacity: .9;
}

/* caret blink on the whole block every second tick */
.cd-wrap.blink .cd-value::after {
  content: "_";
  margin-left: 3px;
  opacity: .85;
  animation: cdBlink 1s steps(1) infinite;
}

@keyframes cdBlink { 50% { opacity: 0; } }

/* ================== TILES ================== */
.cd-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: var(--tile-pad);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(160% 120% at 50% 0%, rgba(0,229,255,0.05), rgba(0,0,0,0.7)),
    var(--cd-tile);
  box-shadow:
    0 0 0 1px rgba(0,229,255,0.06) inset,
    0 0 24px var(--cd-glow) inset;
}

/* subtle per-tile scan drift */
.cd-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.02) 0 2px,
      rgba(255,255,255,0) 2px 4px
    );
  opacity: .25;
  animation: cdDrift .8s steps(2) infinite;
}

@keyframes cdDrift { 50% { transform: translateY(1px); } }

/* glitch shimmer border (base) */
.cd-tile::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.35), transparent);
  opacity: 0;
  filter: blur(4px);
}

/* quick shimmer when .glitch is applied */
.cd-tile.glitch::after {
  opacity: .8;
  animation: cdShimmer 650ms ease-out forwards;
}

/* shimmer keyframes */
@keyframes cdShimmer {
  0%   { transform: translateX(-60%); opacity: 0; }
  40%  { opacity: .8; }
  100% { transform: translateX(60%); opacity: 0; }
}

/* make the shimmer last as long as value jitter (intentional override) */
.cd-tile.glitch::after {
  animation: cdShimmer 760ms ease-out forwards;
}

/* ================== VALUES / LABELS ================== */
.cd-value {
  display: inline-block;              /* so translate/jitter is visible */
  font-family: 'Roboto Mono', monospace;
  font-size: var(--val);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--cd-neon);
  text-shadow:
    0 0 8px rgba(0,229,255,0.25),
    0 0 24px rgba(0,229,255,0.15);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, text-shadow, filter;
}

.cd-label {
  margin-top: 8px;
  font-size: var(--label);
  letter-spacing: .12em;
  color: #95f0ff;
  opacity: .9;
}

/* ================== GLITCH (VALUE + TILE) ================== */
/* stronger digit jitter (scales with font size, GPU path) */
.cd-tile.glitch .cd-value {
  animation: cdValueGlitch 760ms steps(22) both;
  will-change: transform, text-shadow, filter;
}

@keyframes cdValueGlitch {
  0%   { transform: translate3d(0,0,0) skewX(0deg);
         text-shadow: 1px 0 var(--cd-neon), -1px 0 var(--cd-mag);
         filter: saturate(1.05); }
  6%   { transform: translate3d(-0.35em, 0, 0) skewX(-2deg);
         text-shadow: 5px 0 var(--cd-neon),  -5px 0 var(--cd-mag); }
  14%  { transform: translate3d(0.28em, 0, 0)  skewX(1.6deg);
         text-shadow: 4px 0 var(--cd-neon),  -4px 0 var(--cd-mag); }
  28%  { transform: translate3d(-0.24em, 0, 0);
         text-shadow: 4px 0 var(--cd-neon),  -4px 0 var(--cd-mag);
         filter: saturate(1.25); }
  42%  { transform: translate3d(0.20em, 0, 0)  skewX(1deg);
         text-shadow: 3px 0 var(--cd-neon),  -3px 0 var(--cd-mag); }
  60%  { transform: translate3d(-0.16em, 0, 0);
         text-shadow: 2px 0 var(--cd-neon),  -2px 0 var(--cd-mag); }
  80%  { transform: translate3d(0.12em, 0, 0);
         text-shadow: 2px 0 var(--cd-neon),  -2px 0 var(--cd-mag); }
  100% { transform: none;
         text-shadow: 0 0 10px rgba(0,229,255,.32), 0 0 28px rgba(0,229,255,.18);
         filter: none; }
}

/* counter-motion on the tile container, slightly delayed */
.cd-tile.glitch {
  animation: cdTileNudge 760ms steps(16) both;
  animation-delay: 60ms;   /* out-of-phase vs digit jitter */
  will-change: transform;
  contain: layout paint;   /* isolate for clean composites */
}

@keyframes cdTileNudge {
  0%   { transform: translate3d(0,0,0); }
  18%  { transform: translate3d(0.12em, 0, 0); }
  38%  { transform: translate3d(-0.10em, 0, 0); }
  58%  { transform: translate3d(0.08em, 0, 0); }
  78%  { transform: translate3d(-0.06em, 0, 0); }
  100% { transform: none; }
}

/* ================== PROGRESS ================== */
.cd-progress {
  grid-column: 1 / -1;
  position: relative;
  height: 8px;
  margin-top: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,229,255,0.08);
  box-shadow: 0 0 0 1px rgba(0,229,255,0.06) inset;
}

.cd-progress > .bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(0,229,255,.65), rgba(140,255,46,.6));
  box-shadow: 0 0 24px rgba(0,229,255,.25);
  transition: width .45s cubic-bezier(.2,.7,.1,1);
}

/* ================== RESPONSIVE ================== */
@media (max-width: 720px) {
  .cd-wrap { grid-template-columns: repeat(2, 1fr); }
  .cd-progress { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .cd-wrap { grid-template-columns: 1fr; }
}

/* ================== FLICKER ================== */
/* quick opacity flicker for numbers */
.cd-value.flicker {
  animation: cdNumFlicker 180ms steps(2, end) 3;
}

@keyframes cdNumFlicker {
  0%, 100% { opacity: 1; }
  40%      { opacity: 0.15; }
  70%      { opacity: 0.6; }
}

/* run BOTH animations when glitching + flickering (specificity match) */
.cd-tile.glitch .cd-value.flicker {
  animation:
    cdValueGlitch 760ms steps(22) both,
    cdNumFlicker 180ms steps(2, end) 3;
}