/* =====================================================================
   base.css : 色・余白の変数、リセット、共通パーツ（ボタン・バッジ・見出し）
   色は js/config.js の colors で変更できます（ここは初期値）

   トーンマナー：ゴールド × シルバー × ブラック。
   単色のベタ塗りではなく、grad（明暗のグラデーション）で金属の
   重厚感・光沢・カスレたような質感を出す設計にしています。
   ===================================================================== */

:root {
  --c-bg: #07060a;
  --c-panel: #100f14;
  --c-panel-2: #17161c;
  --c-primary: #a3711a;
  --c-primary-bright: #f0c24c;
  --c-primary-deep: #2b1a04;
  --c-glow: #ffe3a3;
  --c-silver: #8f95a3;
  --c-silver-bright: #f1f3f6;
  --c-silver-deep: #33363d;
  --c-text: #f4f4f7;
  --c-muted: #a3a3b2;
  --c-offline: #8b909a;

  /* エラー表示専用の色（ブランドカラーとは独立。config.js の primary を
     変更しても、エラー表示は誰が見ても分かる赤のままにするため） */
  --c-error: #ff3b4d;
  --c-error-rgb: 255, 59, 77;

  /* rgba() 用（js/config.js の色から自動で上書きされます） */
  --c-primary-rgb: 163, 113, 26;
  --c-primary-bright-rgb: 240, 194, 76;
  --c-primary-deep-rgb: 43, 26, 4;
  --c-glow-rgb: 255, 227, 163;
  --c-silver-rgb: 143, 149, 163;
  --c-silver-bright-rgb: 241, 243, 246;
  --c-silver-deep-rgb: 51, 54, 61;
  --c-offline-rgb: 139, 144, 154;

  /* ゴールドのヌメリ感（複数トーンの明暗）を出すためのグラデーション。
     中央に明るいグロー（glow）の筋を一本通すことで、単色のベタ塗り
     ではなく、重厚な金属の光沢・照り返しのある質感になる。
     ボタンやバッジなど、面積のある塗りつぶし部分に使う */
  --gold-sheen: linear-gradient(
    135deg,
    var(--c-primary-deep) 0%,
    var(--c-primary) 24%,
    var(--c-primary-bright) 46%,
    var(--c-glow) 52%,
    var(--c-primary-bright) 58%,
    var(--c-primary) 80%,
    var(--c-primary-deep) 100%
  );

  /* シルバー版のヌメリ感グラデーション。ゴールドと対になる、
     サブ要素（セカンダリボタン・区切り線・OFFLINE系の表示）用 */
  --silver-sheen: linear-gradient(
    135deg,
    var(--c-silver-deep) 0%,
    var(--c-silver) 24%,
    var(--c-silver-bright) 46%,
    #ffffff 52%,
    var(--c-silver-bright) 58%,
    var(--c-silver) 80%,
    var(--c-silver-deep) 100%
  );

  /* ヘッダー下線・フッター上線などに使う、ゴールドとシルバーが
     溶け合う一本線。「ゴールド × シルバー × ブラック」のトーンマナーを
     境界線だけでも感じられるようにするための飾り */
  --metal-divider: linear-gradient(
    90deg,
    transparent,
    rgba(var(--c-silver-rgb), 0.7) 18%,
    rgba(var(--c-primary-bright-rgb), 0.95) 50%,
    rgba(var(--c-silver-rgb), 0.7) 82%,
    transparent
  );

  /* 「カスレ」感を出すための、ごく薄いノイズ（ざらつき）テクスチャ。
     黒背景にうっすら重ねることで、金属が使い込まれたような
     重厚な質感を出す。SVGのタービュランスノイズを背景画像として使用 */
  --bg-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M60 0L120 60L60 120L0 60Z'/%3E%3Cpath d='M60 18L102 60L60 102L18 60Z' stroke-width='0.7'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Cpath d='M57 36h6v14h11v6H63v28h-6V56H46v-6h11z'/%3E%3Ccircle cx='0' cy='0' r='3.2'/%3E%3Ccircle cx='120' cy='0' r='3.2'/%3E%3Ccircle cx='0' cy='120' r='3.2'/%3E%3Ccircle cx='120' cy='120' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
  --grain-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* 見出し・ナビ・ボタンなどの「見せる文字」は太い明朝体。
     Google Fonts の Noto Serif JP（700/900）を使い、読み込めない環境では
     端末の明朝体に切り替わる。本文は読みやすさ優先でゴシック体のまま */
  --font-mincho: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  --font-display: var(--font-mincho);
  --font-gothic: var(--font-mincho);
  --font-num: "Rajdhani", "Orbitron", "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  --cut: 14px;
  --maxw: 1200px;
  --header-h: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(var(--c-primary-rgb), 0.14), transparent 62%),
    radial-gradient(900px 460px at 96% 18%, rgba(var(--c-silver-rgb), 0.07), transparent 60%),
    var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  display: flex;
  flex-direction: column;
}

/* サイト全体にうっすら重ねる「カスレ」ノイズテクスチャ。
   金属が使い込まれたような重厚な質感を出す装飾で、操作の妨げに
   ならないよう pointer-events: none にしている */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  background-image: var(--grain-texture);
  background-size: 180px 180px;
  opacity: 0.035;
  /* 以前は mix-blend-mode: overlay（画面全体の合成）を使っていたが、背景動画の上で毎コマ合成すると
     とても重くなるため、ふつうの重ね合わせ（薄い模様）にしている */
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce), (prefers-contrast: more) {
  body::before {
    display: none;
  }
}

/* ---------- 動く背景：暗い金色と黒の模様 ----------
   画面の一番うしろ（z-index: -10 / -9）に固定した2枚の層。
   1) html::before … 菱形の格子＋小さな星の模様。1マス分だけ斜めに流して、
      つなぎ目なく永遠にゆっくり動かす。模様の色は config.js のメインカラー
      （金）に連動する（SVGは「型抜き」として使い、色はCSS側で塗る）。
   2) html::after  … 金色の光のかたまりがゆっくり漂う。
   transform と opacity だけを動かすので、ページの動作は重くならない。
   「動きを減らす」設定のときは、下の共通ルールで止まった状態になる */
html::before {
  content: "";
  position: fixed;
  inset: -160px;
  z-index: -10;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), 0.95), rgba(var(--c-primary-rgb), 0.45));
  -webkit-mask-image: var(--bg-lattice);
  mask-image: var(--bg-lattice);
  -webkit-mask-size: 120px 120px;
  mask-size: 120px 120px;
  opacity: 0.16;
  pointer-events: none;
  will-change: transform, opacity;
  animation: bg-lattice-drift 42s linear infinite, bg-lattice-pulse 11s ease-in-out infinite;
}

html::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -9;
  background:
    radial-gradient(42vmax 32vmax at 22% 28%, rgba(var(--c-primary-rgb), 0.2), transparent 70%),
    radial-gradient(48vmax 36vmax at 78% 72%, rgba(var(--c-primary-rgb), 0.15), transparent 70%),
    radial-gradient(30vmax 24vmax at 62% 20%, rgba(var(--c-primary-rgb), 0.08), transparent 70%);
  pointer-events: none;
  will-change: transform;
  animation: bg-glow-drift 34s ease-in-out infinite alternate;
}

/* ---------- 背景の真ん中の紋章（髑髏） ----------
   画面の真ん中に固定した大きな紋章。背景と同じくらいの暗さまで
   明るさと透明度を落としているので、文字や写真の邪魔にならない。
   濃さを変えたいときは --emblem-opacity（0〜1）だけを触る */
:root {
  --emblem-opacity: 0.1;
  --emblem-size: min(86vmin, 900px);
}

body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--emblem-size);
  height: var(--emblem-size);
  z-index: -8;
  transform: translate(-50%, -50%);
  background: url("../assets/logo/emblem.webp") center / contain no-repeat;
  opacity: var(--emblem-opacity);
  filter: brightness(0.55) saturate(0.75);
  pointer-events: none;
}

@keyframes bg-lattice-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(120px, 120px, 0);
  }
}

@keyframes bg-lattice-pulse {
  0%,
  100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.2;
  }
}

@keyframes bg-glow-drift {
  from {
    transform: translate3d(-5%, 4%, 0) scale(1);
  }
  to {
    transform: translate3d(6%, -5%, 0) scale(1.18);
  }
}

@media (prefers-contrast: more) {
  html::before,
  html::after {
    display: none;
  }
}

/* トップページでヒーロー（背景動画）が画面に出ている間は、うしろの背景の動きを止める
   （動画に隠れて見えないのに、毎コマ描き直すのは無駄なため。js/pages/home.js が .hero-in-view を付け外しする） */
html.hero-in-view::before,
html.hero-in-view::after {
  animation-play-state: paused;
}

main {
  flex: 1 0 auto;
}

img,
svg,
canvas,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
dl,
dd {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--c-primary-bright);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--gold-sheen);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus {
  top: 12px;
}

.container {
  width: min(100% - 32px, var(--maxw));
  margin-inline: auto;
}

.section {
  padding: 104px 0;
  position: relative;
}

.section + .section {
  padding-top: 36px;
}

.icon {
  flex: none;
}

@media (max-width: 640px) {
  .section {
    padding: 72px 0;
  }
  .section + .section {
    padding-top: 24px;
  }
  .section-head {
    margin-bottom: 28px;
  }
}

/* ---------- 見出し ---------- */
.section-head {
  margin-bottom: 40px;
}

.section-title {
  /* 太い明朝体の見出し（英字・日本語とも同じ明朝体） */
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: clamp(1.9rem, 5.6vw, 3rem);
  letter-spacing: 0.06em;
  text-transform: capitalize;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--c-primary-bright);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7), 0 0 18px rgba(var(--c-primary-rgb), 0.35);
}

.section-title::before {
  /* 短剣（クロス）の形の飾り。剣のつば付きの十字でゴシック／バイカー調に */
  content: "";
  flex: none;
  width: 0.5em;
  height: 1.1em;
  background: var(--gold-sheen);
  clip-path: polygon(
    50% 0,
    64% 16%,
    64% 56%,
    100% 60%,
    100% 70%,
    64% 70%,
    64% 90%,
    50% 100%,
    36% 90%,
    36% 70%,
    0 70%,
    0 60%,
    36% 56%,
    36% 16%
  );
}

.section-sub {
  margin-top: 6px;
  padding-left: 24px;
  color: var(--c-muted);
  font-size: 0.95rem;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-primary-bright);
}

/* ---------- ボタン ---------- */
.btn {
  --btn-cut: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  color: #1c1204;
  background: var(--gold-sheen);
  clip-path: polygon(
    var(--btn-cut) 0,
    100% 0,
    100% calc(100% - var(--btn-cut)),
    calc(100% - var(--btn-cut)) 100%,
    0 100%,
    0 var(--btn-cut)
  );
  transition: filter 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.btn:hover {
  filter: brightness(1.15) saturate(1.1);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(1px);
}

.btn-ghost {
  /* ベースの .btn は塗りつぶし用に暗い文字色になっているが、
     ghost（背景がほぼ透明）は逆に明るい文字色が必要なので上書きする。
     色もゴールド（メインボタン）と差別化するため、シルバーにしている */
  color: var(--c-silver-bright);
  background: rgba(var(--c-silver-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--c-silver-rgb), 0.75);
}

.btn-ghost:hover {
  background: rgba(var(--c-silver-rgb), 0.22);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.85rem;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

/* ---------- バッジ ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.22em 0.9em 0.22em 0.75em;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  white-space: nowrap;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.badge-live {
  color: #fff;
  background: var(--gold-sheen);
}

.badge-live .dot {
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}

/* 配信中の表示は、どのページでも赤い「ON AIR」（js/status.js の statusBadge も、これを使う） */
:root {
  --air: #ff2a3d;
  --air-rgb: 255, 42, 61;
}

.badge-air {
  padding: 0.3em 1.05em 0.3em 0.85em;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
  background: linear-gradient(135deg, #ff5a68 0%, var(--air) 45%, #b8071a 100%);
}

.badge-air .dot {
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff;
  animation: pulse 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .badge-air .dot {
    animation: none;
  }
}

.badge-offline {
  color: var(--c-offline);
  background: rgba(var(--c-offline-rgb), 0.18);
}

.badge-unknown {
  color: var(--c-muted);
  background: rgba(var(--c-offline-rgb), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--c-offline-rgb), 0.5);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.7);
  }
}

/* ---------- アバター ---------- */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #2a0b12, #12121a);
  box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.85);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initial {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--c-primary-bright);
}

/* ---------- 斜めカットの枠 ---------- */
.cut-wrap {
  --cut: 14px;
  position: relative;
  height: 100%;
  filter: drop-shadow(0 0 0 rgba(var(--c-primary-rgb), 0));
  transition: filter 0.25s ease, transform 0.25s ease;
}

.cut-edge {
  height: 100%;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(var(--c-primary-rgb), 0.85),
    rgba(var(--c-primary-rgb), 0.16) 45%,
    rgba(var(--c-primary-rgb), 0.55)
  );
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

.cut-body {
  height: 100%;
  background: linear-gradient(180deg, var(--c-panel-2), var(--c-panel));
  clip-path: polygon(
    calc(var(--cut) - 1px) 0,
    100% 0,
    100% calc(100% - var(--cut) + 1px),
    calc(100% - var(--cut) + 1px) 100%,
    0 100%,
    0 calc(var(--cut) - 1px)
  );
}

.hidden {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =====================================================================
   演出（カーソル・スクロールで現れる・見出しの文字送り・光の演出）
   js/motion.js が付け外しするクラスに対応。
   prefers-reduced-motion（動きを減らす設定）のときは js 側で最初から
   スキップされるほか、念のためこの下のメディアクエリでも無効化する。
   ===================================================================== */

/* ---------- カスタムカーソル（PCのマウス操作のときだけ） ---------- */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
}

/* マウスの後ろを追う照準の映像（assets/fx/cursor-target.webm、688×761 の透明つき WebM）。
   大きさは width で変える（高さは映像の比率に合わせて自動）。映像の中心がマウスの位置に来る */
.cursor-ring {
  width: 150px;
  aspect-ratio: 688 / 761;
  border-radius: 0;
  transition: opacity 0.25s ease;
}

.cursor-ring video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* クリックしている間は、少しすぼめて明るくする */
.cursor-ring.is-down video {
  transform: scale(0.86);
  filter: brightness(1.6);
}

/* Safari：透明が使えないので、黒を消す合成にする */
.cursor-ring.no-alpha {
  mix-blend-mode: screen;
}

/* 映像が再生できない環境では、従来の丸 */
.cursor-ring.is-plain {
  width: 36px;
  height: 36px;
  aspect-ratio: auto;
  border-radius: 50%;
  border: 1px solid rgba(var(--c-primary-rgb), 0.65);
  background: rgba(var(--c-primary-rgb), 0.06);
  transition: opacity 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cursor-ring.is-plain.is-down {
  border-color: var(--c-primary-bright);
  background: rgba(var(--c-primary-rgb), 0.22);
}


/* ---------- スクロールで現れる演出 ---------- */
.reveal-fx {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.85s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.85s cubic-bezier(0.16, 0.8, 0.24, 1);
  transition-delay: calc(min(var(--reveal-i, 0), 8) * 70ms);
}

.reveal-fx.is-in {
  opacity: 1;
  transform: none;
}

/* すぐ見せたい要素：短く・待たずに現れる */
.reveal-fx.reveal-fast {
  transform: translateY(14px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  transition-delay: 0ms;
}

.reveal-fx.reveal-fast.is-in {
  transform: none;
}

/* ---------- 見出しの文字が並んで出てくる演出 ---------- */
.split-reveal .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.split-reveal .word > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.8s cubic-bezier(0.16, 0.8, 0.24, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}

.split-reveal.is-in .word > span {
  transform: none;
}

/* ---------- ホバー時の光の演出（カード・ボタンなど） ---------- */
.card .cut-body,
.member-card .cut-body,
.roulette-box .cut-body,
.day .cut-body {
  position: relative;
}

.card .cut-body::before,
.member-card .cut-body::before,
.roulette-box .cut-body::before,
.day .cut-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--c-primary-rgb), 0.28), transparent 62%);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.card:hover .cut-body::before,
.member-card:hover .cut-body::before,
.roulette-box:hover .cut-body::before,
.day:hover .cut-body::before {
  opacity: 1;
}

/* ---------- クリックした場所に出る「銃で撃った跡」のようなヒビ痕 ----------
   画面全体を覆う固定レイヤー（pointer-events: none）の上に、クリックの
   たびに割れ目のSVGを1つ生成して少し光ってから消える。レイヤー自体は
   クリックを一切邪魔しないので、リンクやボタン以外のどこをクリックしても
   同じように表示される */
.bullet-hole-layer {
  /* ページ全体に重ねる（高さは js/motion.js がクリックのたびにページの高さに合わせる）。
     fixed ではなく absolute にして、割れ目がページと一緒にスクロールするようにしている */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  pointer-events: none;
  overflow: hidden;
}

.bullet-hole {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%) scale(0.35);
  opacity: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  animation:
    bullet-hole-pop 0.16s cubic-bezier(0.2, 0.9, 0.3, 1) forwards,
    bullet-hole-fade 1.1s ease-in 0.45s forwards;
}

/* ガラスが割れる動画。クリック位置が動画の中心になる（js/motion.js が <video> を 1 つ作って入れる）。
   動画は透明つき。透明に対応しない環境（iPhone など）では、js/motion.js が <canvas> に描き直して
   黒を透明にする（.bullet-src は、その場合の見えない元動画） */
.bullet-unit {
  position: absolute;
  width: clamp(260px, 30vw, 380px);
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: none;
}

.bullet-video {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* ガラスの穴の内側だけを黒く抜く（動画の下に敷く）。クリックした瞬間に、そのまま真っ黒で出る
   （徐々に暗くはしない）。位置と大きさは、動画（688×761）の中での穴の位置から割り出した値（％） */
.bullet-hole-inner {
  position: absolute;
  left: 43.02%;
  top: 42.71%;
  width: 16.13%;
  height: auto;
  pointer-events: none;
}

/* 透明に対応しない環境では、動画は見えなくして（再生だけに使う）、<canvas> の絵を見せる */
.bullet-src {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  pointer-events: none;
}

/* クリックの 4 秒後から、2 秒かけてゆっくり元に戻る（時間は js/motion.js の HOLD_MS / FADE_MS と合わせる） */
.bullet-unit.is-out {
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

@keyframes bullet-hole-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes bullet-hole-fade {
  to {
    opacity: 0;
  }
}

@media (hover: none), (pointer: coarse) {
  .cursor-ring {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-fx {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .split-reveal .word > span {
    transform: none;
    transition: none;
  }
  .cursor-ring {
    display: none;
  }
  .bullet-hole-layer {
    display: none;
  }
}

/* ---------- 警告テープ（js/tape.js が差し込む） ----------
   セクションの境目に斜めに貼られる、黄色×黒のテープ。
   貼る／剥がす動きは JS が clip-path と先端（.tape-flap）で作る。
   テープは余白に重なるだけで、文字の上には載らない（pointer-events: none）。
   太さを変えるなら --tape-h、濃さ（目立ち具合）は --tape-opacity を触る */
:root {
  --tape-h: 26px;
  --tape-opacity: 0.9;
  --tape-yellow: #f2b707;
  --tape-black: #19191c;
}

.tape {
  position: absolute;
  left: 50%;
  width: 104vw;
  margin-left: -52vw;
  top: calc(var(--tape-h) * -0.78);
  height: var(--tape-h);
  z-index: 3;
  pointer-events: none;
  opacity: var(--tape-opacity);
  transform: rotate(-1deg);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.65));
}

/* テープ専用の余白（js/tape.js が真ん中にテープを貼る）。メンバーページの下などで使う */
.tape-host {
  position: relative;
  height: clamp(130px, 24vh, 240px); /* 画面が高いほど広く取り、スクロールのたびに貼る・剥がす動きが出るようにする */
}

.tape-host > .tape {
  top: calc(50% - var(--tape-h) / 2);
}

/* 一覧（グリッド）の途中に挟む、低めの余白（MEMBERS ページ）。横いっぱいに広がる */
.tape-host--row {
  grid-column: 1 / -1;
  height: clamp(56px, 9vh, 90px);
}

.tape--tilt-b {
  transform: rotate(1deg);
}

.tape--inside {
  top: 6px;
}

.tape-inner {
  position: absolute;
  inset: 0;
}

.tape--rtl .tape-inner {
  transform: scaleX(-1);
}

.tape-strip,
.tape-flap {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: var(--tape-yellow);
}

.tape-strip {
  left: 0;
  width: 100%;
  clip-path: inset(0 100% 0 0);
}

/* 先端：貼る途中・剥がす途中で浮いている部分。光が当たって少し明るく見える */
.tape-flap {
  opacity: 0;
  will-change: transform, opacity;
}

.tape-flap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.38), rgba(0, 0, 0, 0.3));
}

/* 斜めの縞 */
.tape--stripe .tape-strip,
.tape--stripe .tape-flap {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.3)),
    repeating-linear-gradient(115deg, var(--tape-yellow) 0 12px, var(--tape-black) 12px 24px);
}

/* 矢印（シェブロン）。SVG を背景に敷き詰める */
.tape--chevron .tape-strip,
.tape--chevron .tape-flap {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.3)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='26' viewBox='0 0 28 26' preserveAspectRatio='none'%3E%3Cpath d='M4 3l9 10-9 10h7l9-10-9-10z' fill='%2319191c'/%3E%3C/svg%3E");
  background-size: 100% 100%, 28px 100%;
  background-repeat: no-repeat, repeat-x;
}

/* テープが画面の横幅をはみ出して、横スクロールが出ないようにする（clip なら sticky 等に影響しない） */
@supports (overflow: clip) {
  main {
    overflow-x: clip;
  }
}

@media (max-width: 640px) {
  :root {
    --tape-h: 20px;
  }
  .tape {
    transform: rotate(-1.6deg);
  }
  .tape--tilt-b {
    transform: rotate(1.6deg);
  }
}

/* 動きを減らす設定：貼りっぱなしで表示する（JS 側でも動かさない） */
@media (prefers-reduced-motion: reduce) {
  .tape-strip {
    clip-path: none;
  }
}