/* ==========================================================================
   PGB page — scroll motion
   Loaded only by pgb.html, so nothing here reaches the rest of the site.
   This file carries motion only: type, colour and spacing keep coming from
   style.css. Elements start hidden and are played by assets/pgb.js once
   their block reaches the trigger point, the same way the site-wide
   .reveal system works — only with per-item stagger and a masked word
   reveal for the headline.
   ========================================================================== */

/* Resting state — the "from" side of each reveal */
[data-pgb-reveal] {
  opacity: 0;
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
  transition-delay: var(--pgb-delay, 0s);
  will-change: opacity, transform;
}
[data-pgb-reveal="up"]    { transform: translate3d(0, 44px, 0); }
[data-pgb-reveal="up-sm"] { transform: translate3d(0, 26px, 0); }
[data-pgb-reveal="fade"]  { transform: none; }
[data-pgb-reveal="left"]  { transform: translate3d(-36px, 0, 0); }
[data-pgb-reveal="right"] { transform: translate3d(36px, 0, 0); }
[data-pgb-reveal="scale"] { transform: translate3d(0, 32px, 0) scale(0.965); }

/* Played state. pgb.js strips the attribute once the transition is done, so
   hover transforms further down the cascade get their element back. */
[data-pgb-reveal].is-inview { opacity: 1; transform: none; }

/* Masked word reveal for the headline — words are wrapped by pgb.js and
   slide up out of their own overflow box, one after the other. */
.pgb-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* room for descenders so the mask never clips a g or j */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.pgb-word > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1s var(--ease);
  transition-delay: var(--pgb-delay, 0s);
  will-change: transform;
}
.pgb-split.is-inview .pgb-word > span { transform: none; }

/* Scrubbed parallax — pgb.js writes the transform from scroll progress.
   Only enabled on wide, motion-safe viewports. */
[data-pgb-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-pgb-reveal] { opacity: 1; transform: none; }
  .pgb-word > span { transform: none; }
  [data-pgb-parallax] { transform: none !important; will-change: auto; }
}