.scene-fade {
  position: absolute;
  z-index: 7;
  right: 8%;
  bottom: 0;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(162, 75, 255, .22) 13%, #c13ad6 42%, #ff6fa5 58%, rgba(255, 111, 165, .19) 85%, transparent 100%);
  box-shadow: 0 0 16px rgba(209, 59, 208, .28);
  pointer-events: none;
}

.scene-note {
  margin: 0 0 18px;
  color: #d9cfdf;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-title .scene-note { color: #ddd4e2; }

.micro-copy {
  max-width: 240px;
  margin: 23px 0 0;
  color: rgba(239, 232, 244, .72);
  font-size: 15px;
  letter-spacing: .015em;
  line-height: 1.45;
}

.architecture-copy .micro-copy,
.sea-copy .micro-copy { max-width: 190px; }

.showcase-note,
.portrait-note {
  position: absolute;
  z-index: 4;
}

.showcase-note { left: 8%; top: 7%; }
.portrait-note { left: 8%; top: 7%; }

.closing-logo {
  display: block;
  width: 74px;
  height: 74px;
  margin: 0 0 18px;
  border-radius: 21px;
  filter: drop-shadow(0 10px 24px rgba(190, 58, 220, .3));
}

.closing-copy { top: 17%; transform: none; }
.closing-copy h2 { margin: 0; }

.craft-scene .scene-fade,
.studio-scene .scene-fade,
.architecture-scene .scene-fade,
.detail-scene .scene-fade,
.sea-scene .scene-fade { z-index: 8; }

.hero .scene-fade,
.showcase .scene-fade,
.portrait-scene .scene-fade,
.closing-scene .scene-fade { z-index: 5; }

.closing-scene .scene-fade { right: 7%; left: 7%; }

@media (min-width: 761px) {
  .hero-image {
    object-position: center;
    transform: translateX(100px) scale(1);
    transform-origin: center;
    animation: hero-frame-in 1.45s cubic-bezier(.17, .75, .23, 1) both !important;
  }
}

@keyframes hero-frame-in {
  from { transform: translateX(100px) scale(1.035); }
  to { transform: translateX(100px) scale(1); }
}

/* Large image entrances should never flash or jump while scrolling. */
.showcase.is-active .showcase-screen,
.craft-scene.is-active .craft-image img,
.studio-scene.is-active .studio-image,
.architecture-scene.is-active > img,
.sea-scene.is-active > img,
.closing-scene.is-active .closing-background,
.closing-scene.is-active .closing-copy {
  animation: none !important;
}

.closing-scene.is-active .closing-background {
  animation: closing-image-settle 1.2s cubic-bezier(.2, .72, .2, 1) both !important;
}

@keyframes closing-image-settle {
  from { transform: scale(1.025) translateY(16px); }
  to { transform: scale(1) translateY(0); }
}

@media (max-width: 760px) {
  .scene-fade { right: 20px; left: 20px; }
  .scene-note { margin-bottom: 14px; font-size: 10px; letter-spacing: .12em; }
  .micro-copy { margin-top: 17px; font-size: 14px; }
  .showcase-note { left: 20px; top: 5%; }
  .portrait-note { left: 20px; top: 5%; }
  .closing-logo { width: 58px; height: 58px; margin-bottom: 15px; border-radius: 17px; }
  .closing-copy { top: auto; }
}