/* The preloader, and the transition between pages.

   One panel does both jobs. It rises from below to cover the page being left,
   and on the next page it keeps rising to uncover the page arrived at - the
   curtain only ever travels one way.

   The mark does not travel with it. It sits in a layer that moves against the
   panel by exactly as much as the panel moves, so it holds still in the middle
   of the screen while the panel's edge wipes across it: revealed from the
   bottom up as the panel arrives, hidden from the bottom up as it leaves. */

.pld_root__Pl1 {
  position: fixed;
  inset: 0;
  z-index: 999;
  overflow: hidden;
  background: #f1f1f1;
  transform: translateY(0);
  transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

.pld_inner__Pl4 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4.8rem;
  transform: translateY(0);
  /* the same curve and the same duration as the panel, so the two stay locked
     and the mark never drifts off centre */
  transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

/* Nothing scrolls behind it - held by refusing the input rather than by
   overflow: hidden, which would take the scrollbar away and shift the page
   sideways by its width. See hold() in the preloader script. */

.pld_mark__Pl2 {
  width: clamp(24rem, 42vw, 52rem);
  height: auto;
  overflow: visible;
}

.pld_mark__Pl2 path {
  fill: none;
  stroke: #151717;
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pld_root__Pl1[data-drawing] .pld_mark__Pl2 path {
  stroke-dashoffset: 0;
}

/* A hairline that fills while the page arrives: it eases towards the end
   without reaching it, and completes only when the page actually does. */
.pld_rule__Pl3 {
  position: relative;
  width: 14rem;
  height: 1px;
  background: rgba(21, 23, 23, 0.16);
  overflow: hidden;
}

.pld_rule__Pl3 span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #151717;
  transform: scaleX(0);
  transform-origin: left center;
}

.pld_root__Pl1[data-drawing] .pld_rule__Pl3 span {
  animation: pld-fill 3.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pld_root__Pl1[data-leaving] .pld_rule__Pl3 span {
  animation: none;
  transform: scaleX(1);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes pld-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(0.92); }
}

/* ---------------------------------------------------------------- leaving */

.pld_root__Pl1[data-leaving] {
  transform: translateY(-100%);
  pointer-events: none;
}

.pld_root__Pl1[data-leaving] .pld_inner__Pl4 {
  transform: translateY(100%);
}

/* --------------------------------------------------------------- covering */

/* Waiting below the fold, with the mark already parked where the middle of the
   screen will be. */
.pld_root__Pl1[data-cover],
.pld_root__Pl1[data-cover] .pld_inner__Pl4 {
  transition: none;
}

.pld_root__Pl1[data-cover] {
  transform: translateY(100%);
}

.pld_root__Pl1[data-cover] .pld_inner__Pl4 {
  transform: translateY(-100%);
}

.pld_root__Pl1[data-cover][data-covering],
.pld_root__Pl1[data-cover][data-covering] .pld_inner__Pl4 {
  transform: translateY(0);
  transition: transform 0.72s cubic-bezier(0.65, 0, 0.35, 1);
}

/* On the way out the mark draws as the panel rises, but faster than it does on
   a first visit - the crossing is short, and a leisurely draw would be cut off
   half-finished by the browser moving. */
.pld_root__Pl1[data-quick] .pld_mark__Pl2 path {
  transition-duration: 0.55s;
}

.pld_root__Pl1[data-quick] .pld_rule__Pl3 {
  opacity: 0;
}

/* Arriving from another page the mark is simply there: the panel rests for a
   quarter of a second, which is no time to draw anything. */
.pld_root__Pl1[data-instant] .pld_mark__Pl2 path {
  transition: none;
  stroke-dashoffset: 0;
}

.pld_root__Pl1[data-instant] .pld_rule__Pl3 {
  opacity: 0;
}

@media (min-width: 768px) {
  .pld_mark__Pl2 path {
    stroke-width: 2px;
  }

  .pld_rule__Pl3 {
    width: 22rem;
  }
}

/* Asked for less motion: nothing draws, nothing wipes - it simply clears. */
@media (prefers-reduced-motion: reduce) {
  .pld_root__Pl1,
  .pld_inner__Pl4,
  .pld_mark__Pl2 path,
  .pld_rule__Pl3 span {
    transition-duration: 0.15s;
    animation: none;
  }

  .pld_mark__Pl2 path {
    stroke-dashoffset: 0;
  }

  .pld_root__Pl1[data-leaving],
  .pld_root__Pl1[data-leaving] .pld_inner__Pl4 {
    transform: none;
    opacity: 0;
  }

  .pld_root__Pl1[data-cover][data-covering],
  .pld_root__Pl1[data-cover][data-covering] .pld_inner__Pl4 {
    transition-duration: 0.15s;
  }
}

/* ------------------------------------------------------------------- sky
   The panel's ground is the hero's own sky plate, so the curtain and the page
   behind it are the same weather. A veil over it keeps the ink mark readable
   and settles the photograph into the tint the rest of the site uses. */

.pld_sky__Pl5 {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(241, 241, 241, 0.35) 0%, rgba(241, 241, 241, 0.62) 58%, rgba(241, 241, 241, 0.92) 100%),
    url("../img/back.f53e9773-d2c945d2d6.jpg");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center 42%;
}

/* When GSAP is driving, the transform belongs to it alone - a CSS transition
   on the same property would fight the tween and stutter. */
.pld_root__Pl1[data-gsap],
.pld_root__Pl1[data-gsap] .pld_inner__Pl4,
.pld_root__Pl1[data-gsap] .pld_sky__Pl5,
.pld_root__Pl1[data-gsap] .pld_mark__Pl2 path {
  transition: none;
}

.pld_sky__Pl5 {
  will-change: transform, opacity;
}