/* ============================================================
   CountdownTimer.it — stile della scena countdown
   Usato sia dalla pagina pubblica sia dall'anteprima nel builder.
   Le dimensioni usano unità "cqmin" (container query) con
   fallback in vmin, così l'anteprima è fedele alla pagina reale.
   ============================================================ */

.cd-page { margin: 0; background: #0a0e1a; }
.cd-page .cd-root {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  container-type: size;
}

/* ---------- scena ---------- */
.cd-scene {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  color: var(--cd-text, #ffffff);
  background: #0b0c12;
}

.cd-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cd-bgvideo {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: #000;
  opacity: var(--cd-ov, 0.35);
}

/* ---------- gradienti predefiniti ---------- */
.cd-grad-aurora   { background: linear-gradient(140deg, #0b1023 0%, #2b1e66 45%, #1db8a0 100%); }
.cd-grad-tramonto { background: linear-gradient(140deg, #2d1b4e 0%, #b83267 55%, #ff8c42 100%); }
.cd-grad-oceano   { background: linear-gradient(160deg, #020f1f 0%, #0a3d62 55%, #1fa2c9 100%); }
.cd-grad-notte    { background: radial-gradient(120% 90% at 70% 15%, #1b2350 0%, #0a0c18 60%, #05060c 100%); }
.cd-grad-candy    { background: linear-gradient(135deg, #ff6ec4 0%, #7873f5 100%); }
.cd-grad-foresta  { background: linear-gradient(150deg, #0c1f13 0%, #14532d 55%, #3f9142 100%); }

/* ---------- contenuto ---------- */
.cd-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4cqmin;
  gap: 2.4vmin;
  gap: 2.4cqmin;
}

.cd-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(18px, 5vmin, 54px);
  font-size: clamp(18px, 5cqmin, 54px);
  line-height: 1.15;
  text-wrap: balance;
  max-width: 90%;
}

.cd-sub {
  font-size: clamp(11px, 2vmin, 17px);
  font-size: clamp(11px, 2cqmin, 17px);
  opacity: 0.72;
  letter-spacing: 0.04em;
}

/* ---------- timer ---------- */
.cd-timer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(6px, 2.2vmin, 26px);
  gap: clamp(6px, 2.2cqmin, 26px);
}

.cd-unit { display: flex; flex-direction: column; align-items: center; }

.cd-val {
  font-size: clamp(30px, 14vmin, 170px);
  font-size: clamp(30px, 14cqmin, 170px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cd-lab {
  margin-top: 0.55em;
  font-size: clamp(9px, 1.8vmin, 15px);
  font-size: clamp(9px, 1.8cqmin, 15px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
}

.cd-sep {
  font-size: clamp(24px, 10vmin, 120px);
  font-size: clamp(24px, 10cqmin, 120px);
  line-height: 1;
  opacity: 0.45;
  align-self: flex-start;
  transform: translateY(4%);
}

/* micro-animazione al cambio cifra */
.cd-val.cd-tick { animation: cdTick 0.4s ease; }
@keyframes cdTick {
  0% { transform: translateY(-6%) scale(1.06); opacity: 0.55; }
  100% { transform: none; opacity: 1; }
}

/* ---------- stile: classic (default, nessuna regola extra) ---------- */

/* ---------- stile: cards ---------- */
.cd-style-cards .cd-sep { display: none; }
.cd-style-cards .cd-unit {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: clamp(10px, 2.6cqmin, 24px);
  padding: clamp(10px, 3cqmin, 32px) clamp(12px, 3.4cqmin, 38px) clamp(10px, 2.6cqmin, 28px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  min-width: clamp(64px, 20cqmin, 220px);
}
.cd-style-cards .cd-val {
  font-size: clamp(26px, 11.5vmin, 140px);
  font-size: clamp(26px, 11.5cqmin, 140px);
}
.cd-style-cards .cd-lab { color: var(--cd-accent, #f5b841); opacity: 0.95; }

/* ---------- stile: neon ---------- */
.cd-style-neon .cd-val {
  text-shadow:
    0 0 6px var(--cd-accent, #f5b841),
    0 0 22px var(--cd-accent, #f5b841),
    0 0 70px var(--cd-accent, #f5b841);
}
.cd-style-neon .cd-sep {
  color: var(--cd-accent, #f5b841);
  opacity: 0.85;
  text-shadow: 0 0 18px var(--cd-accent, #f5b841);
}
.cd-style-neon .cd-lab { letter-spacing: 0.3em; }

/* ---------- stile: minimal ---------- */
.cd-style-minimal .cd-val {
  font-weight: 200;
  font-size: clamp(26px, 11vmin, 130px);
  font-size: clamp(26px, 11cqmin, 130px);
}
.cd-style-minimal .cd-sep { opacity: 0.22; font-weight: 200; }
.cd-style-minimal .cd-lab { letter-spacing: 0.34em; opacity: 0.55; font-weight: 400; }

/* ---------- fine countdown ---------- */
.cd-endmsg {
  font-size: clamp(26px, 8vmin, 92px);
  font-size: clamp(26px, 8cqmin, 92px);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
  animation: cdPop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes cdPop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.cd-hide { display: none !important; }

/* ---------- coriandoli ---------- */
.cd-confetti {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* ---------- badge sulla pagina pubblica ---------- */
.cd-badge {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 10;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(10, 12, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 7px 12px;
  border-radius: 999px;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.cd-badge:hover { background: rgba(10, 12, 22, 0.8); transform: translateY(-1px); }

/* ---------- accessibilità ---------- */
/* ---------- sfondo "gattini" ---------- */
.cd-cats-bg { background: #ffffff; }

.cd-cats {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.cd-cat {
  position: absolute;
  left: -12%;
  animation: cdCatWalk linear infinite;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.18));
}

.cd-cat-emoji {
  display: inline-block;
  animation: cdCatBob ease-in-out infinite alternate;
}
.cd-cat-flip { transform: scaleX(-1); animation-name: cdCatBobFlip; }

.cd-cat-s { font-size: 5vmin;  font-size: 5cqmin; }
.cd-cat-m { font-size: 7vmin;  font-size: 7cqmin; }
.cd-cat-l { font-size: 9vmin;  font-size: 9cqmin; }

@keyframes cdCatWalk {
  from { left: -12%; }
  to   { left: 104%; }
}
@keyframes cdCatBob {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-6%) rotate(2deg); }
}
@keyframes cdCatBobFlip {
  from { transform: scaleX(-1) translateY(0) rotate(-2deg); }
  to   { transform: scaleX(-1) translateY(-6%) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cd-val.cd-tick { animation: none; }
  .cd-endmsg { animation: none; }
  .cd-cat { animation: none; left: var(--x, 40%); }
  .cd-cat-emoji { animation: none; }
}