/* =========================================================
   お問い合わせ＋フッター: 夕暮れの海（トップのみ）
   手紙のネイビーから空へ下りて、ヒーローと同じ湾と船に戻ってくる。
   背景 = 船のない海のループ動画（最初と最後のコマが同じ絵）
   空   = 絵の上半分を別の層にして、雲をごくゆっくり流す
   船   = 切り抜き画像を沖の水平線近くで CSS でゆっくり横切らせる（映り込みは明るい部分だけを残した透明画像）
   水平線は絵の高さの 50%。フッターの高さ＋--hz-gap の位置に水平線が来るよう JS が --foot-h を入れる
   ========================================================= */
.dusk { --foot-h: 148px; --hz-gap: 128px; position: relative; overflow: hidden; isolation: isolate; background: var(--navy, #0F1B2D); }
.dusk > .contact, .dusk > .footer { position: relative; z-index: 2; background: transparent; }
.dusk .contact__glow, .dusk .footer__line, .dusk .footer__glow { display: none; }
/* 星は空の上のほうだけ。夕焼けに近づくほど消える */
.dusk .contact > .stars { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 30%, transparent 58%); mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 30%, transparent 58%); }

.dusk__scene {
  position: absolute; z-index: 0; left: 0; width: 100%; aspect-ratio: 16 / 9;
  bottom: calc(var(--foot-h) + var(--hz-gap)); transform: translateY(50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%); mask-image: linear-gradient(180deg, transparent 0, #000 24%);
}
.dusk__still, .dusk__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dusk__video { opacity: 0; transition: opacity 1.2s ease; }
.dusk__video.is-on { opacity: 1; }
/* フッターの文字が読めるよう、下へ向かって海を暗く */
.dusk::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 62%, rgba(6,9,14,.72) 100%); }

/* ---------- 空: 雲だけをごくゆっくり流す ---------- */
/* 絵の上半分（水平線より上）を 1.25 倍にして、水平線を基準に重ねる。約2分50秒かけて端まで行き、減速して戻る */
.dusk__sky {
  position: absolute; left: 0; top: -12.5%; width: 125%; height: 62.5%;
  background: url(/assets/dusk/sky-2560.jpg) 0 0 / 100% 100% no-repeat;
  background-image: image-set(url(/assets/dusk/sky-2560.webp) type("image/webp"), url(/assets/dusk/sky-2560.jpg) type("image/jpeg"));
  /* 島の少し上で下の動画へ溶かす（島は動かさない） */
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 92%); mask-image: linear-gradient(180deg, #000 80%, transparent 92%);
  animation: dusk-drift 170s ease-in-out infinite alternate; will-change: transform;
}
@keyframes dusk-drift { from { transform: translateX(0); } to { transform: translateX(-20%); } }

/* ---------- 船: 沖の水平線近くを、ゆっくり（PCで約4分20秒かけて横切る） ---------- */
/* 切り抜きは元の絵（3840×2160）の x 2540 / y 1120 / 340×300。沖へ出すため 0.45 倍にし、喫水線を絵の 52.3% に置く */
.dusk__boat {
  --from: 9.3; --to: -17.8; --sail: 260s; --at: -89s;
  position: absolute; left: 66%; top: 50.43%; width: 3.984%; aspect-ratio: 340 / 300;
  animation: dusk-sail var(--sail) linear var(--at) infinite;
  /* 遠くの物らしく、空気でかすませる: わずかにぼかし、明暗と色を弱め、夕暮れの青に寄せる */
  filter: blur(.55px) contrast(.72) saturate(.65) brightness(.9);
  opacity: .92;
}
.dusk__hull, .dusk__refl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dusk__hull { z-index: 2; animation: dusk-bob 5.2s ease-in-out infinite alternate; }
.dusk__refl { z-index: 1; opacity: .8; transform-origin: 50% 32%; animation: dusk-shimmer 3.4s ease-in-out infinite alternate; }
/* 喫水線: 船体の下の暗い映り込みと、船首から脇へ流れるうっすらした白波 */
.dusk__boat::before, .dusk__boat::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.dusk__boat::before { left: 15%; width: 76%; top: 29.6%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 25%, rgba(6,10,18,.6), rgba(6,10,18,0) 100%); filter: blur(.6px); }
.dusk__boat::after { left: 5%; width: 88%; top: 29.8%; height: 1.8%; border-radius: 50%; background: linear-gradient(90deg, rgba(232,238,246,0), rgba(232,238,246,.55) 12%, rgba(232,238,246,.3) 40%, rgba(232,238,246,.22) 85%, rgba(232,238,246,.45) 100%); filter: blur(.4px); }
/* 引き波: 船外機の後ろに短く、少し開いて消える */
.dusk__wake { position: absolute; z-index: 1; left: 86%; top: 30.4%; width: 110%; height: 2px; pointer-events: none; }
.dusk__wake::before, .dusk__wake::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; border-radius: 50%; transform-origin: 0 50%; }
.dusk__wake::before { top: 0; transform: rotate(-1deg); background: linear-gradient(90deg, rgba(232,238,246,.6), rgba(232,238,246,.2) 35%, rgba(232,238,246,0) 100%); }
.dusk__wake::after { top: 1px; transform: rotate(2deg); background: linear-gradient(90deg, rgba(232,238,246,.4), rgba(232,238,246,0) 70%); }

@keyframes dusk-sail { from { transform: translateX(calc(var(--from) * 100%)); } to { transform: translateX(calc(var(--to) * 100%)); } }
@keyframes dusk-bob { from { transform: translateY(0); } to { transform: translateY(.8%); } }
@keyframes dusk-shimmer { from { opacity: .6; transform: scaleY(.98); } to { opacity: .85; transform: scaleY(1.03); } }

/* ---------- スマホ・タブレット縦: 絵を高さ基準にして、船の通り道を画面の中に収める ---------- */
@media (max-width: 767.98px) {
  .dusk { --hz-gap: 72px; }
  .dusk__scene { width: auto; height: 560px; left: calc((100% - 995.56px) * .62); }
  /* 見えている範囲（絵の約 38〜77%）の外から外へ */
  .dusk__boat { --from: 3.52; --to: -10.3; --sail: 120s; --at: -31s; filter: blur(.4px) contrast(.72) saturate(.65) brightness(.9); }
  .dusk__sky { background-image: url(/assets/dusk/sky-1280.jpg); background-image: image-set(url(/assets/dusk/sky-1280.webp) type("image/webp"), url(/assets/dusk/sky-1280.jpg) type("image/jpeg")); }
}

@media (prefers-reduced-motion: reduce) {
  .dusk__boat, .dusk__hull, .dusk__refl, .dusk__sky { animation: none; }
}

/* 大きい画面では絵が縦にも大きくなり、絵の上端のぼかしがセクションの外で切れて境目が出る。
   セクションの上端に、手紙のネイビーから溶かすぼかしを重ねる（どの幅でも境目が出ない） */
.dusk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(200px, 34%, 440px); z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--navy, #0F1B2D) 0%, rgba(15,27,45,.85) 25%, rgba(15,27,45,.45) 60%, rgba(15,27,45,0) 100%); }

/* 絵が下端まで届かない画面では、水平線を中心に --sea-k 倍にする（dusk.js が計算） */
.dusk__scene { transform: translateY(50%) scale(var(--sea-k, 1)); }