/* ============================================
   Work Reel — a project as one horizontal strip
   Vertical scroll drives the strip sideways on desktop; phones read it
   as a plain vertical column.
   ============================================ */

.work-reel {
  --reel-gap: 8px;
  --reel-edge: clamp(64px, 9vw, 160px);
  --reel-nav-top: 22px; /* the site menu's own top and height: Home lines up with it */
  --reel-nav-height: 42px;
  --reel-space-bottom: var(--reel-gap); /* media run down to the window's edge */
  background: var(--color-bg);
}

.reel-header {
  display: flex;
  font-size: var(--text-size);
  letter-spacing: var(--text-tracking);
  line-height: var(--text-leading);
  padding: 80px var(--page-gutter) 32px;
}

.reel-header__home {
  align-items: center;
  color: var(--work-muted);
  display: inline-flex;
  gap: 6px;
  text-decoration: none;
  transition: color 0.2s;
  width: fit-content;
}

.reel-header__home:hover {
  color: var(--work-content);
}

.reel-intro {
  color: var(--work-content);
  font-size: var(--text-size);
  letter-spacing: var(--text-tracking);
  line-height: var(--text-leading);
}

.reel-intro__title {
  font-size: inherit;
  font-variation-settings: "opsz" 14, "wght" 560;
  font-weight: var(--text-weight-heading);
  line-height: inherit;
  margin: 0;
}

.reel-intro__body,
.reel-intro__tags {
  margin: 0;
  text-wrap: pretty;
}

.reel-intro__tags {
  color: var(--work-muted);
  margin-top: 8px;
}

.reel-intro__body {
  margin-top: 28px;
}

.reel-track {
  display: flex;
  flex-direction: column;
  gap: var(--reel-gap);
  padding: 0 var(--page-gutter);
}

.reel-item {
  margin: 0;
}

.reel-item--wide .reel-frame {
  aspect-ratio: 1.5 / 1;
}

.reel-item--tall .reel-frame {
  aspect-ratio: 0.876596 / 1;
}

.reel-item--hero .reel-frame {
  aspect-ratio: 1.65 / 1;
}

.reel-item--square .reel-frame {
  aspect-ratio: 1 / 1;
}

.reel-item--narrow .reel-frame {
  aspect-ratio: 0.75 / 1;
}

.reel-stack {
  display: flex;
  flex-direction: column;
  gap: var(--reel-gap);
}

.reel-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 64px 0;
}

.reel-text.reel-intro {
  display: block;
  padding: 0 0 40px;
}

.reel-end {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 64px;
}

.reel-end .work-next {
  margin: 0;
}

.reel-end .work-footer {
  padding: 0 0 40px;
}

.reel-end .work-footer__copyright {
  grid-column: 1 / -1;
  justify-self: start;
  text-align: left;
}

.reel-edge {
  display: none;
}

@media (min-width: 768px) {
  .reel-header {
    align-items: center;
    inset: 0 0 auto;
    padding: var(--reel-nav-top) 20px 0 var(--reel-gap);
    pointer-events: none;
    position: fixed;
    z-index: 4;
  }

  .reel-header__home {
    height: var(--reel-nav-height);
    pointer-events: auto;
  }

  .reel-stage {
    height: 100vh;
    height: 100svh;
    overflow: clip;
    position: sticky;
    top: 0;
  }

  .reel-track {
    /* Media take 75% of the window at the bottom; the rest is air under the menu. */
    --reel-height: 75vh;
    --reel-height: 75svh;
    align-items: flex-start;
    flex-direction: row;
    height: 100%;
    padding: calc(100vh - var(--reel-height) - var(--reel-space-bottom)) var(--reel-gap) var(--reel-space-bottom);
    padding-top: calc(100svh - var(--reel-height) - var(--reel-space-bottom));
    width: max-content;
    will-change: transform;
  }

  .reel-item {
    flex: none;
  }

  .reel-frame {
    height: var(--reel-height);
    width: auto;
  }

  /* Two frames share the height of one. */
  .reel-stack {
    flex: none;
  }

  .reel-stack .reel-frame {
    height: calc((var(--reel-height) - var(--reel-gap)) / 2);
  }

  .reel-text {
    flex: none;
    /* Text belongs to the media before it: close on the left, more air on the right. */
    padding: 0 240px 0 56px;
    width: calc(var(--text-column) * 0.62 + 296px);
  }

  /* Opens the strip flush with Home, then leaves room before the first frame. */
  .reel-text.reel-intro {
    padding: 0 56px 0 0;
    width: calc(var(--text-column) * 0.62 + 56px);
  }

  /* Top and bottom line up with the frames beside it; if a short window can't
     fit it, the panel grows upward instead of being cut off at the bottom. */
  .reel-end {
    align-self: flex-end;
    flex: none;
    gap: 32px;
    justify-content: space-between;
    min-height: var(--reel-height);
    padding: 0 56px;
    width: calc(420px + 112px);
  }

  .reel-end .work-next {
    width: 100%;
  }

  .reel-end .work-footer {
    padding: 0;
    width: 100%;
  }

  /* ---- Progressive blur at both sides of the strip ----
     A few light layers, each stronger and masked closer to the outer edge, so
     sharpness falls off softly. Layer count and radius are what cost GPU time:
     raise them with care.
     Opacity sits on the layers: on the parent it would cut them off from the
     strip they have to blur. */
  .reel-edge {
    --edge: 1;
    bottom: 0;
    display: block;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: var(--reel-edge);
    z-index: 2;
  }

  .reel-edge--left {
    left: 0;
    --edge-to: to left;
  }

  .reel-edge--right {
    right: 0;
    --edge-to: to right;
  }

  .reel-edge i {
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    inset: 0;
    -webkit-mask-image: linear-gradient(var(--edge-to), transparent var(--from), #000 var(--to));
    mask-image: linear-gradient(var(--edge-to), transparent var(--from), #000 var(--to));
    opacity: var(--edge);
    position: absolute;
  }

  .reel-edge i:nth-child(1) { --blur: 1px; --from: 0%;  --to: 40%; }
  .reel-edge i:nth-child(2) { --blur: 3px; --from: 30%; --to: 70%; }
  .reel-edge i:nth-child(3) { --blur: 6px; --from: 60%; --to: 100%; }
}