/* トップの動くヒーロー（案）：横浜の写真1枚から、波・空・光の動きを作る */
.hero--motion { position: relative; min-height: max(560px, calc(100svh - 68px)); display: grid; align-items: center; border-bottom: 0; background: var(--navy-deep); color: #fff; overflow: hidden; }
.hero--motion .hero-photo { position: absolute; inset: 0; width: auto; height: auto; overflow: hidden; }
.hero--motion .hero-photo img,
.hero--motion .hero-photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero--motion .hero-photo img { object-fit: cover; object-position: 24% 55%; }
.hero--motion .hero-photo canvas { opacity: 0; transition: opacity 1.2s ease; }
.hero--motion .hero-photo.gl-on canvas { opacity: 1; }
.hero--motion .hero-photo.gl-on img { animation: none; }
/* 文字を読みやすくする濃紺のベール */
.hero--motion .hero-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 62% at 50% 50%, rgba(14, 23, 45, 0.6) 0%, rgba(14, 23, 45, 0) 70%),
    linear-gradient(180deg, rgba(14, 23, 45, 0.55) 0%, rgba(14, 23, 45, 0.15) 45%, rgba(14, 23, 45, 0.6) 100%);
}
.hero--motion .wrap { position: relative; z-index: 1; padding-block: clamp(56px, 10vh, 120px); }
.hero--motion .eyebrow { color: var(--gold-soft); }
.hero--motion .eyebrow::before, .hero--motion .eyebrow::after { background: var(--gold-soft); }
.hero--motion h1 { color: #fff; text-shadow: 0 2px 24px rgba(8, 14, 30, 0.45); }
.hero--motion h1 .accent { color: var(--gold-soft); }
.hero--motion .lead { color: var(--on-dark); text-shadow: 0 1px 12px rgba(8, 14, 30, 0.5); }
.hero--motion .facts li { color: var(--on-dark); }
.hero--motion .facts li.free { color: #fff; }
.hero--motion .facts li + li::before { color: var(--gold-soft); }
.hero--motion .btn-primary { background: #fff; color: var(--navy); border-color: #fff; }
.hero--motion .btn-primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--navy); }
.hero--motion .btn-ghost { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(2px); }
.hero--motion .btn-ghost:hover { background: #fff; color: var(--navy); }

/* 下へ促すライン */
.hero-scroll { position: absolute; left: 50%; bottom: 18px; z-index: 1; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: var(--on-dark); font-size: 0.68rem; letter-spacing: 0.3em; text-decoration: none; }
.hero-scroll::after { content: ""; width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.2) 50%); background-size: 1px 200%; }

@media (prefers-reduced-motion: no-preference) {
  .hero--motion .hero-photo img { animation: heroDrift 40s ease-in-out infinite alternate; }
  @keyframes heroDrift { from { transform: scale(1.02); } to { transform: scale(1.1) translateX(-1.5%); } }
  .hero--motion .wrap > div > * { opacity: 0; transform: translateY(18px); animation: heroIn 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
  .hero--motion .wrap > div > :nth-child(1) { animation-delay: .3s; }
  .hero--motion .wrap > div > :nth-child(2) { animation-delay: .55s; }
  .hero--motion .wrap > div > :nth-child(3) { animation-delay: .85s; }
  .hero--motion .wrap > div > :nth-child(4) { animation-delay: 1.05s; }
  .hero--motion .wrap > div > :nth-child(5) { animation-delay: 1.25s; }
  @keyframes heroIn { to { opacity: 1; transform: none; } }
  .hero--motion h1 .accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold-soft); transform: scaleX(0); transform-origin: left; animation: heroLine 1.4s 1.4s cubic-bezier(.6, 0, .2, 1) forwards; }
  @keyframes heroLine { to { transform: scaleX(1); } }
  .hero-scroll::after { animation: heroScroll 2.2s cubic-bezier(.6, 0, .4, 1) infinite; }
  @keyframes heroScroll { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
}
@media (max-width: 720px) {
  .hero--motion { min-height: max(520px, calc(100svh - 60px)); }
  .hero-scroll { display: none; }
}