/* =================================================================
   OPENING ANIMATION（2026-06-21 / CTO実装）
   既存 opening-overlay（全画面シェル・フェード・SKIP・セッション制御）の
   内側コンテンツを「歩く→合流→後ろ姿で家へ→ドア閉→ロゴ→キャッチ」の
   通しアニメに差し替える。全カット いろは素材。
   - ステージは画面いっぱい（フルブリード）。要素は viewport 比でスケール。
   ================================================================= */

/* ステージ＝画面いっぱい */
.opening-overlay--anim { display: block; }   /* シェルの中央寄せ flex を無効化 */
.opening-overlay--anim .oa-stage {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: #DDEFD3;
}

/* 背景レイヤー（中立＋右しなり＋左しなりをクロスフェードで揺らす） */
.oa-bg { position: absolute; inset: 0; z-index: 0; }
.oa-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom; max-width: none; display: block;
}
.oa-bg-r, .oa-bg-l { opacity: 0; will-change: opacity; }
.opening-overlay.is-playing .oa-bg-r { animation: oaSwayR 8s ease-in-out infinite; }
.opening-overlay.is-playing .oa-bg-l { animation: oaSwayL 8s ease-in-out infinite; }
/* 右に傾けて保持 → 中立 → 左に傾けて保持（中立を挟みゴースト最小） */
@keyframes oaSwayR { 0%, 8% { opacity: 0; } 22%, 38% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes oaSwayL { 0%, 58% { opacity: 0; } 72%, 88% { opacity: 1; } 100% { opacity: 0; } }

/* 描き込み背景に置き換えたため、旧CSS背景パーツは非表示 */
.oa-sun, .oa-ground, .oa-path { display: none; }

@media (prefers-reduced-motion: reduce) {
  .oa-bg-r, .oa-bg-l { animation: none !important; opacity: 0 !important; }
}

/* 歩行スプライト（4コマ・0.5sループ / 高さは画面比でスケール） */
.oa-walker { position: absolute; bottom: 19%; left: 50%; background-repeat: no-repeat; z-index: 3; opacity: 0; will-change: transform, opacity; }
.oa-nurse {
  --h: clamp(170px, 32vh, 320px);
  --w: calc(var(--h) * 381 / 702);
  width: var(--w); height: var(--h);
  background-image: url(opening/nurse_walk_strip.png);
  background-size: calc(var(--w) * 4) var(--h);
}
.oa-patient {
  --h: clamp(162px, 30.5vh, 305px);
  --w: calc(var(--h) * 354 / 679);
  width: var(--w); height: var(--h);
  background-image: url(opening/patient_walk_strip.png);
  background-size: calc(var(--w) * 4) var(--h);
}

.oa-meet { position: absolute; bottom: 17%; left: 50%; transform: translateX(-50%) scale(.92); transform-origin: bottom center; opacity: 0; z-index: 3; }
.oa-meet img { height: clamp(185px, 35vh, 350px); max-width: none; display: block; filter: drop-shadow(0 6px 6px rgba(40,70,40,.18)); }

.oa-back { position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%) scale(.85); transform-origin: bottom center; opacity: 0; z-index: 3; }
.oa-back img { height: clamp(180px, 34vh, 340px); max-width: none; display: block; filter: drop-shadow(0 6px 6px rgba(40,70,40,.18)); }

.oa-house {
  --hh: clamp(180px, 36vh, 360px);
  position: absolute; bottom: 15%; left: 50%;
  width: calc(var(--hh) * 653 / 685); height: var(--hh);
  transform: translateX(-50%) scale(0); transform-origin: bottom center; opacity: 0; z-index: 2;
}
.oa-house img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: var(--hh); max-width: none; display: block; }
.oa-house .oa-closed { opacity: 0; }

.oa-logo { position: absolute; bottom: 59%; left: 50%; width: clamp(150px, 17vw, 260px); transform: translateX(-50%) translateY(16vh) scale(.85); opacity: 0; z-index: 1; }
.oa-logo img { width: 100%; max-width: none; display: block; filter: drop-shadow(0 4px 10px rgba(60,90,55,.25)); }

.oa-catch {
  position: absolute; bottom: 51%; left: 0; right: 0; text-align: center; opacity: 0; z-index: 5;
  font-family: var(--font-sans, 'M PLUS Rounded 1c', sans-serif);
  font-weight: 700; color: #3F6B3D; font-size: clamp(18px, 3vw, 34px);
  letter-spacing: .05em; text-shadow: 0 2px 10px rgba(255,255,255,.75);
}

/* 常時ブランド表示（左上）— 開いた瞬間に「いろはのHP」と分かる */
.oa-brand {
  position: absolute; top: clamp(14px, 3vh, 28px); left: clamp(14px, 3vw, 32px);
  display: flex; align-items: center; gap: 10px; z-index: 6;
  opacity: 0; animation: oaFadeIn 1s ease .3s forwards;
}
.oa-brand img { width: clamp(38px, 5vw, 54px); height: auto; max-width: none; display: block;
  filter: drop-shadow(0 1px 3px rgba(60,90,55,.18)); }
.oa-brand-text { font-family: var(--font-sans, 'M PLUS Rounded 1c', sans-serif); line-height: 1.2;
  text-shadow: 0 1px 6px rgba(255,255,255,.85); }
.oa-brand-text small { display: block; font-size: clamp(10px, 1.15vw, 13px); font-weight: 600; color: #5B8C57; letter-spacing: .06em; }
.oa-brand-text b     { display: block; font-size: clamp(18px, 2.1vw, 24px); font-weight: 800; color: #3F6B3D; letter-spacing: .04em; }

@keyframes oaFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* スキップボタンを「押せるボタン」に格上げ（早め 0.8s に出す） */
.opening-overlay--anim .opening-overlay__skip {
  right: clamp(14px, 3vw, 32px); bottom: clamp(14px, 3vh, 26px);
  background: rgba(255, 255, 255, .85); border: 1.5px solid rgba(63, 107, 61, .45);
  color: #3F6B3D; font-weight: 700; font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: .08em; padding: 10px 22px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(60, 90, 55, .20);
  opacity: 0; animation: oaFadeIn 1s ease .8s forwards; z-index: 7;
}
.opening-overlay--anim .opening-overlay__skip:hover,
.opening-overlay--anim .opening-overlay__skip:focus-visible {
  background: #fff; border-color: rgba(63, 107, 61, .7); transform: translateY(-1px);
}
/* CSSで右向き三角を描く（絵文字レンダリング回避） */
.oa-skip-tri {
  display: inline-block; width: 0; height: 0; margin-left: 8px; vertical-align: middle;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}

/* ===== 再生（.opening-overlay に .is-playing が付いたら走る） ===== */
.opening-overlay.is-playing .oa-nurse   { animation: oaStep .5s steps(4) infinite, oaNurseSlide 12s ease-out forwards; }
.opening-overlay.is-playing .oa-patient { animation: oaStep .5s steps(4) infinite, oaPatientSlide 12s ease-out forwards; }
.opening-overlay.is-playing .oa-meet    { animation: oaMeetSeq 12s ease-in-out forwards; }
.opening-overlay.is-playing .oa-back    { animation: oaBackSeq 12s ease-in-out forwards; }
.opening-overlay.is-playing .oa-house   { animation: oaHouseSeq 12s ease-in-out forwards; }
.opening-overlay.is-playing .oa-house .oa-open   { animation: oaOpenVis 12s linear forwards; }
.opening-overlay.is-playing .oa-house .oa-closed { animation: oaClosedVis 12s linear forwards; }
.opening-overlay.is-playing .oa-logo    { animation: oaLogoSeq 12s ease-out forwards; }
.opening-overlay.is-playing .oa-catch   { animation: oaCatchSeq 12s ease-out forwards; }

/* スプライト送り（各 walker の --w を参照して 4コマ分シフト） */
@keyframes oaStep { from { background-position-x: 0; } to { background-position-x: calc(var(--w) * -4); } }

/* 左右対称＝画面中央で合流（translateX -50% で各自を中央寄せしてから ±offset） */
@keyframes oaNurseSlide   { 0%{transform:translateX(calc(-50% - 60vw));opacity:1} 25%{transform:translateX(calc(-50% - 6vw));opacity:1} 29%{transform:translateX(calc(-50% - 6vw));opacity:0} 100%{transform:translateX(calc(-50% - 6vw));opacity:0} }
@keyframes oaPatientSlide { 0%{transform:translateX(calc(-50% + 60vw));opacity:1} 25%{transform:translateX(calc(-50% + 6vw));opacity:1} 29%{transform:translateX(calc(-50% + 6vw));opacity:0} 100%{transform:translateX(calc(-50% + 6vw));opacity:0} }
@keyframes oaMeetSeq  { 0%,26%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.92)} 31%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} 40%{opacity:1;transform:translateX(-50%) scale(1)} 45%{opacity:0;transform:translateX(-50%) scale(.98)} 100%{opacity:0} }
@keyframes oaBackSeq  { 0%,44%{opacity:0;transform:translateX(-50%) scale(.85)} 49%{opacity:1;transform:translateX(-50%) scale(.8)} 62%{opacity:1;transform:translateX(-50%) translateY(-1vh) scale(.42)} 70%{opacity:0;transform:translateX(-50%) translateY(-2vh) scale(.2)} 100%{opacity:0} }
@keyframes oaHouseSeq { 0%,40%{opacity:0;transform:translateX(-50%) scale(0)} 48%{opacity:1;transform:translateX(-50%) scale(.4)} 64%{opacity:1;transform:translateX(-50%) scale(.95)} 78%{opacity:1;transform:translateX(-50%) scale(.9)} 100%{opacity:1;transform:translateX(-50%) scale(.9)} }
@keyframes oaOpenVis   { 0%,45%{opacity:0} 50%,70%{opacity:1} 77%,100%{opacity:0} }
@keyframes oaClosedVis { 0%,71%{opacity:0} 78%,100%{opacity:1} }
@keyframes oaLogoSeq  { 0%,79%{opacity:0;transform:translateX(-50%) translateY(16vh) scale(.85)} 89%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} 100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} }
@keyframes oaCatchSeq { 0%,87%{opacity:0;transform:translateY(12px)} 95%,100%{opacity:1;transform:translateY(0)} }

/* スマホ: 横幅が狭いので全体を引き（被写体を縮小）＋家を群に寄せる */
@media (max-width: 768px) {
  .oa-nurse   { --h: clamp(116px, 18vh, 190px); }
  .oa-patient { --h: clamp(110px, 17vh, 182px); }
  .oa-meet img { height: clamp(126px, 20vh, 200px); }
  .oa-back img { height: clamp(122px, 19vh, 192px); }
  .oa-house { --hh: clamp(150px, 27vh, 260px); bottom: 22%; }
  .oa-logo { width: clamp(120px, 34vw, 180px); }
  .oa-catch { font-size: clamp(15px, 4.5vw, 22px); padding: 0 16px; }
}

/* reduced-motion: 一度きりの物語(歩く→合流→家→ロゴ→キャッチ)は再生する。
   連続ループする背景の揺れ(.oa-bg-r/l)だけ抑制する（上の媒体クエリで対応済み）。 */