/* The Reel: the builder page's gallery (docs/superpowers/specs/2026-09-26-work-reel-design.md).
   By default (no JavaScript, reduced motion, phones held landscape) it is a swipeable strip.
   js/work-reel.js adds .is-live to pin it and drive the strip with the page scroll. */

.work-reel {
  /* The pin clears the sticky header and, on phones, the fixed bottom bar. Same sources and
     values as css/comfort-science.css's --cs-top/--cs-bottom: .lp-header-inner min-height 68px
     + its 1px border = 69px (62px + 1px = 63px on phones); the bar is 69px plus the safe area. */
  --wr-top: 69px;
  --wr-bottom: 0px;
  /* Page scroll per strip item in px, read by js/work-reel.js. Desktop matches the approved
     preview (about 196px a photo); phones get more, because a flick carries momentum (the
     comfort science had to be slowed on phones for the same reason). */
  --wr-stop: 200;
  --wr-inset: clamp(18px, 5vw, 72px);
  position: relative;
  background: var(--bg);
}

@media (max-width: 820px) {
  .work-reel {
    --wr-stop: 330;
  }
}

@media (max-width: 767px) {
  .work-reel {
    --wr-top: 63px;
    --wr-bottom: calc(69px + env(safe-area-inset-bottom));
  }
}

.wr-pin {
  position: relative;
  display: grid;
  /* Without minmax(0, 1fr) the wide strip stretches the column and pushes the heading off-screen. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 28px;
  /* clip, not just hidden: a hidden box is still a scroll container, so Tab, find-in-page or a
     screen reader could scroll it sideways and throw the Reel off-screen. hidden is the fallback
     for browsers without clip (iOS 15), where js/work-reel.js snaps any scroll back. */
  overflow: hidden;
  overflow: clip;
  padding: clamp(56px, 8vw, 88px) 0 clamp(40px, 6vw, 64px);
}

/* The two giant lines of words behind everything. */
.wr-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.wr-ghost-line {
  width: max-content;
  white-space: nowrap;
  font: 700 clamp(7rem, 19vw, 17rem) / 0.86 var(--disp);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* The start position; the live script replaces this transform as the page scrolls. */
  transform: translateX(var(--wr-inset));
}

.wr-ghost-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.16);
}

.wr-ghost-red {
  color: rgba(220, 38, 38, 0.16);
}

.wr-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  padding: 0 var(--wr-inset);
}

.wr-head h2 {
  margin-top: 12px;
  color: var(--text);
  font: 700 clamp(2.2rem, 4.6vw, 3.6rem) / 0.95 var(--disp);
  text-transform: uppercase;
}

.wr-head h2 em,
.wr-end h3 em {
  color: var(--red-hot);
  font-style: normal;
}

.wr-sub {
  max-width: 52ch;
  margin-top: 12px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.wr-arrows {
  display: flex;
  flex: none;
  gap: 10px;
}

.wr-arrows[hidden] {
  display: none;
}

.wr-arrows button {
  width: 50px;
  height: 50px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  transform: skewX(-10deg);
  transition: background 0.2s, border-color 0.2s;
}

.wr-arrows button:hover,
.wr-arrows button:focus-visible {
  border-color: var(--red);
  background: var(--red);
}

/* The strip. Static: a native, snapping horizontal scroller. */
.wr-track {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  padding: 0 var(--wr-inset);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--wr-inset);
  scrollbar-width: none;
}

.wr-track::-webkit-scrollbar {
  display: none;
}

.wr-track:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

.wr-frame,
.wr-end {
  flex: none;
  height: clamp(220px, 58vh, 520px);
  height: clamp(220px, 58svh, 520px);
  scroll-snap-align: start;
}

.wr-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--panel);
  aspect-ratio: 4 / 5;
}

.wr-wide {
  aspect-ratio: 3 / 2;
}

.wr-frame picture {
  position: absolute;
  inset: 0;
}

/* Oversized so the live parallax can slide the photo inside its frame without showing an edge. */
.wr-frame img {
  position: absolute;
  top: -4%;
  left: -8%;
  width: 116%;
  max-width: none;
  height: 108%;
  object-fit: cover;
}

.wr-frame::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 6, 9, 0.8), rgba(6, 6, 9, 0) 34%);
  content: "";
  pointer-events: none;
}

.wr-frame figcaption {
  position: absolute;
  bottom: 20px;
  left: 22px;
  z-index: 1;
  color: var(--text);
  font: 700 clamp(1.15rem, 1.7vw, 1.5rem) / 1 var(--disp);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wr-slash {
  display: block;
  width: 26px;
  height: 4px;
  margin-bottom: 12px;
  background: var(--red);
  transform: skewX(-18deg);
}

.wr-end {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  width: min(420px, 78vw);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(220, 38, 38, 0.16), rgba(20, 20, 27, 0.9) 55%);
}

.wr-end h3 {
  color: var(--text);
  font: 700 clamp(2rem, 3.4vw, 2.8rem) / 0.95 var(--disp);
  text-transform: uppercase;
}

.wr-end p {
  color: var(--muted);
}

.wr-end .cta {
  align-self: flex-start;
}

/* The progress row only means something while the strip follows the scroll. */
.wr-foot {
  display: none;
}

@media (max-width: 820px) {
  .wr-wide {
    aspect-ratio: 4 / 5;
  }

  .wr-arrows {
    display: none;
  }

  .wr-sub {
    font-size: 0.92rem;
  }
}

/* ---- Live: pinned, and the page scroll drives the strip (js/work-reel.js) ---------------- */

.work-reel.is-live .wr-pin {
  position: sticky;
  top: var(--wr-top);
  height: calc(100vh - var(--wr-top) - var(--wr-bottom));
  height: calc(100svh - var(--wr-top) - var(--wr-bottom));
  row-gap: 18px;
  padding: 24px 0 22px;
}

.work-reel.is-live .wr-track {
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}

.work-reel.is-live .wr-ghost-line {
  will-change: transform;
}

/* Photos fill whatever height the heading leaves, never fixed pixels. */
.work-reel.is-live .wr-frame,
.work-reel.is-live .wr-end {
  align-self: center;
  height: min(100%, 560px);
}

.work-reel.is-live .wr-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--wr-inset);
  color: var(--faint);
  font: 500 0.72rem / 1 var(--body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.wr-bar {
  flex: 1;
  height: 2px;
  background: var(--line);
}

.wr-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
}

/* Phones: the heading scrolls away under the site header before the strip pins, so the photos
   get the whole visible pin (only 416px on an iPhone SE). The script writes --wr-head-h, the
   pin's top padding plus the heading's height; the gap under the heading stays visible. The background words move down with it so the outlined
   line stays on screen. Frames are capped at 100vw tall so the next photo peeks in. */
@media (max-width: 820px) {
  .work-reel.is-live .wr-pin {
    top: calc(var(--wr-top) - var(--wr-head-h, 0px));
    height: calc(100vh - var(--wr-top) - var(--wr-bottom) + var(--wr-head-h, 0px));
    height: calc(100svh - var(--wr-top) - var(--wr-bottom) + var(--wr-head-h, 0px));
  }

  .work-reel.is-live .wr-ghost {
    top: var(--wr-head-h, 0px);
  }

  .work-reel.is-live .wr-frame,
  .work-reel.is-live .wr-end {
    height: min(100%, 100vw);
  }
}