/* "We do" (Services): names over a full-screen film of each (site/princypl/services-video.js).
   The template's travelling titles, image rows, counter and phone carousel are hidden; its section
   and pinned track stay (desktop 575lvh, from a screen above the section). Phones get the same
   track height and overlap so the stage pins the same way. The stage is the track's only
   child in the flow, so it pins from the track's top to its bottom and then scrolls away.
   Before the film opens, the big name follows the theme colours (the "invert color" theme turns
   the section to paper and the type to ink); once the film covers the screen the type is light
   over a soft scrim in either theme. */

#services .services-blend-layer,
#services .services-viewport,
#services #services-swiper { display: none !important; }
/* the template fades the track in as "WE DO" leaves; the layer handles its own entrance */
#services .services-track { opacity: 1 !important; }

@media (max-width: 1023px) {
  #services .services-track {
    height: calc(175lvh + var(--items-count) * 100lvh);
    margin-top: -100lvh;
    padding-top: 0;
  }
}

/* the header is difference-blended for flat colour; over a moving picture that turns to mud on
   mid tones, so while the film covers the top it stays plain light over the top scrim */
html.pw-sv-head #header.difference { mix-blend-mode: normal; }
html.pw-sv-head #header .header-container { color: #f0f0f0; }

.pw-sv {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
  /* theme colour before the film, light once it covers the screen */
  color: color-mix(in srgb, #f0f0f0 calc(var(--pw-cov, 0) * 100%), var(--c-light-primary));
}

/* ---- the film: full bleed, opened by a clip-path inset, stacked films inside ---- */
.pw-sv__screen {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0c0c0c;
  clip-path: var(--pw-clip, inset(100% 0 0 0));
  opacity: var(--pw-screen-o, 0);
  will-change: clip-path, opacity;
}
.pw-sv__glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  transform: var(--pw-zoom, none);
  will-change: transform;
}
.pw-sv__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* any crop comes off the top, where the recorded sites carry their own nav bars */
  object-position: 50% 100%;
  display: block;
  z-index: 0;
  visibility: hidden;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.08);
  transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1), transform 1.5s cubic-bezier(.16, 1, .3, 1), filter 1.1s ease, visibility 0s 1.1s;
}
.pw-sv__film.from-up { clip-path: inset(0 0 100% 0); }
.pw-sv__film.is-in {
  z-index: 2;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transform: none;
  transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1), transform 1.5s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}
/* the outgoing film stays whole underneath, drifting the way of the wipe and dimming as the next one covers it */
.pw-sv__film.is-out {
  z-index: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, -10%, 0);
  filter: brightness(.45);
  transition: transform 1.1s cubic-bezier(.7, 0, .2, 1), filter 1.1s ease, visibility 0s;
}
.pw-sv__film.is-out.out-down { transform: translate3d(0, 10%, 0); }
.pw-sv--cut, .pw-sv--cut .pw-sv__ch { transition: none !important; }

/* ---- scrims: a soft dark corner under the type, a faint band under the header ---- */
.pw-sv__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pw-sv__scrim--corner {
  background:
    radial-gradient(120% 95% at 0% 100%,
      rgb(0 0 0 / .74) 0%, rgb(0 0 0 / .67) 22%, rgb(0 0 0 / .5) 40%,
      rgb(0 0 0 / .28) 58%, rgb(0 0 0 / .1) 76%, rgb(0 0 0 / 0) 94%),
    linear-gradient(to top,
      rgb(0 0 0 / .34) 0%, rgb(0 0 0 / .22) 18%, rgb(0 0 0 / .08) 36%, rgb(0 0 0 / 0) 54%);
}
.pw-sv__scrim--top {
  background: linear-gradient(to bottom,
    rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .5) 3rem, rgb(0 0 0 / .26) 7rem, rgb(0 0 0 / .08) 11rem, rgb(0 0 0 / 0) 15rem);
}

/* ---- type: counter, name and description in the bottom left, on the site grid ---- */
.pw-sv__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 6.25vw max(5rem, 10vh) 12.5vw;
}

/* names: one grid cell, letters in word masks */
.pw-sv__names {
  display: grid;
  margin: 0;
  font-size: 4.25rem;
  letter-spacing: -.035em;
  line-height: 1;
  transform: var(--pw-names, none);
  transform-origin: 0 0;
  position: relative;
  z-index: 2;
}
.pw-sv__name { grid-area: 1 / 1; display: block; white-space: nowrap; }
.pw-sv__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for descenders inside the mask */
  padding: .06em .02em .14em 0;
  margin: -.06em -.02em -.14em 0;
}
.pw-sv__ch {
  display: inline-block;
  transform: translate3d(0, 135%, 0);
  transition: transform .5s cubic-bezier(.55, 0, .75, .15) calc(var(--d) * 14ms);
  will-change: transform;
}
.pw-sv__name.is-up .pw-sv__ch { transform: translate3d(0, -135%, 0); }
.pw-sv__name.is-in .pw-sv__ch {
  transform: none;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1) calc(160ms + var(--d) * 26ms);
}

/* description directly under the name, counter just above it */
.pw-sv__descs {
  display: grid;
  margin-top: 1.5rem;
  max-width: 24rem;
  opacity: var(--pw-side, 0);
}
.pw-sv__desc {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transform: translate3d(0, .9rem, 0);
  transition: opacity .35s ease, transform .5s cubic-bezier(.55, 0, .75, .15);
}
.pw-sv__desc.is-up { transform: translate3d(0, -.9rem, 0); }
.pw-sv__desc.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease .35s, transform 1s cubic-bezier(.16, 1, .3, 1) .3s;
}
.pw-sv__count {
  display: flex;
  align-items: baseline;
  gap: .4em;
  margin: 0 0 1.25rem;
  font-variant-numeric: tabular-nums;
  opacity: var(--pw-side, 0);
}
.pw-sv__num { display: inline-grid; overflow: hidden; }
.pw-sv__digit {
  grid-area: 1 / 1;
  transform: translate3d(0, 110%, 0);
  transition: transform .45s cubic-bezier(.55, 0, .75, .15);
}
.pw-sv__digit.is-up { transform: translate3d(0, -110%, 0); }
.pw-sv__digit.is-in { transform: none; transition: transform .9s cubic-bezier(.16, 1, .3, 1) .2s; }
.pw-sv__total { opacity: .55; }

/* ---- phones and tablets: same full-screen film, type on the side padding ---- */
@media (max-width: 1023px) {
  .pw-sv__inner {
    /* lvh stage: keep the type clear of the browser bar when it is showing */
    padding: 0 1.8125rem calc(4.25rem + 100lvh - 100svh);
  }
  .pw-sv__names { font-size: 2.625rem; }
  .pw-sv__name { white-space: normal; }
  .pw-sv__descs { margin-top: 1rem; max-width: 22rem; }
  .pw-sv__count { margin-bottom: .875rem; }
  .pw-sv__scrim--corner {
    background:
      linear-gradient(to top,
        rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .72) 20%, rgb(0 0 0 / .52) 34%,
        rgb(0 0 0 / .28) 47%, rgb(0 0 0 / .1) 59%, rgb(0 0 0 / 0) 70%);
    /* the film's window rises from the bottom of the screen, right where this scrim is darkest, so
       at full strength the opening window read as a black box: it comes in with the type's turn to
       light (--pw-cov), which is when the type first sits over the film */
    opacity: var(--pw-cov, 1);
  }
}

/* ---- reduced motion: no travel, no wipes or letter slides, simple cross-fades ---- */
@media (prefers-reduced-motion: reduce) {
  .pw-sv__ch, .pw-sv__name.is-up .pw-sv__ch, .pw-sv__name.is-in .pw-sv__ch { transform: none; transition: none; }
  .pw-sv__name { opacity: 0; transition: opacity .5s ease; }
  .pw-sv__name.is-in { opacity: 1; transition: opacity .7s ease .15s; }
  .pw-sv__desc, .pw-sv__desc.is-up, .pw-sv__desc.is-in, .pw-sv__digit, .pw-sv__digit.is-up, .pw-sv__digit.is-in { transform: none; }
  .pw-sv__digit { opacity: 0; transition: opacity .4s ease; }
  .pw-sv__digit.is-in { opacity: 1; }
  .pw-sv__screen { clip-path: none; }
  .pw-sv__glass { transform: none; }
  .pw-sv__film, .pw-sv__film.from-up, .pw-sv__film.is-in, .pw-sv__film.is-out {
    clip-path: none; transform: none; filter: none; opacity: 0;
    transition: opacity .8s ease, visibility 0s .8s;
  }
  .pw-sv__film.is-in { opacity: 1; transition: opacity .8s ease, visibility 0s; }
  .pw-sv__film.is-out { opacity: 1; }
}