/* The iScope local-time instrument, shared by Home and the iScope page.
   Each hand is one CSS rotation run by the compositor. All three share one negative delay, --iscope-clock-phase:
   the time since the last twelve o'clock, which main.js writes when a dial comes into view (and on pageshow and
   visibilitychange), so the hands stand at wall-clock time with no per-frame script. main.js adds .is-live only
   while the dial is on screen and the page is visible; otherwise the hands hold their pose and nothing runs.
   Each resync flips data-iscope-clock-cycle, which swaps between two identical keyframes so the rotation restarts
   from the new phase. Without JavaScript the hands rest at 10:10:36 and the time readouts are hidden. */
.iscope-clock {
  --iscope-clock-phase: -36636s;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--iscope-clock-size, 150px);
  aspect-ratio: 1;
  isolation: isolate;
  transform: translateZ(0);
}

.iscope-clock--hero {
  --iscope-clock-size: clamp(132px, 13vw, 158px);
}

.iscope-clock--home {
  --iscope-clock-size: clamp(300px, 34vw, 456px);
}

.iscope-clock__face,
.iscope-clock__cue,
.iscope-clock__core {
  position: absolute;
  inset: 0;
}

.iscope-clock__face {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 44px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 22px rgba(225, 196, 120, 0.09));
  z-index: 1;
}

.iscope-clock__core {
  inset: 17.5%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  z-index: 2;
}

.iscope-clock__core img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 34px rgba(0, 0, 0, 0.32))
    saturate(0.96) contrast(1.02);
}

.iscope-clock__cue {
  pointer-events: none;
  transform-origin: 50% 50%;
  z-index: 3;
  animation: iscope-clock-turn 60s linear infinite paused;
  animation-delay: var(--iscope-clock-phase);
}

.iscope-clock[data-iscope-clock-cycle="1"] .iscope-clock__cue {
  animation-name: iscope-clock-turn-alt;
}

.iscope-clock.is-live .iscope-clock__cue {
  animation-play-state: running;
}

.iscope-clock__cue img {
  position: absolute;
  left: 50%;
  display: block;
  height: auto;
  transform: translateX(-50%);
}

.iscope-clock__cue--hour {
  animation-duration: 43200s;
}

.iscope-clock__cue--hour img {
  top: 2.5%;
  width: 2.45%;
}

.iscope-clock__cue--minute {
  animation-duration: 3600s;
}

.iscope-clock__cue--minute img {
  top: 3.8%;
  width: 1.9%;
  filter: saturate(0.08) brightness(1.78) contrast(0.88);
}

.iscope-clock__cue--second img {
  top: 1.8%;
  width: 6.6%;
  filter: drop-shadow(0 0 8px rgba(83, 244, 206, 0.42));
}

@media (max-width: 900px) {
  .iscope-clock--home {
    --iscope-clock-size: clamp(260px, 36vw, 330px);
  }
}

@media (max-width: 700px) {
  .iscope-clock--home {
    --iscope-clock-size: min(78vw, 340px);
  }

  .iscope-clock--hero {
    --iscope-clock-size: 112px;
  }
}

@media (max-width: 420px) {
  .iscope-clock--hero {
    --iscope-clock-size: 96px;
  }
}

@keyframes iscope-clock-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes iscope-clock-turn-alt {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Reduced motion: the hands step like a quartz movement, the seconds hand once a second on the whole second. */
@media (prefers-reduced-motion: reduce) {
  .iscope-clock__cue--second,
  .iscope-clock__cue--minute {
    animation-timing-function: steps(60, end);
  }

  .iscope-clock__cue--hour {
    animation-timing-function: steps(720, end);
  }
}

/* Without scripting nothing keeps the dial on local time, so the page makes no such claim. The html prefix
   outranks the display rules of the page sheets that load after this one. */
@media (scripting: none) {
  html .iscope-home-banner__time,
  html .iscope-hero__time {
    display: none;
  }
}