/* css/00-gate.css — にゅうえんぐち（unit=gate-hero。SPEC §4 00 gate）
   鉄格子の門ごしにヒーローが見え、中央に入園券。押すとチャイムの3拍でタイトルがそろい、2秒止まってシャッターが上がる。
   原画には「位置・回転・等倍の拡縮」と drop-shadow だけ（SPEC §0-1）。動きは js/00-gate.js */

/* ---------- 4-25 ローダー（verbatim の器。上部中央の小さな領域だけ） ---------- */
#mp-loader {
  position: fixed; top: 10px; left: 50%; z-index: calc(var(--z-gate) + 2);
  width: 180px; margin-left: -90px; pointer-events: none; background: transparent;
}
#mp-loader .mp-loader-panel { display: block; }
#mp-loader .mp-loader-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
#mp-loader .mp-loader-logo path { fill: none; stroke: var(--do); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
#mp-loader .mp-loader-bar, #mp-loader .mp-loader-num {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 門（全画面の器） ---------- */
.gate {
  position: fixed; inset: 0; z-index: var(--z-gate);
  display: block;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.gate-shutter {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 56px var(--gutter) 48px;
  overflow: hidden auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 0 0);
  /* 紙を透かした地: 券の奥は紙が濃く、四隅ほどヒーローの色が透ける */
  background:
    radial-gradient(ellipse 56% 60% at 50% 50%, rgba(242, 234, 219, .88) 0 40%, rgba(242, 234, 219, .7) 64%, rgba(242, 234, 219, .42) 100%);
}
/* 縦の鉄格子（墨の棒）。棒の頭に小さなやりの穂 */
.gate-bars {
  position: absolute; inset: 0; pointer-events: none;
  --pitch: 84px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 calc(var(--pitch) / 2 - 7px),
      var(--ink) calc(var(--pitch) / 2 - 7px) calc(var(--pitch) / 2 - 4px),
      #2d2b4d calc(var(--pitch) / 2 - 4px) calc(var(--pitch) / 2 + 3px),
      var(--ink) calc(var(--pitch) / 2 + 3px) calc(var(--pitch) / 2 + 7px),
      transparent calc(var(--pitch) / 2 + 7px) var(--pitch));
  background-position: center 0;
}
@media (max-width: 599px) { .gate-bars { --pitch: 58px; } }
.gate-rail {
  position: absolute; left: 0; right: 0; height: 26px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, var(--mi) 0 3.5px, transparent 4.5px) center / 42px 26px repeat-x,
    var(--ink);
  box-shadow: 0 3px 0 rgba(28, 27, 51, .25);
}
.gate-rail--top { top: 0; }
.gate-rail--bottom { bottom: 0; box-shadow: 0 -3px 0 rgba(28, 27, 51, .25); }
.gate-rail--bottom::after {
  /* シャッターの下の握り */
  content: ''; position: absolute; left: 50%; top: -14px; width: 88px; height: 14px; margin-left: -44px;
  background: var(--do); border: 3px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0;
}

/* ---------- 舞台（券とのぞく子） ---------- */
.gate-stage {
  position: relative; z-index: 1;
  width: min(92vw, 700px);
  margin-block: 56px 32px;       /* 上の子が券の上に立てる余白 */
  transform: rotate(-1.2deg);
}
.gate-ticket {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) 104px;
  padding: 0; background-color: var(--paper-hi);
  box-shadow: var(--sh-step-lg), 0 30px 50px -24px rgba(28, 27, 51, .55);
}
.ticket-main { padding: var(--sp-5) var(--sp-6) var(--sp-5) calc(var(--sp-6) + 18px); min-width: 0; }
.ticket-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 2px dashed var(--ink-line);
}
.ticket-label { font-weight: 900; font-size: var(--fs-small); letter-spacing: .06em; word-break: keep-all; }
.ticket-no { white-space: nowrap; color: var(--ink-soft); }
.ticket-no b { color: var(--do); font-weight: 500; font-size: 1.05rem; letter-spacing: .08em; }

/* 1-1 タイトル: 3群（.beat）をマスクの中からせり上げる。字の縁と影が切れないよう余白つき */
.gate-title {
  margin: 0 0 var(--sp-5);
  font-family: var(--f-pop); line-height: 1.02; letter-spacing: .01em;
  font-size: clamp(2.3rem, 10.5vw, 4.9rem);
}
.gate-title .beat-row { display: block; white-space: nowrap; }
.gate-title .beat-row:first-child { font-size: .62em; margin-bottom: .06em; }
.beat-mask {
  position: relative; display: inline-block; vertical-align: bottom;
  overflow: hidden; padding: .08em .1em .16em .04em; margin: -.08em -.06em -.16em 0;
}
.gate-title .beat { display: inline-block; will-change: transform; }
.gate-title .ch {
  display: inline-block;
  -webkit-text-stroke: .085em var(--ink); paint-order: stroke fill;
  text-shadow: .05em .06em 0 var(--ink);
}
/* 読み込み中の「？」の下書き。押すと下へ抜け、本物の字が上がってくる */
.beat-ghost {
  position: absolute; left: .04em; bottom: .16em; pointer-events: none;
  color: transparent; -webkit-text-stroke: 2px rgba(28, 27, 51, .28);
  font-family: var(--f-q); font-style: italic; font-weight: 700; letter-spacing: .12em;
  opacity: 0;
}
.gate.is-first .gate-title .beat { transform: translateY(118%); }
.gate.is-first .beat-ghost { opacity: 1; }
.gate.is-lit-0 .beat[data-beat="0"] .ch, .gate.is-lit-1 .beat[data-beat="1"] .ch, .gate.is-lit-2 .beat[data-beat="2"] .ch {
  text-shadow: .05em .06em 0 var(--ink), 0 0 .0em var(--mi), 0 0 .35em rgba(255, 225, 74, .95);
}

/* 4-21 あつまった数（40マスの色の帯＝原画の地の色） */
.gate-count { margin: 0 0 var(--sp-5); }
.gate-count-bar {
  display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 2px;
  height: 16px; padding: 3px; margin-bottom: var(--sp-2);
  border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--paper);
  overflow: hidden;
}
.gate-count-bar i {
  display: block; border-radius: 2px; background: transparent;
  transform: scaleY(.25); transform-origin: 50% 100%;
  transition: transform .35s var(--ease-spring), background-color .2s;
}
.gate-count-bar i.is-in { background: var(--c); transform: none; }
.gate-count-text { margin: 0; font-weight: 700; font-size: var(--fs-small); line-height: 1.4; }
.gate-count-n { font-size: 1rem; color: var(--do); display: inline-block; min-width: 2ch; text-align: right; }
.gate-count.is-done .gate-count-text { color: var(--ink); }
.gate-count.is-done .gate-count-label { display: inline-block; animation: gate-done-pop .5s var(--ease-spring) both; }
@keyframes gate-done-pop { from { transform: scale(.7) rotate(-4deg); opacity: 0; } }

/* ---------- ボタン（cta 部位。verbatim の 8-1/8-5/8-9/6-20/5-4 が上にかかる） ---------- */
.gate-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: center; margin-bottom: var(--sp-4); }
.gate-actions .mp-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 10px 26px;
  border: 3px solid var(--ink); border-radius: var(--r-pill);
  background: var(--mi); color: var(--ink);
  box-shadow: var(--sh-step);
  font-family: var(--f-body); font-weight: 900; font-size: 1.08rem; line-height: 1.2; letter-spacing: .04em;
  cursor: pointer; touch-action: manipulation;
}
.gate-actions .btn-sound { background: var(--so); }
.gate-actions .mp-cta-label { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.gate-actions .spk { flex: none; }
.gate-actions .mp-cta-btn:disabled { cursor: default; }
/* 8-50 鼓動: ボタン本体の transform は 5-4/8-5 が使うので、外側の輪で打つ */
.enter-wrap { position: relative; display: inline-flex; border-radius: var(--r-pill); }
.enter-wrap::before, .enter-wrap::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  border: 3px solid var(--do); opacity: 0;
}
.gate:not(.is-pressed) .enter-wrap::before { animation: gate-beat 1.6s var(--ease-soft) infinite; }
.gate:not(.is-pressed) .enter-wrap::after { animation: gate-beat 1.6s var(--ease-soft) .22s infinite; }
@keyframes gate-beat {
  0% { transform: scale(1); opacity: .85; }
  38% { transform: scale(1.16, 1.34); opacity: 0; }
  100% { transform: scale(1.16, 1.34); opacity: 0; }
}

.gate-note { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-soft); }
.gate-esc { display: block; }
@media (hover: none), (pointer: coarse) { .gate-esc { display: none; } }
.gate-credit { margin: var(--sp-2) 0 0; color: var(--ink-soft); font-size: .8125rem; }

/* 券の半券（右）。押すとスタンプが押され、開園でもぎられて落ちる */
.ticket-stub {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-2);
  border-left: 3px dashed var(--ink);
  background: color-mix(in oklab, var(--mi) 40%, var(--paper-hi));
  border-radius: 0 calc(var(--r-m) - 3px) calc(var(--r-m) - 3px) 0;
  transform-origin: 0% 100%;
}
.stub-brand { writing-mode: vertical-rl; font-family: var(--f-pop); font-size: 1.1rem; letter-spacing: .08em; }
.stub-brand .qq { color: var(--do); font-size: 1.25em; }
.stub-time { color: var(--ink-soft); letter-spacing: .1em; }
.gate-stamp {
  width: 76px; font-size: .8rem; gap: 0; align-content: center;
  opacity: 0; --stamp-rot: -8deg;
}
.gate-stamp-q { font-size: 1.9rem; line-height: .9; }
.gate-stamp-date { font-size: .75rem; letter-spacing: -.04em; line-height: 1.2; }
.gate.is-stamped .gate-stamp { opacity: 1; }

/* ---------- 4-39 のぞく子（券のうしろ） ---------- */
.gate-peek { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.gate-peek .peeker {
  position: absolute; display: block; width: var(--pw, 104px);
  transform-origin: 50% 100%;
  visibility: hidden;
}
.gate-peek .peeker > img.chara, .gate-peek .peeker > .frame-round { display: block; width: 100%; height: auto; }
/* 拍の輪（ド・ミ・ソ色） */
.gate-rings { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.gate-ring {
  position: absolute; inset: 0; border-radius: var(--r-m); border: 6px solid var(--c, var(--do)); opacity: 0;
}
.gate-ring[data-note="do"] { --c: var(--do); }
.gate-ring[data-note="mi"] { --c: var(--mi); }
.gate-ring[data-note="so"] { --c: var(--so); }

/* ---------- シャッターの下端（開くときに上がる桟） ---------- */
.gate-flyers { position: fixed; inset: 0; z-index: calc(var(--z-gate) + 1); pointer-events: none; }
.gate-flyers .flyer { position: fixed; left: 0; top: 0; transform-origin: 0 0; }
.gate-flyers .flyer > img.chara, .gate-flyers .flyer > .frame-round { display: block; width: 100%; height: auto; }

/* ---------- スマホ ---------- */
@media (max-width: 599px) {
  .gate-shutter { padding: 40px 12px 40px; place-items: start center; }
  .gate-stage { width: min(92vw, 420px); margin-block: 72px 24px; transform: rotate(-.8deg); }
  .gate-ticket { grid-template-columns: minmax(0, 1fr) 58px; }
  .ticket-main { padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 20px); }
  .ticket-head { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: var(--sp-3); }
  .ticket-label { font-size: .875rem; letter-spacing: 0; }
  .gate-title { font-size: clamp(2rem, 9.4vw, 2.6rem); }
  .gate-actions { flex-direction: column; align-items: stretch; }
  .gate-actions .enter-wrap, .gate-actions .mp-cta-btn { width: 100%; }
  .gate-actions .mp-cta-btn { min-height: 54px; padding: 10px 14px; font-size: 1rem; }
  .ticket-stub { padding: var(--sp-4) 4px; }
  .gate-stamp { width: 50px; font-size: .75rem; }
  .gate-stamp-q { font-size: 1.3rem; }
  .gate-stamp-date { display: none; }
  .stub-brand { font-size: .95rem; }
  .gate-count-bar { height: 14px; gap: 1px; padding: 2px; }
}
@media (max-height: 700px) and (min-width: 600px) {
  .gate-stage { margin-block: 48px 16px; }
  .gate-title { font-size: clamp(2.2rem, 8vh, 4.2rem); }
}

/* ---------- reduced / うごき オフ ---------- */
html[data-reduced] .gate-title .beat { transform: none !important; }
html[data-reduced] .beat-ghost { display: none; }
html[data-reduced] .gate-peek { display: none; }
html[data-reduced] .enter-wrap::before, html[data-reduced] .enter-wrap::after { animation: none; }
html[data-reduced] .gate-count-bar i { transition: none; }
html[data-reduced] .gate-stage { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gate-title .beat { transform: none !important; }
  .beat-ghost { display: none; }
  .enter-wrap::before, .enter-wrap::after { animation: none; }
}
.gate.is-fading { transition: opacity .2s linear; opacity: 0; }