@import url('/valmar-palette.css');

.valmar-motion {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--brand-neutral) 24%, var(--brand-background));
  isolation: isolate;
}
.valmar-motion > video {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  object-fit: contain;
  transform: none;
}
.valmar-motion > video:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: -5px;
}
.hero.valmar-motion-hero {
  position: relative;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
/* These two replacement heroes have light paper behind the navigation. */
.site-header.valmar-motion-on-paper .site-header__primary #logo-valmar {
  background-image: url('/brand/valmar-registered-black.png') !important;
}
.site-header.valmar-motion-on-paper .site-header__primary .icon {
  color: var(--brand-text);
}
@media (min-width: 768px) {
  .valmar-motion[data-motion-layout="responsive"] { aspect-ratio: 3; }
}

/* Decorative films never intercept taps or expose native playback UI. */
.valmar-motion > video { pointer-events: none; }
.valmar-motion > video::-webkit-media-controls { display: none !important; }