/* =============================================================
   GOOD SPORTS v2026 — スクロールアニメーション(全サイト共通)
   このファイルだけで完結させ、base.css / site.css / corporate.css に
   依存しない。旧デザインのページ(冬WP の一部・英語ブログ)にも
   そのまま読み込めるようにするため。

   適用は opt-in。下のクラスを付けた要素だけが動くので、読み込んでも
   クラスを付けていないページの見た目は 1px も変わらない。
   ============================================================= */
:root {
  --gs-rv-dur: .62s;
  --gs-rv-ease: cubic-bezier(.22, .8, .36, 1);
  --gs-rv-y: 20px;
}

/* ---- 単体リビール / グループリビール(子を時間差で出す) ----
   グループの時間差は site.js が transition-delay を配る(要素数に依存しない) */
html.gs-anim .gs-reveal,
html.gs-anim .gs-reveal-g > * {
  opacity: 0;
  transform: translateY(var(--gs-rv-y));
  transition: opacity var(--gs-rv-dur) ease, transform var(--gs-rv-dur) var(--gs-rv-ease);
}
html.gs-anim .gs-reveal.is-in,
html.gs-anim .gs-reveal-g.is-in > * { opacity: 1; transform: none; }

/* ---- Flow の点線レールが上から伸びる ---- */
html.gs-anim .gs-reveal-g .gs-flow-line {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .55s var(--gs-rv-ease);
}
html.gs-anim .gs-reveal-g.is-in .gs-flow-line { transform: scaleY(1); }

/* ---- ヒーロー: スクロール待ちせずロード直後に再生 ----
   IntersectionObserver(defer JS)を待たないので初期表示が遅れない。
   写真そのものは LCP なので触らない(下の対象は文字とカードだけ) */
@keyframes gsRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
html.gs-anim .gs-rise > * { animation: gsRise .72s var(--gs-rv-ease) both; }
html.gs-anim .gs-rise > *:nth-child(1) { animation-delay: .05s; }
html.gs-anim .gs-rise > *:nth-child(2) { animation-delay: .17s; }
html.gs-anim .gs-rise > *:nth-child(3) { animation-delay: .29s; }
html.gs-anim .gs-rise > *:nth-child(4) { animation-delay: .41s; }
html.gs-anim .gs-rise > *:nth-child(5) { animation-delay: .53s; }
html.gs-anim .gs-rise-late { animation: gsRise .72s var(--gs-rv-ease) .62s both; }

/* ---- ヒーロー見出しの後半だけ遅らせて出す(.gs-marker-seq) ----
   前半が出そろってから、行き先とキメの1行がマーカーを引くように左から現れる。
   最後の1行はそこから一度だけ弾ませて、ページで一番言いたいことに目を止めてもらう。
   opt-in。クラスを付けた見出しだけが動く。

   ・幅を変える scale は使わない。1行に固定した長い見出し(英語)が
     膨らむと右のカードに重なるため、上下の動きと明るさだけで強める
   ・sweep は backwards。終わったら clip-path を手放すので、
     続く punch の影(要素の外に出る)が切り取られない */
@keyframes gsMarkerSweep {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes gsMarkerPunch {
  0%   { transform: translateY(0);    box-shadow: 0 0 0 rgba(var(--gs-mk-glow), 0);      filter: brightness(1); }
  34%  { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(var(--gs-mk-glow), .62); filter: brightness(1.12); }
  66%  { transform: translateY(2px);  box-shadow: 0 5px 14px rgba(var(--gs-mk-glow), .2);   filter: brightness(1); }
  100% { transform: translateY(0);    box-shadow: 0 0 0 rgba(var(--gs-mk-glow), 0);      filter: brightness(1); }
}
/* 光の色。既定は最後の1行が黄色い帯であることに合わせる。
   帯の色が違う見出し(トップは白地)は、その見出し側で上書きする */
html.gs-anim .gs-marker-seq { --gs-mk-glow: 251, 198, 15; }
/* 対象は「最後の2行」。見出しによって行数もクラス名も違うため、
   クラス名ではなく位置で指定して、どのページでも同じ順序で当たるようにする */
html.gs-anim .gs-marker-seq > *:nth-last-child(2) {
  animation: gsMarkerSweep .48s var(--gs-rv-ease) .62s backwards;
}
html.gs-anim .gs-marker-seq > *:nth-last-child(1) {
  animation: gsMarkerSweep .48s var(--gs-rv-ease) .98s backwards,
             gsMarkerPunch .62s cubic-bezier(.2, .9, .3, 1.2) 1.46s backwards;
}

/* ---- 料金帯の雪がゆっくり漂う(既存の静止した白丸を活かす) ----
   .snow は料金帯を持つ他ページ(レンタル/シーズン/トップ)にもあるので、
   ここも .gs-snowfall を付けた帯だけに限定する。付けなければ従来どおり静止 */
@keyframes gsSnowDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(7px, 11px, 0); }
}
html.gs-anim .gs-snowfall .snow { animation: gsSnowDrift 9s ease-in-out infinite; }
html.gs-anim .gs-snowfall .snow:nth-of-type(2) { animation-duration: 11.5s; animation-delay: -3s; }
html.gs-anim .gs-snowfall .snow:nth-of-type(3) { animation-duration: 8s; animation-delay: -5s; }
html.gs-anim .gs-snowfall .snow:nth-of-type(4) { animation-duration: 12.5s; animation-delay: -1.5s; }
html.gs-anim .gs-snowfall .snow:nth-of-type(5) { animation-duration: 10s; animation-delay: -7s; }
/* 画面から外れている間は止める。雪は無限ループなので、放っておくと読み手が
   別のセクションを見ている間もずっと描画し続ける(電池と CPU の無駄)。
   is-out は site.js が付け外しする */
html.gs-anim .gs-snowfall.is-out .snow { animation-play-state: paused; }

/* =============================================================
   価格の強調(.gs-price-pop)
   ヒーローの料金カードと、料金セクションの金額だけに使う特別扱い。
   金額が弾んで現れ、同時に淡く光り、旧価格には取り消し線が引かれる。
   「元の値段からこれだけ下がった」という流れを目で追えるようにするのが狙い。

   数字そのものは書き換えない(カウントアップはしない)。
   料金は誤読が許されないので、途中の中途半端な数字を見せない。
   ============================================================= */
/* 料金セクション用: 何も無い状態から弾んで出る。
   セクションごと現れる場所なので、数字が最初から無くても不自然に見えない */
@keyframes gsPricePop {
  0%   { opacity: 0; transform: scale(.68) translateY(10px); text-shadow: 0 0 0 transparent; }
  55%  { opacity: 1; transform: scale(1.09) translateY(0);   text-shadow: 0 0 26px currentColor; }
  78%  {              transform: scale(.985); }
  100% { opacity: 1; transform: scale(1);                    text-shadow: 0 0 0 transparent; }
}
/* ヒーロー用: 数字は消さず、出そろってから一度だけ脈打たせる。
   ヒーローの金額は「2時間半 5,250 円でニセコへ」と文章に埋まっているため、
   消すと「2時間半　円でニセコへ」と穴が空いた日本語に見えてしまう */
@keyframes gsPriceAccent {
  0%   { transform: scale(1);    text-shadow: 0 0 0 transparent; }
  32%  { transform: scale(1.14); text-shadow: 0 0 30px currentColor; }
  62%  { transform: scale(.975); }
  100% { transform: scale(1);    text-shadow: 0 0 0 transparent; }
}
@keyframes gsStrikeIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 料金セクションの金額(.num)が弾んで出る */
html.gs-anim .gs-price-pop .num { opacity: 0; }
html.gs-anim .gs-price-pop.is-in .num {
  animation: gsPricePop .66s cubic-bezier(.2, .9, .3, 1.25) both;
}

/* ヒーローの金額(.n)は常に見えたまま、カードが立ち上がってから脈打つ */
html.gs-anim .gs-price-pop.is-in .n {
  animation: gsPriceAccent .78s cubic-bezier(.2, .9, .3, 1.2) 1.15s both;
  display: inline-block; /* transform を効かせる(baseline は保つ) */
}

/* 旧価格の取り消し線を「引かれる」動きにする。
   text-decoration はアニメーションできないので、線だけ疑似要素に持たせ替える。
   html.gs-anim が付かないときは元の text-decoration がそのまま残る */
html.gs-anim .gs-price-pop .old { text-decoration: none; }
/* 線は .old ではなく中の span を基準にする。.old はモバイルで幅100%の行になるため、
   .old を基準にすると線が文字の外まで伸びる */
html.gs-anim .gs-price-pop .old > span { position: relative; text-decoration: none; }
html.gs-anim .gs-price-pop .old > span::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 52%;
  border-top: 3px solid var(--gs-red);
  transform: scaleX(0); transform-origin: left;
}
html.gs-anim .gs-price-pop.is-in .old > span::after {
  animation: gsStrikeIn .4s var(--gs-rv-ease) .34s both;
}
/* シアン帯の中の旧価格は白抜きなので線も白にする */
html.gs-anim .gs-offer-panel .gs-price-pop .old > span::after { border-top-color: rgba(255, 255, 255, .9); }

/* ---- モバイルは移動量を控えめに(小さい画面ほど動きが目立つため) ---- */
@media (max-width: 767px) {
  :root { --gs-rv-y: 14px; --gs-rv-dur: .52s; }
}

/* ---- 印刷: 紙に出すときは必ず全部見せる ----
   印刷では IntersectionObserver が発火しないので、これが無いと
   まだ画面に出ていなかったセクションが白紙のまま印刷される。
   料金表や注意事項を紙で渡す使い方があるため、ここは落とせない */
@media print {
  html.gs-anim .gs-reveal,
  html.gs-anim .gs-reveal-g > *,
  html.gs-anim .gs-reveal-g .gs-flow-line,
  html.gs-anim .gs-rise > *,
  html.gs-anim .gs-rise-late,
  html.gs-anim .gs-marker-seq > *,
  html.gs-anim .gs-snowfall .snow,
  html.gs-anim .gs-price-pop .n,
  html.gs-anim .gs-price-pop .num {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* 取り消し線は疑似要素ではなく元の text-decoration で出す(印刷で確実に乗る) */
  html.gs-anim .gs-price-pop .old > span { text-decoration: line-through !important; }
  html.gs-anim .gs-price-pop .old > span::after { display: none !important; }
}

/* ---- 二重の安全弁: html.gs-anim が付いた後に OS 設定を変えた場合も静止させる ---- */
@media (prefers-reduced-motion: reduce) {
  html.gs-anim .gs-reveal,
  html.gs-anim .gs-reveal-g > *,
  html.gs-anim .gs-reveal-g .gs-flow-line,
  html.gs-anim .gs-rise > *,
  html.gs-anim .gs-rise-late,
  html.gs-anim .gs-marker-seq > *,
  html.gs-anim .gs-snowfall .snow,
  html.gs-anim .gs-price-pop.is-in .n,
  html.gs-anim .gs-price-pop .num {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  /* 取り消し線は元の text-decoration に戻す(疑似要素の線は使わない) */
  html.gs-anim .gs-price-pop .old > span { text-decoration: line-through; text-decoration-color: var(--gs-red); text-decoration-thickness: 3px; }
  html.gs-anim .gs-price-pop .old > span::after { display: none; }
}