/* Scroll46's complete unpinned twelve-image wave scene. Source gallery
   geometry/masks are retained. Editorial copy follows the supplied MP4, with
   Satoshi and Faten's palette replacing the demonstration brand. */
.component46 {
  --c46-bg: #fff1f7;
  --c46-fg: #43215d;
  --c46-rose: #d9468f;
  position: relative;
  width: 100%;
  background: var(--c46-bg);
  color: var(--c46-fg);
  font-family: Satoshi, sans-serif;
}
.component46 *, .component46 *::before, .component46 *::after { box-sizing: border-box; }
.component46 figure, .component46 h2, .component46 p { margin: 0; }
.component46 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.component46 > section {
  position: relative;
  width: 100%;
  height: 100svh;
  padding: 2rem;
  overflow: hidden;
}
.component46 .intro, .component46 .outro { display: flex; justify-content: center; align-items: center; }
.component46 .spotlight { height: 100%; }
.component46 .outro {
  /* The supplied MP4 finishes with the ending copy beside the last tapered
     photographs. Share their last viewport, rather than append the ZIP's
     placeholder-only blank ending viewport. Image positions are unchanged. */
  margin-top: -100svh;
  z-index: 1;
  pointer-events: none;
}
.component46 .outro .editorial-outro { pointer-events: auto; }
.component46 .spotlight-images { display: flex; flex-direction: column; align-items: flex-start; }
.component46 .spotlight-image {
  position: relative;
  flex-shrink: 0;
  clip-path: inset(0 20% 0 20%);
  will-change: transform, clip-path;
  overflow: hidden;
  margin: 0;
}
.component46 .spotlight-image.is-poster { background: #21112c; }
.component46 .spotlight-image.is-poster img { object-fit: contain; }
.component46 .editorial-intro {
  display: grid;
  grid-template-columns: 1.34fr 1fr 1.24fr;
  grid-template-rows: auto auto;
  align-items: end;
  gap: 2.2rem 4.3vw;
  width: 100%;
}
.component46 .editorial-title {
  font-size: clamp(3.1rem, 6.4vw, 7rem);
  line-height: .99;
  font-weight: 500;
  letter-spacing: -.065em;
}
.component46 .editorial-title-first { grid-column: 1; grid-row: 1; }
.component46 .editorial-title-last { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
.component46 .editorial-poster { grid-column: 2; grid-row: 1; height: min(48svh, 28rem); }
.component46 .editorial-poster img { object-fit: contain; }
.component46 .editorial-copy { grid-column: 3; grid-row: 1; padding-bottom: .15rem; font-size: .95rem; line-height: 1.5; max-width: 29ch; }
.component46 .editorial-copy .role { color: var(--c46-fg); }
.component46 .editorial-link { display: inline-flex; justify-content: center; align-items: center; gap: 1.2rem; min-height: 44px; margin-top: 1.25rem; padding: .75rem 1.6rem; color: var(--c46-fg); background: #e6d9fa; font-size: .8rem; line-height: 1.4; text-decoration: none; }
.component46 .editorial-link span { width: 2rem; height: 1px; background: var(--c46-rose); }
.component46 .editorial-link:focus-visible { outline: 2px solid var(--c46-rose); outline-offset: 5px; }
.component46 .editorial-outro { width: 43%; margin-left: auto; margin-right: 3%; }
.component46 .editorial-outro .editorial-title { font-size: clamp(3.1rem, 6vw, 7rem); }
.component46 .editorial-outro .title-offset { display: block; text-align: right; }
.component46 .editorial-outro .editorial-copy { margin: 2rem 0 0 auto; padding: 0; max-width: 31ch; }

/* No mobile branch changes gallery physics. Only branded editorial typography
   and the added MP4 intro still rearrange to fit a phone. Source sizeFactor
   remains min(innerWidth / 750, 1), including at these widths. */
@media (max-width: 700px) {
  .component46 .editorial-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 1rem; }
  .component46 .editorial-title { font-size: clamp(2.3rem, 9vw, 3.7rem); }
  .component46 .editorial-title-first { grid-column: 1 / -1; grid-row: 1; }
  .component46 .editorial-poster { grid-column: 1; grid-row: 2; height: min(34svh, 20rem); }
  .component46 .editorial-copy { grid-column: 2; grid-row: 2; max-width: 25ch; font-size: .75rem; }
  .component46 .editorial-title-last { grid-column: 1 / -1; grid-row: 3; justify-self: end; text-align: right; }
  .component46 .editorial-link { gap: .75rem; padding: .6rem .9rem; font-size: .7rem; margin-top: 1rem; }
  .component46 .editorial-link span { width: 1rem; }
  .component46 .editorial-outro { width: 100%; margin: 0; }
  .component46 .editorial-outro .editorial-title { font-size: clamp(2.9rem, 11vw, 5rem); }
  .component46 .editorial-outro .editorial-copy { max-width: 30ch; font-size: .85rem; }
  /* Phone widths show more source image rows in one viewport. Share the
     outgoing half-viewport, then place live copy below those photographs;
     their original size factor, masks and triggers stay untouched. */
  .component46 .outro { margin-top: -50svh; align-items: flex-end; padding-bottom: max(2rem, 5svh); }
  .component46 .editorial-outro .editorial-copy { margin-top: 1.5rem; }
}

.component46[data-reduced-motion="true"] > section { height: auto; min-height: 0; overflow: visible; padding-block: 4rem; }
.component46[data-reduced-motion="true"] .outro { margin-top: 0; }
.component46[data-reduced-motion="true"] .spotlight-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.component46[data-reduced-motion="true"] .spotlight-image { width: 100%; height: auto !important; aspect-ratio: auto !important; clip-path: none !important; translate: none !important; will-change: auto; }
.component46[data-reduced-motion="true"] .spotlight-image img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 700px) { .component46[data-reduced-motion="true"] .spotlight-images { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .component46 > section { height: auto; min-height: 0; overflow: visible; padding-block: 4rem; }
  .component46 .outro { margin-top: 0; }
  .component46 .spotlight-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .component46 .spotlight-image { width: 100%; height: auto !important; aspect-ratio: auto !important; clip-path: none !important; translate: none !important; will-change: auto; }
  .component46 .spotlight-image img { width: 100%; height: auto; object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 700px) { .component46 .spotlight-images { grid-template-columns: 1fr; } }