/* ══ 映画館オーバーレイ ══ */
#cinema-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #1a1610;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#cinema-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #0d0b07 0%, transparent 8%),
    linear-gradient(270deg, #0d0b07 0%, transparent 8%),
    linear-gradient(0deg, #0d0b07 0%, transparent 10%);
  pointer-events: none;
  z-index: 1;
}
#cinema-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
  animation: grain 0.15s steps(1) infinite;
}
@keyframes grain {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-2px, 1px);
  }
  50% {
    transform: translate(1px, -2px);
  }
  75% {
    transform: translate(-1px, 2px);
  }
}

/* 天井の金ライン */
#cinema-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    #b8952a 0px,
    #b8952a 18px,
    transparent 18px,
    transparent 32px
  );
  opacity: 0.5;
  z-index: 2;
}

/* スクリーン枠 */
#cinema-screen {
  position: relative;
  /*
    横幅だけでなく表示可能な高さも基準にする。
    1457:720 の比率では width:175dvh で高さが約86.5dvhとなり、
    携帯横向きでもスクリーン枠と直下ラベルの余地が残る。
  */
  width: min(88vw, 1200px, 175dvh);
  aspect-ratio: 1457 / 720;
  border: 6px solid #5a4a20;
  box-shadow:
    0 0 0 2px #2a1f0e,
    0 0 0 10px #3d2f10,
    0 0 0 12px #1a1208,
    0 0 60px rgba(0, 0, 0, 0.9),
    inset 0 0 40px rgba(0, 0, 0, 0.6);
  background: #3a3830;
  overflow: hidden;
  z-index: 2;
}
/* スキャンライン */
#cinema-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.08) 3px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 50;
}

/* 垂れ幕 */
#cinema-curtain {
  position: absolute;
  top: 0;
  left: -2px;
  right: -2px;
  height: 100%;
  z-index: 30;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.18) 0px,
      rgba(0, 0, 0, 0) 8px,
      rgba(255, 255, 255, 0.04) 8px,
      rgba(255, 255, 255, 0) 16px,
      rgba(0, 0, 0, 0.12) 16px,
      rgba(0, 0, 0, 0) 24px
    ),
    linear-gradient(180deg, #3d2a0a 0%, #2a1c06 30%, #1e1408 70%, #150f05 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  transition: transform 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#cinema-curtain::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: linear-gradient(180deg, #c8a030, #7a5a10);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
#cinema-curtain.raised {
  transform: translateY(-100%);
}

/* タイトル */
#cinema-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    #c8c8c8 0%,
    #888888 55%,
    #5a5a5a 100%
  );
}
#cinema-title.visible {
  animation: titleFadeInOut 8s ease forwards;
}
@keyframes titleFadeInOut {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*
  ══ #title-group：3要素を束ねる統一コンテナ ══
  ・画面内での位置調整 → top / left / transform を変更
  ・3要素の相対位置  → #title-svg の viewBox(0 0 400 520) 内の座標で管理
     ① タイトル   … 筆記体の Everyday ＋ セリフ体の LOW PRICE
     ② キャラ     … #char-group の translate / scale で配置
     ③ サブタイトル … <text x="200" y="490">
*/
#title-group {
  position: absolute;
  /* ── 画面内での位置（ここを変えると3要素がセットで動く） ── */
  top: 45%;
  left: 50%;
  transform: translate(-50%, -52%);
  /*
    ── コンテナ幅を % 指定にする ──
    #cinema-screen は aspect-ratio:1457/720 固定なので
    % 指定にすることでウィンドウサイズが変わっても
    スクリーン内での相対サイズ・位置が一定に保たれる
  */
  width: 40%;
  pointer-events: none;
  user-select: none;
  z-index: 20;
}
/* SVGはコンテナ幅に合わせて自動スケール */
#title-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ── 素朴な宮廷招待状風タイトル ── */
#brand-title {
  opacity: 0.9;
  filter:
    drop-shadow(2px 3px 0 rgba(35, 33, 29, 0.5))
    drop-shadow(4px 6px 0 rgba(35, 33, 29, 0.2));
}
#brand-everyday {
  font-family: "Pinyon Script", cursive;
  font-size: 78px;
  font-weight: 400;
  fill: #d8d5ca;
  stroke: #d8d5ca;
  stroke-width: 0.3px;
  paint-order: stroke fill;
}
#brand-price {
  font-family: "Cormorant Garamond", serif;
  font-size: 50px;
  font-weight: 600;
  letter-spacing: 4px;
  fill: #cfcdc4;
}

/* サブタイトルのフェードイン（JSから .visible クラスを付与したとき） */
#title-sub-svg.visible {
  animation: subtitleFadeIn 0.8s ease forwards;
}
@keyframes subtitleFadeIn {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 0.85;
    transform: translateY(0);
  }
}
@keyframes flicker {
  0%,
  95%,
  100% {
    opacity: 1;
  }
  96% {
    opacity: 0.85;
  }
  97% {
    opacity: 1;
  }
  98% {
    opacity: 0.7;
  }
  99% {
    opacity: 1;
  }
}

/* ── section_map コンテンツ ── */
#section-map-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
  transition: opacity 1.2s ease;
  /* クリック・ホバーは演出完了後に有効化 */
  pointer-events: none;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}
#section-map-wrap.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── scene ── */
.scene {
  position: relative;
  width: 100%;
  height: 100%;
}
.scene img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.zone {
  cursor: pointer;
  fill: transparent;
  transition: fill 0.15s;
  -webkit-tap-highlight-color: transparent; /* タップ領域のハイライト（四角い枠）の無効化 */
}
.zone:hover {
  fill: rgba(255, 255, 255, 0.13);
}

/* モクモク吹き出し（固定位置用・全ゾーン共通） */
#tooltip-fixed {
  position: absolute;
  pointer-events: none;
  display: none;
  z-index: 99999;
  left: 64%;
  top: 12%;
  width: 22%;
  height: auto;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.35));
}
#tooltip-fixed svg {
  width: 100%;
  height: auto;
}

/* スクリーン直下ラベル群のラッパー */
#screen-below {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(88vw, 1200px, 175dvh); /* #cinema-screen と同じ幅 */
  min-height: 2.4em;
  margin-top: 0.6vh;
  z-index: 9001;
  pointer-events: none;
}

/* start / something is here ラベル */
#cinema-start {
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Special Elite", serif;
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  color: #f0ede0;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  animation: pulse 2.2s ease-in-out infinite;
}
#cinema-start.hidden {
  opacity: 0;
  transition: opacity 0.6s ease;
  animation: none;
}
#cinema-start.revealed {
  opacity: 0.5;
  transition: opacity 1.5s ease;
  animation: none;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ── タッチ確認UI ── */
#touch-confirm {
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
#touch-confirm.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#touch-confirm-label {
  font-family: "Special Elite", serif;
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  color: #c8c0a8;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
}
#touch-confirm-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#tc-arrow {
  transform-origin: center bottom;
  animation: tcBounce 1.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* 台座は固定（アニメーションなし） */
@keyframes tcBounce {
  /* 上にいる（滞空） */
  0% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
  /* 落下中 → 縦に伸びる */
  55% {
    transform: translateY(8px) scaleX(0.88) scaleY(1.12);
  }
  /* 着地の瞬間 → 横に潰れる（スカッシュ） */
  68% {
    transform: translateY(12px) scaleX(1.18) scaleY(0.78);
  }
  /* 跳ね返り → 縦に伸びる（ストレッチ） */
  80% {
    transform: translateY(4px) scaleX(0.9) scaleY(1.1);
  }
  /* 上昇・落ち着く */
  100% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
}