/* Motion-poster content library: each title arrives, holds at centre, then leaves. */
.disc-library {
  background: transparent;
  overflow: visible;
  padding-bottom: clamp(5rem, 10vw, 10rem);
  padding-top: clamp(4rem, 8vw, 8rem);
}

/* Full-bleed library: the moving cards enter and leave at the viewport edges. */
.disc-library.section-pad {
  padding-inline: 0;
}

#videoLibrary { width: 100%; }

.film-strip-topic {
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  padding: clamp(2.45rem, 4.8vw, 4.8rem) 0;
  position: relative;
}

.film-strip-topic::before {
  background:
    radial-gradient(ellipse 38% 56% at 8% 52%, rgba(231, 133, 114, .16), transparent 72%),
    radial-gradient(ellipse 36% 61% at 91% 42%, rgba(104, 33, 53, .24), transparent 74%);
  content: '';
  inset: 0;
  opacity: .9;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.film-strip-topic:nth-child(even)::before {
  background:
    radial-gradient(ellipse 38% 60% at 91% 42%, rgba(230, 156, 116, .15), transparent 74%),
    radial-gradient(ellipse 36% 61% at 9% 52%, rgba(116, 35, 56, .27), transparent 74%);
}

.film-strip-topic-head {
  align-items: end;
  color: #fae4d8;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0 auto clamp(1.4rem, 2.8vw, 2.5rem);
  max-width: 86rem;
  padding-inline: clamp(1rem, 4vw, 4rem);
}

.film-strip-topic-head p {
  color: rgba(253, 221, 210, .58);
  font: 500 clamp(.52rem, .62vw, .7rem)/1.6 var(--font-mono);
  letter-spacing: .13em;
  margin: 0 0 .18rem;
}

.film-strip-topic-head h3 {
  color: #fae6d9;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 3.45rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .9;
  margin: 0;
}

.motion-rail-controls,
.fashion-motion-controls {
  align-items: center;
  display: flex;
  gap: .5rem;
  justify-content: end;
}

.motion-rail-controls button,
.fashion-motion-controls button {
  align-items: center;
  backdrop-filter: blur(10px);
  background: rgba(255, 230, 218, .07);
  border: 1px solid rgba(250, 218, 205, .42);
  border-radius: 50%;
  color: #fce7dd;
  cursor: pointer;
  display: inline-flex;
  font: 400 1.1rem/1 var(--font-sans);
  height: 2.4rem;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  width: 2.4rem;
}

.motion-rail-controls button:hover,
.motion-rail-controls button:focus-visible,
.fashion-motion-controls button:hover,
.fashion-motion-controls button:focus-visible {
  background: rgba(241, 147, 128, .22);
  border-color: #f6b8a8;
  box-shadow: 0 0 .9rem rgba(240, 130, 116, .36);
  outline: 0;
  transform: translateY(-2px);
}

.motion-rail {
  height: clamp(20rem, 31vw, 31rem);
  isolation: isolate;
  margin-inline: auto;
  max-width: none;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  width: 100%;
}

.motion-video-card {
  --rail-scale: 1;
  --rail-shift: 0%;
  background: transparent;
  border: 0;
  cursor: pointer;
  height: min(80%, 24rem);
  left: 50%;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) translateX(var(--rail-shift)) scale(var(--rail-scale));
  transform-origin: 50% 50%;
  transition: filter .48s ease, opacity .62s ease, transform .86s cubic-bezier(.2,.8,.18,1);
  width: min(36vw, 28rem);
}

.motion-video-card[data-offstage="true"] { pointer-events: none; }

.motion-card-shell {
  animation: card-gentle-float 5.8s ease-in-out infinite;
  background: #260d15;
  border: 1px solid hsl(var(--edge-hue) 78% 79% / .3);
  border-radius: clamp(.85rem, 1.2vw, 1.25rem);
  box-shadow: 0 1.2rem 3rem rgba(15, 2, 7, .43), 0 0 0 1px rgba(255, 229, 219, .05) inset;
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: border-color .35s ease, box-shadow .35s ease, filter .35s ease;
  width: 100%;
}

.motion-video-card[data-active="true"] .motion-card-shell {
  animation: center-card-jelly 3.1s cubic-bezier(.2,.8,.25,1) infinite;
  border-color: hsl(var(--edge-hue) 90% 82% / .68);
  box-shadow: 0 1.8rem 4.8rem rgba(15, 2, 7, .6), 0 0 1.8rem hsl(var(--edge-hue) 88% 72% / .24), 0 0 0 1px rgba(255, 237, 228, .21) inset;
}

.motion-video-card:hover .motion-card-shell,
.motion-video-card:focus-visible .motion-card-shell {
  animation-play-state: paused;
  border-color: #ffe2d5;
  box-shadow: 0 2rem 5rem rgba(15, 2, 7, .66), 0 0 2.3rem hsl(var(--edge-hue) 90% 74% / .42);
  filter: brightness(1.1) saturate(1.08);
}

.motion-video-card:focus-visible { outline: 0; }

.motion-card-shell img { display: block; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out), filter .45s ease; width: 100%; }
.motion-video-card:hover img, .motion-video-card:focus-visible img { filter: contrast(1.06) saturate(1.08); transform: scale(1.06); }

.motion-card-shade {
  background: linear-gradient(180deg, transparent 32%, rgba(21, 5, 11, .17) 54%, rgba(19, 3, 8, .9) 100%);
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.motion-card-title {
  bottom: 0;
  color: #fff1e9;
  font: 500 clamp(1rem, 1.7vw, 1.55rem)/.94 var(--font-display);
  left: 0;
  letter-spacing: -.035em;
  padding: clamp(.85rem, 1.4vw, 1.25rem);
  position: absolute;
  right: 0;
  text-align: left;
  text-shadow: 0 .15rem 1rem rgba(10, 1, 4, .72);
}

.motion-rail.is-single .motion-video-card { width: min(45vw, 31rem); }

@keyframes card-gentle-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.45deg); }
  50% { transform: translate3d(0, -.5rem, 0) rotate(.45deg); }
}

@keyframes center-card-jelly {
  0%, 14%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  21% { transform: translate3d(0, -.32rem, 0) scale(1.018, .982); }
  30% { transform: translate3d(0, .07rem, 0) scale(.988, 1.012); }
  39%, 74% { transform: translate3d(0, -.12rem, 0) scale(1.004); }
  83% { transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 820px) {
  .film-strip-topic { margin-inline: 0; padding-inline: 0; }
  .film-strip-topic-head { align-items: start; grid-template-columns: 1fr auto; }
  .film-strip-topic-head p { grid-column: 1 / -1; }
  .film-strip-topic-head h3 { font-size: clamp(1.65rem, 8vw, 2.65rem); }
  .motion-rail { height: min(30rem, 83vw); }
  .motion-video-card { height: 84%; width: min(65vw, 23rem); }
  .motion-video-card[data-active="false"] { opacity: .42 !important; }
  .motion-rail.is-single .motion-video-card { width: min(72vw, 25rem); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-video-card, .motion-card-shell { animation: none !important; transition: none; }
}