@view-transition {
  navigation: auto;
}

.cinema-hero .cinema-shade::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgb(5 22 30 / 11%);
}

.moments-intro {
  max-inline-size: 47ch;
  margin: 14px 0 0;
  color: #486360;
  font-size: clamp(.92rem, 1.5vw, 1rem);
  line-height: 1.6;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) {
    animation-duration: 540ms;
  }

  ::view-transition {
    background: #e8efeb;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
  }

  ::view-transition-old(root) {
    transform-origin: left center;
    animation: page-fold-out 540ms cubic-bezier(.44,.08,.26,1) both;
  }

  ::view-transition-new(root) {
    transform-origin: right center;
    animation: page-fold-in 540ms cubic-bezier(.44,.08,.26,1) both;
  }

  .page-motion-enter #main {
    transform-origin: right center;
    animation: page-settle 430ms cubic-bezier(.2,.72,.2,1) both;
  }

  .camp-motion-visible {
    animation: camp-scroll-in 480ms cubic-bezier(.2,.72,.2,1) both;
    animation-delay: var(--camp-motion-delay, 0ms);
  }

  .faq details[open] > p {
    animation: camp-scroll-in 250ms ease-out both;
  }

  .faq summary > span {
    transition: rotate 240ms ease;
  }

  .faq details[open] > summary > span {
    rotate: 45deg;
  }

  .rail-controls button:not(:disabled) {
    transition: background-color 200ms ease, translate 200ms ease;
  }

  .rail-controls button:not(:disabled):active {
    translate: 0 2px;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  main :is(figure, .training-panorama):has(> img[data-photo-id]) {
    overflow: clip;
  }

  main :is(figure, .training-panorama) > img[data-photo-id] {
    transition: scale 500ms cubic-bezier(.2,.72,.2,1), transform 500ms cubic-bezier(.2,.72,.2,1);
  }

  main :is(figure, .training-panorama):hover > img[data-photo-id],
  main a:focus-visible figure > img[data-photo-id] {
    scale: 1.045;
  }

  main :is(.rail-photo, .archive-frame):hover > img[data-photo-id] {
    transform: none;
  }

  main .photo-rail.dragging figure > img[data-photo-id] {
    scale: 1;
    transform: none;
  }
}

@media (max-width: 560px) {
  .moments-intro {
    margin-top: 10px;
  }
}

.cursor-bubbles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 30;
}

@keyframes page-fold-out {
  0% { transform: perspective(1600px) rotateY(0); filter: brightness(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: perspective(1600px) rotateY(-18deg) translateX(-5%); filter: brightness(.76); opacity: 0; }
}

@keyframes page-fold-in {
  0% { clip-path: inset(0 0 0 100%); transform: perspective(1600px) rotateY(12deg) translateX(2%); opacity: .9; }
  100% { clip-path: inset(0); transform: none; opacity: 1; }
}

@keyframes page-settle {
  from { opacity: .55; clip-path: inset(0 0 0 12%); transform: perspective(1600px) rotateY(5deg); }
  to { opacity: 1; clip-path: inset(0); transform: none; }
}

@keyframes camp-scroll-in {
  from { opacity: .6; translate: 0 15px; }
  to { opacity: 1; translate: 0; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s !important;
  }

  .cursor-bubbles {
    display: none;
  }
}