:root {
  color-scheme: dark;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  /* 縦横スクロール禁止（1画面固定） */
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background-color: #000000;
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
    system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 1rem;
  /* ロゴの 3D 傾き用の遠近 */
  perspective: 900px;
}

/* 角度を滑らかにアニメーションさせるための登録カスタムプロパティ */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* 光沢（グレア）の位置。補間可能にしてなめらかに移動・復帰させる */
@property --shine-x {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}
@property --shine-y {
  syntax: "<percentage>";
  initial-value: 8%;
  inherits: false;
}

/* フルワイドの内側に角丸の枠線。conic-gradient をマスクで「線」だけ見せ、
   --angle のアニメーションでグラデーションを左回転させる。 */
.frame {
  position: fixed;
  inset: clamp(20px, 5vw, 60px);
  border-radius: clamp(22px, 3vw, 36px);
  padding: 2px; /* 枠線の太さ */
  pointer-events: none;
  z-index: 2;
  /* 色相環順に隣接色を滑らかに繋ぎ、白を頂点に紫↔黄緑の飛びを橋渡し。
     黄緑み→青み→ラベンダー→白→(ループで黄緑みへ) */
  background: conic-gradient(
    from var(--angle),
    #a8b994,
    #c3cdaa,
    #9fb2c6,
    #cdd6df,
    #b9a9e0,
    #ddd0ff,
    #ffffff,
    #a8b994
  );
  /* padding 分のリング（枠線）だけを残し、内側をくり抜く */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  /* イーズインアウトで毎周「加速→減速」の波をつくる */
  animation: frame-spin 7s ease-in-out infinite;
}

/* 左回転（反時計回り）: 角度を減少させる */
@keyframes frame-spin {
  to {
    --angle: -360deg;
  }
}

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

.wordmark {
  font-weight: 300;
  /* 洗練された字間: 画面幅に応じて滑らかにスケール */
  font-size: clamp(2.5rem, 12vw, 9rem);
  letter-spacing: clamp(0.13em, 1.8vw, 0.33em);
  /* 末尾の余分な字間を視覚的に相殺し、中央寄せを保つ */
  text-indent: clamp(0.13em, 1.8vw, 0.33em);
  line-height: 1.05;
  white-space: nowrap;
  user-select: none;

  /* カーソルに追従する 3D 傾き（tilt.js）。追従は即応、戻りは tilt.js 側で緩める。 */
  transform-origin: center;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.08s ease-out;
  will-change: transform;

  /* 文字色: 白 */
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  /* 立体感と淡いグロー */
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 18px rgba(205, 214, 240, 0.2));
}

/* モバイル: ロゴを少し大きく、上下左右とも中央に */
@media (max-width: 600px) {
  .wordmark {
    font-size: clamp(3.2rem, 16vw, 6rem);
  }
}