/* =====================================================================
   nudot.css : nudot.com.tw を参考にしたレイアウト・トンマナの再現層
   （散らばった写真のヒーロー／浮遊ワードのセクション／傾いたビジュアル紹介）
   まずは参考サイトの「表現方法」を忠実に模倣する目的のファイルです。
   色は意図的にモノトーン（黒・白・グレー）に寄せています。
   ここから赤ネオンへ戻す・調整する場合は、このファイルの色だけを
   編集すれば、他のページの見た目には影響しません。
   ===================================================================== */

/* ---------------------------------------------------------------------
   共通トークン
   --------------------------------------------------------------------- */
.hero--split,
.tilt-section {
  --mono-0: #050506;
  --mono-1: #d8d8dc;
  --mono-2: #8a8a92;
  --mono-3: #4a4a52;
  --mono-line: rgba(255, 255, 255, 0.18);
}

/* ---------------------------------------------------------------------
   1. ヒーロー：背景クロスフェード＋グリッチ切替（画面にピン留めして再生）
   --------------------------------------------------------------------- */
.hero--split {
  background: var(--mono-0);
  border-bottom: 1px solid var(--mono-line);
  overflow: hidden;
  /* 横幅に対して常に16:9（横9:縦16ではなく、横16:縦9の横長比率）以上の高さを
     確保する。以前は高さの上限が980pxだったため、横に広い画面では16:9に
     届かず物足りなかった。上限を実質なくし、画面が横に広がるほど、
     ヒーローもそのぶん縦にも広がって16:9の比率に届くようにする
     （スマホ等の縦長画面では、中のスマホ演出が収まる高さを優先） */
  min-height: max(540px, 56.25vw);
}

.hero--split .hero-glow,
.hero--split .hero-floor,
.hero--split .hero-svg {
  display: none;
}

.hero-bgstack {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 18%;
  opacity: 0;
  filter: grayscale(0.7) contrast(1.1) brightness(0.55);
  transition: opacity 0.5s ease;
}

.hero-bg-layer.is-active {
  opacity: 1;
}

/* グリッチ（色ずれ）レイヤー。切り替わる瞬間だけ .is-glitching が付く */
.hero-bg-glitch {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 18%;
  background-image: inherit;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-bg-glitch--r {
  background-color: rgba(255, 40, 60, 0.55);
  background-blend-mode: multiply;
}

.hero-bg-glitch--b {
  background-color: rgba(60, 200, 255, 0.5);
  background-blend-mode: multiply;
}

.hero-bgstack.is-glitching .hero-bg-glitch--r {
  opacity: 0.85;
  transform: translate3d(-8px, 0, 0);
}

.hero-bgstack.is-glitching .hero-bg-glitch--b {
  opacity: 0.85;
  transform: translate3d(8px, 0, 0);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.72) 100%);
  pointer-events: none;
}

.hero--split .hero-inner {
  position: relative;
  z-index: 2;
  gap: 14px;
}

.hero--split .hero-inner::before {
  inset: -60px -20%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 46%, transparent 76%);
}

.hero--split .hero-logo {
  width: clamp(40px, 6vw, 56px);
  filter: none;
  opacity: 0.9;
}

.hero--split .hero-title {
  color: #fff;
  text-shadow: none;
  font-family: var(--font-display);
}

.hero--split .hero-tagline {
  color: var(--mono-1);
  letter-spacing: 0.3em;
}

.hero--split .hero-desc {
  color: var(--mono-2);
  text-shadow: none;
}

.hero-stats {
  position: relative;
  width: min(100%, 640px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 14px 0;
}

.hero-stats::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--mono-line);
  z-index: -1;
}

.hero-stats span {
  background: var(--mono-0);
  padding: 0 10px;
  font-family: var(--font-num);
  font-size: clamp(0.62rem, 1.6vw, 0.78rem);
  letter-spacing: 0.05em;
  color: var(--mono-2);
  white-space: nowrap;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 4px;
  color: var(--mono-2);
  font-size: clamp(0.72rem, 1.8vw, 0.85rem);
  letter-spacing: 0.02em;
}

.hero--split .hero-actions {
  margin-top: 18px;
}

.hero--split .hero-actions .btn {
  background: #fff;
  color: #050506;
  box-shadow: none;
}

.hero--split .hero-actions .btn-ghost {
  background: transparent;
  border-color: var(--mono-3);
  color: var(--mono-1);
}

@media (max-width: 760px) {
  .hero-inner {
    position: relative;
    z-index: 3;
  }
}

/* 見出し・キャプションのスクロール連動演出（ふわっと浮かび上がる）は
   js/nudot-scroll.js が GSAP ScrollTrigger を使って直接制御します。
   ここではCSS側で何もしないことで、GSAPの初期状態設定と衝突しないようにします。 */

.scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--mono-2);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-decoration: none;
}

.scroll-arrow {
  display: block;
  font-size: 0.9rem;
  animation: cueBounce 1.6s ease-in-out infinite;
}

@keyframes cueBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* ---------------------------------------------------------------------
   参考サイト風：「THE SECTORS」— 縦長サムネイルが内側・中間・外側の
   3重の正円リングに並び、画面にピン留めした状態でスクロール量に応じて
   リング全体が回転しながら外へ広がっていく（外側リングは画面端の外まで
   はみ出すくらい大きく広がる）
   --------------------------------------------------------------------- */
.sectors-section {
  position: relative;
  overflow: hidden;
  background: rgba(5, 5, 6, 0.6); /* 動く背景がうっすら透けるように、少し透明な黒 */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* リングの中心点（0×0のアンカー）。--spin（全体の回転角）と --radius（半径）を
   JS（js/motion.js の initSectorsRing）が毎フレーム書き換える。
   カスタムプロパティは子要素に継承されるため、ここを1箇所更新するだけで
   すべてのサムネイルの位置が一斉に更新される（＝きれいに整列した正円を保てる） */
.sectors-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
  --spin: 0deg;
  --radius: 90px;
  transform: var(--parallax, none);
}

/* 「スロット」：中心から角度(--a + --spin)・半径(--radius × --ring-mult)の位置まで
   針時計の針のように伸びるだけの、見た目を持たない要素。
   傾き用のランダムな --tilt は廃止：スロット自体の回転がそのままカードにも伝わる
   ため、余計な傾きを足さなければカードは常に中心から放射状（扇状）にきれいに
   揃って見える（＝「角度がばらけて見える」問題の直接の原因だった） */
.sectors-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform: rotate(calc(var(--a) + var(--spin))) translateY(calc(var(--radius) * var(--ring-mult, 1) * -1));
}

/* リングを3重（内側・中間・外側）にするための半径倍率。
   カードのサイズは実際の半径（--radius × --ring-mult）から計算されるため、
   外側リングほど半径が大きい分、自然とカードも少し大きく見える */
.sectors-thumb.ring-1 {
  --ring-mult: 0.52;
}
.sectors-thumb.ring-2 {
  --ring-mult: 1;
}
.sectors-thumb.ring-3 {
  --ring-mult: 1.62;
}

/* 実際に見える縦長（スマホ画面のような）カード。
   スロットの位置に自分の中心を合わせるだけで、個別の傾きは持たない
   （リングが回転すると、スロットの回転がそのままカードにも伝わり、
   常に中心から外へ向かって放射状に揃った状態を保つ）。
   サイズは固定値ではなく「実際の半径（--radius × --ring-mult）」から
   計算する。こうすることで、輪が小さくまとまっている間はカードも
   小さく、輪が広がるにつれてカードも一緒に大きくなる（参考サイトと
   同じ、円のスケールに追従したサイズ変化になる） */
.sectors-thumb-card {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(10px, calc(var(--radius, 90px) * var(--ring-mult, 1) * 0.115), 140px);
  aspect-ratio: 9 / 16;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}

/* 外側のリングほど淡くして奥行きを出す（サイズ自体は半径から自動計算されるため
   ここではサイズ指定は行わない） */
.sectors-thumb.ring-3 .sectors-thumb-card {
  opacity: 0.82;
}

.sectors-thumb-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  filter: grayscale(0.55) contrast(1.1) brightness(0.85);
}

.sectors-center {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 16px;
}

.sectors-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.6rem);
  color: #fff;
  letter-spacing: 0.04em;
}

.sectors-sub {
  margin-top: 10px;
  color: var(--mono-2, #8a8a92);
  font-size: clamp(0.78rem, 1.8vw, 0.92rem);
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------
   LIVE ステージ：上のリングを「背景」にして、Now Live を重ねる。
   背景は position: sticky で画面に張り付き（高さ100vh、下の margin で場所を
   取らない）、中身が長くてもスクロール中ずっと背景として見え続ける。
   画面を固定（pin）しないので、スクロールはすぐ進む
   --------------------------------------------------------------------- */
.sectors-section.live-stage {
  display: block;
  min-height: 100vh;
  overflow: clip; /* hidden だと sticky が効かなくなるため clip を使う */
  padding-bottom: 72px;
}

.live-stage-bg {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* 中央を少し暗くして、重ねた文字・カードを読みやすくする */
.live-stage-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(5, 5, 6, 0.62) 0%, rgba(5, 5, 6, 0.28) 62%, rgba(5, 5, 6, 0.1) 100%);
  pointer-events: none;
}

.live-stage-content {
  position: relative;
  z-index: 2;
  padding-top: clamp(72px, 12vh, 130px);
}

.live-stage-content .section-head {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

@media (max-width: 760px) {
  /* スマホでもカードサイズは --radius から自動計算されるため個別指定は不要。
     上限だけ少し抑えて、狭い画面でカードが大きくなりすぎないようにする */
  .sectors-thumb-card {
    width: clamp(10px, calc(var(--radius, 90px) * var(--ring-mult, 1) * 0.115), 86px);
  }
  .sectors-section {
    min-height: 70vh;
  }
  .sectors-section.live-stage {
    min-height: 100vh;
  }
}

/* ---------------------------------------------------------------------
   3. 傾いたビジュアル紹介セクション
   --------------------------------------------------------------------- */
.tilt-section {
  position: relative;
  overflow: hidden;
  background: rgba(5, 5, 6, 0.6); /* 動く背景がうっすら透けるように、少し透明な黒 */
  min-height: clamp(520px, 82vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 0 !important;
}

.tilt-logo {
  position: absolute;
  z-index: 3;
  top: 40px;
  left: 24px;
  width: 34px;
  height: auto;
  opacity: 0.85;
  filter: grayscale(1) brightness(2);
}

.tilt-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 1400px;
}

.tilt-card {
  width: min(84vw, 460px);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 70px rgba(0, 0, 0, 0.7);
  transform: rotateX(10deg) rotateZ(-2deg);
  transition: transform 0.4s ease;
}

.tilt-card:hover {
  transform: rotateX(6deg) rotateZ(-1deg) translateY(-6px);
}

.tilt-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  filter: grayscale(0.5) contrast(1.05) brightness(0.92);
}

.tilt-pedestal {
  width: min(70vw, 380px);
  height: 46px;
  margin-top: -14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.14), transparent 72%);
  filter: blur(2px);
}

.tilt-list {
  position: absolute;
  z-index: 3;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--mono-2);
  line-height: 1.8;
}

.tilt-list--a {
  top: 48px;
}

.tilt-list--b {
  bottom: 96px;
}

.tilt-glitch {
  position: absolute;
  z-index: 3;
  left: 24px;
  bottom: 80px;
  display: grid;
}

.tilt-glitch-main,
.tilt-glitch-ghost {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tilt-glitch-main {
  color: #fff;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
}

.tilt-glitch-ghost {
  color: var(--mono-3);
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  opacity: 0.5;
  transform: translate(3px, 2px);
  mix-blend-mode: screen;
}

@media (max-width: 760px) {
  .tilt-list,
  .tilt-glitch {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   5. 参考サイト風：巨大なエンボス（浮き出し）ロゴのクロージングセクション
   --------------------------------------------------------------------- */
.emboss-footer {
  position: relative;
  background: rgba(5, 5, 6, 0.6); /* 動く背景がうっすら透けるように、少し透明な黒 */
  padding: 56px 24px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.emboss-word {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.2rem, 15vw, 11rem);
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 0.1em 0 0.16em;
  color: #141416;
  background: linear-gradient(180deg, #1c1c1f, #0c0c0e);
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.06),
    -1px -1px 1px rgba(0, 0, 0, 0.8),
    2px 2px 3px rgba(0, 0, 0, 0.6);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}