:root {
  --ink: rgba(244, 244, 241, 0.86);
  --dim: rgba(244, 244, 241, 0.32);
  --bg: #050505;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
}

body {
  min-height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: "Rajdhani", "Segoe UI", sans-serif;
}

.void {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 36% 32% at 50% 42%, rgba(255, 255, 255, 0.035), transparent 72%),
    radial-gradient(ellipse 70% 62% at 50% 48%, transparent 36%, rgba(0, 0, 0, 0.55) 100%),
    #050505;
}

.storm {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.wash,
.bolt {
  position: absolute;
  opacity: 0;
}

.wash {
  width: min(52vw, 520px);
  height: min(62vh, 640px);
  filter: blur(18px);
}

.wash-a {
  left: -8%;
  top: -10%;
  background: radial-gradient(circle, rgba(214, 226, 255, 0.28), transparent 68%);
  animation: strike 6.4s 0.4s infinite;
}

.wash-b {
  right: -10%;
  top: 4%;
  background: radial-gradient(circle, rgba(214, 226, 255, 0.22), transparent 70%);
  animation: strike 7.6s 1.8s infinite;
}

.wash-c {
  right: 6%;
  bottom: -12%;
  background: radial-gradient(circle, rgba(214, 226, 255, 0.18), transparent 70%);
  animation: strike 9s 3.2s infinite;
}

.bolt {
  width: 92px;
  height: 46vh;
  fill: none;
  stroke: rgba(226, 234, 255, 0.8);
  stroke-width: 1.15;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  filter: drop-shadow(0 0 6px rgba(186, 206, 255, 0.4));
}

.bolt-a {
  left: 1.5%;
  top: -4%;
  animation: strike 6.4s 0.4s infinite;
}

.bolt-b {
  right: 1%;
  top: 2%;
  height: 42vh;
  animation: strike 7.6s 1.8s infinite;
}

.bolt-c {
  left: 3%;
  bottom: -6%;
  width: 70px;
  height: 24vh;
  animation: strike 9s 3.2s infinite;
}

.backglow,
.bolt-back {
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  animation: strike-back 15s 3.5s infinite;
}

.backglow {
  position: absolute;
  width: 86%;
  height: 86%;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 226, 255, 0.55), transparent 62%);
  filter: blur(16px);
}

.bolt-back {
  width: 108px;
  height: 74%;
}

.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 3;
}

main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(920px, 100%);
  padding: 28px 20px 40px;
  gap: clamp(34px, 6vh, 64px);
}

.mark {
  --px: 0;
  --py: 0;
  position: relative;
  width: min(62vmin, 380px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mark:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.28);
  outline-offset: 10px;
}

.layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.layer-far {
  transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -10px), 0);
}

.layer-near {
  transform: translate3d(calc(var(--px) * 7px), calc(var(--py) * 5px), 0);
}

.well,
.ticks,
.orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.well {
  inset: 10%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.045), transparent 68%);
}

.ticks {
  inset: -4%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.55) 0 0.45deg,
    transparent 0.45deg 7.5deg
  );
  -webkit-mask: radial-gradient(circle, transparent 70.5%, #000 71.4%, #000 72.3%, transparent 73.2%);
  mask: radial-gradient(circle, transparent 70.5%, #000 71.4%, #000 72.3%, transparent 73.2%);
  opacity: 0.28;
  animation: spin 96s linear infinite;
}

.ticks-outer {
  inset: -11%;
  background: repeating-conic-gradient(
    from 3deg,
    rgba(255, 255, 255, 0.7) 0 0.35deg,
    transparent 0.35deg 30deg
  );
  -webkit-mask: radial-gradient(circle, transparent 71%, #000 71.7%, #000 72.4%, transparent 73.1%);
  mask: radial-gradient(circle, transparent 71%, #000 71.7%, #000 72.4%, transparent 73.1%);
  opacity: 0.22;
  animation-duration: 150s;
  animation-direction: reverse;
}

.orbit {
  inset: 1%;
  background: conic-gradient(
    from 200deg,
    transparent 0 72%,
    rgba(255, 255, 255, 0.05) 80%,
    rgba(255, 255, 255, 0.42) 87%,
    transparent 95% 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 63.6%, #000 64.5%, #000 65.2%, transparent 66.1%);
  mask: radial-gradient(circle, transparent 63.6%, #000 64.5%, #000 65.2%, transparent 66.1%);
  opacity: 0.7;
  animation: spin 48s linear infinite;
}

.orbit-b {
  inset: -8%;
  background: conic-gradient(
    from 30deg,
    transparent 0 84%,
    rgba(255, 255, 255, 0.22) 90%,
    transparent 97% 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 66.2%, #000 66.9%, #000 67.5%, transparent 68.2%);
  mask: radial-gradient(circle, transparent 66.2%, #000 66.9%, #000 67.5%, transparent 68.2%);
  opacity: 0.45;
  animation-duration: 76s;
  animation-direction: reverse;
}

.mark img {
  width: 70%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.ghost {
  opacity: 0.14;
  filter: brightness(0.32) contrast(1.05);
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 26%, rgba(0, 0, 0, 0.28) 52%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 48%, #000 26%, rgba(0, 0, 0, 0.28) 52%, transparent 70%);
  animation: breathe 11s ease-in-out infinite;
}

.gleam,
.flare {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gleam {
  opacity: 0;
  filter: brightness(0.45);
  -webkit-mask-image: linear-gradient(108deg, transparent 40%, #000 50%, transparent 60%);
  mask-image: linear-gradient(108deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 240% 100%;
  mask-size: 240% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: sweep 18s ease-in-out infinite;
}

.flare {
  opacity: 0;
  filter: brightness(1.08) drop-shadow(0 0 18px rgba(255, 255, 255, 0.28));
  transition: opacity 1.05s ease, filter 1.05s ease;
}

.mark.is-lit .flare {
  opacity: 0.16;
  filter: brightness(0.5) drop-shadow(0 0 20px rgba(198, 214, 255, 0.16));
  transition-duration: 0.16s;
}

.mark:hover .flare {
  opacity: 0.28;
  filter: brightness(0.62) drop-shadow(0 0 12px rgba(255, 255, 255, 0.12));
  transition-duration: 0.28s;
}

.mark.is-revealed .flare {
  opacity: 0.4;
  filter: brightness(0.72) drop-shadow(0 0 14px rgba(255, 255, 255, 0.16));
  transition-duration: 0.2s;
}

.mark.is-lit .well,
.mark:hover .well,
.mark.is-revealed .well {
  background: radial-gradient(circle, rgba(214, 226, 255, 0.05), transparent 68%);
}

.timer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(22px, 5.5vw, 64px);
  animation: rise 1.6s ease both;
}

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

.num {
  display: flex;
  justify-content: center;
  font-weight: 300;
  font-size: clamp(3.1rem, 9vw, 5.6rem);
  line-height: 0.86;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.digit {
  display: inline-flex;
  justify-content: center;
  width: 0.72em;
  font-style: normal;
}

.label {
  margin-top: 14px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--dim);
}

body.is-arrived .ghost {
  animation: none;
  opacity: 0.62;
}

body.is-arrived .gleam {
  animation: none;
  opacity: 0;
}

@keyframes strike {
  0%,
  6%,
  100% {
    opacity: 0;
  }
  6.35% {
    opacity: 0.42;
  }
  6.7% {
    opacity: 0.06;
  }
  7.05% {
    opacity: 0.22;
  }
  7.7%,
  51% {
    opacity: 0;
  }
  51.35% {
    opacity: 0.42;
  }
  51.7% {
    opacity: 0.06;
  }
  52.05% {
    opacity: 0.22;
  }
  52.7% {
    opacity: 0;
  }
}

@keyframes strike-back {
  0%,
  18%,
  100% {
    opacity: 0;
  }
  18.5% {
    opacity: 0.22;
  }
  19% {
    opacity: 0.04;
  }
  19.5% {
    opacity: 0.14;
  }
  20.6% {
    opacity: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.2;
  }
}

@keyframes sweep {
  0%,
  8% {
    opacity: 0;
    -webkit-mask-position: 130% 0;
    mask-position: 130% 0;
  }
  22% {
    opacity: 0.1;
  }
  48% {
    opacity: 0.05;
    -webkit-mask-position: -30% 0;
    mask-position: -30% 0;
  }
  62%,
  100% {
    opacity: 0;
    -webkit-mask-position: -30% 0;
    mask-position: -30% 0;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .mark {
    width: min(78vw, 320px);
  }

  .label {
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    font-size: 0.66rem;
  }
}

@media (max-width: 640px) {
  .bolt:not(.bolt-back) {
    width: 58px;
  }

  .bolt-a,
  .bolt-c {
    left: 0;
  }

  .bolt-b {
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticks,
  .orbit,
  .ghost,
  .gleam,
  .timer,
  .bolt,
  .wash,
  .backglow {
    animation: none;
  }

  .bolt,
  .wash,
  .backglow {
    opacity: 0;
  }

  .ghost {
    opacity: 0.16;
  }

  .gleam,
  .flare {
    opacity: 0;
    transition: none;
  }

  .mark:hover .flare {
    opacity: 0.28;
  }

  .mark.is-revealed .flare {
    opacity: 0.4;
  }
}