/* Playground page: page header (title left, subtext + count right),
   then a uniform grid — every source image shares the same aspect ratio,
   so cards are fixed-ratio tiles (not masonry), each with a caption
   underneath. Hover zooms the image only (Grayson-style: a moderate,
   smooth scale-up inside a clipped frame, so the UI reads clearly
   without the card itself moving or an overlay covering it).

   Column count is one variable — flip --pg-cols to compare 3 vs 2. */

.pg {
  --pg-cols: 2;
  padding: 0 var(--edge) calc(100 * var(--px));
}

/* ---------- Hero ---------- */
/* Full-screen intro in the site's oversized-type language: PLAYGROUND
   slides in letter by letter after the loader lifts (same staggered rise
   as the home hero), with the subtext centered below. No interaction. */
.pg-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: clip;
  /* room for the fixed nav */
  padding-top: calc(70 * var(--px));
  /* breathing room before the grid, which then grows in switcher-style */
  margin-bottom: calc(120 * var(--px));
}

.pg-hero__title {
  font-weight: 400;
  font-size: calc(252 * var(--px));
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  user-select: none;
  position: relative;
  z-index: 2;
  mix-blend-mode: difference;
  color: #fff;
  display: flex;
}

/* Letters slide up one after another (same staggered rise as the home
   hero). Paused while the loader covers the page, so the reveal plays
   from the start once it lifts. */
.pg-l {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.25em);
  animation: pg-char 0.7s var(--ease-out) forwards;
  animation-delay: calc(0.08s * var(--i));
}

body.is-loading .pg-l { animation-play-state: paused; }

@keyframes pg-char {
  to { opacity: 1; transform: translateY(0); }
}

/* Once the entrance finishes, JS adds .is-ready so each letter lifts on
   its own :hover — identical interaction to .hero__title.is-ready .char
   on the home hero. Reversible: remove this block + the .is-ready line
   in js/playground.js. */
.pg-hero__title.is-ready .pg-l {
  animation: none;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: transform 0.4s var(--ease-out);
  cursor: pointer;
}

.pg-hero__title.is-ready .pg-l:hover {
  transform: translateY(-0.12em) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .pg-hero__title.is-ready .pg-l { transition: none; }
}

/* Meta row above the title: year range —— live project count */
.pg-hero__meta {
  position: relative;
  z-index: 2;
  margin-bottom: calc(20 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(20 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(30 * var(--px));
  opacity: 0;
  animation: pg-fade 0.9s var(--ease-out) 0.3s forwards;
}

.pg-hero__meta-line {
  width: calc(450 * var(--px));
  border-top: 1px solid var(--stroke-10);
}

/* Bottom row: subtext left, "Scroll" right — spans the hero's full
   padded width like the Figma spec's 47px side inset. */
.pg-hero__row {
  position: relative;
  z-index: 2;
  margin-top: calc(150 * var(--px));
  width: 100%;
  padding: 0 calc(47 * var(--px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(40 * var(--px));
  opacity: 0;
  animation: pg-fade 0.9s var(--ease-out) 0.6s forwards;
}

.pg-hero__sub {
  max-width: calc(300 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(26 * var(--px));
  color: var(--color-text);
}

.pg-hero__scroll {
  font-size: calc(16 * var(--px));
  line-height: calc(26 * var(--px));
  white-space: nowrap;
}

/* Horse: decorative, non-interactive, sits IN FRONT of the PLAYGROUND
   text (z-index above the title) and bleeds off the bottom of the hero.
   Exact footprint from PlaygroundHero.json's "Horse" node: 877.31x743.23
   at top 408.76 / left 365.85 in the 1680 frame. object-fit: contain
   keeps the source art undistorted inside that exact box. The see-through
   look earlier was NOT image transparency — it was the black title letters
   painting over the horse because the horse was z-index 1 behind the
   z-index 2 title; front-of-text z-index fixes it.

   Entrance: slides in from the right on a momentum curve with a subtle
   overshoot, tilting ~3deg forward then straightening. On scroll it
   slides back out to the right with the same forward tilt (js/playground.js
   drives the exit, tied to scroll position). */
.pg-hero__horse {
  position: absolute;
  z-index: 3;
  top: calc(388.76 * var(--px));
  left: calc(365.85 * var(--px));
  width: calc(877.31 * var(--px));
  height: calc(743.23 * var(--px));
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  opacity: 0;
  animation: pg-fade 1.4s var(--ease-out) 0.35s forwards;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.is-loading .pg-hero__horse { animation-play-state: paused; }

@keyframes pg-fade {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-l,
  .pg-hero__meta,
  .pg-hero__row,
  .pg-hero__horse {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- Grid ---------- */
/* True CSS grid (not masonry): every card is the same width and the same
   aspect-ratio frame, since the source images share one canvas size.
   As it scrolls up out of the hero it grows from slightly smaller to full
   size (js/playground.js drives --pg-grow), echoing the home switcher's
   grow-into-place reveal. */
.pg__grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  /* Rows breathe a touch more than columns so each caption groups with
     its own image rather than the card below. */
  gap: 20px 10px;
  transform-origin: center top;
  transform: scale(var(--pg-grow, 1));
  will-change: transform;
}

.pg__card {
  opacity: 0;
  transform: translateY(calc(40 * var(--px)));
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(0.06s * var(--d, 0));
}

.pg__card.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .pg__card { opacity: 1; transform: none; transition: none; }
}

/* Clipped frame at the source images' shared ratio (4500:3240) so every
   card lines up exactly — the zoom happens on the img INSIDE this frame,
   never on the card itself, so captions and neighboring cards hold still. */
.pg__card-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4500 / 3240;
  background: var(--color-card);
  cursor: pointer;
}

.pg__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Grayson-style zoom: a clear, moderate scale-up (not subtle) so the UI
   inside the shot is easier to read on hover, eased to a soft stop. */
.pg__card:hover img {
  transform: scale(1.12);
}

.pg__card-caption {
  margin-top: calc(16 * var(--px));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12 * var(--px));
}

.pg__card-name {
  font-size: calc(16 * var(--px));
  line-height: calc(22 * var(--px));
  font-weight: 400;
}

.pg__card-category {
  font-size: calc(13 * var(--px));
  line-height: calc(20 * var(--px));
  color: var(--color-black-50);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .pg__card img { transition: none; }
}

/* The mobile-only line break: desktop PLAYGROUND stays one line */
@media (min-width: 769px) {
  .pg-hero__break { display: none; }
}

/* ---------- Mobile (440 Figma frame, 1:1) ---------- */
@media (max-width: 768px) {
  :root { --pxm: calc(100vw / 440); }

  .pg { padding: 0 calc(16 * var(--pxm)) calc(60 * var(--pxm)); }

  /* Hero frame: 440x684. nav(60)+gap(30)=90 reserved for the fixed nav,
     then the content block's own pad-top(30) = 120 total before the meta
     row. Bottom inset 50 (pad-bottom on 2147227557). */
  .pg-hero {
    min-height: 0;
    height: auto;
    padding-top: calc(120 * var(--pxm));
    padding-bottom: calc(50 * var(--pxm));
    justify-content: flex-start;
    margin-bottom: calc(60 * var(--pxm));
  }

  .pg-hero__meta {
    font-size: calc(16 * var(--pxm));   /* body-lg-regular 16/26 */
    line-height: calc(26 * var(--pxm));
    gap: calc(20 * var(--pxm));
    margin-bottom: calc(15 * var(--pxm));
  }

  .pg-hero__meta-line { width: calc(116 * var(--pxm)); }

  /* PLAYGROUND breaks as "PLAYG / ROUND" (the wireframe's text node is
     two lines at display-regular 123.1/123.1/-2 — box 247 = 2 lines).
     The .pg-hero__break span forces the flex line break after the G;
     at two lines the literal token fits the 437.71 box. */
  .pg-hero__title {
    width: calc(437.71 * var(--pxm));
    min-height: calc(247 * var(--pxm));
    margin: 0 calc(-14.85 * var(--pxm));
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
    font-size: calc(123.1 * var(--pxm));
    line-height: calc(123.1 * var(--pxm));
    letter-spacing: calc(-2 * var(--pxm));
  }

  .pg-hero__break {
    flex-basis: 100%;
    height: 0;
  }

  /* Horse (411.76x313.67): absolute top 124.12 within its containing
     block (2147238611), which itself starts at y120 from .pg-hero's
     top → 244.12. Left -14.85 (page pad 16) → 1.15 from .pg-hero's
     left edge, same bleed as PLAYGROUND's own left edge. */
  .pg-hero__horse {
    top: calc(244.12 * var(--pxm));
    left: calc(1.15 * var(--pxm));
    width: calc(411.76 * var(--pxm));
    height: calc(313.67 * var(--pxm));
  }

  /* Subtext: centered, 160 below the title block; no Scroll label */
  .pg-hero__row {
    margin-top: calc(160 * var(--pxm)); /* 2147238408 gap-160 */
    padding: 0;
    justify-content: center;
  }

  .pg-hero__sub {
    max-width: calc(278.53 * var(--pxm));
    font-size: calc(16 * var(--pxm));
    line-height: calc(22 * var(--pxm));
    text-align: center;
  }

  .pg-hero__scroll { display: none; }

  .pg__grid {
    grid-template-columns: 1fr;
    gap: 15px 10px;
  }

  .pg__card-caption { margin-top: 12px; }
  .pg__card-name { font-size: 15px; line-height: 20px; }
  .pg__card-category { font-size: 12px; line-height: 18px; }
}

/* ---------- Tablet: 2 columns regardless of --pg-cols ---------- */
@media (min-width: 901px) and (max-width: 1200px) {
  .pg__grid { grid-template-columns: repeat(2, 1fr); }
}