/* ==========================================================================
   共通の部品と動き（ヘッダー・ボタン・見出し・表示の動き・カード）
   動くものはすべて html[data-motion="on"] のときだけ。値は tokens.css。
   ========================================================================== */

/* ---------- ヘッダー：柔らかいガラスと、読み進みの細い線 ---------- */
.site-header { transition: box-shadow .5s var(--ease), background-color .5s var(--ease); }
.site-header[data-scrolled] { box-shadow: 0 10px 30px -20px rgba(20, 24, 30, .22); }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--grad-progress); transform-origin: 0 50%; transform: scaleX(var(--page, 0));
  opacity: .8; pointer-events: none;
}
.nav-links a { position: relative; transition: color .3s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* ---------- ボタン ---------- */
.button {
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 28px -16px rgba(20, 24, 30, .55);
  transition: background .3s, transform .5s var(--ease), box-shadow .5s var(--ease);
}
.button:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 20px 36px -18px rgba(20, 24, 30, .55); }
.button:active { transform: translateY(0) scale(.98); }
.button::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .2) 50%, transparent 70%); transform: translateX(-120%);
}
html[data-motion="on"] .button:hover::after { transition: transform .9s var(--ease); transform: translateX(120%); }

/* ---------- 見出し：行ごとに下から現れる ---------- */
.line-inner.has-trim { margin-inline-end: -.45em; }
.line-inner.has-trim .heading-end-adjust { margin-inline-end: 0; }
.sound .line-inner.has-trim { margin-inline-end: 0; }
.hero h1 .line, h2.display .line { display: block; }
html[data-motion="on"] h2.display .line { overflow: hidden; padding: 0 .06em .12em; margin: 0 -.06em -.12em; }
html[data-motion="on"] h2.display .line-inner {
  display: inline-block; transform: translate3d(0, 112%, 0) rotate(2deg); transform-origin: 0 100%;
  transition: transform 1.3s var(--ease) calc(.05s + var(--l) * .1s);
}
html[data-motion="on"] h2.display.is-in .line-inner { transform: none; }
html[data-motion="on"] .display.reveal-pending { transform: none; opacity: 1; }
@keyframes line-up { from { transform: translate3d(0, 110%, 0) rotate(2deg); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }

/* ---------- 表示の動き：ひとつの緩急で、少しずつずらして ---------- */
html[data-motion="on"] .reveal { transition: opacity 1s var(--ease-soft), transform var(--dur-reveal) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger)); }
html[data-motion="on"] .reveal-pending { opacity: 0; transform: translate3d(0, 36px, 0); }
html[data-motion="on"] .spec-grid > div { transition: opacity .9s var(--ease-soft) calc(.15s + var(--i) * var(--stagger)), transform 1.1s var(--ease) calc(.15s + var(--i) * var(--stagger)); }
html[data-motion="on"] .spec-grid.reveal-pending > div { opacity: 0; transform: translate3d(0, 22px, 0); }

/* ---------- 仕様：写真の奥行き ---------- */
.portability-image { border-radius: var(--radius-l); box-shadow: var(--shadow-soft); }
html[data-motion="on"] .portability-image img { scale: 1.1; translate: 0 calc(var(--vp, 0) * -4%); }

/* ---------- レビュー・会場：カード ---------- */
.review-link, .venue-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.review-link[data-tilting], .venue-card[data-tilting] { transition: transform .2s linear, box-shadow .5s var(--ease); }
.review-image { border-radius: var(--radius-m); box-shadow: 0 22px 44px -32px rgba(20, 24, 30, .45); transition: box-shadow .6s var(--ease); }
.review-image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(60% 60% at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .26), transparent 70%);
}
.review-link[data-tilting] .review-image::after { opacity: 1; }
.review-link:hover .review-image { box-shadow: 0 34px 54px -32px rgba(20, 24, 30, .5); }
.review-play { transition: transform .5s var(--ease), background .3s; }
.review-link:hover .review-play { transform: translate(-50%, -50%) scale(1.08); background: var(--accent-strong); }
.venue-card { border-radius: var(--radius-l); box-shadow: 0 1px 0 rgba(0, 0, 0, .02), 0 26px 52px -42px rgba(20, 24, 30, .35); }
html[data-motion="on"] .venue-image img { scale: 1.1; translate: 0 calc(var(--vp, 0) * -6%); }

/* ---------- 購入：写真の背景の端をページになじませる ---------- */
.purchase-image {
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 52%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 52%, #000 58%, transparent 100%);
}