/* ─────────────────────────────────────────────────────────
   EPOCH – ANIMATIONS CSS
───────────────────────────────────────────────────────── */

/* ── Digit tick (orbital / bold / lcd) ── */
@keyframes digitTick {
  0%   { transform: translateY(-6px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.digit-changed .digit-value {
  animation: digitTick .22s cubic-bezier(.2,0,.2,1) forwards;
}

/* ── Pulse (seconds beat) ── */
@keyframes digitPulse {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.04); }
  30%  { transform: scale(1); }
  100% { transform: scale(1); }
}
.ds-pulse .digit-box .digit-value {
  animation: digitPulse 1s ease;
}
.ds-pulse .time-unit:last-child .digit-box .digit-value {
  animation: digitPulse 1s ease infinite;
}

/* ── Glow pulse on separator ── */
@keyframes sepGlow {
  0%, 100% { text-shadow: 0 0 8px var(--accent-glow); opacity: .5; }
  50%       { text-shadow: 0 0 24px var(--accent-glow); opacity: 1; }
}
.time-sep { animation: sepGlow 1s ease infinite; }

/* ── Scan line overlay (LCD theme) ── */
.ds-lcd .digit-box::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.06) 3px,
    rgba(0,0,0,.06) 4px
  );
  pointer-events: none; z-index: 2;
}

/* ── Grid overlay on preview/fullscreen ── */
.grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
}

/* ── Radial accent spotlight ── */
.accent-spotlight {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 50% 50%, var(--accent-dim), transparent 70%);
  z-index: 0;
}

/* ── Flip clock specific ── */
.flip-unit { transform-style: preserve-3d; }

.flip-card-enter {
  animation: flipCardIn .32s cubic-bezier(.2,0,.2,1) forwards;
}
.flip-card-exit {
  animation: flipCardOut .32s cubic-bezier(.2,0,.2,1) forwards;
}

@keyframes flipCardOut {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(-90deg); opacity: 0; }
}
@keyframes flipCardIn {
  from { transform: rotateX(90deg); opacity: 0; }
  to   { transform: rotateX(0deg); opacity: 1; }
}

/* ── Modal animation ── */
@keyframes modalIn {
  from { opacity: 0; transform: scale(.93) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── View fade transition ── */
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view.active {
  animation: viewFadeIn .28s cubic-bezier(.2,0,.2,1);
}

/* ── Timer card appear ── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.timer-card { animation: cardIn .3s cubic-bezier(.2,0,.2,1) both; }

/* ── Button press ripple ── */
.btn-primary:active { animation: btnPress .12s ease; }
@keyframes btnPress {
  0%   { transform: scale(.97); }
  100% { transform: scale(1); }
}

/* ── FAB pop-in ── */
@keyframes fabIn {
  from { opacity: 0; transform: scale(.6) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.fab { animation: fabIn .4s cubic-bezier(.34,1.56,.64,1) both; }
.fab-sm:nth-child(2) { animation-delay: .06s; }
.fab-sm:nth-child(3) { animation-delay: .12s; }

/* ── Ring ring animation on load ── */
@keyframes ringDraw {
  from { stroke-dashoffset: var(--ring-full, 340); }
  to   { stroke-dashoffset: var(--ring-offset, 0); }
}
.ring-progress-init {
  animation: ringDraw .8s cubic-bezier(.4,0,.2,1) forwards;
}

/* ── Expired glow pulse ── */
@keyframes expiredGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%       { box-shadow: 0 0 40px 10px var(--accent-glow); }
}
.timer-expired-container { animation: expiredGlow 2.5s ease infinite; }

/* ── Shooting star ── */
@keyframes shootingStar {
  0%   { transform: translate(0, 0) scaleX(1); opacity: 1; }
  100% { transform: translate(300px, 200px) scaleX(6); opacity: 0; }
}

/* ── Toast slide up ── */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Theme swatch hover ── */
.theme-swatch { transition: transform .18s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), border-color .18s ease, box-shadow .18s ease; }
.theme-swatch:hover { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.theme-swatch.active { box-shadow: 0 0 0 3px rgba(var(--accent-rgb,.5)); }

/* ── Accent color change flash ── */
@keyframes accentFlash {
  0%   { opacity: .5; }
  100% { opacity: 1; }
}
.accent-updated .digit-value { animation: accentFlash .3s ease; }

/* ── Nebula drift (background layer) ── */
@keyframes nebulaDrift {
  0%   { transform: translateX(0) translateY(0) scale(1); }
  33%  { transform: translateX(2%) translateY(-1%) scale(1.02); }
  66%  { transform: translateX(-1%) translateY(2%) scale(.99); }
  100% { transform: translateX(0) translateY(0) scale(1); }
}
.nebula-layer { animation: nebulaDrift 30s ease-in-out infinite; }

/* ── Progress bar shimmer ── */
@keyframes progressShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.timer-progress-fill {
  background-size: 200% 100%;
  animation: progressShimmer 3s linear infinite;
  background-image: linear-gradient(
    90deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 70%, #fff) 50%,
    var(--accent) 100%
  );
}

/* ── Number change highlight ── */
@keyframes digitHighlight {
  0%   { color: var(--accent); text-shadow: 0 0 30px var(--accent-glow); }
  100% { color: var(--text-0); text-shadow: 0 0 30px var(--accent-glow); }
}
.digit-flash .digit-value {
  animation: digitHighlight .4s ease;
}

/* ── Input focus ring pulse ── */
@keyframes focusRingPulse {
  0%   { box-shadow: 0 0 0 3px var(--accent-dim), 0 0 0px var(--accent-glow); }
  50%  { box-shadow: 0 0 0 3px var(--accent-dim), 0 0 20px var(--accent-glow); }
  100% { box-shadow: 0 0 0 3px var(--accent-dim), 0 0 0px var(--accent-glow); }
}

/* ── Section fade in on scroll ── */
@keyframes sectionIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.form-section {
  animation: sectionIn .35s cubic-bezier(.2,0,.2,1) both;
}
.form-section:nth-child(2) { animation-delay: .04s; }
.form-section:nth-child(3) { animation-delay: .08s; }
.form-section:nth-child(4) { animation-delay: .12s; }
.form-section:nth-child(5) { animation-delay: .16s; }
.form-section:nth-child(6) { animation-delay: .20s; }