/* Showreel grow (Alture a-46). A tall track with a sticky full-screen stage; the box in the middle grows with the
   scroll from a small window to the full screen. part.js writes the box size and the four custom properties below
   every frame; these defaults are the box's start state (progress 0). */
.sgrow {
  --sgrow-track: 200rem;                 /* scroll length of the whole move (Alture .showreel_wrap: 200rem) */
  --sgrow-radius: 1rem;                  /* written by part.js: 1rem -> 2rem */
  --sgrow-pad: 1rem;                     /* written by part.js: 1rem -> 1.5rem (insets the frame inside the box) */
  --sgrow-media-scale: 1.4;              /* written by part.js: 1.4 -> 1 */
  --sgrow-play-opacity: 0;               /* written by part.js: 0 -> 1 between 35% and 45% */
  --sgrow-play-y: 1.5rem;                /* written by part.js: 1.5rem -> 0 over the same stretch */
  --sgrow-side-size: 3.5rem;             /* the words either side of the box */
  --sgrow-side-gap: .25rem;
  --sgrow-static-ratio: 2;               /* aspect ratio when the move is off (narrow screens, reduced motion) */
  position: relative; height: var(--sgrow-track);
  overflow: clip;                        /* the side words never cause sideways scroll; clip keeps sticky working */
}
.sgrow__sticky {
  position: sticky; top: 0; height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.sgrow__box {
  position: relative; box-sizing: border-box; flex: none;
  width: 12vw; height: 10vh;             /* replaced by part.js with px every frame */
  padding: var(--sgrow-pad);
  display: flex; align-items: center; justify-content: center;
  color: inherit; text-decoration: none;
}
.sgrow__frame {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--sgrow-radius); overflow: clip;
  display: flex; align-items: center; justify-content: center;
}
/* The media is always viewport-sized and centred, so the growing box is an aperture onto a still picture,
   never a thumbnail being stretched. */
.sgrow__media {
  flex: none; width: 100vw; height: 100vh; object-fit: cover; display: block;
  transform: scale(var(--sgrow-media-scale)); will-change: transform;
}
.sgrow__play {
  position: absolute; display: flex; align-items: center; justify-content: center; gap: 1rem;
  opacity: var(--sgrow-play-opacity); transform: translateY(var(--sgrow-play-y));
}
.sgrow__side {
  position: absolute; white-space: nowrap; font-size: var(--sgrow-side-size); line-height: 1.05;
}
.sgrow__side--l { right: calc(100% + var(--sgrow-side-gap)); }
.sgrow__side--r { left: calc(100% + var(--sgrow-side-gap)); }

/* Move off: part.js adds .is-static below data-min-width and for reduced motion (a plain framed picture) */
.sgrow.is-static { height: auto; --sgrow-pad: 0px; --sgrow-radius: 1.75rem; }   /* Alture's own tablet/phone look */
.sgrow.is-static .sgrow__sticky { position: relative; height: auto; }
.sgrow.is-static .sgrow__box { width: 100%; height: auto; aspect-ratio: var(--sgrow-static-ratio); }
.sgrow.is-static .sgrow__media { width: 100%; height: 100%; transform: none; }
.sgrow.is-static .sgrow__side { display: none; }
.sgrow.is-static .sgrow__play { opacity: 1; transform: none; }