/* ═══════════════════════════════════════
   ЗАНАВЕС — часы (центральный элемент)
   ═══════════════════════════════════════ */

/* ─── Сцена часов ─────────────────────── */
.clock-stage {
  position: relative;
  width: clamp(300px, 35vw, 520px);
  height: clamp(300px, 35vw, 520px);
  flex-shrink: 0;
}

/* ─── Внешнее SVG-кольцо ──────────────── */
.ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ─── Обёртка циферблата ──────────────── */
.clock-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  height: 72%;
  transform: translate(-50%, -50%);
  z-index: 5;
  opacity: 0;
  transition: opacity 2s ease;
}

.clock-wrap.visible { opacity: 1; }

/* ─── Лицо циферблата ─────────────────── */
.clock-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 40%,
    #fffef9 0%,
    #f5ede0 52%,
    #e8ddd0 100%
  );
  box-shadow:
    inset 0 2px 20px rgba(255,255,255,0.92),
    inset 0 -4px 18px rgba(107,83,68,0.07),
    0 0 0 1.5px rgba(107,83,68,0.14),
    0 0 0 9px rgba(250,248,244,0.65),
    0 0 0 11px rgba(107,83,68,0.10),
    0 12px 48px rgba(107,83,68,0.12);
}

/* SVG с делениями */
.clock-dial-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Бликовое стекло */
.clock-glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    130deg,
    rgba(255,255,255,0.38) 0%,
    transparent 40%
  );
  pointer-events: none;
  z-index: 4;
}

/* ─── Стрелки ─────────────────────────── */
.clock-hands {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.clock-rotator {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}

.clock-hand {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  border-radius: 3px 3px 0 0;
}

.clock-hand--hour {
  width: clamp(4px, 0.6vmin, 6px);
  height: clamp(58px, 14%, 110px);
  background: linear-gradient(to top, #3a2e24, #6b5344);
}

.clock-hand--minute {
  width: clamp(2px, 0.38vmin, 3.5px);
  height: clamp(80px, 19%, 150px);
  background: linear-gradient(to top, #4a3a30, #8b7355);
}

.clock-hand--second {
  width: 1px;
  height: clamp(88px, 21%, 164px);
  background: var(--sepia-light);
  opacity: 0.85;
}

.clock-hand--second::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--sepia);
}

/* Ось */
.clock-pivot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ede5d8, var(--sepia));
  z-index: 9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.14);
}

/* ─── Окно даты/времени ───────────────── */
.clock-date-box {
  position: absolute;
  left: 50%;
  bottom: 11%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 54px;
  padding: 5px 10px 6px;
  background: linear-gradient(180deg, #faf8f4 0%, #ebe5d8 100%);
  border: 1px solid rgba(107,83,68,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(107,83,68,0.08);
}

.cdb-day {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(0.9rem, 2.2vmin, 1.2rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  display: block;
}

.cdb-mon {
  font-family: "Jost", sans-serif;
  font-size: clamp(0.36rem, 0.75vmin, 0.46rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--sepia);
  display: block;
}

.cdb-time {
  font-family: "Jost", sans-serif;
  font-size: clamp(0.34rem, 0.68vmin, 0.44rem);
  letter-spacing: 0.12em;
  color: var(--sepia-light);
  margin-top: 3px;
  display: block;
  border-top: 1px solid rgba(107,83,68,0.18);
  padding-top: 3px;
}

.cdb-city {
  font-family: "Jost", sans-serif;
  font-size: clamp(0.30rem, 0.60vmin, 0.38rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia-light);
  opacity: 0.70;
  display: block;
}

/* ─── «время идёт» ────────────────────── */
.time-caption {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(0.9rem, 2.5vw, 1.5rem);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.30em;
  text-indent: 0.30em;
  color: var(--sepia-light);
  text-align: center;
  opacity: 0;
  transition: opacity 2s ease;
}

.time-caption.visible { opacity: 1; }

/* ─── Мобиль ──────────────────────────── */
@media (max-width: 850px) {
  .clock-stage {
    width: clamp(280px, 82vw, 420px);
    height: clamp(280px, 82vw, 420px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clock-wrap, .time-caption { transition-duration: 0.01ms !important; }
}