/* Prague Orloj visual layer
 *
 * The functional horoscope chart remains untouched. The page backdrop keeps
 * one high-resolution photograph, but separates its real moving mechanisms:
 * fixed plate, Old-Czech hour ring, eccentric zodiac/ecliptic ring, Sun hand,
 * Moon hand with phase sphere, and the star pointer.
 */

:root {
  --orloj-night: #071018;
  --orloj-night-soft: #0b1620;
  --orloj-bronze: #c99a4b;
  --orloj-bronze-soft: rgba(201, 154, 75, 0.28);
  --orloj-patina: rgba(55, 112, 108, 0.16);
  --font-display: "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, sans-serif;
}

body {
  background-color: var(--orloj-night);
  background-image:
    radial-gradient(ellipse at 18% 8%, rgba(35, 75, 92, 0.28), transparent 48%),
    radial-gradient(ellipse at 82% 88%, rgba(91, 61, 31, 0.24), transparent 52%),
    radial-gradient(ellipse at 50% 50%, rgba(8, 19, 29, 0.34), transparent 72%);
}

/* Display headings use the standard application serif; controls stay on the
 * standard UI sans stack. Long interpretations keep their existing readable
 * serif/sans typography. */
h1,
h2,
.bohemian-brand,
.bohemian-heading {
  font-family: var(--font-display) !important;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-wrap: balance;
}

button,
[role="button"],
.bohemian-button {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.bohemian-brand {
  font-size: clamp(1.05rem, 1.8vw, 1.38rem);
  line-height: 1.05;
  letter-spacing: 0.035em;
}

.orloj-page-backdrop {
  isolation: isolate;
  background:
    radial-gradient(circle at 52% 48%, rgba(185, 132, 55, 0.08), transparent 31%),
    linear-gradient(180deg, rgba(3, 8, 13, 0.06), rgba(3, 8, 13, 0.4));
}

.orloj-page-backdrop::before,
.orloj-page-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orloj-page-backdrop::before {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(226, 177, 83, 0.12), transparent 24%),
    radial-gradient(circle at 50% 48%, rgba(45, 112, 119, 0.11), transparent 47%);
  animation: orloj-ambient-glow 24s ease-in-out infinite alternate;
}

.orloj-page-backdrop::after {
  z-index: 5;
  background:
    radial-gradient(circle at 50% 48%, transparent 22%, rgba(4, 10, 16, 0.08) 55%, rgba(4, 10, 16, 0.5) 100%),
    linear-gradient(180deg, rgba(4, 10, 16, 0.08), rgba(4, 10, 16, 0.24));
}

/* The calculated clock itself never rotates as one unit. Every functional
 * layer keeps its astronomical transform from React. */
.orloj-page-backdrop__clock {
  position: absolute;
  z-index: 1;
  top: 52%;
  left: 52%;
  width: min(146vmin, 1680px);
  height: min(146vmin, 1680px);
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  border-radius: 50%;
  clip-path: circle(49.2% at 50% 50%);
  opacity: 0.23;
  filter: saturate(0.96) contrast(1.08) drop-shadow(0 0 36px rgba(185, 132, 55, 0.17));
  contain: layout paint;
}

/* Only this narrow photographic rim is decorative. It turns once in ten
 * minutes without moving the plate, rings, hands or live annotations. */
.orloj-page-backdrop__clock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 50%;
  background-image: url("/orloj/orloj-zodiac-hires.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.2;
  filter: saturate(0.82) brightness(0.8);
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: orloj-ambient-photo-turn 600s linear infinite;
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0 43.4%,
    #000 44.2% 48.2%,
    transparent 49.1% 100%
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0 43.4%,
    #000 44.2% 48.2%,
    transparent 49.1% 100%
  );
  will-change: transform;
}

/* A synthetic astrolabe plate is visible only through openings left by the
 * photographic moving rings. It prevents any static duplicate ring from
 * remaining underneath while preserving the blue/gold Orloj atmosphere. */
.orloj-underplate {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42.5%, rgba(103, 158, 166, 0.95) 0 19%, rgba(19, 35, 46, 0.96) 20% 36%, transparent 37%),
    conic-gradient(from 205deg at 50% 51%, #c98930 0 22%, #172b38 22% 58%, #b96c2d 58% 76%, #243a43 76% 100%);
}

.orloj-photo-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("/orloj/orloj-zodiac-hires.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: 50% 54%;
  will-change: transform;
}

/* The fixed photograph excludes both moving annuli. Intersecting masks make
 * the remaining pieces complementary rather than stacking full photographs. */
.orloj-fixed-plate {
  -webkit-mask-image:
    radial-gradient(circle at 50.5% 42.5%, #000 0 17.7%, transparent 18.5% 32.2%, #000 33% 100%),
    radial-gradient(circle at 50% 51%, #000 0 38.2%, transparent 39% 45.7%, #000 46.5% 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle at 50.5% 42.5%, #000 0 17.7%, transparent 18.5% 32.2%, #000 33% 100%),
    radial-gradient(circle at 50% 51%, #000 0 38.2%, transparent 39% 45.7%, #000 46.5% 100%);
  mask-composite: intersect;
}

/* Seasonal Old-Czech 24-hour ring: visibly independent, deliberately slower
 * than the daily mechanisms. */
.orloj-hour-ring {
  z-index: 2;
  transform-origin: 50% 51%;
  -webkit-mask-image: radial-gradient(circle at 50% 51%, transparent 0 38.3%, #000 39.1% 45.6%, transparent 46.4% 100%);
  mask-image: radial-gradient(circle at 50% 51%, transparent 0 38.3%, #000 39.1% 45.6%, transparent 46.4% 100%);
  animation: orloj-hour-ring-turn 1440s linear infinite;
}

/* The eccentric zodiac/ecliptic ring is cut around its own displaced centre,
 * then rotates around the common central bearing — the characteristic motion
 * visible in the supplied mechanical GIF. */
.orloj-zodiac-ring {
  z-index: 3;
  -webkit-mask-image: radial-gradient(circle at 50.5% 42.5%, transparent 0 17.7%, #000 18.5% 32.2%, transparent 33% 100%);
  mask-image: radial-gradient(circle at 50.5% 42.5%, transparent 0 17.7%, #000 18.5% 32.2%, transparent 33% 100%);
  animation: orloj-zodiac-ring-turn 660s linear infinite;
}

/* The real photograph contains hands in one captured position. This subtle
 * wash quiets them while the animated SVG mechanism above remains legible. */
.orloj-mechanism-wash {
  position: absolute;
  z-index: 3;
  inset: 13% 13% 15% 13%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 54%, rgba(8, 17, 24, 0.34), rgba(8, 17, 24, 0.13) 48%, transparent 72%);
  pointer-events: none;
}

.orloj-mechanism {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
}

.orloj-hand {
  fill: none;
  stroke-linecap: round;
  stroke-width: 7;
}

.orloj-hand--gold { stroke: url("#orloj-hand-gold"); }
.orloj-hand--silver { stroke: url("#orloj-hand-silver"); }
.orloj-hand--star { stroke: rgba(220, 178, 67, 0.88); stroke-width: 4; }
.orloj-sun-ray { stroke: #f4ce63; stroke-width: 3; stroke-linecap: round; }

.orloj-sun-hand,
.orloj-moon-hand,
.orloj-star-hand {
  transform-box: view-box;
  transform-origin: 500px 540px;
  will-change: transform;
}

.orloj-sun-hand { animation: orloj-sun-turn 720s linear infinite; }
.orloj-moon-hand { animation: orloj-moon-turn 744s linear infinite; }
.orloj-star-hand { animation: orloj-star-turn 930s linear infinite; }

.orloj-moon-phase {
  transform-box: fill-box;
  transform-origin: center;
  animation: orloj-moon-phase-turn 118s linear infinite;
}

/* Internal browser calibration mode. It is activated only by
 * ?orlojCalibration=1 and replaces the composited moving model with one clean,
 * unmasked reference raster. This ensures clicks measure the actual Wikimedia
 * photo rather than a synthetic/moving layer. */
body[data-orloj-photo-calibration="active"] .orloj-page-backdrop::before,
body[data-orloj-photo-calibration="active"] .orloj-page-backdrop::after,
body[data-orloj-photo-calibration="active"] .orloj-page-backdrop__clock::before,
body[data-orloj-photo-calibration="active"] .orloj-underplate,
body[data-orloj-photo-calibration="active"] .orloj-hour-ring,
body[data-orloj-photo-calibration="active"] .orloj-zodiac-ring,
body[data-orloj-photo-calibration="active"] .orloj-mechanism-wash,
body[data-orloj-photo-calibration="active"] .orloj-mechanism,
body[data-orloj-photo-calibration="active"] .orloj-temporal-hour-overlay {
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none !important;
}

body[data-orloj-photo-calibration="active"] .orloj-page-backdrop__clock {
  opacity: 1 !important;
  filter: none !important;
}

body[data-orloj-photo-calibration="active"] .orloj-fixed-plate {
  z-index: 8 !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-composite: initial !important;
  mask-composite: initial !important;
  filter: none !important;
}

@keyframes orloj-ambient-photo-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orloj-zodiac-ring-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orloj-hour-ring-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

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

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

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

@keyframes orloj-moon-phase-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orloj-ambient-glow {
  from { opacity: 0.72; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1.035); }
}

@media (min-width: 1280px) {
  .orloj-page-backdrop__clock {
    width: min(158vmin, 1900px);
    height: min(158vmin, 1900px);
  }
}

/* Existing cards keep their layout and behaviour; only their material becomes
 * slightly more like dark glass over aged metal. */
.bg-card,
[class*="bg-card/"] {
  border-color: color-mix(in oklab, var(--orloj-bronze) 24%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.035),
    0 18px 50px -34px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px) saturate(1.04);
  -webkit-backdrop-filter: blur(16px) saturate(1.04);
}

.pwa-safe-top {
  background: color-mix(in oklab, var(--orloj-night-soft) 78%, transparent) !important;
  border-bottom-color: color-mix(in oklab, var(--orloj-bronze) 22%, transparent) !important;
  box-shadow: 0 12px 34px -28px rgba(0, 0, 0, 0.96);
}

@media (max-width: 700px) {
  .orloj-page-backdrop__clock {
    top: 34vh;
    left: 58%;
    width: min(150vw, 900px);
    height: min(150vw, 900px);
    opacity: 0.21;
    filter: saturate(0.93) contrast(1.07) drop-shadow(0 0 24px rgba(185, 132, 55, 0.14));
  }

  body[data-orloj-photo-calibration="active"] .orloj-page-backdrop__clock {
    opacity: 1 !important;
    filter: none !important;
  }

  .orloj-mechanism { opacity: 0.92; }
  .bohemian-brand { font-size: clamp(0.78rem, 4.4vw, 1.03rem); }

  .bg-card,
  [class*="bg-card/"] {
    backdrop-filter: blur(12px) saturate(1.02);
    -webkit-backdrop-filter: blur(12px) saturate(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orloj-page-backdrop::before,
  .orloj-page-backdrop__clock::before,
  .orloj-hour-ring,
  .orloj-zodiac-ring,
  .orloj-sun-hand,
  .orloj-moon-hand,
  .orloj-star-hand,
  .orloj-moon-phase {
    animation: none !important;
  }
}

@media (prefers-reduced-data: reduce) {
  .orloj-page-backdrop__clock::before {
    animation: none !important;
    will-change: auto;
  }
}

@supports not ((mask-image: radial-gradient(circle, #000, transparent)) or (-webkit-mask-image: radial-gradient(circle, #000, transparent))) {
  .orloj-page-backdrop__clock::before { display: none; }
  .orloj-fixed-plate { opacity: 0.72; }
  .orloj-hour-ring,
  .orloj-zodiac-ring { opacity: 0; }

  body[data-orloj-photo-calibration="active"] .orloj-fixed-plate {
    opacity: 1 !important;
  }
}