/* ==========================================================================
   Page transitions — a sheet of paper, not a cut to black
   Shared by the homepage and every case study, so opening a project, going to
   the next one, and coming back all move the same way.

   The old version cut to black. Black is a cut: you feel the seam, you feel
   that one page ended and another began. This site is white everywhere, so a
   WHITE sheet sweeping across white is almost invisible — you register the
   movement and the company's name, not the page swap. That is the whole idea:
   one continuous surface, travelled across, rather than two pages swapped.

   The sheet keeps travelling in the same direction across the page load: it
   enters from the bottom, covers, and on the next page carries on up and out.
   Going back it does the same thing downward, so a return actually feels like
   a return instead of another arrival.

   Deliberately JS-driven rather than the View Transitions API, which only
   works over http(s) and would leave the file:// build with nothing.
   ========================================================================== */
.pt {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFD 52%, #FFFFFF 100%);
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}
/* A soft shade at both horizontal edges. Only the leading edge is ever moving,
   so this is what tells the eye a sheet is sliding rather than a page fading.
   Kept under 8% — any heavier and it reads as a black bar again. */
.pt::before, .pt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 90px; pointer-events: none;
}
.pt::before { top: 0;    background: linear-gradient(180deg, rgba(29,45,72,0.075), rgba(29,45,72,0)); }
.pt::after  { bottom: 0; background: linear-gradient(0deg,   rgba(29,45,72,0.075), rgba(29,45,72,0)); }

/* ---------- The identity plate ----------
   The company arrives before its page does. A logo file is used when one
   exists (assets/logos/<slug>.svg); otherwise the name is set in the display
   face, which is the site's own wordmark treatment. */
.pt-id {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0 var(--gutter); text-align: center;
  opacity: 0; transform: translateY(10px);
}
.pt-logo { max-height: 46px; width: auto; display: none; }
.pt-logo.on { display: block; }
.pt-name {
  font-family: var(--font-display); font-size: 46px; font-weight: var(--weight-semibold);
  letter-spacing: -1.2px; line-height: 1.05; color: var(--ink);
}
.pt-logo.on + .pt-name { display: none; }
/* The rule draws under the name rather than appearing, so even a 500ms glimpse
   has something moving in it. */
.pt-kind {
  position: relative; padding-top: 15px;
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  color: var(--ink-muted); letter-spacing: 0.2px;
}
.pt-kind::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--a), var(--b));
}
.pt-kind:empty { display: none; }

/* ---------- Leaving ----------
   Forward sweeps up from the bottom edge. Back sweeps down from the top. */
.pt.is-covering            { clip-path: inset(0 0 0 0); transition: clip-path var(--dur-leave) var(--ease-cine-in); }
.pt.is-covering .pt-id {
  opacity: 1; transform: none;
  transition: opacity 300ms var(--ease-out) 130ms, transform 440ms var(--ease-cine) 130ms;
}
.pt.is-covering .pt-kind::before { width: 64px; transition: width 460ms var(--ease-cine) 200ms; }

/* ---------- Arriving ----------
   Held covered for one frame, then the sheet carries on in the same direction.
   Forward: keeps going up (bottom edge travels up).
   Back:    keeps going down (top edge travels down). */
.pt.is-covered      { clip-path: inset(0 0 0 0); }
.pt.is-covered .pt-id { opacity: 1; transform: none; }
.pt.is-covered .pt-kind::before { width: 64px; }

.pt.is-lifting              { clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-arrive) var(--ease-cine); }
.pt.is-lifting[data-dir="back"] { clip-path: inset(100% 0 0 0); }
.pt.is-lifting .pt-id { opacity: 0; transform: translateY(-6px); transition: opacity 220ms linear, transform 400ms var(--ease-cine); }
.pt.is-lifting[data-dir="back"] .pt-id { transform: translateY(6px); }

/* Backwards is the same gesture mirrored: enter from the top, leave downward. */
.pt[data-dir="back"]:not(.is-covering):not(.is-covered):not(.is-lifting) { clip-path: inset(0 0 100% 0); }
.pt[data-dir="back"].is-covering { clip-path: inset(0 0 0 0); }

/* ---------- The arriving page ----------
   Settles from a hair larger, so the project you clicked reads as having
   opened outward into the page rather than being replaced by it. */
.pt-stage { opacity: 0; transform: scale(1.012); transform-origin: 50% 30%; }
.pt-stage.is-settled {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--ease-out) 90ms, transform 760ms var(--ease-cine) 90ms;
}

@media (max-width: 809px) {
  .pt-name { font-size: 30px; letter-spacing: -0.6px; }
  .pt-logo { max-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt { display: none; }
  .pt-stage, .pt-stage.is-settled { opacity: 1; transform: none; transition: none; }
}