/* Full-screen story viewer (2026 landing). Plain CSS on purpose: Tailwind classes are
   compiled by webpack, so classes not already in use would be missing until a rebuild. */
#stories {
  /* Height of the fixed nav (logo is h-9 = 36px). It must equal what stories.js measures: any
     difference makes the first image jump by that much once the script runs. */
  --stories-top: 36px;
  position: fixed;
  top: var(--stories-top);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10; /* below the fixed header (z-10001) */
  background: #000;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.stories-slides,
.stories-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Each slide is a <picture> holding the crop that matches the screen shape. The image fills the
   screen; object-fit: cover only trims what is left when the screen falls between two crops. */
.stories-slide {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.stories-slide.is-active {
  opacity: 1;
}

.stories-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The visuals have their text close to the bottom edge, while the top is covered by the progress
     bars and links anyway. When the screen is wider than the image, trim from the top only, so the
     bottom margin baked into the artwork is never eaten (a centred crop loses half the excess there). */
  object-position: 50% 100%;
  -webkit-touch-callout: none;
}

.stories-progress {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  gap: 4px;
  padding: 8px 8px 0;
}

.stories-segment {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.stories-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}