*{box-sizing:border-box}
body{margin:0;background:#050505;font-family:Arial,Helvetica,sans-serif}

.copyright {
  position: absolute;
  right: 18px;
  bottom: 12px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  z-index: 10;
  pointer-events: none;
}

.mercury-countdown{
  position:relative;isolation:isolate;overflow:hidden;width:100%;
  aspect-ratio: 2.5 / 1; min-height:300px; max-height:650px;
  color:#fff;background:#050505;
}

/* Slow Background */
.mercury-countdown:before{
  content:"";position:absolute;z-index:-2;inset:-4%;
  background:url('mercury-countdown-background.jpg') center center/cover no-repeat;
  transform:scale(1.02);animation:mc-surface-drift 36s ease-in-out infinite alternate;
  will-change:transform;
}
/* Weak light */
.mercury-countdown:after{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 20%,#ffffff06 45%,#ffffff12 50%,#ffffff04 55%,transparent 78%);
  background-size:220% 100%;animation:mc-light-sweep 18s ease-in-out infinite;
}
.mc-heading{
  position:absolute;top:25%;left:0;width:100%;text-align:center;
  font-size:clamp(10px,1.45vw,21px);letter-spacing:.34em;font-weight:300;
  white-space:nowrap;text-shadow:0 1px 8px #000;
}
.mc-heading:before,.mc-heading:after{
  content:"";display:inline-block;width:clamp(22px,6vw,120px);height:1px;
  background:#d8dce0;vertical-align:middle;margin:0 clamp(12px,2.7vw,52px)
}
.mc-ring{
  position:absolute;left:50%;top:65%;transform:translate(-50%,-50%);
  width:min(19vw,370px);min-width:190px;aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,7,10,.25);backdrop-filter:blur(1px);
  border:2px solid rgba(230,233,236,.78);
  box-shadow:0 0 0 1px #ffffff12, inset 0 0 20px #0002;
  animation:mc-ring-breathe 5s ease-in-out infinite;
}
.mc-ring:before{
  content:"";position:absolute;inset:-2px;border-radius:50%;border:4px solid transparent;
  border-top-color:#fff;border-right-color:#fff;filter:drop-shadow(0 0 5px #fff);
  transform:rotate(8deg);pointer-events:none;animation:mc-arc-rotate 24s linear infinite
}
.mc-ring:after{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid #ffffff20;pointer-events:none}
.mc-center{text-align:center;position:relative;z-index:1;animation:mc-number-glow 5s ease-in-out infinite}
.mc-days{font-size:clamp(52px,7.5vw,118px);font-weight:300;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.015em;transition:opacity .35s ease,transform .35s ease}
.mc-label{font-size:clamp(12px,1.5vw,23px);letter-spacing:.42em;margin:.55em 0 0 .42em;font-weight:300}
.mc-footer{
  position:absolute;bottom:12%;left:0;width:100%;text-align:center;
  font-size:clamp(10px,1.1vw,17px);letter-spacing:.42em;font-weight:300;text-shadow:0 1px 8px #000;
}
.mc-footer:before,.mc-footer:after{content:"";display:inline-block;width:clamp(22px,5.5vw,110px);height:1px;background:#cdd2d6;vertical-align:middle;margin:0 clamp(10px,2vw,38px)}
@keyframes mc-surface-drift{
  from{transform:scale(1.02) translate3d(-.4%,.2%,0)}
  to{transform:scale(1.10) translate3d(.5%,-.5%,0)}
}
@keyframes mc-light-sweep{
  0%,18%{background-position:130% 0;opacity:.15}
  55%{background-position:0% 0;opacity:.65}
  82%,100%{background-position:-130% 0;opacity:.15}
}
@keyframes mc-ring-breathe{
  0%,100%{box-shadow:0 0 0 1px #ffffff12,inset 0 0 20px #0002,0 0 10px #ffffff08}
  50%{box-shadow:0 0 0 1px #ffffff20,inset 0 0 28px #ffffff08,0 0 24px #ffffff18}
}
@keyframes mc-arc-rotate{from{transform:rotate(8deg)}to{transform:rotate(368deg)}}
@keyframes mc-number-glow{
  0%,100%{filter:drop-shadow(0 0 1px #ffffff22)}
  50%{filter:drop-shadow(0 0 8px #ffffff35)}
}
@media(prefers-reduced-motion:reduce){
  .mercury-countdown:before,.mercury-countdown:after,.mc-ring,.mc-ring:before,.mc-center{animation:none!important}
}
@media(max-width:600px){
 .mercury-countdown{min-height:300px;aspect-ratio:1.35/1;background-position:center center}
 .mc-heading{top:9%;letter-spacing:.2em}
 .mc-heading:before,.mc-heading:after{margin:0 8px;width:16px}
 .mc-ring{top:43%;width:56vw;min-width:0}
 .mc-days{font-size:clamp(48px,15vw,78px)}
 .mc-label{font-size:12px}
 .mc-footer{bottom:10%;letter-spacing:.28em}
 .mc-footer:before,.mc-footer:after{margin:0 9px;width:18px}
}