/* ==========================================================================
   Screen photos: a real-world photo whose screen is transparent, with the ad
   layered behind it. Anything in front of the screen (a hand, a frame) stays
   in front. The square photo is cover-fitted to its box; --fx / --fy set the
   crop's focal point. Used by the homepage, solution pages and industry pages.
   ========================================================================== */
.screen-photo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  background: #0b0b10;
}
.screen-photo__in {
  --s: max(100cqw, 100cqh);
  position: absolute;
  display: block;
  left: calc((100cqw - var(--s)) * var(--fx, .5));
  top: calc((100cqh - var(--s)) * var(--fy, .5));
  width: var(--s);
  height: var(--s);
}
.screen-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen-photo__ad { position: absolute; object-fit: cover; }

/* The screen powers on when it comes into view (js/screens.js adds .is-live; without it the ad simply shows) */
.screen-photo.is-waiting .screen-photo__ad { opacity: 0; }
.screen-photo.is-live .screen-photo__ad { animation: screen-photo-on .9s linear both; }
@keyframes screen-photo-on {
  0%   { opacity: 0; filter: brightness(1.8); }
  22%  { opacity: .7; }
  36%  { opacity: .2; }
  62%  { opacity: .95; }
  100% { opacity: 1; filter: none; }
}
/* A screen with alternate creatives: the alternates sit on top of the first ad and fade in and out (js/screens.js) */
.screen-photo .screen-photo__alt, .screen-photo.is-live .screen-photo__alt { opacity: 0; animation: none; transition: opacity 1.1s ease; }
.screen-photo .screen-photo__alt.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .screen-photo.is-waiting .screen-photo__ad:not(.screen-photo__alt) { opacity: 1; }
  .screen-photo.is-live .screen-photo__ad { animation: none; }
}