/* R3F hero overrides are kept in a small standalone sheet so local preview
   engines never truncate them behind the legacy full-page stylesheet. */

.hero-art,
.js.intro-pending .hero-art,
.js.intro-running .hero-art,
.js.intro-complete .hero-art {
  transform: none !important;
  transition-property: opacity;
  will-change: opacity;
}

.hero-art picture,
.hero-art img,
.hero-water-video {
  transform: none !important;
}

.hero::after {
  left: -15%;
  transform: none !important;
}

.hero-art .hero-plate {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-plate img,
.hero-water-video {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-plate img {
  object-fit: cover;
  object-position: center center;
}

.hero-poster { z-index: 0; }

.hero-water-video {
  z-index: 2;
  /* The decoded first frame and the picture below are pixel-matched. Keep the
     video plane visible from first paint instead of waiting for a JS class:
     Chrome file:// previews can otherwise remain on the still poster forever. */
  opacity: 1;
  overflow: hidden;
  background: #f7f4ec url("assets/hero-river-calm-desktop-poster-v6.webp") center / cover no-repeat;
  transition: none;
  will-change: auto;
  pointer-events: none;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 600px) {
  .hero-plate img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
  }

  .hero-water-video {
    background-image: url("assets/hero-river-calm-mobile-poster-v6.webp");
    background-size: contain;
    background-position: center top;
    object-fit: contain;
    object-position: center top;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .hero-art { container-type: size; }

  .hero-art .hero-plate {
    inset: auto;
    top: 0;
    left: 50%;
    width: min(100cqw, 56.28cqh);
    height: min(100cqh, 177.68cqw);
    transform: translateX(-50%) !important;
  }

  .hero-plate img {
    object-fit: contain;
    object-position: center top;
  }

  .hero-water-video {
    background-image: url("assets/hero-river-calm-mobile-poster-v6.webp");
    background-size: contain;
    background-position: center top;
    object-fit: contain;
    object-position: center top;
  }
}

@media (max-width: 1024px) {
  .hero-art .hero-plate {
    -webkit-mask-image:
      linear-gradient(to bottom, #000 0 88%, rgba(0,0,0,.92) 91%, rgba(0,0,0,.48) 96%, transparent 100%),
      linear-gradient(to right, transparent 0, rgba(0,0,0,.7) 2%, #000 5% 95%, rgba(0,0,0,.7) 98%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, #000 0 88%, rgba(0,0,0,.92) 91%, rgba(0,0,0,.48) 96%, transparent 100%),
      linear-gradient(to right, transparent 0, rgba(0,0,0,.7) 2%, #000 5% 95%, rgba(0,0,0,.7) 98%, transparent 100%);
    mask-composite: intersect;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-water-video {
    display: none !important;
    opacity: 0 !important;
  }

  .hero-actions,
  .js.intro-pending .hero-actions,
  .js.intro-running .hero-actions,
  .js.intro-complete .hero-actions {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

@property --reveal-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.js .reveal {
  --reveal-y: 26px;
  opacity: 0;
  animation: none;
  transition:
    opacity .82s cubic-bezier(.2,.75,.2,1) var(--reveal-delay),
    --reveal-y .82s cubic-bezier(.2,.75,.2,1) var(--reveal-delay);
}

.js .reveal.is-visible {
  --reveal-y: 0px;
  opacity: 1;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    --reveal-y: 0px;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
}