/*
Theme Name: Raymix Golf
Theme URI: https://raymix-golf.com
Author: Raymix Golf
Author URI: https://raymix-golf.com
Description: Raymix Golf — カスタムゴルフクラブ修理・リシャフト専門店
Version: 1.0.10
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: raymix-golf
Tags: custom-menu, featured-images, translation-ready
*/

/* =========================
   デザイントークン
   ========================= */
:root {
  --color-dark:         #151515;
  --color-black:        #111111;
  --color-white:        #ffffff;
  --color-bg-light:     #f8f8f8;
  --color-bg-gray:      #eaeaea;
  --color-text-gray:    #454545;
  --color-text-sub:     #858585;
  --color-red:          #ae3a39;
  --color-overlay:      rgba(0, 0, 0, 0.45);
  --color-overlay-dark: rgba(21, 21, 21, 0.8);

  --font-jp:      'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-jp-hira: 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-en:      'Titillium Web', sans-serif;
  --font-en-bold: 'Roboto', sans-serif;
  --font-tomorrow:'Tomorrow', sans-serif;
  --font-cairo:   'Cairo', sans-serif;

  --nav-height:    70px;
  --site-width:    1440px;
  --content-width: 1000px;
}

/* =========================
   ベースリセット
   ========================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* ヘッダーが position: sticky で高さ 70px 固定のため、
     アンカーリンク（#voice / #grip など）の着地点をその分ずらす。
     指定が無いと見出しがヘッダーの下に隠れる。 */
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: var(--font-jp);
  color: var(--color-black);
  background: var(--color-white);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

/* =========================
   ローディング画面
   ========================= */
#loading-screen {
  position: fixed;
  inset: 0;
  background-color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease;
}

#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

#loading-screen.hidden {
  display: none;
}

.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#loading-screen .loading-logo {
  width: 300px;
  height: auto;
  animation: rx-load-logo 0.8s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}

/* ロゴはふわっと立ち上げる（1回のみ） */
@keyframes rx-load-logo {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -------- LIMIT BREAK --------
   ゲージが振り切れる瞬間に字間が一気に広がって「突き破る」。
   letter-spacing と同値の padding-left を一緒に動かすことで、
   広がっても中央位置がずれないようにしている。

   サイズは元ロゴに焼き込まれていた LIMIT BREAK 行を実測して合わせている
   （幅 93.4px / 字面の高さ 11.2px ＠ロゴ幅300px）。 */
.loading-tagline {
  margin: 12px 0 0;
  padding-left: 0.02em;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-white);
  white-space: nowrap;
  animation: rx-load-tagline 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.55s infinite;
}

@keyframes rx-load-tagline {
  0%,
  55% {
    letter-spacing: 0.02em;
    padding-left: 0.02em;
    opacity: 0.5;
  }
  63% {
    letter-spacing: 0.3em;
    padding-left: 0.3em;
    opacity: 1;
  }
  75% {
    letter-spacing: 0.02em;
    padding-left: 0.02em;
    opacity: 1;
  }
  100% {
    letter-spacing: 0.02em;
    padding-left: 0.02em;
    opacity: 0.5;
  }
}

/* -------- リミットゲージ -------- */
.loading-gauge {
  position: relative;
  width: 240px;
  height: 1px;
  margin-top: 26px;
  background: rgba(255, 255, 255, 0.16);
}

/* 端まで溜まって、限界を超えて弾ける */
.loading-gauge__bar {
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 3px;
  background: var(--color-white);
  animation: rx-load-gauge 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.55s infinite;
}

@keyframes rx-load-gauge {
  0% {
    width: 0;
    opacity: 1;
    box-shadow: none;
  }
  55% {
    width: 100%;
    opacity: 1;
    box-shadow: none;
  }
  61% {
    width: 100%;
    opacity: 1;
    box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.85);
  }
  74% {
    width: 116%;
    opacity: 0;
    box-shadow: 0 0 22px 3px rgba(255, 255, 255, 0);
  }
  75%,
  100% {
    width: 0;
    opacity: 0;
    box-shadow: none;
  }
}

/* 弾けた瞬間に左右へ抜ける光 */
.loading-gauge__burst {
  position: absolute;
  left: 50%;
  top: -1px;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-white) 22%,
    var(--color-white) 78%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-50%) scaleX(0.2);
  animation: rx-load-burst 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s infinite;
}

@keyframes rx-load-burst {
  0%,
  58% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.2);
  }
  63% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
  80%,
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(1.9);
  }
}

/* SPローディング（Figma 1:1516: ロゴ 120×73） */
@media (max-width: 767px) {
  #loading-screen .loading-logo {
    width: 120px;
    height: auto;
  }

  /* ロゴが 300px → 120px になるのに合わせて縮める */
  .loading-tagline {
    margin-top: 6px;
    font-size: 7px;
  }

  .loading-gauge {
    width: 120px;
    margin-top: 16px;
  }
}

/* アニメーションを控える設定の場合は動かさない */
@media (prefers-reduced-motion: reduce) {
  #loading-screen .loading-logo,
  .loading-tagline,
  .loading-gauge__bar,
  .loading-gauge__burst {
    animation: none;
  }

  .loading-tagline {
    opacity: 1;
  }

  .loading-gauge__bar {
    width: 100%;
  }

  .loading-gauge__burst {
    opacity: 0;
  }
}

/* =========================
   スクロールロック（SPメニュー展開時）
   ========================= */
body.is-menu-open {
  overflow: hidden;
}

/* =========================
   ユーティリティ
   ========================= */
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* =========================
   本文へスキップ（キーボード操作用）
   通常は非表示、フォーカス時のみ表示される
   ========================= */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  padding: 10px 18px;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
}

.skip-link:focus {
  top: 16px;
}