.motion-ready { overflow-x: clip; }

.page-progress {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
  background: transparent;
}

.page-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red, #ef2325);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.back-to-top {
  position: fixed;
  z-index: 45;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid #ffffff55;
  border-radius: 50%;
  background: #171717e8;
  box-shadow: 0 12px 35px #0003;
  opacity: 0;
  transform: translateY(15px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  cursor: pointer;
}

.back-to-top[data-visible] { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:focus-visible { outline: 3px solid var(--red, #ef2325); outline-offset: 3px; }

[data-lightbox] { cursor: zoom-in; }
[data-lightbox]:focus-visible { outline: 4px solid var(--red, #ef2325); outline-offset: -4px; }

html.motion-ready main > [data-section-transition] {
  opacity: 0;
  transition: opacity .72s cubic-bezier(.22,.61,.36,1),
              transform .82s cubic-bezier(.22,.61,.36,1),
              filter .72s ease;
}

html.motion-ready [data-section-transition="rise"] { transform: translate3d(0, 28px, 0); }
html.motion-ready [data-section-transition="slide-left"] { transform: translate3d(-24px, 0, 0); }
html.motion-ready [data-section-transition="slide-right"] { transform: translate3d(24px, 0, 0); }
html.motion-ready [data-section-transition="focus"] { transform: scale(.985); filter: blur(4px); }

html.motion-ready main > [data-section-transition][data-section-visible] {
  opacity: 1;
  transform: none;
  filter: none;
}

html.motion-ready [data-section-transition] [data-reveal] {
  transform: translate3d(0, 10px, 0);
  transition-delay: var(--reveal-delay, 0ms);
  transition-duration: .58s;
}

html.motion-ready [data-section-transition] [data-reveal][data-visible] { transform: none; }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html.motion-ready {
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--section-scroll-offset, 0px);
  }

  html.motion-ready main > section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    scroll-margin-top: var(--section-scroll-offset, 0px);
  }
}

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: clamp(18px, 4vw, 55px);
  color: #fff;
  border: 0;
  background: #090909f7;
}

.lightbox[open] { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: clamp(8px, 2vw, 28px); }
.lightbox::backdrop { background: #000e; }
.lightbox figure { min-width: 0; margin: 0; display: grid; place-items: center; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 135px); object-fit: contain; box-shadow: 0 20px 70px #0008; }
.lightbox figcaption { width: min(850px, 100%); padding-top: 15px; display: flex; justify-content: space-between; gap: 20px; color: #ddd; font-size: .78rem; }
.lightbox figcaption small { color: #999; white-space: nowrap; }
.lightbox button { display: grid; place-items: center; color: #fff; border: 1px solid #ffffff55; background: #ffffff12; cursor: pointer; }
.lightbox button:hover, .lightbox button:focus-visible { color: #111; background: #fff; }
.lightbox-nav { width: 52px; height: 52px; border-radius: 50%; font-size: 1.2rem; }
.lightbox-close { position: absolute; z-index: 2; right: 22px; top: 18px; width: 46px; height: 46px; border-radius: 50%; font-size: 1.8rem; }

@media (max-width: 620px) {
  .back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
  .lightbox { padding: 70px 14px 24px; }
  .lightbox[open] { grid-template-columns: 1fr 1fr; align-content: center; }
  .lightbox figure { grid-column: 1 / -1; grid-row: 1; }
  .lightbox-nav { justify-self: center; margin-top: 12px; }
  .lightbox-prev { grid-column: 1; }
  .lightbox-next { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
  main > [data-section-transition], [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}