/* Season ribbon «Когда происходит». Markup: tools/season_ribbon.py. */
@property --sr-focus {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
.sr {
  --sr-ink: var(--ink, #2a2329);
  --sr-muted: var(--muted, #8a7f83);
  --sr-accent: var(--grape, #5a2f6b);
  --sr-line: var(--line, #e3dccf);
  --sr-surface: var(--surface, #fffdf8);
  --sr-hl: rgba(183, 157, 99, .18);
  margin: 0;
}
.sr-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.sr-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Below this width the ribbon scrolls inside itself instead of squeezing the stages. */
.sr-frame { position: relative; min-width: 1120px; overflow: clip; }

.sr-hl {
  position: absolute; top: 0; bottom: 0;
  background: none;
  opacity: 0; transition: opacity .2s; cursor: pointer;
}
.sr-hl::before {
  content: ""; position: absolute; inset: 6px -26px 0;
  background: radial-gradient(ellipse at 50% 48%, var(--sr-hl), transparent 72%);
  pointer-events: none;
}
.sr-hl:hover { opacity: .45; }
.sr-hl.is-active { opacity: 1; }

.sr-months, .sr-stages { position: relative; list-style: none; margin: 0; padding: 0; }
.sr-months { height: 24px; pointer-events: none; }
.sr-months li {
  position: absolute; top: 6px; transform: translateX(-50%);
  font: 10px/1 var(--sans, system-ui, sans-serif); color: var(--sr-muted); white-space: nowrap;
}

.sr-art { position: relative; aspect-ratio: 1200 / 280; pointer-events: none; }
.sr-art img { position: absolute; display: block; max-width: none; user-select: none; }
.sr-scenery {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .24s, visibility 0s .24s;
}
.sr-scenery.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
/* A pale vineyard landscape recedes behind the painted botanical details. */
.sr-art .sr-backdrop {
  inset: 0; width: 100%; height: 100%; object-fit: fill;
  opacity: .35; filter: grayscale(1); mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
}
/* Color returns locally to the same drawing, with softly feathered edges. */
.sr-art .sr-backdrop-focus {
  opacity: .85; filter: saturate(.5);
  --sr-focus-mask: radial-gradient(ellipse 10% 90% at var(--sr-focus) 55%, #000 15%, transparent 100%);
  -webkit-mask-image: var(--sr-focus-mask);
  mask-image: var(--sr-focus-mask);
  transition: --sr-focus .28s ease-out;
}
/* The thick winter arm grows out of the existing cane without a hard cut edge. */
.sr-dormant {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%);
  mask-image: linear-gradient(90deg, transparent, #000 13%);
}
/* Cane pieces blend into each other; the ribbon fades in and out at its ends. */
.sr-fade {
  --sr-mask: linear-gradient(90deg, transparent 0, #000 var(--fade, 0%), #000 calc(100% - var(--fade-out, 0%)), transparent 100%);
  -webkit-mask-image: var(--sr-mask);
  mask-image: var(--sr-mask);
}

.sr-stages { height: 110px; }
.sr-stages li { position: absolute; top: 2px; transform: translateX(-50%); }
.sr-stages button {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 0; background: none; padding: 2px 6px; cursor: pointer;
  min-height: 44px;
  font: 17px/1.25 var(--serif, Georgia, serif); color: var(--sr-ink); white-space: nowrap;
}
.sr-stages li.is-low button { gap: 38px; }
.sr-stages i {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--sr-surface); border: 2px solid var(--sr-muted);
  box-sizing: border-box; transition: transform .15s;
}
.sr-stages button:hover i { transform: scale(1.2); }
.sr-stages button.is-active { color: var(--sr-accent); font-weight: 600; }
.sr-stages button.is-active i { background: var(--sr-accent); border-color: var(--sr-accent); box-shadow: 0 0 0 3px var(--sr-surface), 0 0 0 4px var(--sr-accent); }
.sr-stages button:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .sr-hl, .sr-stages i, .sr-scenery, .sr-art .sr-backdrop-focus { transition: none; }
}