/* Soft scene dissolves and a visible entrance for every scene, including sparse ones. */

:root {
  --motion-ease: cubic-bezier(0.2, 0.62, 0.24, 1);
  --motion-copy-ease: cubic-bezier(0.16, 0.72, 0.22, 1);
}

#stage .scene {
  filter: blur(6px);
  transform: translate3d(0, 18px, 0) scale(1.012);
  transition:
    opacity 1200ms var(--motion-ease),
    transform 1250ms var(--motion-ease),
    filter 980ms ease;
  will-change: opacity, transform, filter;
}

#stage .scene.is-before {
  filter: blur(5px);
  transform: translate3d(0, -14px, 0) scale(0.992);
}

#stage .scene.is-after {
  filter: blur(6px);
  transform: translate3d(0, 18px, 0) scale(1.012);
}

#stage .scene.is-active {
  filter: blur(0);
  transform: none;
}

body.is-unlocked .scene.is-active [data-motion="backdrop"] {
  animation: scene-backdrop-in 1650ms var(--motion-ease) both;
}

body.is-unlocked .scene.is-active [data-motion="layout"] {
  animation: scene-layout-in 1200ms var(--motion-copy-ease) both;
  animation-delay: 110ms;
  transform-origin: center;
}

body.is-unlocked .scene.is-active [data-motion="chrome"] {
  animation: scene-chrome-in 820ms var(--motion-copy-ease) both;
  animation-delay: calc(90ms + var(--motion-order, 0) * 60ms);
}

body.is-unlocked .scene.is-active [data-motion="copy"] {
  animation: scene-copy-in 920ms var(--motion-copy-ease) both;
  animation-delay: calc(210ms + var(--motion-order, 0) * 95ms);
}

body.is-unlocked .scene.is-active [data-motion="photo"] {
  transform-origin: center;
  animation: scene-photo-develop 1080ms var(--motion-ease) both;
  animation-delay: calc(320ms + var(--motion-order, 0) * 170ms);
  will-change: opacity, translate, scale, filter;
}

body.is-unlocked .scene--finale.is-active .finale__message p {
  animation: finale-line-in 820ms var(--motion-copy-ease) both;
  animation-delay: calc(520ms + var(--paragraph-order, 0) * 170ms);
}

body.is-unlocked .scene--finale.is-active .finale__seal {
  animation: finale-seal-in 980ms var(--motion-ease) both;
  animation-delay: 880ms;
}

body.is-showing-prelude .scene.is-active [data-motion],
body.is-showing-prelude .scene--finale.is-active .finale__message p,
body.is-showing-prelude .scene--finale.is-active .finale__seal {
  animation-play-state: paused !important;
}

body.is-scene-handoff #stage .scene {
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

body.is-scene-handoff #stage .scene:not(.is-active) {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.is-scene-handoff #stage .scene.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

@keyframes scene-backdrop-in {
  from {
    opacity: 0.5;
    scale: 1.035;
    filter: blur(4px) saturate(0.78);
  }

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

@keyframes scene-layout-in {
  from {
    opacity: 0;
    translate: 0 24px;
    scale: 0.988;
    filter: blur(5px);
  }

  58% {
    opacity: 1;
    filter: blur(1px);
  }

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

@keyframes scene-chrome-in {
  from {
    opacity: 0;
    translate: 0 -7px;
    filter: blur(3px);
  }

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

@keyframes scene-copy-in {
  from {
    opacity: 0;
    translate: 0 18px;
    filter: blur(5px);
  }

  62% {
    opacity: 1;
    filter: blur(1px);
  }

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

@keyframes scene-photo-develop {
  0% {
    opacity: 0;
    translate: 0 26px;
    scale: 0.95;
    filter: blur(10px) saturate(0.62) contrast(0.94) brightness(1.06);
    clip-path: inset(4% 4% 7%);
  }

  48% {
    opacity: 1;
  }

  76% {
    filter: blur(1.6px) saturate(0.9) contrast(0.99) brightness(1.018);
  }

  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0) saturate(1) contrast(1) brightness(1);
    clip-path: inset(0);
  }
}

@keyframes finale-line-in {
  from {
    opacity: 0;
    translate: 0 12px;
    filter: blur(4px);
  }

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

@keyframes finale-seal-in {
  from {
    opacity: 0;
    translate: 0 -18px;
    scale: 0.72;
    filter: blur(4px);
  }

  64% {
    opacity: 1;
    translate: 0 2px;
    scale: 1.035;
    filter: blur(0);
  }

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

@media (max-width: 900px) {
  #stage .scene,
  #stage .scene.is-before,
  #stage .scene.is-after {
    filter: none;
    transform: none;
    transition: opacity 780ms ease;
    will-change: opacity;
  }

  body.is-unlocked .scene.is-active [data-motion="backdrop"] {
    animation: mobile-backdrop-in 900ms ease both;
  }

  body.is-unlocked .scene.is-active [data-motion="layout"] {
    animation: mobile-layout-in 860ms var(--motion-copy-ease) both;
  }

  body.is-unlocked .scene.is-active [data-motion="chrome"] {
    animation: mobile-copy-in 620ms ease both;
    animation-delay: calc(30ms + var(--motion-order, 0) * 40ms);
  }

  body.is-unlocked .scene.is-active [data-motion="copy"] {
    animation: mobile-copy-in 680ms var(--motion-copy-ease) both;
    animation-delay: calc(100ms + var(--motion-order, 0) * 55ms);
  }

  body.is-unlocked .scene.is-active [data-motion="photo"] {
    animation: mobile-photo-in 760ms ease both;
    animation-delay: calc(150ms + var(--motion-order, 0) * 95ms);
    will-change: opacity, translate;
  }

  body.is-unlocked .scene--finale.is-active .finale__message p {
    animation: mobile-copy-in 680ms var(--motion-copy-ease) both;
    animation-delay: calc(250ms + var(--paragraph-order, 0) * 110ms);
  }

  body.is-unlocked .scene--finale.is-active .finale__seal {
    animation: mobile-seal-in 620ms ease both;
    animation-delay: 600ms;
  }
}

@keyframes mobile-backdrop-in {
  from {
    opacity: 0.58;
  }

  to {
    opacity: 1;
  }
}

@keyframes mobile-layout-in {
  from {
    opacity: 0;
    translate: 0 14px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes mobile-copy-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes mobile-photo-in {
  from {
    opacity: 0;
    translate: 0 12px;
    scale: 0.992;
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes mobile-seal-in {
  from {
    opacity: 0;
    translate: 0 -7px;
    scale: 0.9;
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #stage .scene {
    filter: none;
    transition: none;
    will-change: auto;
  }

  body.is-unlocked .scene.is-active [data-motion],
  body.is-unlocked .scene--finale.is-active .finale__message p,
  body.is-unlocked .scene--finale.is-active .finale__seal {
    animation: none !important;
  }
}