/* stage-59-calendar-month-backgrounds: month-aware cinematic calendar image layer */

.calendar-sheet {
  --focus-calendar-image-visibility: 1;
  --focus-calendar-image-saturation: 1.26;
  --focus-calendar-image-contrast: 1.08;
  --focus-calendar-image-brightness: 1.06;
  --focus-calendar-image-position: center 50%;
  --focus-calendar-image-scale: 1.01;
  --focus-calendar-cell-image-opacity: 0.13;
  --focus-calendar-cell-image-border: rgba(255, 255, 255, 0.24);
  --focus-calendar-cell-image-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

.calendar-sheet::before {
  background-position: var(--focus-calendar-image-position);
  opacity: var(--focus-calendar-image-visibility);
  filter: saturate(var(--focus-calendar-image-saturation)) contrast(var(--focus-calendar-image-contrast)) brightness(var(--focus-calendar-image-brightness));
  transform: scale(var(--focus-calendar-image-scale));
}

.calendar-sheet::after {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.10), transparent 24%),
    radial-gradient(circle at 76% 20%, color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 16%, transparent), transparent 32%),
    var(--calendar-season-noise),
    linear-gradient(180deg, rgba(10, 9, 8, 0.02), rgba(10, 9, 8, 0.16) 72%, rgba(10, 9, 8, 0.22));
  backdrop-filter: blur(0.55px);
  -webkit-backdrop-filter: blur(0.55px);
  opacity: 0.82;
}

.calendar-sheet .focus-calendar-cell {
  border-color: var(--focus-calendar-cell-image-border);
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.12), transparent 42%),
    rgba(255, 255, 255, var(--focus-calendar-cell-image-opacity));
  box-shadow:
    var(--focus-calendar-cell-image-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px) saturate(1.08);
  -webkit-backdrop-filter: blur(4px) saturate(1.08);
}

.calendar-sheet .focus-calendar-cell:is(:hover, :focus-visible) {
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.18), transparent 44%),
    color-mix(in srgb, rgba(255, 255, 255, var(--focus-calendar-cell-image-opacity)) 74%, var(--calendar-season-accent, var(--primary)) 26%);
}

.calendar-sheet .focus-calendar-cell-muted {
  background: rgba(12, 11, 10, 0.055);
}

.calendar-sheet .focus-calendar-cell-weekend {
  background:
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--stage4-calendar-coral, #d96b5f) 16%, transparent), transparent 48%),
    rgba(255, 255, 255, calc(var(--focus-calendar-cell-image-opacity) + 0.015));
}

.calendar-sheet .focus-calendar-cell-current {
  background:
    radial-gradient(circle at 74% 18%, color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 32%, transparent), transparent 48%),
    rgba(255, 255, 255, calc(var(--focus-calendar-cell-image-opacity) + 0.035));
}

.calendar-sheet .focus-calendar-cell-selected {
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.26), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 38%, transparent), rgba(22, 18, 14, 0.22));
}

.calendar-sheet[data-month="01"] {
  --focus-calendar-image-position: center 54%;
  --focus-calendar-image-saturation: 1.16;
  --focus-calendar-image-brightness: 1.08;
}

.calendar-sheet[data-month="02"] {
  --focus-calendar-image-position: center 52%;
  --focus-calendar-image-saturation: 1.14;
  --focus-calendar-image-brightness: 1.08;
}

.calendar-sheet[data-month="03"] {
  --focus-calendar-image-position: center 48%;
  --focus-calendar-image-saturation: 1.22;
  --focus-calendar-image-brightness: 1.07;
}

.calendar-sheet[data-month="04"] {
  --focus-calendar-image-position: center 43%;
  --focus-calendar-image-saturation: 1.24;
  --focus-calendar-image-brightness: 1.08;
}

.calendar-sheet[data-month="05"] {
  --focus-calendar-image-position: center 44%;
  --focus-calendar-image-saturation: 1.28;
  --focus-calendar-image-brightness: 1.08;
}

.calendar-sheet[data-month="06"] {
  --focus-calendar-image-position: center 50%;
  --focus-calendar-image-saturation: 1.30;
  --focus-calendar-image-brightness: 1.07;
}

.calendar-sheet[data-month="07"] {
  --focus-calendar-image-position: center 56%;
  --focus-calendar-image-saturation: 1.30;
  --focus-calendar-image-brightness: 1.06;
}

.calendar-sheet[data-month="08"] {
  --focus-calendar-image-position: center 52%;
  --focus-calendar-image-saturation: 1.24;
  --focus-calendar-image-brightness: 1.05;
}

.calendar-sheet[data-month="09"] {
  --focus-calendar-image-position: center 50%;
  --focus-calendar-image-saturation: 1.26;
  --focus-calendar-image-brightness: 1.06;
}

.calendar-sheet[data-month="10"] {
  --focus-calendar-image-position: center 54%;
  --focus-calendar-image-saturation: 1.20;
  --focus-calendar-image-brightness: 1.05;
}

.calendar-sheet[data-month="11"] {
  --focus-calendar-image-position: center 50%;
  --focus-calendar-image-saturation: 1.12;
  --focus-calendar-image-brightness: 1.08;
}

.calendar-sheet[data-month="12"] {
  --focus-calendar-image-position: center 54%;
  --focus-calendar-image-saturation: 1.15;
  --focus-calendar-image-brightness: 1.08;
}

:root[data-theme="dark"] .calendar-sheet {
  --focus-calendar-cell-image-opacity: 0.105;
  --focus-calendar-cell-image-border: rgba(255, 255, 255, 0.18);
}

:root[data-theme="dark"] .calendar-sheet::after {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.08), transparent 24%),
    radial-gradient(circle at 76% 20%, color-mix(in srgb, var(--calendar-season-accent, var(--primary)) 14%, transparent), transparent 32%),
    var(--calendar-season-noise),
    linear-gradient(180deg, rgba(4, 5, 9, 0.08), rgba(4, 5, 9, 0.24) 72%, rgba(4, 5, 9, 0.32));
}

@media (max-width: 760px) {
  .calendar-sheet {
    --focus-calendar-image-scale: 1.025;
    --focus-calendar-cell-image-opacity: 0.15;
  }

  .calendar-sheet::after {
    backdrop-filter: blur(0.35px);
    -webkit-backdrop-filter: blur(0.35px);
  }

  .calendar-sheet .focus-calendar-cell {
    backdrop-filter: blur(3px) saturate(1.06);
    -webkit-backdrop-filter: blur(3px) saturate(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-sheet::before {
    transition: none;
  }
}