/* Точная двухрядная схема: пять настроек сверху, действия — только ниже. */
.slideshow-controls {
  container-type: inline-size
}

.slideshow-controls__row {
  display: grid !important;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 !important
}

.slideshow-controls__settings {
  display: flex;
  min-width: 0;
  align-items: end;
  flex-wrap: nowrap;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent)
}

.slideshow-controls__settings>.slideshow-controls__music {
  flex: 0 0 auto;
  min-height: 32px;
  white-space: nowrap
}

.slideshow-controls__track {
  flex: 1 1 124px;
  min-width: 98px
}

.slideshow-controls__transition {
  flex: 1 1 102px;
  min-width: 88px
}

.slideshow-controls__speed {
  flex: 0 1 92px;
  min-width: 82px
}

.slideshow-controls__track select,
.slideshow-controls__transition select,
.slideshow-controls__speed select {
  width: 100%
}

.slideshow-controls__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px
}

.slideshow-controls__fullscreen {
  min-width: 140px
}

.admin-session-viewer__slideshow {
  width: 100%;
  min-width: 0
}

.admin-session-viewer__slideshow>.slideshow-controls {
  width: 100%;
  max-width: none
}

@media(min-width:761px) {
  .admin-session-viewer__slideshow {
    width: min(100%, 540px);
    justify-self: end
  }
}

/* На странице сессии слайд-шоу получает всю строку под кнопкой возврата. */
@media(max-width:760px) {
  .admin-session-viewer__actions {
    width: 100%;
    align-self: stretch
  }

  .admin-session-viewer__actions>a.button {
    width: max-content
  }
}

@container(max-width:510px) {
  .slideshow-controls__settings {
    gap: 7px
  }

  .slideshow-controls__track {
    min-width: 82px
  }

  .slideshow-controls__transition {
    min-width: 78px
  }

  .slideshow-controls__speed {
    min-width: 70px
  }

  .slideshow-controls select {
    padding-inline: 6px;
    font-size: 11px
  }
}

@container(max-width:430px) {
  .slideshow-controls__settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end
  }

  .slideshow-controls__track,
  .slideshow-controls__transition,
  .slideshow-controls__speed {
    min-width: 0;
    flex: none
  }

  .slideshow-controls__track select,
  .slideshow-controls__transition select,
  .slideshow-controls__speed select {
    width: 100%
  }

  .slideshow-controls__actions .button {
    flex: 1 1 0
  }
}

/* «Эффекты» — явный пользовательский выбор, поэтому анимации применяются при включённом флажке. */
.photo-viewer figure {
  isolation: isolate
}

.photo-viewer [data-viewer-image] {
  position: relative;
  z-index: 1
}

.photo-viewer [data-viewer-image][data-viewer-transition] {
  will-change: transform, opacity, filter
}

.photo-viewer .viewer-transition-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  pointer-events: none;
  object-fit: contain;
  will-change: transform, opacity, filter
}

.photo-viewer .viewer-transition-overlay--fade {
  animation: viewer-outgoing-fade .72s cubic-bezier(.23, 1, .32, 1) both
}

.photo-viewer .viewer-transition-overlay--carousel {
  animation: viewer-outgoing-carousel .82s cubic-bezier(.23, 1, .32, 1) both
}

.photo-viewer .viewer-transition-overlay--from-left {
  animation: viewer-outgoing-to-right .78s cubic-bezier(.23, 1, .32, 1) both
}

.photo-viewer .viewer-transition-overlay--from-right {
  animation: viewer-outgoing-to-left .78s cubic-bezier(.23, 1, .32, 1) both
}

.photo-viewer .viewer-transition-overlay--from-top {
  animation: viewer-outgoing-to-bottom .78s cubic-bezier(.23, 1, .32, 1) both
}

.photo-viewer .viewer-transition-overlay--from-bottom {
  animation: viewer-outgoing-to-top .78s cubic-bezier(.23, 1, .32, 1) both
}

.photo-viewer .viewer-transition-overlay--zoom {
  animation: viewer-outgoing-zoom .8s cubic-bezier(.23, 1, .32, 1) both
}

.photo-viewer .viewer-transition-overlay--blur {
  animation: viewer-outgoing-blur .84s cubic-bezier(.23, 1, .32, 1) both
}

.photo-viewer [data-viewer-image].viewer-transition--fade {
  animation: viewer-image-fade .72s cubic-bezier(.23, 1, .32, 1) !important
}

.photo-viewer [data-viewer-image].viewer-transition--carousel {
  animation: viewer-image-carousel .82s cubic-bezier(.23, 1, .32, 1) !important
}

.photo-viewer [data-viewer-image].viewer-transition--from-left {
  animation: viewer-image-from-left .78s cubic-bezier(.23, 1, .32, 1) !important
}

.photo-viewer [data-viewer-image].viewer-transition--from-right {
  animation: viewer-image-from-right .78s cubic-bezier(.23, 1, .32, 1) !important
}

.photo-viewer [data-viewer-image].viewer-transition--from-top {
  animation: viewer-image-from-top .78s cubic-bezier(.23, 1, .32, 1) !important
}

.photo-viewer [data-viewer-image].viewer-transition--from-bottom {
  animation: viewer-image-from-bottom .78s cubic-bezier(.23, 1, .32, 1) !important
}

.photo-viewer [data-viewer-image].viewer-transition--zoom {
  animation: viewer-image-zoom .8s cubic-bezier(.23, 1, .32, 1) !important
}

.photo-viewer [data-viewer-image].viewer-transition--blur {
  animation: viewer-image-blur .84s cubic-bezier(.23, 1, .32, 1) !important
}

@keyframes viewer-image-fade {
  from {
    opacity: .03;
    filter: blur(4px)
  }

  to {
    opacity: 1;
    filter: blur(0)
  }
}

@keyframes viewer-image-carousel {
  from {
    opacity: .08;
    transform: perspective(1100px) rotateY(20deg) translateX(10%);
    filter: brightness(.72)
  }

  to {
    opacity: 1;
    transform: perspective(1100px) rotateY(0) translateX(0);
    filter: brightness(1)
  }
}

@keyframes viewer-image-from-left {
  from {
    opacity: .04;
    transform: translateX(-11%)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes viewer-image-from-right {
  from {
    opacity: .04;
    transform: translateX(11%)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes viewer-image-from-top {
  from {
    opacity: .04;
    transform: translateY(-9%)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes viewer-image-from-bottom {
  from {
    opacity: .04;
    transform: translateY(9%)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes viewer-image-zoom {
  from {
    opacity: .06;
    transform: scale(1.11)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes viewer-image-blur {
  from {
    opacity: .02;
    filter: blur(22px) saturate(.82)
  }

  to {
    opacity: 1;
    filter: blur(0) saturate(1)
  }
}

@keyframes viewer-outgoing-fade {
  to {
    opacity: 0;
    filter: blur(3px)
  }
}

@keyframes viewer-outgoing-carousel {
  to {
    opacity: 0;
    transform: perspective(1100px) rotateY(-20deg) translateX(-10%);
    filter: brightness(.72)
  }
}

@keyframes viewer-outgoing-to-left {
  to {
    opacity: 0;
    transform: translateX(-11%)
  }
}

@keyframes viewer-outgoing-to-right {
  to {
    opacity: 0;
    transform: translateX(11%)
  }
}

@keyframes viewer-outgoing-to-top {
  to {
    opacity: 0;
    transform: translateY(-9%)
  }
}

@keyframes viewer-outgoing-to-bottom {
  to {
    opacity: 0;
    transform: translateY(9%)
  }
}

@keyframes viewer-outgoing-zoom {
  to {
    opacity: 0;
    transform: scale(.92)
  }
}

@keyframes viewer-outgoing-blur {
  to {
    opacity: 0;
    filter: blur(22px) saturate(.82)
  }
}