/* v082: 七福神イラストの左右切れ防止。動画から全体表示のイラストへ切り替える */
.hero-art-transition {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-dragon-visual {
  position: relative;
  width: min(500px, 100%);
  aspect-ratio: 892 / 1024;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 24px;
  background: #f4ecdb;
  box-shadow: 0 26px 42px rgba(83, 52, 26, .16);
  isolation: isolate;
}

.hero-dragon-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 232, 160, .36), transparent 30%),
    linear-gradient(180deg, transparent 62%, rgba(255, 252, 240, .10) 100%);
  opacity: .85;
}

.hero-dragon-video,
.hero-dragon-final {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
  max-height: none !important;
  border-radius: inherit;
  margin: 0 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.hero-dragon-video {
  z-index: 1;
  opacity: 1;
  transition: opacity .8s ease;
}

.hero-dragon-final {
  z-index: 2;
  opacity: 0;
  object-fit: contain !important;
  background: #fffaf0;
  transform: scale(1.015);
  transition: opacity 1.05s ease, transform 1.05s ease;
}

.hero-dragon-visual.is-finished .hero-dragon-video {
  opacity: 0;
}

.hero-dragon-visual.is-finished .hero-dragon-final {
  opacity: 1;
  transform: scale(1);
}

.hero-dragon-fallback-note {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 1020px) {
  .hero-art-transition {
    width: 100%;
  }

  .hero-dragon-visual {
    width: min(430px, 88vw);
  }
}

@media (max-width: 640px) {
  .hero-dragon-visual {
    width: min(380px, 92vw);
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dragon-video {
    display: none;
  }

  .hero-dragon-final {
    opacity: 1;
    transform: none;
  }
}