/* Material showcase: transform/opacity only; no video or animation dependencies. */
.hero-visual > .hero-material-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1);
  transition: opacity 850ms ease;
  animation: material-drift 13s ease-in-out infinite alternate;
}
.hero-visual > .hero-material-frame.is-current { opacity: 1; }
.hero-visual[data-playback="paused"] > .hero-material-frame { animation-play-state: paused; }
.hero-visual .image-topline { z-index: 3; align-items: center; }
.material-playback { display: flex; align-items: center; gap: 13px; }
.material-motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 66px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid #a8bbc04d;
  background: #06101866;
  color: #e7edef;
  font: inherit;
  font-size: 11px;
  letter-spacing: .03em;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.material-motion-toggle[hidden] { display: none; }
.material-motion-toggle:hover { background: #20343de6; border-color: #a8bbc0; }
.hero-visual button:focus-visible,
.hero-visual figcaption > a:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.hero-visual figcaption > a { min-width: 44px; min-height: 44px; }
.material-switcher button { min-height: 48px; transition: color 200ms, background-color 200ms; }
.material-switcher button[aria-pressed="true"] { box-shadow: inset 0 3px #8ca5ab; }
@keyframes material-drift {
  from { transform: scale(1); }
  to { transform: scale(1.075); }
}
@media (max-width: 640px) {
  .hero-visual { aspect-ratio: 1.25; }
  .hero-visual .image-topline { top: 10px; }
  .material-playback { gap: 8px; }
  .material-motion-toggle { min-width: 59px; padding-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual > .hero-material-frame { animation: none; transition: none; transform: none; }
}