/*! © 2015–2026 YourWeb (yourweb.se). All rights reserved. Proprietary – see LICENSE.md */
/* Living windows and the full-size viewer.
   One component for the home carousel, /referenser/ and /en/work/. It carries
   its own colours because the host stylesheets name their tokens differently.

   A living window is one link: a small browser window whose page pans downward
   while the card is hovered, pressed, keyboard-focused or (on touch) centred.
   The tall preview sits in .lw__reel; moving the reel down by its own height
   (= the screen) and the image up by its own height lands the image bottom on
   the screen bottom without knowing either size. */

.lw {
  --lw-accent: 0 106 167;
  --lw-glow: 102 184 232;
  --lw-pan: 6s;
  --lw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: block;
  min-width: 0;
  border-radius: 1rem;
  color: #f5f1e6;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.lw:focus-visible {
  outline: 3px solid #fec400;
  outline-offset: 6px;
}

.lw__stage {
  position: relative;
  display: block;
}

/* The accent of each work, as light falling out from under its window.
   A plain gradient: no blur filter to rasterise for every card. */
.lw__stage::before {
  position: absolute;
  inset: 3% -10% -6%;
  z-index: 0;
  background: radial-gradient(closest-side, rgb(var(--lw-glow)) 58%, rgb(var(--lw-glow) / 0.4) 79%, rgb(var(--lw-glow) / 0));
  content: "";
  opacity: 0.2;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.lw__window {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: 0.9rem;
  background: #0b1e30;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 1.2rem 2.2rem -1rem rgba(0, 0, 0, 0.78);
  isolation: isolate;
  transition:
    transform 340ms var(--lw-ease),
    box-shadow 340ms ease;
}

.lw__bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 1.9rem;
  padding: 0 0.7rem;
  background: linear-gradient(180deg, #15293d, #0f2234);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

.lw__dots {
  display: flex;
  flex: none;
  gap: 0.3rem;
}

.lw__dots i {
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

.lw__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 0.4rem;
  min-width: 0;
  height: 1.2rem;
  margin-right: 1.65rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 241, 230, 0.86);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.lw__pill::before {
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgb(var(--lw-glow));
  content: "";
}

.lw__pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lw__screen {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 0 0 0.9rem 0.9rem;
  /* Shown while the preview loads: the work's own colour, never a black hole. */
  background:
    linear-gradient(168deg, rgb(var(--lw-accent) / 0.62), rgb(var(--lw-accent) / 0.3) 58%, rgb(var(--lw-accent) / 0.16)),
    #17324a;
  /* Safari: keeps the moving page inside the rounded corners above. */
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  isolation: isolate;
}

@supports not (aspect-ratio: 1 / 1) {
  .lw__screen::before {
    display: block;
    padding-top: 100%;
    content: "";
  }
}

.lw__reel {
  position: absolute;
  inset: 0;
  display: block;
  transition: transform 1100ms var(--lw-ease);
}

.lw__shot {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  transition:
    transform 1100ms var(--lw-ease),
    opacity 380ms ease;
  -webkit-user-drag: none;
  user-select: none;
}

/* Square archive images fill the screen instead of panning. */
.lw--tile .lw__shot {
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition:
    transform 700ms var(--lw-ease),
    opacity 380ms ease;
}

/* Previews fade in once decoded (scripts mark them; without scripts they just show). */
.lw-js .lw__shot:not([data-loaded]),
.lw__shot[data-deferred]:not([data-loaded]) {
  opacity: 0;
}

.no-js .lw__shot[data-deferred] {
  display: none;
}

/* A slim scrollbar thumb that travels with the page. */
.lw__thumb {
  position: absolute;
  top: 0.3rem;
  right: 0.28rem;
  z-index: 2;
  width: 0.2rem;
  height: 24%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 1px rgba(3, 16, 28, 0.3);
  opacity: 0;
  transition:
    transform 1100ms var(--lw-ease),
    opacity 300ms ease;
}

.lw__caption {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0.95rem 0.15rem 0;
}

.lw__eyebrow {
  display: block;
  margin: 0;
  overflow: hidden;
  color: rgb(var(--lw-glow));
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.lw .lw__name {
  display: block;
  margin: 0.3rem 0 0;
  overflow: hidden;
  color: #f5f1e6;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lw__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  color: rgba(226, 238, 248, 0.72);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  transition: color 200ms ease;
}

.lw__more::after {
  display: inline-block;
  content: "↗";
  transition: transform 260ms var(--lw-ease);
}

/* Alive: the page scrolls to its end, slowly; it returns fast when released. */
.lw--page.is-live .lw__reel,
.lw--page.is-pressed .lw__reel {
  transform: translate3d(0, 100%, 0);
  transition: transform var(--lw-pan) cubic-bezier(0.42, 0.03, 0.28, 1) 140ms;
}

.lw--page.is-live .lw__shot,
.lw--page.is-pressed .lw__shot {
  transform: translate3d(0, -100%, 0);
  transition:
    transform var(--lw-pan) cubic-bezier(0.42, 0.03, 0.28, 1) 140ms,
    opacity 380ms ease;
}

.lw--page.is-live .lw__thumb,
.lw--page.is-pressed .lw__thumb {
  opacity: 1;
  transform: translate3d(0, calc(316.67% - 0.6rem), 0);
  transition:
    transform var(--lw-pan) cubic-bezier(0.42, 0.03, 0.28, 1) 140ms,
    opacity 300ms ease;
}

/* Keyboard focus does the same. Kept apart from the rules above: a browser
   without :focus-visible (Safari before 15.4) drops the whole rule it is in. */
.lw--page:focus-visible .lw__reel {
  transform: translate3d(0, 100%, 0);
  transition: transform var(--lw-pan) cubic-bezier(0.42, 0.03, 0.28, 1) 140ms;
}

.lw--page:focus-visible .lw__shot {
  transform: translate3d(0, -100%, 0);
  transition:
    transform var(--lw-pan) cubic-bezier(0.42, 0.03, 0.28, 1) 140ms,
    opacity 380ms ease;
}

.lw--page:focus-visible .lw__thumb {
  opacity: 1;
  transform: translate3d(0, calc(316.67% - 0.6rem), 0);
  transition:
    transform var(--lw-pan) cubic-bezier(0.42, 0.03, 0.28, 1) 140ms,
    opacity 300ms ease;
}

.lw.is-live .lw__stage::before {
  opacity: 0.62;
}

.lw.is-live .lw__window {
  box-shadow:
    0 0 0 1px rgb(var(--lw-glow) / 0.6),
    0 1.4rem 2.4rem -1rem rgba(0, 0, 0, 0.8);
}

@media (hover: hover) and (pointer: fine) {
  .lw:hover .lw__window {
    box-shadow:
      0 0 0 1px rgb(var(--lw-glow) / 0.8),
      0 1.9rem 2.8rem -1.1rem rgba(0, 0, 0, 0.82);
    transform: translate3d(0, -0.4rem, 0);
  }

  .lw:hover .lw__stage::before {
    opacity: 0.78;
  }

  .lw:hover .lw__more {
    color: #fec400;
  }

  .lw:hover .lw__more::after {
    transform: translate(2px, -2px);
  }

  .lw--page:hover .lw__reel {
    transform: translate3d(0, 100%, 0);
    transition: transform var(--lw-pan) cubic-bezier(0.42, 0.03, 0.28, 1) 140ms;
  }

  .lw--page:hover .lw__shot {
    transform: translate3d(0, -100%, 0);
    transition:
      transform var(--lw-pan) cubic-bezier(0.42, 0.03, 0.28, 1) 140ms,
      opacity 380ms ease;
  }

  .lw--page:hover .lw__thumb {
    opacity: 1;
    transform: translate3d(0, calc(316.67% - 0.6rem), 0);
    transition:
      transform var(--lw-pan) cubic-bezier(0.42, 0.03, 0.28, 1) 140ms,
      opacity 300ms ease;
  }

  .lw--tile:hover .lw__shot {
    transform: scale(1.045);
  }

  /* A mouse press: the window settles under the pointer. */
  .lw:active .lw__window {
    transform: translate3d(0, -0.1rem, 0) scale(0.985);
    transition-duration: 110ms;
  }
}

/* Touch (and any pointer) press: set by scripts/showcase.js on pointerdown. */
.lw.is-pressed .lw__window {
  box-shadow:
    0 0 0 2px rgb(var(--lw-glow)),
    0 0.7rem 1.4rem -0.8rem rgba(0, 0, 0, 0.85);
  transform: scale(0.972);
  transition-duration: 120ms;
}

.lw.is-pressed .lw__stage::before {
  opacity: 0.85;
}

.lw.is-pressed .lw__more {
  color: #fec400;
}

/* The last card of a rail: the way into the whole archive. */
.lw--all .lw__screen {
  display: grid;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(0, 106, 167, 0.5), transparent 62%),
    linear-gradient(160deg, #0a2740, #04121f 78%);
  place-items: center;
}

.lw__mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6%;
  width: 66%;
  aspect-ratio: 1 / 1;
  transition: transform 600ms var(--lw-ease);
}

.lw__mosaic i {
  display: block;
  border-radius: 18%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.lw__mosaic i:nth-child(1) { background: rgba(254, 196, 0, 0.92); }
.lw__mosaic i:nth-child(3) { background: rgba(102, 184, 232, 0.5); }
.lw__mosaic i:nth-child(5) { background: rgba(245, 241, 230, 0.92); }
.lw__mosaic i:nth-child(6) { background: rgba(0, 106, 167, 0.85); }
.lw__mosaic i:nth-child(8) { background: rgba(254, 196, 0, 0.34); }

.lw__go {
  position: absolute;
  right: 9%;
  bottom: 9%;
  display: grid;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: #fec400;
  box-shadow: 0 0.8rem 1.6rem -0.5rem rgba(0, 0, 0, 0.6);
  color: #04121f;
  font-size: 1.25rem;
  font-weight: 700;
  place-items: center;
  transition: transform 320ms var(--lw-ease);
}

.lw--all .lw__more::after {
  content: "→";
}

@media (hover: hover) and (pointer: fine) {
  .lw--all:hover .lw__mosaic {
    transform: scale(1.05) rotate(-2deg);
  }

  .lw--all:hover .lw__go {
    transform: translateX(0.25rem);
  }

  .lw--all:hover .lw__more::after {
    transform: translateX(3px);
  }
}

/* One and two columns: the glow stays inside the page gutter (browsers
   without overflow: clip would otherwise let the page pan sideways). */
@media (max-width: 66rem) {
  .lw__stage::before {
    right: -4%;
    left: -4%;
  }
}

@media (max-width: 46rem) {
  .lw .lw__name {
    font-size: 1.22rem;
  }

  .lw__caption {
    padding-top: 0.85rem;
  }
}

/* ------------------------------------------------------------------------
   Full-size viewer: one <dialog> for every page that shows works.
   ------------------------------------------------------------------------ */

html.viewer-open,
html.viewer-open body {
  overflow: hidden;
}

.viewer {
  --v-accent: 0 106 167;
  --v-glow: 102 184 232;
  --v-progress: 0;
  --v-screen: 100vh;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #03101c;
  color: #f5f1e6;
  font-family: inherit;
  line-height: 1.4;
}

/* The height that is really visible on phones, where it exists. */
@supports (height: 100dvh) {
  .viewer {
    --v-screen: 100dvh;
  }
}

.viewer::backdrop {
  background: #03101c;
}

.viewer[open] {
  animation: viewer-in 220ms ease both;
}

.viewer.is-closing {
  animation: viewer-out 170ms ease both;
}

.viewer__scroll {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(70rem 26rem at 50% -6rem, rgb(var(--v-accent) / 0.34), transparent 70%),
    #03101c;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  scrollbar-width: thin;
  /* Scrolling and pinch zoom stay native (also sideways when zoomed in);
     scripts/showcase.js reads plain horizontal swipes from touch events. */
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

.viewer__bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.5rem;
  min-height: 3.9rem;
  padding: 0.55rem 0.75rem 0.55rem 1rem;
  /* On wide screens the bar lines up with the 1100 px sheet below it. */
  padding-top: max(0.55rem, env(safe-area-inset-top));
  padding-right: max(0.75rem, env(safe-area-inset-right), calc((100% - 68.75rem) / 2));
  padding-left: max(1rem, env(safe-area-inset-left), calc((100% - 68.75rem) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(3, 16, 28, 0.96);
}

.viewer__titles {
  flex: 1;
  min-width: 0;
}

.viewer__eyebrow {
  margin: 0;
  overflow: hidden;
  color: rgb(var(--v-glow));
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.viewer .viewer__title {
  margin: 0.12rem 0 0;
  overflow: hidden;
  color: #f5f1e6;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer__count {
  flex: none;
  margin-right: 0.3rem;
  color: rgba(226, 238, 248, 0.62);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.viewer__btn {
  display: inline-grid;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  place-items: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 140ms ease,
    opacity 180ms ease;
}

.viewer__btn:focus-visible {
  outline: 3px solid #fec400;
  outline-offset: 3px;
}

.viewer__btn:active:not(:disabled) {
  transform: scale(0.92);
}

.viewer__btn:disabled {
  cursor: default;
  opacity: 0.32;
}

.viewer__btn--close {
  border-color: rgba(254, 196, 0, 0.55);
  font-size: 1.35rem;
}

@media (hover: hover) and (pointer: fine) {
  .viewer__btn:hover:not(:disabled) {
    border-color: #fec400;
    background: #fec400;
    color: #04121f;
  }
}

/* How far the page has been read. */
.viewer__progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: rgb(var(--v-glow));
  transform: scaleX(var(--v-progress));
  transform-origin: left center;
}

.viewer__stage {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  padding: clamp(1rem, 2.6vw, 2.2rem) clamp(1rem, 3vw, 2.5rem) 0;
}

.viewer__sheet {
  position: relative;
  width: min(100%, 68.75rem);
  margin: 0;
  overflow: hidden;
  border-radius: 0.95rem;
  background: #0b1e30;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.13),
    0 2.2rem 5rem -1.8rem rgba(0, 0, 0, 0.85),
    0 0 6rem -1.5rem rgb(var(--v-accent) / 0.55);
}

.viewer[open] .viewer__sheet {
  animation: viewer-sheet-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.viewer__chrome {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: 2.4rem;
  padding: 0 0.95rem;
  background: linear-gradient(180deg, #15293d, #0f2234);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

.viewer__chrome .lw__dots i {
  width: 0.58rem;
  height: 0.58rem;
}

.viewer__chrome .lw__pill {
  flex: 0 1 22rem;
  height: 1.45rem;
  margin: 0 auto;
  font-size: 0.74rem;
}

.viewer__chrome .lw__pill::before {
  background: rgb(var(--v-glow));
}

.viewer__chrome::after {
  flex: none;
  width: 2.34rem;
  content: "";
}

.viewer__canvas {
  position: relative;
  display: block;
  background-color: #17324a;
  background-image: var(--v-placeholder, none), linear-gradient(168deg, rgb(var(--v-accent) / 0.5), rgb(var(--v-accent) / 0.16));
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto, cover;
}

/* The skeleton shimmer while the full page is on its way. */
.viewer__canvas.is-loading::after {
  position: absolute;
  inset: 0 0 auto;
  height: min(100%, 100vh);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
  background-size: 220% 100%;
  content: "";
  animation: viewer-shimmer 1.5s linear infinite;
  pointer-events: none;
}

.viewer__img {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  opacity: 0;
  transition: opacity 320ms ease;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.viewer__img.is-ready {
  opacity: 1;
}

.viewer__error {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  padding: 2rem;
  background: rgba(3, 16, 28, 0.82);
  color: #f5f1e6;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  place-content: center;
}

.viewer__error a {
  color: #fec400;
}

.viewer__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  width: min(100%, 68.75rem);
  padding: 1.6rem 0.15rem calc(2.2rem + env(safe-area-inset-bottom));
}

.viewer__hint {
  margin: 0;
  color: rgba(226, 238, 248, 0.6);
  font-size: 0.78rem;
  font-weight: 600;
}

.viewer__next {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  min-height: 3rem;
  padding: 0.7rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: #fec400;
  color: #04121f;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.viewer__next:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.viewer__next:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .viewer__next:hover {
    background: #ffe27a;
    transform: translateY(-2px);
  }
}

/* Archive works: one image, fitted to the screen. */
.viewer--image .viewer__stage {
  justify-content: center;
  padding-bottom: 0;
}

.viewer--image .viewer__sheet {
  width: min(100%, var(--v-max, 68.75rem), calc((var(--v-screen) - 13rem) * var(--v-ratio, 1)));
  background: #fff;
}

.viewer--image .viewer__chrome {
  display: none;
}

.viewer--image .viewer__end {
  padding-top: 1.2rem;
}

/* A one-off nudge that works can be swiped. */
.viewer__swipe-hint {
  position: fixed;
  bottom: calc(1.4rem + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 4;
  margin: 0;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(3, 16, 28, 0.92);
  box-shadow: 0 1rem 2rem -0.6rem rgba(0, 0, 0, 0.7);
  color: #f5f1e6;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.6rem);
  transition:
    opacity 300ms ease,
    transform 300ms ease;
}

.viewer__swipe-hint.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 46rem) {
  .viewer__bar {
    gap: 0.35rem;
  }

  .viewer__count {
    display: none;
  }

  .viewer__stage {
    padding: 0;
  }

  /* 100 % of the phone, edge to edge. */
  .viewer--page .viewer__sheet {
    border-radius: 0;
    box-shadow: none;
  }

  .viewer--page .viewer__chrome {
    display: none;
  }

  .viewer--image .viewer__stage {
    padding: 1rem 1rem 0;
  }

  .viewer--image .viewer__sheet {
    width: min(100%, calc((var(--v-screen) - 12rem) * var(--v-ratio, 1)));
  }

  .viewer__end {
    padding-inline: 1rem;
  }

  .viewer__next {
    flex: 1 1 100%;
    justify-content: center;
  }

  .viewer__hint {
    flex: 1 1 100%;
    text-align: center;
  }
}

@keyframes viewer-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes viewer-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes viewer-sheet-in {
  from { opacity: 0; transform: translate3d(0, 1.4rem, 0) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes viewer-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lw__reel,
  .lw__shot,
  .lw__thumb,
  .lw__window,
  .lw__mosaic,
  .lw__go {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }

  .lw__thumb {
    display: none;
  }

  .viewer,
  .viewer[open],
  .viewer.is-closing,
  .viewer[open] .viewer__sheet,
  .viewer__canvas.is-loading::after {
    animation: none !important;
  }

  .viewer__img,
  .viewer__swipe-hint {
    transition: none;
  }
}