/* ==========================================================================
   セクション境界の波アニメーション（GLION 39 Fair TOPページ専用）
   - 読み込みはこのファイルを使うページのみ（index.htmlのみを想定）
   - 依存ライブラリなし。アニメーションは transform のみ（left/margin不使用）
   - クラス接頭辞: gw- （他ファイルの命名と衝突しないようにするため）
   -------------------------------------------------------------------------
   ▼ 何を変えれば何が変わるか（このファイル内で完結）
   - 速さを変える     → --gw-speed-back / --gw-speed-mid / --gw-speed-front
   - 高さを変える     → PC: --gw-h-pc／SP: --gw-reveal-strip-h-sp（4境界すべて共通。詳細は次の項目）
   - 色を変える       → --gw-color-white / --gw-color-red
     （--gw-color-red は red_haikei.svg の実測平均色。正式な新ブランド赤が
       決まったら、この1行の値だけ差し替えれば全境界に反映される）
   - 「お得な見どころ」上下の波の太さ → PC: --gw-reveal-strip-h-pc（上下2つ並ぶため、
       共通の --gw-h-pc とは別の専用サイズにしている。中央で重なって見える場合はここを小さくする）
     SP: --gw-reveal-strip-h-sp（--gw-h-sp がこの値をそのまま参照するため、
       他の3境界のSPでの高さもここに合わせて統一されている。個別に戻したい場合は
       --gw-h-sp に直接px値を指定し直すこと）
   - 波のサブピクセル隙間対策の重なり量 → --gw-reveal-strip-overlap
   - 白帯・車の進入スピード           → --gw-reveal-duration（車も同じ値を参照して連動）
   - 車の大きさ                       → PC: --gw-car-h-pc（帯の全高に対する割合）
     SP: --gw-car-h-sp（%指定はやめ、--gw-narrow-h-sp からの倍率で計算している。
       理由：この要素の高さ%は祖先である.wht1の高さ（内容依存＝auto）を基準に解決されるため、
       環境によっては白帯（90px）と同じ高さまでしか出ず「白帯より低い」ように見える不具合があった。
       倍率だけ変えれば、白帯より必ず大きい関係を保ったまま調整できる）
   - 車の通過中に見える細い帯の太さ   → --gw-narrow-h-pc / --gw-narrow-h-sp
     （PC側の --gw-car-h-pc は自動下限が無いため、--gw-narrow-h-pc より必ず大きい割合にすること）
   - 車が走り去ってから帯が全体に広がる（クロスフェードする）時間 → --gw-band-grow-duration
   - タイヤの回転速さ・大きさ・位置 → .gw-reveal-wheel（回転速さ=animation時間／大きさ=height／
     位置=top・left の%。car-image.pngをピクセル解析して実測した値なので、車の絵を差し替えた場合は
     再測定が必要。tire-front.png・tire-back.pngは元のタイヤより少し大きめに作ってあるので、
     多少ズレても下の静止タイヤは隠れる想定）
   ========================================================================== */

:root {
  --gw-color-white: #fff;
  --gw-color-red: #a80003; /* 暫定値。正式カラー決定後にここだけ更新（w2r系が残る場合の近似色） */

  --gw-h-pc: 120px;
  --gw-h-sp: var(--gw-reveal-strip-h-sp); /* SPは「見どころ」の帯と同じ高さに統一 */

  --gw-speed-back: 40s;
  --gw-speed-mid: 26s;
  --gw-speed-front: 18s;

  --gw-reveal-strip-h-pc: 50px;
  --gw-reveal-strip-h-sp: 28px;
  --gw-reveal-strip-overlap: 3px; /* サブピクセルの隙間対策。帯の内側へこの分だけ余分に重ねる */

  --gw-reveal-duration: 0.9s;
  --gw-car-h-pc: 100%;
  --gw-car-h-sp: calc(var(--gw-narrow-h-sp) * 1.6); /* 白帯の1.6倍固定。%ではなく倍率にして白帯より必ず高くする */
  --gw-narrow-h-pc: 140px;
  --gw-narrow-h-sp: 90px;
  --gw-band-grow-duration: 0.5s;
}

/* ---- 波コンポーネント本体 ---- */
.gw-wave {
  position: relative;
  display: block;
  width: 100%;
  height: var(--gw-h-pc);
  overflow: hidden;
  line-height: 0;
  pointer-events: none; /* 非対話。クリック等を奪わない */
}
/* .expand（画面全幅化）と併用する場合、width:100%のままだと負のマージンで位置だけ
   ずれて幅が広がらない。widthをautoに戻すことで.expand側の計算に委ねる */
.gw-wave.expand {
  width: auto;
}

/* 上下反転バリアント（色ではなく形状だけを反転させたい場合の予備） */
.gw-wave--flip {
  transform: scaleY(-1);
}

/* 色の向き：上側＝上のセクション色／波（下側）＝下のセクション色 */
.gw-wave {
  background-color: var(--gw-from);
}
.gw-wave--r2w {
  /* 「まだ赤いまま」の部分＝波の形がない土台の色は、あえて塗らずに透過させる。
     こうすると、この土台の裏にある本物の固定背景（red_haikei.svg）がそのまま見える。
     波の白い部分（--gw-to）だけは実際に塗る必要があるのでそのまま白を使う */
  --gw-from: transparent;
  --gw-to: var(--gw-color-white);
}
.gw-wave--w2r {
  --gw-from: var(--gw-color-white);
  /* 波の赤い部分は「塗り」なので透過にはできない（透過にすると波の形自体が消える）。
     実画像をパターンとして切り出す方式は試したが、red_haikei.svgが単純な模様ではなく
     車のイラスト等も含む絵柄だったため、切り出した箇所によって絵が壊れて見えてしまい失敗。
     近似色（フラットカラー）に戻す */
  --gw-to: var(--gw-color-red);
}

/* ---- レイヤー（奥・中間・手前を3枚重ねる） ---- */
.gw-layer {
  position: absolute;
  inset: 0;
  transform-origin: bottom center;
}

.gw-layer svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--gw-to); /* <use>経由でも継承されるようsvg自体に指定 */
}

.gw-track {
  display: flex;
  width: 200%;
  height: 100%;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.gw-track svg {
  flex: none;
  width: 50%; /* トラック幅200%の半分＝セクション幅100%ぶん */
  height: 100%;
}

/* 奥：周期約40秒・振幅小・opacity 0.4 */
.gw-layer--back {
  opacity: 0.4;
  transform: scaleY(0.55);
}
.gw-layer--back .gw-track {
  animation-name: gw-flow-l2r;
  animation-duration: var(--gw-speed-back);
  animation-delay: calc(var(--gw-phase, 0s) + 0s);
}

/* 中間：周期約26秒・逆方向・opacity 0.7 */
.gw-layer--mid {
  opacity: 0.7;
  transform: scaleY(0.8);
}
.gw-layer--mid .gw-track {
  animation-name: gw-flow-r2l;
  animation-duration: var(--gw-speed-mid);
  animation-delay: calc(var(--gw-phase, 0s) + -8s); /* 開始位相をずらす */
}

/* 手前：周期約18秒・不透明（下側セクション色そのもの） */
.gw-layer--front {
  opacity: 1;
  transform: scaleY(1);
}
.gw-layer--front .gw-track {
  animation-name: gw-flow-l2r;
  animation-duration: var(--gw-speed-front);
  animation-delay: calc(var(--gw-phase, 0s) + -3s);
}

/* ---- 複数の波が同時に視界に入っても同じ動きに見えないための個体差 ----
   ・--gw-phase: インスタンスごとに開始位置をずらす（値を変えるだけで調整可）
   ・--alt: 3層それぞれの流れる向きを反転させる（互い違いバリアント） */
.gw-wave--p3 {
  --gw-phase: -21s;
}
.gw-wave--p4 {
  --gw-phase: -6s;
}
.gw-wave--alt .gw-layer--back .gw-track {
  animation-name: gw-flow-r2l;
}
.gw-wave--alt .gw-layer--mid .gw-track {
  animation-name: gw-flow-l2r;
}
.gw-wave--alt .gw-layer--front .gw-track {
  animation-name: gw-flow-r2l;
}

@keyframes gw-flow-l2r {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes gw-flow-r2l {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@media screen and (max-width: 600px) {
  .gw-wave {
    height: var(--gw-h-sp);
  }
}

/* ==========================================================================
   特別演出：「お得な見どころをチェック！」見出し（.point.expand.wht1）
   - 初回のみ、スクロールで画面に入ったタイミングで横から細い白帯＋車が入ってくる。
     車が走り去った瞬間、細い帯→フルサイズの帯へクロスフェードする
   - すべての要素は【常に固定サイズ・固定位置】。拡大縮小・リサイズは一切させない
    （scaleやheight/top/bottomでリサイズすると、内部のSVGレイヤーとの組み合わせで
     サブピクセルの隙間が生じやすく不安定だった。動かすのは「横方向のtranslate」と
     「opacity」だけ＝どちらも形が変わらないものを動かす／フェードさせるだけなので、
     この種の隙間が原理的に発生しない）
   - 発火の仕組みは既存の .scroll-in（js/common.js）とは共有せず、
     このコンポーネント専用の .gw-reveal／.gw-in-view で完結させる
   ========================================================================== */
.point.expand.wht1 {
  background-color: transparent; /* 白帯が来るまでは red_haikei.svg を透過させる */
}

/* 横スライドの器（translateのみ。中身のサイズには一切関与しない） */
.gw-reveal-band {
  position: absolute;
  inset: 0;
  translate: -100vw 0; /* 車と同じ単位（vw）・同じ距離にして速度差の余地を無くす */
  pointer-events: none;
  transition: translate var(--gw-reveal-duration) linear;
}
.gw-reveal.gw-in-view .gw-reveal-band {
  translate: 0 0;
}

/* 白帯は2枚を重ねて用意し、リサイズせずクロスフェードだけで「広がった」ように見せる：
   1) .gw-reveal-narrow … 車の高さ以下の細い帯。車と一緒に進入し、最初は不透明。
      この帯自身にも専用の上下の波を持たせる（波の状態でスライドインさせるため）
   2) .gw-reveal-full   … .wht1と同じフルサイズの帯（上下の波もここに含む）。最初は透明
   車が完全に走り去った瞬間、narrowをフェードアウトしつつfullをフェードインする。
   どちらも常に同じサイズ・同じ位置のままなので、リサイズに起因する隙間が発生しない。
   自身の背景は白で塗りつぶさず、中身（.gw-reveal-fill＋上下の波）だけで構成する
  （後述：これにより波の「赤い部分」を本物の背景が透けて見える透過にできる） */
.gw-reveal-narrow {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--gw-narrow-h-pc);
  translate: 0 -50%;
  overflow: hidden;
  transition: opacity var(--gw-band-grow-duration) ease-out calc(var(--gw-reveal-duration) * 2);
}
.gw-reveal.gw-in-view .gw-reveal-narrow {
  opacity: 0;
}
@media screen and (max-width: 600px) {
  .gw-reveal-narrow {
    height: var(--gw-narrow-h-sp);
  }
}

.gw-reveal-full {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--gw-band-grow-duration) ease-out calc(var(--gw-reveal-duration) * 2);
}
.gw-reveal.gw-in-view .gw-reveal-full {
  opacity: 1;
}

/* 上下の波の間（見出しテキストが乗る部分）だけを埋める白い板。
   帯自体を白で塗らずこれだけにすることで、波の外側（--gw-fromの透過部分）が
   帯を素通りして本物の固定背景まで届くようになる。
   波側とぴったり隣接させず、var(--gw-reveal-strip-overlap)ぶんだけ波の内側（白い部分）に
   食い込ませて重ねる。波の内側はもともと不透明な白なので、重なっても見た目に影響しない
  （サブピクセル単位の隙間対策。--gw-reveal-strip自体の重なりと同じ考え方） */
.gw-reveal-fill {
  position: absolute;
  left: 0;
  width: 100%;
  top: var(--gw-reveal-strip-h-pc);
  bottom: var(--gw-reveal-strip-h-pc);
  background-color: var(--gw-color-white);
}
@media screen and (max-width: 600px) {
  .gw-reveal-fill {
    top: var(--gw-reveal-strip-h-sp);
    bottom: var(--gw-reveal-strip-h-sp);
  }
}

/* 上下の波：常に固定サイズ・固定位置（帯と一緒にtranslateで横に動くだけ）。
   高さは専用の --gw-reveal-strip-h-pc / --gw-reveal-strip-h-sp
  （上下2つ並ぶため、他の3境界と同じ標準サイズだと中央で重なるおそれがある）。
   内側へ var(--gw-reveal-strip-overlap) ぶん余分に描画し、
   サブピクセル単位の隙間から背景の赤が透けて見える不具合を防ぐ
  （波の内側はもともと不透明な白なので、重なった分は見た目に影響しない）。
   帯自体の白背景を .gw-reveal-fill に切り出したことで、r2w（透過＋白）を
   上辺・下辺の両方にそのまま使えるようになった。下辺は上下反転（scaleY(-1)）するだけで
   フォトギャラリー境界と全く同じ仕組みになり、赤い部分は本物の固定背景がそのまま見える */
.gw-reveal-strip {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(var(--gw-reveal-strip-h-pc) + var(--gw-reveal-strip-overlap));
  --gw-from: transparent;
  --gw-to: var(--gw-color-white);
}
.gw-reveal-strip--top {
  top: 0;
}
.gw-reveal-strip--bottom {
  bottom: 0;
  transform: scaleY(-1);
}
@media screen and (max-width: 600px) {
  .gw-reveal-strip {
    height: calc(var(--gw-reveal-strip-h-sp) + var(--gw-reveal-strip-overlap));
  }
}

/* 白帯を先導する車（帯とは別要素）。
   縦幅は帯の高さより大きくして、白帯の縦線が車に完全に隠れるようにする。
   進入〜走り抜けまでを「等速（linear）」の1本のアニメーションにすることで、
   イージングの継ぎ目による減速・停止・再加速を発生させない。
   境界（translateX:0）を通過する瞬間＝ちょうど --gw-reveal-duration 経過時点になるよう、
   全体の時間を --gw-reveal-duration のぴったり2倍にしている（前半・後半が同じ距離・同じ速さになる） */
.gw-reveal-car-track {
  position: absolute;
  inset: 0;
  transform: translateX(-100vw);
  pointer-events: none;
}
.gw-reveal.gw-in-view .gw-reveal-car-track {
  animation-name: gw-car-pass;
  animation-duration: calc(var(--gw-reveal-duration) * 2);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes gw-car-pass {
  0% {
    transform: translateX(-100vw);
  }
  50% {
    transform: translateX(0); /* 帯の境界を通過するタイミング＝帯の到着と同時 */
  }
  100% {
    transform: translateX(100vw); /* 完全に画面外へ走り去る */
  }
}

.gw-reveal-car-wrap {
  position: absolute;
  top: 50%;
  left: 100%;
  height: var(--gw-car-h-pc);
  aspect-ratio: 1408 / 768; /* car-image.pngの実寸比。widthをここから確定させ、
    子要素（img）のサイズ計算に幅が依存する状態（auto幅のシュリンクラップ）を避ける */
  transform: translate(-40%, -50%);
}
@media screen and (max-width: 600px) {
  .gw-reveal-car-wrap {
    height: var(--gw-car-h-sp);
  }
}
.gw-reveal-car {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- タイヤ（回転）----
   位置・直径は car-image.png のタイヤ部分をピクセル解析して実測した値。
   静止画側の元のタイヤを完全に隠せるよう、実寸よりわずかに大きめにしている。
   ズレて見える場合は --gw-wheel-* を微調整すること */
.gw-reveal-wheel {
  position: absolute;
  top: 69%;
  height: 30%;
  width: auto;
  animation: gw-wheel-spin 0.35s linear infinite;
}
.gw-reveal-wheel--rear {
  left: 24%;
}
.gw-reveal-wheel--front {
  left: 79%;
}
@keyframes gw-wheel-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 見出しテキストは「車が完全に走り去り、帯がフルサイズにクロスフェードし終えた」タイミングで表示
   （このセクション専用。共通のfadeUpは使わない） */
.gw-reveal .midokoro {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: calc(var(--gw-reveal-duration) * 2 + var(--gw-band-grow-duration));
}
.gw-reveal.gw-in-view .midokoro {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .gw-track {
    animation: none !important; /* 常時流れる4境界すべての波を停止 */
  }
  .gw-reveal-band {
    transition: none !important;
    translate: 0 0 !important;
  }
  .gw-reveal-narrow {
    transition: none !important;
    opacity: 0 !important;
  }
  .gw-reveal-full {
    transition: none !important;
    opacity: 1 !important;
  }
  .gw-reveal-car-track {
    animation: none !important;
    transform: translateX(100vw) !important; /* 車の最終状態＝画面外を初めから適用 */
  }
  .gw-reveal-wheel {
    animation: none !important;
  }
  .gw-reveal .midokoro {
    transition: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}