/* Ad reel: a drifting row of vertical app clips.
   Shared by every app landing page (CWS, Bushcraft, Woodsman, KampKid,
   Hockline, Bellow) so they behave identically and there is one file to fix.

   Rules it follows, learned the hard way on the BWJ home page:
   - It is a MARQUEE, not a carousel. Nothing is hidden behind an arrow and
     every clip stays reachable by scrolling the row by hand.
   - Only clips actually on screen are allowed to play. An IntersectionObserver
     starts and pauses them, so a page with fourteen clips is never decoding
     fourteen videos.
   - Every clip is muted, looped and playsinline, because autoplay with sound
     is blocked everywhere and deserves to be.
   - prefers-reduced-motion stops the drift AND the video, leaving the posters.
   - Each clip ships a poster frame, so the row looks right before a single
     byte of video is fetched.

   Colours come from the shared brand variables; this file defines none. */

.reel {
  margin: 26px 0 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.reel-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: reel-drift var(--reel-seconds, 90s) linear infinite;
}
.reel:hover .reel-track,
.reel:focus-within .reel-track { animation-play-state: paused; }

.reel-item {
  flex: none;
  position: relative;
  width: 202px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line, #33261A);
  background: #0c0a06;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .55);
  transition: border-color .18s, transform .18s;
}
.reel-item:hover { border-color: var(--ember, #D2622A); transform: translateY(-4px); }
.reel-item video,
.reel-item img.reel-poster {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #0c0a06;
}
/* The poster sits UNDER the video, so the video is what gives the card its
   height. A card with no video (a still: Woodsman, the Skool ads) then
   collapsed to nothing. Those cards keep the poster in normal flow. */
.reel-item img.reel-poster { position: absolute; inset: 0; height: 100%; }
.reel-item.reel-still img.reel-poster { position: static; height: auto; }
.reel-item video { position: relative; z-index: 1; opacity: 0; transition: opacity .3s; }
.reel-item video.reel-on { opacity: 1; }

@keyframes reel-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 700px) {
  .reel { margin-top: 18px; }
  .reel-track { gap: 11px; }
  .reel-item { width: 150px; border-radius: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-track { animation: none; width: 100%; overflow-x: auto; }
  .reel { -webkit-mask-image: none; mask-image: none; }
  .reel-item video { display: none; }          /* posters only, nothing moves */
  .reel-item img.reel-poster { position: static; height: auto; }
}

/* Landscape variant. KampKid's ads are 1920x1080, not the 9:16 the app ads
   use, so the card changes shape rather than letterboxing them. */
.reel-wide .reel-item { width: 320px; }
.reel-wide .reel-item video,
.reel-wide .reel-item img.reel-poster { aspect-ratio: 16 / 9; }
@media (max-width: 700px) { .reel-wide .reel-item { width: 236px; } }

/* Square variant. The Skool ads are 1080x1080, not the 9:16 the app ads use
   and not the 16:9 KampKid uses. */
.reel-square .reel-item { width: 272px; }
.reel-square .reel-item video,
.reel-square .reel-item img.reel-poster { aspect-ratio: 1 / 1; }
@media (max-width: 700px) { .reel-square .reel-item { width: 208px; } }