/* Dedicated Orloj view.
 *
 * The moving mechanisms are driven by the shared astronomical state store.
 * This stylesheet only controls the fullscreen composition and also prevents
 * legacy infinite animations from rotating the calculated layers elsewhere in
 * the application.
 */

.orloj-page-backdrop[data-orloj-controlled="true"] .orloj-hour-ring,
.orloj-page-backdrop[data-orloj-controlled="true"] .orloj-zodiac-ring,
.orloj-page-backdrop[data-orloj-controlled="true"] .orloj-sun-hand,
.orloj-page-backdrop[data-orloj-controlled="true"] .orloj-moon-hand,
.orloj-page-backdrop[data-orloj-controlled="true"] .orloj-star-hand,
.orloj-page-backdrop[data-orloj-controlled="true"] .orloj-moon-phase {
  animation: none !important;
}

body.orloj-display-mode {
  overflow: hidden;
}

body.orloj-display-mode .starfield {
  opacity: 0.82;
}

body.orloj-display-mode .orloj-page-backdrop::before {
  opacity: 0.72;
}

body.orloj-display-mode .orloj-page-backdrop::after {
  opacity: 0.58;
}

body.orloj-display-mode .orloj-page-backdrop__clock {
  top: 50%;
  left: 50%;
  width: min(96vmin, 1280px);
  height: min(96vmin, 1280px);
  opacity: 0.76;
  filter: saturate(1.03) contrast(1.12) drop-shadow(0 0 54px rgba(201, 154, 75, 0.3));
}

body.orloj-display-mode .orloj-mechanism-wash {
  background: radial-gradient(
    circle at 50% 54%,
    rgba(8, 17, 24, 0.24),
    rgba(8, 17, 24, 0.1) 48%,
    transparent 72%
  );
}

@media (max-width: 700px) {
  body.orloj-display-mode .orloj-page-backdrop__clock {
    top: 50%;
    left: 50%;
    width: min(118vw, 920px);
    height: min(118vw, 920px);
    opacity: 0.74;
    filter: saturate(1.01) contrast(1.1) drop-shadow(0 0 38px rgba(201, 154, 75, 0.28));
  }
}