/* PAAK Works v3 — Alture's rolling work list.
   Captured from https://alture-template.webflow.io/ section.section_work-list (2026-08-13).
   Reference geometry at 1440px: card 800x450 (16:9), radius 48px, flex column, gap 128px,
   perspective 1440px on the card's parent, name pill inset 24px bottom-left.
   Ours is scaled up: card sits between the old Room One (778) and Mailroom (1089) cards. */

.pk-works {
  /* Was min(930px, 62vw) — 893px at 1440, while the "Our Work" heading above it and
     the process cards below it both run the section rail at 1382px. The card was the
     only element on the page centred on the VIEWPORT instead of sitting on that rail,
     so nothing lined up with anything and the section read as floaty rather than
     restrained. Now the standing card (scale 1) is the rail: 2% section padding a
     side, capped by the 1400px container. */
  --pk-work-w: min(1400px, 96vw);
  /* Apple's large-surface corner: present but restrained. The reference's 6%-of-width
     radius reads as a blob at our card size. */
  --pk-work-radius: clamp(12px, 1.5vw, 22px);
  --pk-work-gap: clamp(72px, 9.8vw, 150px);
  /* The scale the card rests at once the roll has finished. works-v3.js reads this
     same value, so the motion and the meta-row alignment can never drift apart.
     Was 0.9, which left the resting card 69px inside the section rail the heading
     and the process cards below both sit on. At 1 the card comes to rest exactly on
     that rail. The cost is the departure shrink, which the roll no longer performs. */
  --pk-work-settle: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pk-work-gap);
}

/* .work-grid is an inherited 9-column Webflow grid; the list must span it
   or it collapses into column 1 and reads as left-aligned. */
.work-grid > .pk-works {
  grid-column: 1 / -1;
  width: 100%;
}

/* The un-transformed placeholder. Holds the perspective and is the ScrollTrigger
   trigger, so the card's own rotation never feeds back into its start/end. */
.pk-work__block {
  perspective: 100vw;
  perspective-origin: 50% 50%;
  width: var(--pk-work-w);
}

.pk-work__card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--pk-work-radius);
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
  background: #111;
  text-decoration: none;
}

.pk-work__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Hover lives on the IMAGE, never on .pk-work__card: the card's transform is owned
     frame-by-frame by the scrubbed roll in works-v3.js, so a CSS transform there is
     overwritten on the next tick and the hover simply never appears. The card clips
     (overflow:hidden), so scaling the image inside it reads as a slow push-in. */
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pk-work__card:hover .pk-work__media,
.pk-work__card:focus-visible .pk-work__media {
  transform: scale(1.035);
}

.pk-work__card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Meta row UNDER the card — title left, tags right, and deliberately NO rule
   under it. The reference puts this row above its card and hangs a hairline
   below; ours reads better as a caption the artwork sits on top of. */
/* Title left, tags hard right on the card's own edge — TJ's call 2026-08-14, after
   trying them grouped at the left. The row spans the artwork, so both ends land on a
   real edge rather than floating mid-card. */
.pk-work__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(20px, 2.2vw, 40px);
  /* Match the card's settled width so the row's edges sit flush with the artwork
     instead of overhanging it by the scale difference. */
  width: calc(var(--pk-work-settle) * 100%);
  margin-inline: auto;
  /* Tight to the artwork it labels: a caption, not the next thing down the page. */
  margin-top: clamp(10px, 0.85vw, 14px);
}

/* Left: the project name, at display size. This is the element works-v3.js
   rolls on hover, so it must be able to clip its own characters. */
.pk-work__title {
  font-size: clamp(26px, 2.25vw, 42px);
  font-weight: 570;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Right: what we did, one step greyer. `opacity` rather than a fixed grey so the
   row survives the section inverting to a dark ground. */
.pk-work__tags {
  font-size: clamp(14px, 1.25vw, 20px);
  font-weight: 520;
  letter-spacing: -0.012em;
  opacity: 0.55;
  text-align: right;
  padding-top: 0.35em;
  transition: opacity 0.35s ease;
}

.pk-work__block:hover .pk-work__tags {
  opacity: 0.8;
}

/* --- hover roll on the title -----------------------------------------------
   works-v3.js replaces the title's text with one .pk-t-char per character, each
   holding the SAME glyph twice: .pk-t-a in place, .pk-t-b parked one line below.
   Hover slides the pair up by exactly 100%, so b lands where a was. */
.pk-t-char {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* overflow clips at the PADDING edge, so this is descender room, not spacing. */
  padding-bottom: 0.1em;
}

.pk-t-a,
.pk-t-b {
  display: block;
  will-change: transform;
}

.pk-t-b {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
}

/* The "View all work" button used to close this section, and the site's global
   300px section padding sat under it. With the button gone that padding reads as
   a dead white field between the WATDA caption and the dark section that follows,
   so the tail is pulled in. 160px still clears the caption by more than the
   128px gap between cards, so the list ends rather than being cut off.
   Desktop only: the theme already drops .section to 100px at 991 and 50px at
   767, both of which are tighter than this. */
@media (min-width: 992px) {
  .content-effect._01 > .section {
    padding-bottom: 160px;
  }
}

@media (max-width: 767px) {
  .pk-works {
    --pk-work-w: min(100%, 88vw);
    --pk-work-gap: 56px;
  }

  .pk-work__block {
    perspective: 140vw;
  }

  /* Side by side, "Web Development + Booking System" wraps to three ragged lines
     against a 26px title on a ~340px row. Stacked, both read in one pass. */
  .pk-work__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .pk-work__tags {
    text-align: left;
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk-work__card {
    transform: none !important;
  }

  /* works-v3.js skips the split entirely under reduced motion, so this only
     covers the tag fade that CSS owns. */
  .pk-work__tags {
    transition: none;
  }

  .pk-work__media {
    transition: none;
  }
  .pk-work__card:hover .pk-work__media,
  .pk-work__card:focus-visible .pk-work__media {
    transform: none;
  }
}