/* Copyright (c) 2026 Monta AI */
.pavilion-hero {
  --pavilion-render-scale: 1.4;
  grid-area: 1 / 1;
  position: relative;
  height: clamp(460px, 43vw, 620px);
  margin: 0;
  opacity: .5;
  pointer-events: none;
  overflow: visible;
}
.pavilion-hero model-viewer, .pavilion-poster, .pavilion-first-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  object-fit: cover;
}
.pavilion-hero model-viewer, .pavilion-first-frame {
  inset: auto;
  top: calc((1 - var(--pavilion-render-scale)) * 50%);
  left: calc((1 - var(--pavilion-render-scale)) * 50%);
  width: calc(100% * var(--pavilion-render-scale));
  height: calc(100% * var(--pavilion-render-scale));
  transition: opacity .8s ease;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}
.pavilion-hero model-viewer { opacity: 0; --poster-color: transparent; }
.pavilion-first-frame { object-fit: contain; }
.pavilion-poster { visibility: hidden; }
.pavilion-poster-dark { display: none; }
:root[theme="dark"] .pavilion-poster-light { display: none; }
:root[theme="dark"] .pavilion-poster-dark { display: block; }
.pavilion-ready model-viewer { opacity: 1; }
.pavilion-ready .pavilion-first-frame { opacity: 0; }
.pavilion-hero:is([data-preview="still"], [data-preview="unavailable"]) .pavilion-poster { visibility: visible; }
.pavilion-hero:is([data-preview="still"], [data-preview="unavailable"]) .pavilion-first-frame { visibility: hidden; }
@media (max-width: 900px) { .pavilion-hero { height: 460px; } }
@media (max-width: 420px) { .pavilion-hero { height: 400px; } .pavilion-poster { object-fit: contain; } }
@media (prefers-reduced-motion: reduce) { .pavilion-hero model-viewer, .pavilion-first-frame { transition: none; } }