.sv-cinematic-trigger {
  cursor: zoom-in;
}

.sv-cinematic-trigger:focus-visible {
  outline: 2px solid rgba(245, 238, 223, 0.92);
  outline-offset: 4px;
}

.sv-cinematic {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  opacity: 0;
  pointer-events: none;
  background: #020202;
  transition: opacity 260ms ease;
}

.sv-cinematic.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sv-cinematic[hidden] {
  display: none;
}

.sv-cinematic__ambient,
.sv-cinematic__shade,
.sv-cinematic__backdrop {
  position: absolute;
  inset: 0;
}

.sv-cinematic__ambient {
  inset: -8vmax;
  overflow: hidden;
  pointer-events: none;
}

.sv-cinematic__ambient-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(44px) saturate(0.96) brightness(0.48);
  opacity: 0.94;
  transform: scale(1.14);
}

.sv-cinematic__shade {
  background: rgba(0, 0, 0, 0.48);
  pointer-events: none;
}

.sv-cinematic__backdrop {
  background: rgba(0, 0, 0, 0.18);
}

.sv-cinematic__stage {
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(68px, calc(env(safe-area-inset-top) + 22px))
    max(24px, calc(env(safe-area-inset-right) + 18px))
    max(46px, calc(env(safe-area-inset-bottom) + 18px))
    max(24px, calc(env(safe-area-inset-left) + 18px));
}

.sv-cinematic__figure {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  transform: translateY(14px) scale(0.985);
  transition: transform 320ms ease;
}

.sv-cinematic.is-open .sv-cinematic__figure {
  transform: translateY(0) scale(1);
}

.sv-cinematic__image {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - clamp(32px, 6vw, 112px));
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.56);
  user-select: none;
}

.sv-cinematic--captionless .sv-cinematic__image {
  max-height: calc(100vh - 104px);
  max-height: calc(100dvh - 104px);
}

.sv-cinematic__caption {
  max-width: min(76ch, calc(100vw - 32px));
  margin: 14px auto 0;
  color: rgba(250, 248, 244, 0.78);
  font-size: clamp(0.82rem, 1.5vw, 0.98rem);
  line-height: 1.55;
  text-align: center;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.72);
}

.sv-cinematic__caption:empty {
  display: none;
}

.sv-cinematic__close,
.sv-cinematic__nav {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 8, 8, 0.46);
  color: rgba(250, 248, 244, 0.94);
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.sv-cinematic__close:hover,
.sv-cinematic__nav:hover {
  background: rgba(20, 20, 20, 0.72);
  border-color: rgba(255, 255, 255, 0.36);
}

.sv-cinematic__close:focus-visible,
.sv-cinematic__nav:focus-visible {
  outline: 2px solid rgba(245, 238, 223, 0.94);
  outline-offset: 3px;
}

.sv-cinematic__close {
  top: max(16px, calc(env(safe-area-inset-top) + 12px));
  right: max(16px, calc(env(safe-area-inset-right) + 12px));
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 1.55rem;
  line-height: 1;
}

.sv-cinematic__nav {
  top: 50%;
  width: 46px;
  height: 68px;
  border-radius: 999px;
  font-size: 2.3rem;
  line-height: 1;
  transform: translateY(-50%);
}

.sv-cinematic__nav--prev {
  left: max(16px, calc(env(safe-area-inset-left) + 12px));
}

.sv-cinematic__nav--next {
  right: max(16px, calc(env(safe-area-inset-right) + 12px));
}

.sv-cinematic__nav[hidden],
.sv-cinematic__counter[hidden] {
  display: none;
}

.sv-cinematic__counter {
  position: absolute;
  left: 50%;
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
  z-index: 4;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(250, 248, 244, 0.62);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.74);
}

body.sv-cinematic-lock {
  overflow: hidden;
}

@media (max-width: 760px) {
  .sv-cinematic__stage {
    padding:
      max(58px, calc(env(safe-area-inset-top) + 14px))
      max(8px, calc(env(safe-area-inset-right) + 8px))
      max(38px, calc(env(safe-area-inset-bottom) + 10px))
      max(8px, calc(env(safe-area-inset-left) + 8px));
  }

  .sv-cinematic__ambient {
    inset: -12vmax;
  }

  .sv-cinematic__ambient-image {
    filter: blur(34px) saturate(0.96) brightness(0.44);
    transform: scale(1.18);
  }

  .sv-cinematic__image {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 126px);
    max-height: calc(100dvh - 126px);
  }

  .sv-cinematic--captionless .sv-cinematic__image {
    max-height: calc(100vh - 86px);
    max-height: calc(100dvh - 86px);
  }

  .sv-cinematic__caption {
    max-width: calc(100vw - 20px);
    margin-top: 10px;
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .sv-cinematic__close {
    width: 42px;
    height: 42px;
  }

  .sv-cinematic__nav {
    width: 38px;
    height: 58px;
    font-size: 1.9rem;
    background: rgba(8, 8, 8, 0.38);
  }

  .sv-cinematic__nav--prev {
    left: max(8px, env(safe-area-inset-left));
  }

  .sv-cinematic__nav--next {
    right: max(8px, env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-cinematic,
  .sv-cinematic__figure,
  .sv-cinematic__close,
  .sv-cinematic__nav {
    transition: none;
  }
}