/* 演出（task 007）— public/staging.js が作る全画面の舞台。基準は院長のモック mrc-himitsu-mock.html */
:root {
  --stg-ink: #3a1e0c;
  --stg-soft: #7a5a45;
  --stg-ground: #fff6e6;
  --stg-night1: #0c1236;
  --stg-night2: #27306b;
  --stg-night3: #3d3f7a;
  --stg-teal: #2b8f96;
  --stg-teal-deep: #1f6f75;
}

.stg {
  position: fixed; inset: 0; z-index: 2000; overflow: hidden;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif; font-weight: 700;
  color: var(--stg-ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, #bfe4ff 0%, #f2fbff 70%, var(--stg-ground) 100%);
  /* 🔴 background は transition しない。グラデーション→単色の間は色が「透明→白」で補間され、
     1.6秒ほど後ろのホームが透けて見えた（task 007 の撮影で実測）。夜は ::before の重ねで出し入れする */
  transition: opacity .3s;
  opacity: 0;
  touch-action: manipulation;
}
.stg.in { opacity: 1; }
.stg.out { opacity: 0; }
.stg [hidden] { display: none !important; }

/* 背景の種類 */
.stg-hatch { background: radial-gradient(circle at 50% 44%, #fff4d6 0%, #ffd9a8 45%, #e8a86a 100%); }
.stg-evolve { background: radial-gradient(circle at 50% 44%, #3d4f8f 0%, #1c2553 70%, #0c1236 100%); color: #fff; }
.stg::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s;
  background: linear-gradient(180deg, var(--stg-night1) 0%, var(--stg-night2) 60%, var(--stg-night3) 100%); }
.stg.night::before { opacity: 1; }
.stg.rainbow { background: #fff; }

/* キャラ */
.stg-chara { position: absolute; left: 50%; top: 44%; width: 56%; max-width: 260px; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 5; }
.stg-hatch .stg-chara { width: 64%; max-width: 300px; }
.stg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: filter .8s; }
.stg-himitsu .stg-img.a, .stg.idle .stg-img.a { animation: stg-floaty 3.2s ease-in-out infinite; }
@keyframes stg-floaty { 50% { transform: translateY(-8px); } }
.stg.white .stg-img { filter: brightness(0) invert(1) drop-shadow(0 0 18px #fff) drop-shadow(0 0 40px #b9c6ff); }
.stg.silhouette .stg-img.a { filter: brightness(0) invert(1) drop-shadow(0 0 18px #fff) drop-shadow(0 0 40px #b9c6ff); }
.stg.after .stg-img.b { animation: stg-floaty 2.6s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(255,255,255,.9)); }
.stg.done .stg-img.b { filter: drop-shadow(0 0 14px rgba(255,255,255,.8)); }
.stg-img.half.top { clip-path: polygon(0 0, 100% 0, 100% 50%, 84% 55%, 70% 48%, 56% 56%, 44% 47%, 30% 55%, 16% 48%, 0 54%); }
.stg-img.half.bottom { clip-path: polygon(0 54%, 16% 48%, 30% 55%, 44% 47%, 56% 56%, 70% 48%, 84% 55%, 100% 50%, 100% 100%, 0 100%); }

/* 孵化のひび（2回目で光がもれる） */
.stg-crack { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.stg-crack polyline { fill: none; stroke: #5a2f0c; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s; }
.stg.crack1 .stg-crack .c1 { opacity: 1; }
/* 2回目：ひびが大きくなり、すきまから光がもれる（線は茶色のまま・まわりを光らせる） */
.stg.crack2 .stg-crack .c1, .stg.crack2 .stg-crack .c2 { opacity: 1; stroke-width: 2.6; filter: drop-shadow(0 0 2px #fff6c4) drop-shadow(0 0 6px #ffe08a) drop-shadow(0 0 12px #fff3a0); }
.stg-leak { position: absolute; left: 50%; top: 52%; width: 70%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,230,.95) 0%, rgba(255,230,140,.5) 40%, rgba(255,230,140,0) 70%); opacity: 0; transition: opacity .3s; z-index: 1; }
.stg.crack2 .stg-leak { opacity: .55; }
.stg-burst { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; z-index: 6; box-shadow: 0 0 10px rgba(255,255,255,.9); }

/* タップの数（孵化） */
.stg-dots { position: absolute; left: 0; right: 0; top: calc(11% + 44px); display: flex; justify-content: center; gap: 12px; z-index: 8; }
.stg-dots i { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.55); border: 3px solid #fff; }
.stg-dots i.on { background: #f6c445; }

/* 文字 */
.stg-msg { position: absolute; left: 0; right: 0; text-align: center; z-index: 8; font-size: 22px; line-height: 1.5; padding: 0 20px;
  opacity: 0; transition: opacity .5s; pointer-events: none; word-break: keep-all; overflow-wrap: anywhere; }
.stg-msg.on { opacity: 1; }
.stg-msg.top { top: 11%; }
.stg-msg.bottom { bottom: 24%; font-size: 24px; }
.stg-egg .stg-msg, .stg-hatch .stg-msg { color: var(--stg-ink); }
.stg-evolve .stg-msg, .stg.night .stg-msg { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.stg.rainbow .stg-msg { color: var(--stg-ink); text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 0 12px #fff; }
.stg-say { position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: calc(24% + 48px); z-index: 8; max-width: 86%;
  background: #fff; color: var(--stg-ink); border-radius: 18px; padding: 8px 16px; font-size: 17px; box-shadow: 0 4px 12px rgba(0,0,0,.15);
  word-break: keep-all; overflow-wrap: anywhere; text-align: center; }
.stg-qq { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); font-size: 64px; color: var(--stg-night2); z-index: 6;
  opacity: 0; transition: opacity .6s; font-weight: 900; letter-spacing: .05em; pointer-events: none; }
.stg.silhouette .stg-qq { opacity: .55; }

/* ボタン */
.stg-actions { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 12; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px; }
.stg-actions.in-cert { position: absolute; bottom: auto; top: auto; }
.stg-btn { font: inherit; font-weight: 900; border: 0; border-radius: 999px; padding: 13px 22px; font-size: 18px; cursor: pointer; min-height: 48px; }
.stg-btn-story { background: var(--stg-teal); color: #fff; box-shadow: 0 4px 0 var(--stg-teal-deep); }
.stg-btn-close, .stg-btn-again { background: #fff; color: var(--stg-ink); border: 3px solid #eadcc8; }
.stg-skip { position: absolute; right: 14px; top: calc(14px + env(safe-area-inset-top, 0px)); z-index: 15; font: inherit; font-weight: 700; font-size: 15px;
  border: 0; border-radius: 999px; padding: 8px 16px; background: rgba(255,255,255,.75); color: var(--stg-ink); min-height: 40px; }

/* ひみつ：星・集まる光・長押しの輪・光 */
.stg-stars { position: absolute; inset: 0; pointer-events: none; }
.stg-stars i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity 1.5s; }
.stg.night .stg-stars i { opacity: .9; animation: stg-tw 2.2s ease-in-out infinite; }
@keyframes stg-tw { 50% { opacity: .3; } }
.stg-conv { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff6c4; box-shadow: 0 0 10px #fff3a0; z-index: 4; pointer-events: none; }
.stg-ring { position: absolute; left: 50%; top: 44%; width: 78%; max-width: 340px; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; opacity: 0; transition: opacity .4s; }
.stg-ring.on { opacity: 1; }
.stg-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.stg-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.stg-ring .bg { stroke: rgba(255,255,255,.18); }
.stg-ring .fg { stroke: url(#stg-rg); filter: drop-shadow(0 0 8px #fff); }
.stg-glow { position: absolute; left: 50%; top: 44%; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff, rgba(255,255,255,0) 70%); z-index: 2; pointer-events: none; }
.stg-hold { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); z-index: 9; border: 0; border-radius: 999px; padding: 18px 34px;
  font: inherit; font-size: 22px; font-weight: 900; color: var(--stg-night2); background: #fff; box-shadow: 0 6px 0 #b9c6ff, 0 0 30px rgba(255,255,255,.7);
  animation: stg-pulse 1.2s ease-in-out infinite; touch-action: none; white-space: nowrap; }
@keyframes stg-pulse { 50% { transform: translateX(-50%) scale(1.06); } }
.stg-hold:active { box-shadow: 0 2px 0 #b9c6ff, 0 0 40px #fff; }
.stg.shake { animation: stg-shake .12s linear infinite; }
@keyframes stg-shake {
  0% { transform: translate(0, 0); } 25% { transform: translate(var(--s), calc(var(--s) * -1)); }
  50% { transform: translate(calc(var(--s) * -1), var(--s)); } 75% { transform: translate(var(--s), var(--s)); } 100% { transform: translate(0, 0); }
}
.stg-rays { position: absolute; left: 50%; top: 44%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #ff9ac2 0 10deg, #ffd27a 10deg 20deg, #9be6d2 20deg 30deg, #a8c8ff 30deg 40deg, #d7b4ff 40deg 50deg);
  opacity: 0; transform: scale(.2); transition: opacity .6s, transform 1.2s cubic-bezier(.2,.8,.2,1); pointer-events: none; visibility: hidden; }
.stg-rays::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,.35) 22%, rgba(255,255,255,0) 45%); }
/* 🔴 回すのは虹が出ているときだけ（画面の何倍もある要素なので、見えていないあいだも回すと長押しの描画が重くなる） */
.stg.rainbow .stg-rays { opacity: 1; transform: scale(1); visibility: visible; animation: stg-spin 18s linear infinite; }
@keyframes stg-spin { to { rotate: 360deg; } }

/* 白い光・紙吹雪 */
.stg-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 20; pointer-events: none; }
.stg-flash.go { animation: stg-flash 1.1s ease-out; }
@keyframes stg-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.stg-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.stg-confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: stg-fall linear forwards; }
@keyframes stg-fall { to { transform: translateY(110vh) rotate(720deg); } }

/* 証明書 */
.stg-cert { position: absolute; left: 50%; top: 46%; width: 88%; max-width: 400px; transform: translate(-50%, -50%) scale(.6); opacity: 0; z-index: 30;
  background: #fffdf5; border-radius: 26px; padding: 20px 18px 16px; text-align: center; border: 5px solid transparent;
  background-image: linear-gradient(#fffdf5, #fffdf5), conic-gradient(#ff9ac2, #ffd27a, #9be6d2, #a8c8ff, #d7b4ff, #ff9ac2);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 18px 40px rgba(0,0,0,.25); transition: all .6s cubic-bezier(.2,1.4,.4,1); color: var(--stg-ink); }
.stg-cert.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.stg-cert .ribbon { display: inline-block; background: #ff7fae; color: #fff; border-radius: 999px; padding: 6px 18px; font-size: 15px; margin-bottom: 6px; }
.stg-cert h2 { margin: 4px 0 2px; font-size: 26px; font-weight: 900; }
.stg-cert .pic { width: 58%; margin: 4px auto 2px; aspect-ratio: 1; }
.stg-cert .pic img { width: 100%; height: 100%; object-fit: contain; }
.stg-cert .who { font-size: 18px; }
.stg-cert .date { font-size: 14px; color: var(--stg-soft); margin: 6px 0 2px; }
.stg-actions.in-cert { bottom: 5%; }

/* ひみつの前ぶれ（ホームの主役のまわり） */
.stg-spark { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; z-index: 50; pointer-events: none; animation: stg-sp 1.6s ease-out forwards; }
.stg-spark::before { content: ""; position: absolute; inset: 0; background: conic-gradient(#ff9ac2, #ffd27a, #9be6d2, #a8c8ff, #d7b4ff, #ff9ac2);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes stg-sp { 0% { transform: translate(0, 0) scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; } }

/* 🔴 アニメーションを減らす設定：揺れ・回転・ふわふわ・光線の回転を止める（フェードと光は残す） */
@media (prefers-reduced-motion: reduce) {
  .stg.shake, .stg-rays, .stg-hold, .stg-img, .stg.after .stg-img.b, .stg-himitsu .stg-img.a { animation: none !important; }
  .stg-confetti i { animation-name: stg-fade !important; }
  .stg-cert { transition: opacity .6s; transform: translate(-50%, -50%); }
}
@keyframes stg-fade { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }