/* ============================================================
   PM Quest SI — モーションレイヤー（style.cssの上に重ねる）
   方針: yamane-site-design-preferences.md 準拠
   - ロード時から動く（リビング背景・回転見出し・カウントアップ）
   - CSSアニメ中心・WebGL禁止・prefers-reduced-motion対応
   ============================================================ */

/* ---- リビング背景：ドリフトするブロブ＋うっすら動くグリッド ---- */
.bg-live { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-live .blob { position: absolute; border-radius: 50%; opacity: .5; will-change: transform; }
.bg-live .b1 { width: 520px; height: 520px; left: -140px; top: -120px;
  background: radial-gradient(circle, rgba(46,74,122,.16), rgba(46,74,122,.06) 45%, transparent 68%);
  animation: drift1 26s ease-in-out infinite alternate; }
.bg-live .b2 { width: 460px; height: 460px; right: -120px; top: 22%;
  background: radial-gradient(circle, rgba(234,88,12,.10), rgba(234,88,12,.04) 45%, transparent 68%);
  animation: drift2 31s ease-in-out infinite alternate; }
.bg-live .b3 { width: 560px; height: 560px; left: 28%; bottom: -220px;
  background: radial-gradient(circle, rgba(13,148,136,.09), rgba(13,148,136,.03) 45%, transparent 68%);
  animation: drift3 37s ease-in-out infinite alternate; }
.bg-live .grid { position: absolute; inset: -60px;
  background-image:
    linear-gradient(rgba(20,36,62,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,36,62,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: gridmove 48s linear infinite; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(110px,70px) scale(1.14); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1.06); } to { transform: translate(-90px,120px) scale(.94); } }
@keyframes drift3 { from { transform: translate(0,0); } to { transform: translate(130px,-80px) scale(1.1); } }
@keyframes gridmove { from { transform: translate(0,0); } to { transform: translate(56px,56px); } }

/* ---- スクロールリビール（方向付き＋stagger） ---- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.rv-l { transform: translateX(-34px); }
.rv-r { transform: translateX(34px); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .1s; } .rv-d2 { transition-delay: .2s; }
.rv-d3 { transition-delay: .3s; } .rv-d4 { transition-delay: .4s; }

/* ---- 回転見出し（一語が順に入れ替わる） ---- */
.rotor { display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.16em; }
.rotor span { grid-area: 1/1; line-height: 1.16; transform: translateY(110%); opacity: 0;
  animation: rotorIn 12s infinite; color: var(--accent); font-style: normal; }
.rotor span:nth-child(2) { animation-delay: 3s; }
.rotor span:nth-child(3) { animation-delay: 6s; }
.rotor span:nth-child(4) { animation-delay: 9s; }
@keyframes rotorIn {
  0% { transform: translateY(110%); opacity: 0; }
  4%, 23% { transform: translateY(0); opacity: 1; }
  27%, 100% { transform: translateY(-110%); opacity: 0; }
}

/* ---- 数字カウントアップの器 ---- */
.cnt { font-variant-numeric: tabular-nums; }

/* ---- マーキー（キーワードが流れる帯） ---- */
.marquee { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-inner { display: inline-block; padding-right: 48px; animation: marq 30s linear infinite; }
.marquee span { display: inline-block; margin-right: 48px; font-weight: 800; letter-spacing: 2px; opacity: .5; font-size: 13px; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- cinematicフッター ---- */
.cine-footer { background: var(--primary-dk); color: #fff; padding: 70px 0 0; overflow: hidden; position: relative; }
.cine-footer .cine-giant { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 900;
  font-size: clamp(56px, 12vw, 168px); letter-spacing: -0.04em; line-height: 1;
  color: rgba(255,255,255,.10);
  text-align: center; user-select: none; white-space: nowrap; }
.cine-footer .cine-pills { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: -14px 0 34px; position: relative; z-index: 1; }
.cine-footer .pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.24);
  color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 700; padding: 12px 22px; border-radius: 999px;
  background: rgba(255,255,255,.05); transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s cubic-bezier(.16,1,.3,1); }
.cine-footer .pill:hover { transform: translateY(-3px) scale(1.03); background: rgba(234,88,12,.28); }
.cine-footer .cine-marquee { border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0; color: rgba(255,255,255,.55); }
.cine-footer .cine-brandrow { display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 0 0; }
.cine-footer .cine-brandrow img { height:20px; filter: brightness(0) invert(1); opacity:.75; }
.cine-footer .cine-brandrow span { font-size:12px; color:rgba(255,255,255,.6); font-weight:600; }
.cine-footer .cine-bottom { text-align: center; font-size: 12px; color: rgba(255,255,255,.45); padding: 12px 16px 26px; }
.cine-footer .cine-bottom a { color: rgba(255,255,255,.65); text-decoration: none; margin: 0 10px; }

/* ---- 記事本文の共通レイアウト ---- */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 56px 22px 80px; }
.article-wrap h1 { font-size: 32px; font-weight: 900; line-height: 1.4; letter-spacing: -0.6px; color: var(--text); margin: 18px 0 14px; }
.article-meta { font-size: 12.5px; color: var(--text-muted); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.article-wrap h2 { font-size: 22px; font-weight: 900; margin: 44px 0 14px; padding-left: 14px; border-left: 4px solid var(--accent); line-height: 1.5; }
.article-wrap h3 { font-size: 17px; font-weight: 800; margin: 30px 0 10px; }
.article-wrap p { font-size: 15.5px; line-height: 2.0; color: var(--text); margin: 0 0 20px; }
.article-wrap ul, .article-wrap ol { margin: 0 0 20px 22px; }
.article-wrap li { font-size: 15px; line-height: 1.95; margin-bottom: 6px; }
.article-wrap table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 13.5px; }
.article-wrap th, .article-wrap td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; line-height: 1.7; }
.article-wrap th { background: var(--primary-lt); font-weight: 800; }
.article-note { font-size: 12.5px; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; line-height: 1.8; }
.article-cta { margin: 46px 0 0; background: linear-gradient(135deg, var(--primary-dk), var(--primary)); border-radius: 18px; padding: 30px 28px; color: #fff; }
.article-cta h2 { border: none; padding: 0; margin: 0 0 8px; color: #fff; font-size: 19px; }
.article-cta p { color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.9; margin-bottom: 16px; }
.article-cta a.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-weight: 800; font-size: 14.5px; padding: 13px 26px; border-radius: 12px; text-decoration: none; }
.article-supervisor { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-top: 36px; background: var(--surface); }
.article-supervisor .sv-name { font-size: 14px; font-weight: 800; }
.article-supervisor p { font-size: 12.5px; color: var(--text-sec); line-height: 1.8; margin: 4px 0 0; }

/* ---- 記事カード（一覧・回遊） ---- */
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.art-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px; text-decoration: none; color: var(--text); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .35s cubic-bezier(.16,1,.3,1); position: relative; overflow: hidden; }
.art-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.art-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -18px rgba(20,36,62,.35); border-color: var(--primary-bd); }
.art-card:hover::before { transform: scaleX(1); }
.art-card .ac-tag { font-size: 10.5px; font-weight: 800; letter-spacing: 2px; color: var(--accent); }
.art-card h3 { font-size: 16.5px; font-weight: 900; line-height: 1.55; margin: 8px 0 8px; }
.art-card p { font-size: 13px; color: var(--text-sec); line-height: 1.8; margin: 0; }
.art-card .ac-why { margin-top: 12px; font-size: 12px; color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 10px; }

/* ---- 診断UI ---- */
.sh-wrap { max-width: 720px; margin: 0 auto; padding: 48px 20px 80px; }
.sh-progress { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; margin: 22px 0 26px; }
.sh-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 999px; transition: width .45s cubic-bezier(.22,1,.36,1); }
.sh-q { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 30px 28px; box-shadow: 0 20px 44px -30px rgba(20,36,62,.3); }
.sh-q .qnum { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; color: var(--accent); }
.sh-q h2 { font-size: 20px; font-weight: 900; line-height: 1.6; margin: 10px 0 18px; }
.sh-opt { display: grid; gap: 10px; }
.sh-opt button { text-align: left; font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.7; padding: 15px 18px; border: 1.5px solid var(--border); background: var(--bg); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.sh-opt button:hover { border-color: var(--accent); background: var(--accent-lt); transform: translateX(4px); }
.sh-back { margin-top: 16px; font-size: 12.5px; color: var(--text-muted); background: none; border: none; cursor: pointer; font-family: inherit; }
.sh-result { display: none; }
.sh-result.show { display: block; animation: shPop .5s ease; }
@keyframes shPop { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sh-type-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 2.5px; color: #fff; background: var(--primary); padding: 7px 16px; border-radius: 999px; }
.sh-bars { margin: 22px 0; display: grid; gap: 12px; }
.sh-bar { }
.sh-bar .lbl { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; margin-bottom: 5px; }
.sh-bar .tr { height: 9px; background: var(--border); border-radius: 999px; overflow: hidden; }
.sh-bar .tr i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 999px; transition: width 1s cubic-bezier(.22,1,.36,1) .2s; }

@media (max-width: 640px) {
  .cine-footer .cine-giant { font-size: clamp(42px, 14vw, 80px); }
  .article-wrap h1 { font-size: 25px; }
}

/* ---- reduced motion：全停止 ---- */
@media (prefers-reduced-motion: reduce) {
  .bg-live .blob, .bg-live .grid, .rotor span, .marquee-inner { animation: none !important; }
  .rotor span:first-child { transform: none; opacity: 1; }
  .rv, .rv-l, .rv-r { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ---- ?static=1 演出オフモード（html.u-static） ---- */
html.u-static *, html.u-static *::before, html.u-static *::after { animation: none !important; transition: none !important; }
html.u-static .rv, html.u-static .rv-l, html.u-static .rv-r { opacity: 1 !important; transform: none !important; }
html.u-static .hA2 .eyebrow, html.u-static .hA2 h1, html.u-static .hA2-sub,
html.u-static .hA2-cta, html.u-static .hA2-stats, html.u-static .hA2-tile,
html.u-static .hB2 .eyebrow, html.u-static .hB2-sub, html.u-static .hB2-cta, html.u-static .hB2-stats { opacity: 1 !important; }
html.u-static .hA2-rot .ch, html.u-static .hB2 h1 .lt { transform: none !important; opacity: 1 !important; }
html.u-static .rotor span { transform: none !important; opacity: 0 !important; }
html.u-static .rotor span:first-child { opacity: 1 !important; }