/* ==========================================================================
   Singlemickey — video hero variant
   Loaded after styles.css, so the original storefront stays untouched.
   ========================================================================== */

.hero.hero--video {
  height: auto;
  min-height: 560px; /* fallback for browsers without svh */
  min-height: clamp(520px, 70svh, 720px);
  background: var(--ink);
}

/* Video layer: above the hero background, below the copy. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: #080808 url("media/hero-poster.jpg") center / cover no-repeat;
}

.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
}

.hero-video[hidden] {
  display: none;
}

/* The original hero used a crimson side bar and a bottom fade. */
.hero.hero--video::before {
  display: none;
}

.hero.hero--video::after {
  display: none;
}

/* Readability over moving footage. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(5, 5, 5, 0.58) 0%,
      rgba(5, 5, 5, 0.1) 24%,
      rgba(5, 5, 5, 0) 44%
    ),
    linear-gradient(
      to top,
      rgba(5, 5, 5, 0.96) 0%,
      rgba(5, 5, 5, 0.68) 26%,
      rgba(5, 5, 5, 0.22) 52%,
      rgba(5, 5, 5, 0) 74%
    );
}

.hero--video .hero-copy h1 {
  color: var(--paper);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.6);
}

.hero--video .hero-index,
.hero--video .hero-bottom,
.hero--video .hero-copy .eyebrow {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}

.hero-lede {
  max-width: 48ch;
  margin: 0 auto 26px;
  color: rgba(232, 232, 232, 0.76);
  font-size: 12px;
  line-height: 1.8;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}

/* The catalogue now starts below the hero, so it needs its own top space. */
.shop-home {
  padding-top: 56px;
}

@media (max-width: 760px) {
  .hero.hero--video {
    min-height: 480px;
    min-height: clamp(480px, 66svh, 620px);
  }

  .hero-video {
    object-position: 66% center;
  }

  .hero--video .hero-copy {
    bottom: 56px;
  }

  .hero-lede {
    max-width: 42ch;
    margin-bottom: 20px;
    font-size: 11px;
  }

  .shop-home {
    padding-top: 36px;
  }
}

/* Poster stays visible if the video is disabled. */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}