/* ===========================================================
   共通デザイン指定（全ページ共有）
   ここを1か所直すと、サイト全体に反映されます。
   =========================================================== */

/* ブラウザが勝手に文字を拡大縮小するのを止める */
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* 表示の準備が整うまで、動き出しを待たせる（最初のカクつき防止） */
html:not(.rdy) .logo .star,html:not(.rdy) .hook .r span,html:not(.rdy) .hero h1,
html:not(.rdy) .sub,html:not(.rdy) .pills,html:not(.rdy) .pill,html:not(.rdy) .sweep,
html:not(.rdy) .glow,html:not(.rdy) .hero-bg,html:not(.rdy) .scrollcue i{
  animation-play-state:paused!important}

/* ロゴの回転：描画層を保持したまま回す */
.logo .star{will-change:transform}
@keyframes starSpin{
  0%{transform:rotateY(0) translateZ(0)}
  35%{transform:rotateY(360deg) translateZ(0)}
  100%{transform:rotateY(360deg) translateZ(0)}}

@media(max-width:760px){
  /* ロゴの回転は残す。重くなる要素だけを外す */
  .logo .star{
    transform-style:flat!important;   /* 3D空間をやめる＝描画層を使い回せる */
    backface-visibility:hidden;       /* 裏面を描かない */
    box-shadow:none!important;        /* 影を回すと毎コマ作り直しになる */
    contain:paint;                    /* 再描画の範囲を閉じる */
  }
  /* 動く部品の背景ぼかしを外す（iPhoneは毎コマ背景を作り直すため） */
  .pill{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.12)}
  .navbd{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,16,31,.74)}
  header.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,16,31,.97)}

  /* ヒーロー：最初に出る部分の動きを止める */
  .hero-bg,.glow{animation:none!important}
  .sweep{display:none!important}
  .pill{animation:none!important;transform:none!important}
  .hook em{animation:none!important}
  .hook .r span{animation:none!important;transform:none!important}
  .hero h1,.sub,.pills{opacity:1!important;animation:none!important}
  .scrollcue i{animation:none!important;opacity:.8;transform:none!important}
  .band .grid{animation:none!important}
}

@media(prefers-reduced-motion:reduce){.logo .star{animation:none!important}}

/* ===== メニューの開閉を速くする（スマホ） ===== */
@media(max-width:900px){
  /* 元は .45s で「全部の変化」を追っていた → 位置だけを .22s で動かす */
  nav{transition:transform .22s cubic-bezier(.2,0,0,1)!important;will-change:transform}
  .navbd{transition:opacity .16s ease!important}
  .burger span{transition:.18s!important}
  /* ヘッダーの背景が .5s かけて変わるのを待っていた */
  header{transition:background .14s,padding .5s,border-color .5s!important}
  header.open{transition:background .14s!important}
}