/* STANISTROI / Stage 04: realized projects motion.
   Isolated to the projects section. Progressive enhancement. */

.ss-projects.ss-projects--motion .ss-projects__main-image {
  transform:scale(1.025);
  transition:transform 1000ms cubic-bezier(.19,.7,.2,1);
}
.ss-projects.ss-projects--motion.is-revealed .ss-projects__main-image {
  transform:scale(1);
}

.ss-projects.ss-projects--motion .ss-projects__eyebrow,
.ss-projects.ss-projects--motion .ss-projects__intro h2,
.ss-projects.ss-projects--motion .ss-projects__intro p:not(.ss-projects__eyebrow),
.ss-projects.ss-projects--motion .ss-projects__cta,
.ss-projects.ss-projects--motion .ss-projects__thumbnails {
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity 600ms ease,transform 680ms cubic-bezier(.19,.7,.2,1);
}

.ss-projects.ss-projects--motion.is-revealed .ss-projects__eyebrow,
.ss-projects.ss-projects--motion.is-revealed .ss-projects__intro h2,
.ss-projects.ss-projects--motion.is-revealed .ss-projects__intro p:not(.ss-projects__eyebrow),
.ss-projects.ss-projects--motion.is-revealed .ss-projects__cta,
.ss-projects.ss-projects--motion.is-revealed .ss-projects__thumbnails {
  opacity:1;
  transform:none;
}
.ss-projects.ss-projects--motion.is-revealed .ss-projects__eyebrow { transition-delay:80ms; }
.ss-projects.ss-projects--motion.is-revealed .ss-projects__intro h2 { transition-delay:160ms; }
.ss-projects.ss-projects--motion.is-revealed .ss-projects__intro p:not(.ss-projects__eyebrow) { transition-delay:265ms; }
.ss-projects.ss-projects--motion.is-revealed .ss-projects__cta { transition-delay:360ms; }
.ss-projects.ss-projects--motion.is-revealed .ss-projects__thumbnails { transition-delay:340ms; }

/* Crossfade image has the exact positioning and stacking of the main image.
   Main image and protective left-side gradient are never removed. */
.ss-projects__crossfade-image {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 47%;
  z-index:-2;
  opacity:0;
  pointer-events:none;
  transition:opacity 540ms ease-in-out;
}
.ss-projects__crossfade-image.is-visible { opacity:1; }

.ss-projects__cta-arrow {
  transition:transform 230ms cubic-bezier(.2,.7,.2,1),background-color 230ms ease,color 230ms ease;
}
.ss-projects__cta:hover .ss-projects__cta-arrow,
.ss-projects__cta:focus-visible .ss-projects__cta-arrow {
  transform:translateX(4px);
  color:#fff;
  background:rgba(198,83,48,.28);
}
.ss-projects__cta:focus-visible { outline:2px solid #f1ad88; outline-offset:6px; }

@media(prefers-reduced-motion:reduce) {
  .ss-projects.ss-projects--motion .ss-projects__main-image,
  .ss-projects.ss-projects--motion .ss-projects__eyebrow,
  .ss-projects.ss-projects--motion .ss-projects__intro h2,
  .ss-projects.ss-projects--motion .ss-projects__intro p:not(.ss-projects__eyebrow),
  .ss-projects.ss-projects--motion .ss-projects__cta,
  .ss-projects.ss-projects--motion .ss-projects__thumbnails {
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    transition-delay:0ms!important;
  }
  .ss-projects__crossfade-image { transition:none!important; }
  .ss-projects__cta-arrow { transition:none!important; }
  .ss-projects__cta:hover .ss-projects__cta-arrow,
  .ss-projects__cta:focus-visible .ss-projects__cta-arrow { transform:none!important; }
}