/* ===========================================================================
   03 星辰 Career · 自媒体引流图
   A tilted wall of reels. Every row keeps one frame height; the crop widths
   follow a rhythm so the set reads as a contact sheet, not a grid. The
   artwork keeps its own colour: no tint, no desaturation. Only the page
   scroll and a slow drift move the strips; offscreen, under the viewer and
   under reduced motion the wall stands still.
   =========================================================================== */

.b-reel {
  --reel-tilt: 4deg;
  --reel-h: clamp(88px, 9.6vw, 150px);
  --reel-gap: clamp(8px, 0.85vw, 13px);
  position: relative;
  /* reach the viewport edge, never the shell's inner column */
  margin-inline: calc(var(--gut) * -1);
  margin-block: clamp(10px, 1.4vw, 20px) clamp(20px, 2.6vw, 38px);
  /* dissolve sideways instead of ending on a hard edge: the fade starts at the
     viewport edge, not at the band's negative margin */
  -webkit-mask-image: linear-gradient(90deg, transparent var(--gut), #000 calc(var(--gut) + 10%), #000 calc(90% - var(--gut)), transparent calc(100% - var(--gut)));
  mask-image: linear-gradient(90deg, transparent var(--gut), #000 calc(var(--gut) + 10%), #000 calc(90% - var(--gut)), transparent calc(100% - var(--gut)));
}

.reel-stage {
  position: relative;
  height: clamp(360px, 42vw, 600px);
  overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* the plane is larger than the window so the lean never exposes a corner */
.reel-plane {
  position: absolute;
  inset: -2% -7%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* rows breathe a little more than the frames inside them */
  gap: calc(var(--reel-gap) * 1.5);
  transform: rotate(var(--reel-tilt));
  transform-origin: 50% 50%;
}

.reel-row {
  flex: none;
  height: var(--reel-h);
  overflow: clip;
}

.reel-track {
  display: flex;
  height: 100%;
  width: max-content;
  backface-visibility: hidden;
}

/* two or more of these are stitched side by side by the script: one interval
   of the loop is exactly one set wide */
.reel-set {
  display: flex;
  flex: none;
  height: 100%;
  gap: var(--reel-gap);
  padding-right: var(--reel-gap);
}

.reel-art {
  flex: none;
  width: calc(var(--reel-h) * var(--ar, 0.75));
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-tile);
  background-color: #0c0e0f;
  -webkit-appearance: none;
  appearance: none;
}

.reel-art img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 35%;
  transition: opacity 0.5s var(--ease);
}

.reel-art:focus-visible {
  outline: 1px solid rgb(255 255 255 / 0.72);
  outline-offset: -2px;
}

@media (max-width: 820px) {
  .b-reel { --reel-tilt: 3deg; --reel-h: clamp(78px, 13vw, 112px); }
  .reel-stage { height: clamp(300px, 62vw, 420px); }
}

@media (max-width: 620px) {
  .b-reel { --reel-h: 82px; }
  .reel-stage { height: 330px; }
}

/* print: flatten the wall into one grid and keep every real artwork once */
@media print {
  .b-reel {
    margin-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .reel-stage {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .reel-plane,
  .reel-row,
  .reel-track,
  .reel-set { display: contents; }
  .b-reel .reel-art {
    width: 100%;
    height: auto;
    align-self: start;
    break-inside: avoid;
  }
  .reel-art[aria-hidden="true"] { display: none; }
  .b-reel .reel-art img { width: 100%; height: auto; object-fit: contain; }
}