/* drum.css — ローダー差し替え用ドラムオープニング
 * 全セレクタを #drum-opening 配下にスコープし、本番 base.css/sections.css と衝突させない。
 * 可変フォントは Roboto Flex（Google Fonts・wght 100-1000 / wdth 25-151）を font-variation-settings で2軸制御。
 * スクロール距離は body{1000vh} ではなく #drum-scroll-spacer に持たせる（本番レイアウトを壊さない）。
 */

/* オーバーレイ本体（最前面・画面固定）。中の .tube は fixed で画面中央に表示 */
#drum-opening {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #07080a; /* 本番 --bg-dark と整合 */
  color: #fff;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --fontSize: 3; /* JS が --fontSizePx を root に set するまでの暫定 */
}

/* スクロール距離を稼ぐ spacer（body 直下・通常フロー）。完了時に JS が除去する */
#drum-scroll-spacer {
  width: 100%;
  height: 1000vh;
  pointer-events: none;
}

/* ===== 3D ドラム ===== */
#drum-opening .stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3; /* 背景層(グロー/ビネット)より前・グレイン層より後 */
  visibility: hidden; /* init で autoAlpha フェードイン */
}

/* ===== 背景質感（のっぺり脱却・モノクロ）=====
   重なり順: #07080a(下地) → glow(1) → vignette(2) → .stage テキスト(3) → grain(4) */
#drum-opening .drum-glow,
#drum-opening .drum-vignette,
#drum-opening .drum-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
/* 中央のソフト光源グロー（被写体背後の発光感） */
#drum-opening .drum-glow {
  z-index: 1;
  background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.09) 0%, transparent 56%);
}
/* ビネット（四隅を落とし中央を浮かせる） */
#drum-opening .drum-vignette {
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.50) 100%);
}
/* フィルムグレイン（SVG feTurbulence・soft-light・控えめ） */
#drum-opening .drum-grain {
  z-index: 4;
  opacity: 0.04;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
@media (prefers-reduced-motion: reduce) {
  #drum-opening .drum-grain { display: none; }
}

#drum-opening .tube {
  position: fixed;
  top: 50vh;
  left: 50vw;
  perspective: 100vw; /* スクロールで 1vw まで寄る（虎の巻 忠実・円筒内部へ没入） */
}

#drum-opening .tube__inner {
  position: relative;
  transform-style: preserve-3d;
}

#drum-opening .line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Roboto Flex", sans-serif;
  /* JS computeFontSize() が実測で決めた --fontSizePx を優先（長い名前を画面内に収める） */
  font-size: var(--fontSizePx, calc(var(--fontSize) * 1vw));
  /* 初期値。applyVariableFont が回転角に応じ毎フレーム上書き（opsz/wght/wdth/GRAD）。
     正面(案B)に揃え、フォント実測前のフラッシュ（最大幅描画）を防ぐ。
     opsz 120(大見出し光学補正)/GRAD 40(暗背景の白テキストのにじみ防止・寸法非変更) を追加 */
  font-variation-settings: 'opsz' 120, 'wght' 800, 'wdth' 125, 'GRAD' 40, 'XOPQ' 105;
  /* 質感は虎の巻 variable-font-drum 忠実版で撤去（8層 text-shadow は 3D 変形ラインの毎フレーム
     再描画＝回転カクツキの主因だった）。奥行きは applyVariableFont の opacity + wght/wdth の絞りで表現。 */
  /* スケール変化中のグリフ形状を安定させ、回転で字が踊らないように */
  text-rendering: geometricPrecision;
  text-transform: uppercase;
  line-height: 1;
  transform-style: preserve-3d;
  will-change: transform, opacity; /* 合成レイヤー昇格で 60fps 維持（filter:blur は不採用＝3D blur が重いため） */
}

/* ===== 上部ガラス風コントロール ===== */
#drum-opening .controls {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 255, 255, 0.15),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#drum-opening #text-input {
  background: transparent;
  border: none;
  color: #fff;
  /* 😊 用に絵文字フォントを fallback */
  font-family: "Roboto Flex", "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 1.5rem;
  outline: none;
  text-align: center;
  width: 250px;
  letter-spacing: 2px;
  font-weight: 300;
}

/* ===== スクロール誘導ヒント ===== */
#drum-opening .scroll-hint {
  position: fixed;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: "Roboto Flex", "Segoe UI Emoji", sans-serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  opacity: 0; /* 既定で非表示。JS が intro 完了後に表示する（読込直後の一瞬の点滅=FOUC を防ぐ） */
  transition: opacity 0.5s ease;
}

#drum-opening .scroll-mouse {
  width: 20px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  position: relative;
}

#drum-opening .scroll-wheel {
  width: 3px;
  height: 6px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: drumScrollWheel 1.6s infinite; /* base.css の scrollWheelAnim と衝突回避 */
}

@keyframes drumScrollWheel {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 10px); }
}

@media (prefers-reduced-motion: reduce) {
  #drum-opening .scroll-wheel { animation: none; }
}