feat: варианты анимации слайдера (slide/fade/none), пилюли-точки, blur-фон просмотрщика, фикс открытия в natural-слайдерах

public/css/main.css

@@ -2106,9 +2106,9 @@ img[data-image-viewer]:not([data-src]):focus-visible {
   position: fixed;
   inset: 0;
   z-index: 1400;
-  background: color-mix(in srgb, var(--bg) 58%, black);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
+  background: color-mix(in srgb, var(--bg) 72%, transparent);
+  backdrop-filter: blur(22px) saturate(130%);
+  -webkit-backdrop-filter: blur(22px) saturate(130%);
   opacity: 0;
   transition: opacity 0.18s ease;
 }
@@ -2369,8 +2369,8 @@ html[data-theme="dark"] {
 }
 
 [class*="btn"]:active:not(:disabled) .icon-press,
-[class*="nav"]:active:not(:disabled) .icon-press,
 .btn:active:not(:disabled) .icon-press,
+.case-image-viewer__btn--nav:active:not(:disabled) .icon-press,
 .case-media-slider__nav.is-pressed:not(:disabled) .icon-press {
   transform: scale(0.82);
 }
@@ -2471,14 +2471,14 @@ html[data-theme="dark"] {
 }
 
 .case-image-viewer__dot {
-  width: 0.5rem;
-  height: 0.5rem;
+  width: 0.375rem;
+  height: 0.375rem;
   padding: 0;
   border: none;
   border-radius: 50%;
   background: color-mix(in srgb, var(--text-muted) 40%, transparent);
   cursor: pointer;
-  transition: background 0.18s ease, transform 0.18s ease;
+  transition: background 0.22s ease, width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), border-radius 0.28s ease;
 }
 
 .case-image-viewer__dot:hover,
@@ -2488,7 +2488,8 @@ html[data-theme="dark"] {
 
 .case-image-viewer__dot.is-active {
   background: var(--accent);
-  transform: scale(1.25);
+  width: calc(0.375rem * 2.6);
+  border-radius: 999px;
 }
 
 @media (max-width: 640px) {
@@ -5345,8 +5346,8 @@ body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack
   --slider-radius: var(--radius-card);
   --slider-ctrl-size: 2.5rem;
   --slider-ctrl-inset: 0.75rem;
-  --slider-dot-size: 0.5rem;
-  --slider-dot-gap: 0.5rem;
+  --slider-dot-size: 0.375rem;
+  --slider-dot-gap: 0.375rem;
   position: relative;
   margin: 0.85rem 0 1.2rem;
   border-radius: var(--slider-radius);
@@ -5521,7 +5522,7 @@ body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack
   border-radius: 50%;
   background: color-mix(in srgb, var(--text-muted) 40%, transparent);
   cursor: pointer;
-  transition: background 0.18s ease, transform 0.18s ease;
+  transition: background 0.22s ease, width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), border-radius 0.28s ease;
 }
 
 .case-media-slider__dot:hover,
@@ -5531,7 +5532,8 @@ body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack
 
 .case-media-slider__dot.is-active {
   background: var(--accent);
-  transform: scale(1.35);
+  width: calc(var(--slider-dot-size) * 2.6);
+  border-radius: 999px;
 }
 
 /* Неактивные слайды: скрыты от скринридеров (aria-hidden в JS), но остаются видимыми,
@@ -5541,30 +5543,52 @@ body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack
 }
 
 /* Настраиваемая ширина — как у статичных .case-media (--wide / --content / --natural).
-   Кнопки пред/след внутри viewport, поэтому не участвуют в расчёте ширины. */
-.case-media-slider.case-media--content,
-.case-media-slider.case-media--wide {
+   Кнопки пред/след внутри viewport, поэтому не участвуют в расчёте ширины.
+   Высота — автоматически по контенту. */
+
+/* Базовый / --content: встроен в колонку контента, не шире её */
+.case-media-slider,
+.case-media-slider.case-media--content {
   display: block;
-}
-
-.case-media-slider.case-media--content .case-media-slider__viewport,
-.case-media-slider.case-media--wide .case-media-slider__viewport {
   width: 100%;
+  max-width: 100%;
+  margin-inline: auto;
 }
 
+/* --wide: как одиночные wide-картинки страницы — выходит за колонку, центр по вьюпорту */
+.case-media-slider.case-media--wide {
+  width: min(calc(100vw - (max(var(--space), env(safe-area-inset-left)) + max(var(--space), env(safe-area-inset-right)))), calc(100% + 8rem));
+  max-width: none;
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
+/* --natural / auto: ширина по картинке (--slider-natural-w или авто из JS), не больше ширины экрана */
 .case-media-slider.case-media--natural {
   display: block;
+  width: min(var(--slider-natural-w, 100%), 100vw);
+  max-width: 100vw;
+  margin-left: 50%;
+  transform: translateX(-50%);
 }
 
+.case-media-slider .case-media-slider__viewport,
+.case-media-slider.case-media--content .case-media-slider__viewport,
+.case-media-slider.case-media--wide .case-media-slider__viewport,
 .case-media-slider.case-media--natural .case-media-slider__viewport {
   width: auto;
   max-width: 100%;
   margin-inline: auto;
 }
 
+.case-media-slider .case-media-slider__slide img,
+.case-media-slider.case-media--content .case-media-slider__slide img,
+.case-media-slider.case-media--wide .case-media-slider__slide img,
 .case-media-slider.case-media--natural .case-media-slider__slide img {
   width: auto;
   max-width: 100%;
+  max-height: none;
+  height: auto;
   margin-inline: auto;
 }
 
@@ -5573,3 +5597,64 @@ body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack
     transition: none;
   }
 }
+
+/* Режимы анимации переключения кадров.
+   slide — сдвиг трека (по умолчанию); fade — кроссфейд активного слайда;
+   none — мгновенная смена без переходов. */
+.case-media-slider--anim-fade .case-media-slider__track {
+  display: block;
+  transform: none !important;
+}
+
+.case-media-slider--anim-fade .case-media-slider__slide {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.45s ease;
+  pointer-events: none;
+}
+
+.case-media-slider--anim-fade .case-media-slider__slide.is-active {
+  position: relative;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.case-media-slider--anim-none .case-media-slider__track {
+  transition: none !important;
+}
+
+.case-media-slider--anim-none .case-media-slider__slide {
+  transition: none !important;
+}
+
+/* Переключатель режима анимации (для демо-примера) */
+.case-media-slider__anim-switch {
+  display: inline-flex;
+  gap: 0.4rem;
+  margin: 0.4rem 0 0.2rem;
+  padding: 0;
+}
+
+.case-media-slider__anim-switch button {
+  font: inherit;
+  font-size: 0.8rem;
+  padding: 0.25rem 0.7rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
+}
+
+.case-media-slider__anim-switch button:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.case-media-slider__anim-switch button[aria-pressed="true"] {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}