/* ===================================================================
   Liturgical Circle – animations, layout, light + dark theme
   =================================================================== */

/* ── Keyframes ───────────────────────────────────────────────────── */

@keyframes lc-bloom-rotate {
  0%   { transform: rotate(0deg)   scale(1);   opacity: .55; }
  50%  { transform: rotate(180deg) scale(1.1); opacity: .85; }
  100% { transform: rotate(360deg) scale(1);   opacity: .55; }
}

/* Orbit arm: zero-size div at circle center just rotates */
@keyframes lc-orbit-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes lc-spark-pulse {
  0%, 100% { transform: scale(1);   filter: brightness(1);   }
  50%       { transform: scale(1.4); filter: brightness(1.8); }
}

@keyframes lc-breathe {
  0%, 100% { transform: scale(1.10); }
  50%       { transform: scale(1.18); }
}

@keyframes lc-sector-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(119, 90, 25, .4); }
  50%       { box-shadow: 0 0 60px rgba(119, 90, 25, .7); }
}

@keyframes lc-card-flicker {
  0%, 100% { box-shadow: 0 0 40px rgba(119, 90, 25, .18); }
  50%       { box-shadow: 0 0 80px rgba(119, 90, 25, .38); }
}

@keyframes lc-ripple {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(4.8); opacity: 0;  }
}

@keyframes lc-flicker {
  0%, 100% { opacity: 1;   filter: drop-shadow(0 0 5px rgba(119, 90, 25, .4)); }
  50%       { opacity: .7; filter: drop-shadow(0 0 18px rgba(119, 90, 25, .9));
              transform: scale(.97); }
}

@keyframes lc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Animated helpers ────────────────────────────────────────────── */

.lc-animate-bloom    { animation: lc-bloom-rotate 40s linear infinite; }
.lc-animate-bloom-rev{ animation: lc-bloom-rotate 60s linear infinite reverse; }
.lc-spin-slow        { animation: lc-spin 180s linear infinite; }
.lc-spin-slow-rev    { animation: lc-spin 220s linear infinite reverse; }
.lc-flicker-anim     { animation: lc-flicker 3.5s ease-in-out infinite; }

/* ── Sacred bloom (glow halo) ────────────────────────────────────── */

.lc-sacred-bloom {
  position: absolute;
  inset: -180px;
  background: radial-gradient(circle,
    rgba(119, 90, 25, .22) 0%,
    rgba(119, 90, 25, .06) 40%,
    transparent 70%);
  filter: blur(42px);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.dark .lc-sacred-bloom {
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(233, 193, 118, .20) 0%,
    rgba(233, 193, 118, .05) 40%,
    transparent 70%);
  opacity: .7;
}

/* ── Candle background glow ──────────────────────────────────────── */

.lc-candle-bg {
  background: radial-gradient(ellipse at 50% 40%,
    rgba(233, 193, 118, .09) 0%,
    transparent 65%);
  pointer-events: none;
  animation: lc-flicker 7s ease-in-out infinite;
}
.dark .lc-candle-bg {
  background: radial-gradient(ellipse at 50% 40%,
    rgba(233, 193, 118, .13) 0%,
    transparent 65%);
}

/* ── Trail orbit path (dashed circle) ───────────────────────────── */

.lc-trail-path {
  position: absolute;
  inset: -30px;
  border: 1px dashed rgba(119, 90, 25, .18);
  border-radius: 50%;
  pointer-events: none;
  z-index: 24;
}
.dark .lc-trail-path {
  border-color: rgba(233, 193, 118, .18);
}

/* ── Main circle (artifact) ──────────────────────────────────────── */

.lc-artifact {
  position: relative;
  width: var(--lc-size, 560px);
  height: var(--lc-size, 560px);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #ffffff 0%, #f2efea 100%);
  border: 1px solid rgba(119, 90, 25, .35);
  box-shadow:
    0 0 100px rgba(119, 90, 25, .12),
    inset 0 0 80px rgba(119, 90, 25, .05),
    0 40px 80px -20px rgba(0, 0, 0, .08);
  z-index: 20;
}
.dark .lc-artifact {
  background: radial-gradient(circle at center, #1a2416 0%, #0e150e 100%);
  border-color: rgba(233, 193, 118, .25);
  box-shadow:
    0 0 150px rgba(0, 0, 0, .8),
    inset 0 0 100px rgba(233, 193, 118, .04);
}

.lc-artifact-ornament {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px double rgba(119, 90, 25, .22);
  pointer-events: none;
}
.dark .lc-artifact-ornament {
  border-color: rgba(233, 193, 118, .18);
}

/* ── Byzantine cross markers ─────────────────────────────────────── */

.lc-byzantine {
  position: absolute;
  color: rgba(119, 90, 25, .50);
  font-size: 14px;
  pointer-events: none;
  z-index: 35;
  user-select: none;
}
.dark .lc-byzantine {
  color: rgba(233, 193, 118, .45);
}

/* ── Central hub ─────────────────────────────────────────────────── */

.lc-central-hub {
  width: 320px;
  height: 320px;
  background: linear-gradient(145deg, #ffffff 0%, #f5f1e8 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 2px solid rgba(119, 90, 25, .40);
  box-shadow:
    0 0 0 6px rgba(119, 90, 25, .06),
    0 20px 40px -10px rgba(0, 0, 0, .10),
    0 0 30px rgba(119, 90, 25, .08);
  transition: box-shadow .4s ease, border-color .4s ease;
}
.lc-central-hub:hover {
  border-color: rgba(119, 90, 25, .65);
  box-shadow:
    0 0 0 6px rgba(119, 90, 25, .10),
    0 20px 50px -10px rgba(0, 0, 0, .14),
    0 0 50px rgba(119, 90, 25, .16);
}
.dark .lc-central-hub {
  background: linear-gradient(145deg, #1e2d1a 0%, #111908 100%);
  border-color: rgba(233, 193, 118, .40);
  box-shadow:
    0 0 0 6px rgba(233, 193, 118, .06),
    0 20px 40px -10px rgba(0, 0, 0, .50),
    0 0 40px rgba(233, 193, 118, .08);
}
.dark .lc-central-hub:hover {
  border-color: rgba(233, 193, 118, .65);
}

/* Prayer popup inside hub */
.lc-hub-prayer-bg {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}
.dark .lc-hub-prayer-bg {
  background: rgba(14, 21, 14, .97);
}

/* ── Sacred spark – orbit arm technique ──────────────────────────
   .lc-orbit-arm: zero-size div at circle center, just rotates.
   .lc-sacred-spark: offset by radius from the arm's origin.
   As the arm turns, the spark travels a perfect circle.          */

.lc-orbit-arm {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 45;
  animation: lc-orbit-rotate 60s linear infinite;
}

.lc-sacred-spark {
  position: absolute;
  top: -6px;      /* vertically center the 12px spark on the arm */
  left: 290px;    /* radius: orbit just outside the 560px circle  */
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #fff 0%, #e9c176 45%, #775a19 100%);
  border-radius: 50%;
  box-shadow:
    0 0 18px 5px #e9c176,
    0 0 38px 14px rgba(119, 90, 25, .50),
    0 0 70px 24px rgba(119, 90, 25, .20);
  animation: lc-spark-pulse 3s ease-in-out infinite;
}
.dark .lc-sacred-spark {
  box-shadow:
    0 0 20px 8px #ecc06c,
    0 0 45px 18px rgba(236, 192, 108, .55),
    0 0 80px 28px rgba(236, 192, 108, .22);
}

/* ── Sector nodes ────────────────────────────────────────────────── */

.lc-sector {
  position: absolute;
  width: 130px;
  height: 130px;
  cursor: pointer;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.lc-sector:hover { transform: scale(1.08); }
.lc-sector:focus-visible { outline: 2px solid #775a19; border-radius: 50%; }

.lc-sector-miniature {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  mix-blend-mode: multiply;
  opacity: .38;
  transition: all 1s cubic-bezier(.4, 0, .2, 1);
  filter: grayscale(.6) sepia(.3);
  mask-image: radial-gradient(circle, black 38%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, black 38%, transparent 72%);
}
.dark .lc-sector-miniature {
  mix-blend-mode: luminosity;
  opacity: .30;
}

.lc-sector:hover .lc-sector-miniature {
  opacity: .92;
  filter: grayscale(0) sepia(.05);
  mix-blend-mode: normal;
  transform: scale(1.12);
  animation: lc-breathe 4s ease-in-out infinite;
}

.lc-sector-active .lc-sector-miniature {
  opacity: 1;
  filter: grayscale(0);
  mix-blend-mode: normal;
  border: 2.5px solid #775a19;
  box-shadow: 0 0 50px rgba(119, 90, 25, .5);
  animation: lc-sector-pulse 4s ease-in-out infinite;
}
.dark .lc-sector-active .lc-sector-miniature {
  border-color: #e9c176;
  box-shadow: 0 0 50px rgba(233, 193, 118, .55);
}

/* Node label text */
.lc-node-time {
  font-size: 9px;
  letter-spacing: .4em;
  color: rgba(119, 90, 25, .75);
  font-weight: 700;
}
.dark .lc-node-time { color: rgba(233, 193, 118, .7); }

.lc-node-name {
  font-size: 11.5px;
  letter-spacing: .32em;
  font-weight: 800;
  color: #5c4010;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .8);
  line-height: 1.25;
}
.dark .lc-node-name {
  color: #e9c176;
  text-shadow: 0 0 18px rgba(233, 193, 118, .6);
}

/* ── Today / info glass card ─────────────────────────────────────── */

.lc-glass-card {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(119, 90, 25, .22);
  box-shadow:
    0 12px 32px -6px rgba(0, 0, 0, .07),
    0 4px 12px -3px rgba(0, 0, 0, .04);
  transition: box-shadow .4s ease, border-color .4s ease;
  position: relative;
}
.lc-glass-card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(119, 90, 25, .10);
  pointer-events: none;
}
.dark .lc-glass-card {
  background: rgba(20, 30, 16, .80);
  border-color: rgba(233, 193, 118, .20);
  box-shadow:
    0 12px 32px -6px rgba(0, 0, 0, .50),
    0 4px 12px -3px rgba(0, 0, 0, .30);
}
.dark .lc-glass-card::before {
  border-color: rgba(233, 193, 118, .08);
}

/* ── Glow text ──────────────────────────────────────────────────── */

.lc-glow-text {
  text-shadow: 0 0 22px rgba(119, 90, 25, .45);
}
.dark .lc-glow-text {
  text-shadow: 0 0 28px rgba(233, 193, 118, .65);
}

/* ── Ripple ──────────────────────────────────────────────────────── */

.lc-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 2px solid #775a19;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: lc-ripple 1.8s cubic-bezier(0, .2, .8, 1) forwards;
}
.dark .lc-ripple { border-color: #e9c176; }

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .lc-artifact         { --lc-size: 480px; }
  .lc-central-hub      { width: 265px; height: 265px; }
  .lc-sector           { width: 112px; height: 112px; }
  .lc-sector-miniature { width: 92px;  height: 92px;  }
  .lc-sacred-spark     { left: 245px; }
}

@media (max-width: 900px) {
  .lc-artifact         { --lc-size: 400px; }
  .lc-central-hub      { width: 215px; height: 215px; }
  .lc-sector           { width: 96px;  height: 96px;  }
  .lc-sector-miniature { width: 78px;  height: 78px;  }
  .lc-sacred-spark     { left: 202px; }
}

/* ── Hub cross (same image as quote section) ─────────────────────── */

.lc-hub-cross {
  width: 2.2rem;
  height: 3.1rem;
  flex-shrink: 0;
}
.lc-hub-cross img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: .88;
}
.lc-hub-cross--sm {
  width: 1.5rem;
  height: 2.1rem;
}

/* ── "Полные молитвы" button inside hub ──────────────────────────── */

.lc-modal-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(119, 90, 25, .35);
  background: rgba(119, 90, 25, .06);
  color: #775a19;
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
  line-height: 1.4;
}
.lc-modal-open-btn:hover {
  background: rgba(119, 90, 25, .14);
  border-color: rgba(119, 90, 25, .6);
}
.dark .lc-modal-open-btn {
  border-color: rgba(233, 193, 118, .35);
  background: rgba(233, 193, 118, .08);
  color: #e9c176;
}
.dark .lc-modal-open-btn:hover {
  background: rgba(233, 193, 118, .18);
  border-color: rgba(233, 193, 118, .65);
}

/* ── Modal overlay ───────────────────────────────────────────────── */

.lc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(14, 18, 10, .65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s ease;
}
.lc-modal-overlay:not([hidden]) {
  opacity: 1;
}
.lc-modal-overlay[hidden] {
  display: none;
}

/* ── Modal panel ─────────────────────────────────────────────────── */

.lc-modal-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #faf7f0;
  border: 1px solid rgba(119, 90, 25, .35);
  box-shadow:
    0 0 0 4px rgba(119, 90, 25, .08),
    0 32px 80px -8px rgba(0, 0, 0, .40);
  overflow: hidden;
  transform: translateY(16px) scale(.97);
  transition: transform .30s cubic-bezier(.215, .61, .355, 1);
}
.lc-modal-overlay:not([hidden]) .lc-modal-panel {
  transform: translateY(0) scale(1);
}
.dark .lc-modal-panel {
  background: #171e12;
  border-color: rgba(233, 193, 118, .28);
  box-shadow:
    0 0 0 4px rgba(233, 193, 118, .06),
    0 32px 80px -8px rgba(0, 0, 0, .70);
}

/* Top gold line */
.lc-modal-panel::before {
  content: "";
  display: block;
  height: 2px;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent, #e9c176 30%, #775a19 50%, #e9c176 70%, transparent);
  opacity: .7;
}

/* ── Modal header ────────────────────────────────────────────────── */

.lc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(119, 90, 25, .12);
  flex-shrink: 0;
}
.dark .lc-modal-header {
  border-bottom-color: rgba(233, 193, 118, .12);
}

.lc-modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid rgba(119, 90, 25, .20);
  background: transparent;
  color: rgba(119, 90, 25, .65);
  border-radius: 2px;
  cursor: pointer;
  transition: all .2s ease;
}
.lc-modal-close-btn:hover {
  background: rgba(119, 90, 25, .08);
  color: #775a19;
  border-color: rgba(119, 90, 25, .4);
}
.dark .lc-modal-close-btn {
  border-color: rgba(233, 193, 118, .20);
  color: rgba(233, 193, 118, .6);
}
.dark .lc-modal-close-btn:hover {
  background: rgba(233, 193, 118, .10);
  color: #e9c176;
}

/* ── Time badge ──────────────────────────────────────────────────── */

.lc-modal-time-badge {
  padding: 6px 20px;
  border-bottom: 1px solid rgba(119, 90, 25, .08);
  background: rgba(119, 90, 25, .04);
  flex-shrink: 0;
}
.dark .lc-modal-time-badge {
  background: rgba(233, 193, 118, .04);
  border-bottom-color: rgba(233, 193, 118, .08);
}

/* ── Modal body (scrollable) ─────────────────────────────────────── */

.lc-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(119, 90, 25, .25) transparent;
}
.lc-modal-body::-webkit-scrollbar { width: 4px; }
.lc-modal-body::-webkit-scrollbar-track { background: transparent; }
.lc-modal-body::-webkit-scrollbar-thumb { background: rgba(119, 90, 25, .25); border-radius: 2px; }
.dark .lc-modal-body { scrollbar-color: rgba(233, 193, 118, .25) transparent; }

/* Prayer block formatting */
.lc-prayer-block {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(119, 90, 25, .10);
}
.lc-prayer-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.dark .lc-prayer-block {
  border-bottom-color: rgba(233, 193, 118, .10);
}
.lc-prayer-label {
  display: block;
  font-family: "PonomarUnicodeTTRegular", "Cormorant Garamond", serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .45em;
  color: rgba(119, 90, 25, .75);
  margin-bottom: 8px;
}
.dark .lc-prayer-label { color: rgba(233, 193, 118, .7); }
.lc-prayer-text-full {
  font-family: "PonomarUnicodeTTRegular", "Cormorant Garamond", serif;
  font-size: 16px;
  line-height: 1.75;
  color: #1b1c19;
  font-style: italic;
}
.dark .lc-prayer-text-full { color: #e8e3d8; }

/* ── Modal footer ────────────────────────────────────────────────── */

.lc-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(119, 90, 25, .10);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  background: rgba(119, 90, 25, .03);
}
.dark .lc-modal-footer {
  border-top-color: rgba(233, 193, 118, .10);
  background: rgba(233, 193, 118, .02);
}
.lc-modal-footer-btn {
  padding: 8px 20px;
  border: 1px solid rgba(119, 90, 25, .35);
  background: transparent;
  color: #775a19;
  cursor: pointer;
  transition: all .2s ease;
}
.lc-modal-footer-btn:hover {
  background: rgba(119, 90, 25, .08);
  border-color: #775a19;
}
.dark .lc-modal-footer-btn {
  border-color: rgba(233, 193, 118, .35);
  color: #e9c176;
}
.dark .lc-modal-footer-btn:hover {
  background: rgba(233, 193, 118, .10);
}

/* ── Responsive circle wrapper ───────────────────────────────────── */

/*
  Desktop (768px+): normal centred flex box, overflow visible so that
  sector nodes extending outside the artifact are fully clickable.

  Mobile (<768px): CSS `zoom` scales the whole circle (including its
  positioned children and their hit areas) proportionally to 92vw.
  `zoom` unlike `transform:scale` adjusts layout size too, so pointer
  events work without coordinate remapping.
  Users can still pinch-to-zoom the page for more detail.
*/

.lc-circ-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Extra padding-bottom so the bottom node (Полунощница at -12%)
     doesn't overlap the content below */
  padding-bottom: 80px;
  overflow: visible;
  /* width matches the original wrapper */
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}

@media (max-width: 767px) {
  /* Expand section to full viewport width, cancelling parent padding */
  #sutochny-krug {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
  }

  /* Hide decorative layers — keep circle, nodes and spark */
  .lc-sacred-bloom,
  .lc-trail-path,
  .lc-artifact-ornament,
  .lc-artifact .lc-spin-slow,
  .lc-artifact .lc-spin-slow-rev,
  .lc-byzantine {
    display: none !important;
  }

  /* Reset zoom, use natural sizing */
  .lc-circ-wrap {
    zoom: 1;
    width: 100%;
    max-width: none;
    /* Extra padding so top (−12%) and bottom (−12%) nodes don't clip */
    padding-top: 52px;
    padding-bottom: 52px;
    margin-bottom: 0;
  }

  /* Artifact: 74vw — leaves ≈13vw each side for the 15% sector overhangs */
  .lc-artifact {
    --lc-size: min(74vw, 320px);
  }

  /* Hub: ~55% of artifact */
  .lc-central-hub {
    width:  min(41vw, 178px);
    height: min(41vw, 178px);
  }

  /* Sector nodes */
  .lc-sector           { width: 78px;  height: 78px;  }
  .lc-sector-miniature { width: 64px;  height: 64px;  }
  /* Spark orbits just outside artifact edge: artifact = min(74vw,320px), radius ≈ half + 8px */
  .lc-sacred-spark {
    display: block;
    left: calc(min(37vw, 160px) + 8px);
  }

  /* Hub default state: tighter spacing and smaller text */
  #lc-center-default {
    gap: 3px;
    padding: 6px 8px;
  }
  .lc-hub-cross {
    width: 1.3rem;
    height: 1.85rem;
  }
  #lc-clock {
    font-size: 1.35rem;
    letter-spacing: 0.15em;
  }
  #lc-center-default .font-label {
    font-size: 7.5px;
    letter-spacing: 0.18em;
  }
  #lc-center-default .h-px {
    width: 36px;
  }

  /* Hub prayer state: compact layout */
  #lc-center-prayer {
    gap: 3px;
    padding: 6px 8px;
  }
  .lc-hub-cross--sm {
    width: 0.9rem;
    height: 1.25rem;
  }
  #lc-prayer-text {
    font-size: 10.5px;
    line-height: 1.4;
    letter-spacing: 0.01em;
  }
  .lc-modal-open-btn {
    font-size: 8.5px;
    padding: 3px 7px;
    letter-spacing: 0.12em;
  }
  #lc-center-prayer > p:last-child {
    font-size: 7.5px;
    letter-spacing: 0.12em;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lc-animate-bloom, .lc-animate-bloom-rev,
  .lc-spin-slow, .lc-spin-slow-rev,
  .lc-flicker-anim, .lc-sacred-spark {
    animation: none;
  }
}