/* ==========================================================================
   Intro
   ブランドイントロアニメーション
   「ズレている → 状態を見る（ガイド） → 整う → ALIGN → Heroへ」

   タイムライン制御は assets/js/modules/intro.js が行う。
   このファイルは、
   - JavaScript実行前（および実行不可時）に表示崩れ・チラつきが起きない初期状態
   - JavaScript無効時に確実に非表示にするための <noscript> 用ルール
   - prefers-reduced-motion 環境での非表示
   を担う。
   ========================================================================== */

.c-intro {
  position: fixed;
  inset: 0;
  /* .c-skip-link(200) / .c-menu-toggle(110) / .l-header(100) より確実に手前へ表示する。
     header やその祖先には transform / filter / backdrop-filter 等を追加しないこと
     （position: fixed の containing block が壊れ、モバイルメニューと同種の不具合を招く）。 */
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-text);
  overflow: hidden;
}

/* .c-intro に display: flex を指定しているため、そのままでは hidden 属性の
   デフォルト表示（display: none）より詳細度で上書きしてしまう。
   JavaScript側の overlay.hidden = true を確実に効かせるため明示的に上書きする。 */
.c-intro[hidden] {
  display: none;
}

/* prefers-reduced-motion環境では、イントロそのものを表示しない。
   JavaScript側でも判定して後処理（inert解除）を行うが、
   表示・非表示の可否はCSS側だけでも確定できるようにしておく。 */
@media (prefers-reduced-motion: reduce) {
  .c-intro {
    display: none;
  }
}

.c-intro__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 1.5rem;
  max-inline-size: 100%;
}

/* --------------------------------------------------------------------------
   Alignment guide（水平・垂直の基準線）
   -------------------------------------------------------------------------- */

.c-intro__guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.c-intro__guide {
  position: absolute;
  background-color: var(--color-accent);
  opacity: 0;
}

.c-intro__guide--h {
  inset-inline: -20%;
  block-size: 1px;
  inset-block-start: 56%;
}

.c-intro__guide--v {
  inset-block: -40%;
  inline-size: 1px;
  inset-inline-start: 50%;
}

/* --------------------------------------------------------------------------
   ALIGN（5文字）
   -------------------------------------------------------------------------- */

.c-intro__word {
  display: flex;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(2.75rem, 5vw + 1.2rem, 6.5rem);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--color-text-on-dark);
  /* 文字ごとのrotateX/rotateY/translateZに奥行きを持たせるための視点距離。
     広角すぎるゲーム的な歪みは避けつつ、一目で立体感が分かる強さにする。 */
  perspective: 680px;
}

.c-intro__letter {
  display: inline-block;
  /* 初期状態＝「まだ整っていない」ズレ（位置・奥行き・角度）。
     JavaScriptはこの状態を起点に、同じtransform関数構成のまま
     translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) までアニメーションさせる。
     値を調整する場合はこのカスタムプロパティのみを変更すればよい。 */
  transform: translate3d(var(--ix, 0), var(--iy, 0), var(--iz, 0))
    rotateX(var(--irotx, 0deg)) rotateY(var(--iroty, 0deg)) rotateZ(var(--irot, 0deg));
}

.c-intro__letter:nth-child(1) {
  --ix: -0.16em;
  --iy: 0.2em;
  --iz: -140px;
  --irot: -4deg;
  --irotx: 22deg;
  --iroty: -26deg;
}

.c-intro__letter:nth-child(2) {
  --ix: 0.1em;
  --iy: -0.24em;
  --iz: 100px;
  --irot: 3deg;
  --irotx: -24deg;
  --iroty: 28deg;
}

.c-intro__letter:nth-child(3) {
  --ix: -0.06em;
  --iy: 0.14em;
  --iz: -95px;
  --irot: -2deg;
  --irotx: 17deg;
  --iroty: -20deg;
}

.c-intro__letter:nth-child(4) {
  --ix: 0.18em;
  --iy: -0.1em;
  --iz: 85px;
  --irot: 3deg;
  --irotx: -19deg;
  --iroty: 23deg;
}

.c-intro__letter:nth-child(5) {
  --ix: -0.12em;
  --iy: 0.18em;
  --iz: -120px;
  --irot: -3deg;
  --irotx: 20deg;
  --iroty: -25deg;
}

/* --------------------------------------------------------------------------
   PERSONAL GYM（整列後に現れるサブロゴ。既存ヘッダーロゴと同系統の表現）
   -------------------------------------------------------------------------- */

.c-intro__subtitle {
  margin-block-start: clamp(0.75rem, 1.5vw, 1.25rem);
  font-family: var(--font-en);
  font-size: clamp(0.6875rem, 0.8vw + 0.5rem, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  color: rgba(247, 246, 242, 0.72);
  opacity: 0;
}