/* サイト全体の動き。js/motion.js が html に .motion を付けたときだけ動く
   (スマホの「動きを減らす」設定がオンの人には出さない) */

/* ---- 共通: スクロールで出てくる ---- */
.motion .rv { opacity: 0; transform: translateY(22px) scale(.985); }
.motion .rv.in { opacity: 1; transform: none; transition: opacity .6s ease var(--rd, 0ms), transform .7s cubic-bezier(.2, .9, .25, 1.15) var(--rd, 0ms); }

/* 押したところの波紋 */
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, 0) 60%); transform: scale(0); animation: ripple .65s ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* 押したときに少し沈む */
.motion .btn:active, .motion .cta-big:active, .motion .menu a:active, .motion .words a:active { transform: scale(.97); }
.motion .btn, .motion .cta-big, .motion .menu a, .motion .words a, .motion .chips a { transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; }

/* PCでマウスを乗せたとき */
@media (hover: hover) {
  .motion .menu a:hover, .motion .words a:hover { background: var(--panel2); }
  .motion .menu a:hover .go, .motion .words a:hover .go { transform: translateX(6px); color: var(--neon); }
  .motion .chips a:hover { border-color: var(--neon); transform: translateY(-3px); box-shadow: 0 6px 18px color-mix(in srgb, var(--neon) 25%, transparent); }
  .motion .btn:hover { transform: translateY(-2px); }
  .motion .cta-big:hover { transform: translateY(-3px); box-shadow: 0 10px 34px color-mix(in srgb, var(--neon) 55%, transparent); }
  .motion .opt:hover { border-color: color-mix(in srgb, var(--neon) 60%, var(--line)); transform: translateX(4px); }
}
.menu .go, .words .go { transition: transform .25s ease, color .25s ease; display: inline-block; }

/* ヘッダーのロゴがゆっくり明滅 */
.motion .site-logo { animation: logoGlow 3.2s ease-in-out infinite; }
@keyframes logoGlow { 50% { text-shadow: 0 0 16px rgba(255, 79, 163, .95), 0 0 34px rgba(255, 79, 163, .45); } }

/* ---- トップ ---- */
/* 見出しが1行ずつ下からせり上がる */
.top-hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.top-hero h1 .ln > span { display: inline-block; }
.motion .top-hero h1 .ln > span { transform: translateY(105%); animation: lineUp .9s cubic-bezier(.2, .9, .2, 1) forwards; }
.motion .top-hero h1 .ln:nth-child(2) > span { animation-delay: .14s; }
@keyframes lineUp { to { transform: none; } }
/* 「辛口」がネオン管のようにちらつく */
.motion .top-hero h1 em { display: inline-block; animation: flicker 4s linear 1.1s infinite; }
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 8px var(--neon), 0 0 22px var(--neon), 0 0 44px color-mix(in srgb, var(--neon) 60%, transparent); opacity: 1; }
  20%, 24%, 55% { text-shadow: none; opacity: .55; }
}
.motion .top-hero .eyebrow, .motion .top-hero .lead, .motion .top-hero .stats, .motion .top-hero .cta-big { opacity: 0; transform: translateY(16px); animation: fadeUp .7s cubic-bezier(.2, .9, .25, 1) forwards; }
.motion .top-hero .eyebrow { animation-delay: 0s; }
.motion .top-hero .lead { animation-delay: .35s; }
.motion .top-hero .stats { animation-delay: .5s; }
.motion .top-hero .cta-big { animation: fadeUp .7s cubic-bezier(.2, .9, .25, 1) .65s forwards, ctaPulse 2.4s ease-in-out 1.6s infinite; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes ctaPulse { 50% { box-shadow: 0 0 38px color-mix(in srgb, var(--neon) 65%, transparent); } }
/* 大きいボタンに光がすっと走る */
.cta-big { position: relative; overflow: hidden; }
.motion .cta-big::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); animation: sweep 3.2s ease-in-out 1.8s infinite;
}
@keyframes sweep { 0% { left: -60%; } 35%, 100% { left: 130%; } }
.motion .cta-big .arrow { animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

/* 動く見本 */
.motion .top-visual { opacity: 0; animation: fadeIn 1s ease .4s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.motion .tv-glow { animation: glowMove 8s ease-in-out infinite alternate; }
@keyframes glowMove { to { transform: translate(-14%, 10%) scale(1.15); filter: hue-rotate(40deg); } }
.motion .tv-orb { animation: float 5s ease-in-out infinite; }
.motion .tv-orb i { animation: spin 9s linear infinite; }
.motion .tv-orb i:nth-child(2) { animation-duration: 13s; animation-direction: reverse; }
.motion .tv-orb i:nth-child(3) { animation-duration: 17s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-14px); } }
.motion .tv-card { animation: cardIn 1s cubic-bezier(.2, .9, .25, 1.2) .7s both, float 6s ease-in-out 1.8s infinite; }
@keyframes cardIn { from { opacity: 0; transform: translateY(30px) rotate(-4deg) scale(.9); } }
.motion .tv-chip { animation: chipIn .7s cubic-bezier(.2, .9, .3, 1.4) both, bob 4s ease-in-out infinite; }
.motion .tv-chip.c1 { animation-delay: 1s, 1.8s; }
.motion .tv-chip.c2 { animation-delay: 1.15s, 2.3s; }
.motion .tv-chip.c3 { animation-delay: 1.3s, 2.9s; }
.motion .tv-chip.c4 { animation-delay: 1.45s, 3.4s; }
@keyframes chipIn { from { opacity: 0; transform: scale(.4); } }
@keyframes bob { 50% { transform: translateY(-9px) rotate(var(--tilt, 2deg)); } }
.tv-line .typing::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--neon); animation: caret .7s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* 流れる帯 */
.motion .mq-track { animation: marquee 38s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- 診断 ---- */
/* 水晶玉がふわふわ */
.motion .hero svg, .motion .hero img { animation: float 4.5s ease-in-out infinite; }
/* 辛口度を選ぶと唐辛子が跳ねる */
.motion .spice input:checked + span small { display: inline-block; animation: chili .5s cubic-bezier(.3, 1.6, .5, 1); }
.spice span { display: block; }
.spice small { display: block; }
@keyframes chili { 30% { transform: scale(1.5) rotate(-12deg); } 60% { transform: scale(.9) rotate(8deg); } }
.motion .spice span { transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; }
.motion .spice input:checked + span { transform: translateY(-2px); }
/* はじめるボタンが呼吸するように光る */
.motion #start { animation: ctaPulse 2.4s ease-in-out infinite; position: relative; overflow: hidden; }
.motion #start::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent); transform: skewX(-20deg); animation: sweep 3s ease-in-out 1s infinite; pointer-events: none; }

/* 質問が横から入ってくる(戻るときは逆から) */
.motion #quiz.q-in .q-text, .motion #quiz.q-in .q-hint { animation: slideL .45s cubic-bezier(.2, .9, .25, 1) both; }
.motion #quiz.q-back .q-text, .motion #quiz.q-back .q-hint { animation: slideR .45s cubic-bezier(.2, .9, .25, 1) both; }
.motion #quiz.q-in .opt, .motion #quiz.q-back .opt { animation: optIn .45s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i, 0) * 55ms + 80ms); }
@keyframes slideL { from { opacity: 0; transform: translateX(36px); } }
@keyframes slideR { from { opacity: 0; transform: translateX(-36px); } }
@keyframes optIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
/* 選んだ選択肢がポンと光る */
.opt.picked { border-color: var(--neon); background: color-mix(in srgb, var(--neon) 26%, var(--panel2)); box-shadow: 0 0 22px color-mix(in srgb, var(--neon) 55%, transparent); color: #fff; }
.motion .opt.picked { animation: pick .2s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pick { 50% { transform: scale(1.03); } }
.motion .q-bar i { box-shadow: 0 0 10px var(--neon); }
.motion .q-top b { display: inline-block; }
.motion #quiz.q-in .q-top b { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }

/* 待っている間: 水晶玉の周りを光が回る */
.motion .loading .orb { position: relative; animation: pulse 1.1s ease-in-out infinite, wobble 2.2s ease-in-out infinite; }
.motion .loading .orb::before, .motion .loading .orb::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--neon); border-left-color: var(--neon2); animation: spin 1s linear infinite; }
.motion .loading .orb::after { inset: -26px; border-top-color: var(--neon2); border-left-color: transparent; border-right-color: var(--neon); animation-duration: 1.6s; animation-direction: reverse; }
@keyframes wobble { 25% { transform: rotate(-6deg) scale(1.06); } 75% { transform: rotate(6deg) scale(1.06); } }
.motion #loadText { animation: blink 0.45s ease-in-out infinite alternate; }
@keyframes blink { from { opacity: .55; } to { opacity: 1; } }

/* 結果の登場 */
.score-card { position: relative; overflow: visible; }
.motion .res-in .score-card { animation: cardPop .7s cubic-bezier(.2, .9, .3, 1.35) both; }
@keyframes cardPop { from { opacity: 0; transform: scale(.82) translateY(20px); } }
.motion .res-in .score-num { animation: stamp .75s cubic-bezier(.2, .9, .3, 1.2) .15s both; }
@keyframes stamp {
  0% { opacity: 0; transform: scale(2.4); filter: blur(10px); }
  55% { opacity: 1; transform: scale(.94); filter: blur(0); }
  70% { transform: scale(1.04) rotate(-1.5deg); }
  85% { transform: scale(1) rotate(1deg); }
  100% { transform: none; }
}
.motion .res-in .score-emoji { animation: emojiDrop .7s cubic-bezier(.3, 1.6, .5, 1) .05s both; }
@keyframes emojiDrop { from { opacity: 0; transform: translateY(-30px) scale(.5) rotate(-20deg); } }
.motion .res-in .judge, .motion .res-in .score-catch { animation: fadeUp .5s ease .7s both; opacity: 0; transform: translateY(10px); }
.motion .res-in .memo { animation: cardPop .6s cubic-bezier(.2, .9, .3, 1.3) .55s both; }
/* ひとことに蛍光ペンを引く */
.motion .res-in .memo .line span, .motion .memo.swap .line span { background-size: 0 100%; background-repeat: no-repeat; animation: marker .8s cubic-bezier(.6, 0, .2, 1) 1s forwards; }
.motion .memo.swap .line span { animation-delay: .15s; }
.motion .memo .line span { background-image: linear-gradient(transparent 60%, color-mix(in srgb, var(--neon) 45%, transparent) 60%); }
@keyframes marker { to { background-size: 100% 100%; } }
.motion .memo.swap .line { animation: swapIn .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes swapIn { from { opacity: 0; transform: rotateX(70deg) translateY(10px); } }
.motion .res-in .warn { animation: fadeUp .5s ease both; }
/* はじける光 */
.burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.burst i { position: absolute; left: 0; top: 0; width: var(--s); height: calc(var(--s) * 1.8); border-radius: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); animation: fly 1.15s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes fly {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(var(--x) - 50%), calc(var(--y) + 60px)) rotate(var(--r)) scale(1); opacity: 0; }
}
/* 内訳のゲージは、カードが見えてから伸びる */
.motion .item.rv .gauge i.on { animation-play-state: paused; }
.motion .item.rv.in .gauge i.on { animation-play-state: running; }

/* ---- 辞典 ---- */
.motion .def .line { background-repeat: no-repeat; }
.motion .def.in .line { animation: defIn .7s cubic-bezier(.2, .9, .3, 1.2) .15s both; }
@keyframes defIn { from { opacity: 0; transform: translateX(-16px); letter-spacing: .08em; } }
.motion .def { border-left-color: var(--neon); }
.motion .def.in { animation: barGrow .6s ease both; }
@keyframes barGrow { from { border-left-color: transparent; } }
.motion .word-head h1.in { animation: headIn .8s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes headIn { 0% { opacity: 0; transform: scale(1.25); filter: blur(6px); } 60% { opacity: 1; transform: scale(.97); filter: blur(0); } 100% { transform: none; } }
/* 大きく動く演出で、横にはみ出してスクロールが出ないようにする */
body { overflow-x: clip; }

/* 入口タイル・辞典カードの登場と、絵文字のゆらぎ */
.motion .tile { animation: tileIn .7s cubic-bezier(.2, .9, .3, 1.3) both; }
.motion .tile:nth-child(2) { animation-delay: .08s; }
.motion .tile:nth-child(3) { animation-delay: .16s; }
@keyframes tileIn { from { opacity: 0; transform: translateY(24px) scale(.92); } }
.motion .tile .ti-em, .motion .menu a[style*="--c"] .t .em { animation: emBob 3.2s ease-in-out infinite; }
.motion .tile:nth-child(2) .ti-em { animation-delay: .5s; }
.motion .tile:nth-child(3) .ti-em { animation-delay: 1s; }
@keyframes emBob { 50% { transform: translateY(-4px) rotate(-6deg); } }
/* タイルとカードに光がすっと走る */
.motion .tile::after, .motion .wcard .wc-go::before { content: ''; }
.motion .tile::after { position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent); transform: skewX(-20deg); animation: sweep 4.5s ease-in-out 2s infinite; pointer-events: none; }
.motion .tile:nth-child(2)::after { animation-delay: 2.6s; }
.motion .tile:nth-child(3)::after { animation-delay: 3.2s; }
.motion .wcard .wc-go { transition: transform .25s ease; }
@media (hover: hover) { .motion .wcard:hover .wc-go { transform: translateX(6px); } }