@charset "UTF-8";
/* ==========================================================
   events 横並びホバー展開（2026-08-29 市岡さん指示）
   参考: white-desert.com の .card-flick セクション（挙動を実測して移植）

   実測値（1440×900 Chromium）:
     ・開パネル 50% / 閉パネル 残り等分。開いているのは常に1枚
     ・width の遷移 = expo-out・750ms → cubic-bezier(.16,1,.3,1)
     ・閉パネルの霞み = backdrop-filter: blur(7.5px)。opacity 遷移 200ms ease-out
     ・本文の出 = quad-out 760ms / 引っ込み = width と同じ expo-out 750ms（非対称）
     ・写真ホバーズーム = scale(1.05) / 600ms cubic-bezier(.4,0,.2,1)
     ・トリガーは mouseenter。★ラッチする（マウスを外しても開いたまま・全部閉じた状態は無い）
     ・閉パネルには文字を一切出さない（参考どおり。冬物語の写真に白文字を直接乗せると
       実測1.3:1で可読性が出ないため、ラベルは付けない判断）

   戻し方: index.html からこのCSSと js/events-flick.js の2行を消すだけ。
           events.css / main.js / index.html本文は1文字も変えていない。
   ========================================================== */

@media (min-width: 768px) {

  /* 固定演出をやめるので、高さはカードの実寸に任せる */
  .events--flick { height: auto; }

  .events--flick .events__cards {
    display: flex;
    width: var(--canvas);
    height: 700px;
    --flick-open: 682.5px;   /* 参考の「開 50%」 */
  }

  .events--flick .events__card {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    height: 700px;
    cursor: pointer;
    background: #0b1b2b;   /* 画像読込前の下地 */
    width: calc((var(--canvas) - var(--flick-open)) / (var(--flick-n) - 1));
    transition: width .75s cubic-bezier(.16, 1, .3, 1);
  }
  .events--flick .events__card.is-active { width: var(--flick-open); }

  /* 画像は幅を保って横に潰れないようにする（参考の min-width:50vw と同じ役割）。
     #canvas が transform:scale される作りなので vw ではなく px で持つ */
  .events--flick .events__card > picture {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
  }
  .events--flick .events__photo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-width: 683px;
    height: 100%;
    object-fit: cover;
    /* 2026-08-31 市岡さん指示「見える部分がメインっぽいところではない」。
       写真は5枚とも1680×1400・object-fit:cover の描画倍率0.5固定なので、
       閉パネル(170.6px)には写真の横20.3%の帯しか出ず、開パネルも青が抜ける右端の帯しか見えない。
       ＝閉と開で「別々の窓」を見ているのが原因。窓の位置をカードごと・開閉ごとに指定する */
    object-position: var(--op-closed, 50%) 50%;
    /* 2026-09-01: 1枚目だけ --flip:-1（下）。開閉の切替中に反転が起きると
       scaleX が 0 を通って一瞬消えるので、開閉に関係なく常に反転させる */
    transform: scaleX(var(--flip, 1));
    transition: transform .6s cubic-bezier(.4, 0, .2, 1),
                object-position .75s cubic-bezier(.16, 1, .3, 1);
  }
  .events--flick .events__card.is-active .events__photo {
    object-position: var(--op-open, 50%) 50%;
  }
  /* カードごとの窓位置（主題の実測位置から決めた。%は写真の横位置）
     1 平湯大滝: 滝=36–62%（閉パネルの窓は0–39%までしか届かないので閉は木立側／開は滝の右半分が青越しに見える位置）
     2 福地青だる: 行灯2–20% / 氷柱15–100%（現状が最良なので据え置き）
     3 タルマ: 氷壁0–40% / ハート53–87%（閉=氷壁／開=ハート）
     4 栃尾雪桜: 段々5–70% / 行灯78–95%
     5 中尾かまくら: ドーム0–33% / 灯りの小屋55–70% */
  /* 2026-09-01 横山さん指示「この青がしっかり乗ると木しか見えない。本当は滝の部分がメイン」。
     実測: 写真(1680×1400)の氷瀑は横15〜45%。開パネルでグラデが完全に抜けるのはカード左から
     425px以降＝写真の50.6%以降で、そこは木立しかない。object-position は既に一番右(0%)で
     これ以上右へ動かせず、拡大で氷瀑を抜け側へ送るには4.2倍が必要＝元画像(1680px)を超える。
     → 市岡さん選択で「写真を左右反転」。反転すると氷瀑は横55〜85%＝カード462〜683pxに来て、
     グラデが抜ける帯にちょうど収まる（画質劣化なし）。
     閉パネルの見え方は反転前と同じ絵を保つため --op-closed を 100% → 0% にする
     （反転前の右端79.7〜100% = 反転後の左端0〜20.3%）。
     ※SP（〜767px）は横並び展開を使わず写真をそのまま出すので反転しない＝img/sp/ は無改変 */
  .events--flick .events__card:nth-child(1) { --flip: -1; --op-closed: 0%; --op-open: 0%; }
  .events--flick .events__card:nth-child(2) { --op-closed: 50%;  --op-open: 50%; }
  .events--flick .events__card:nth-child(3) { --op-closed: 85%;  --op-open: 35%; }
  .events--flick .events__card:nth-child(4) { --op-closed: 100%; --op-open: 50%; }
  .events--flick .events__card:nth-child(5) { --op-closed: 0%;   --op-open: 0%;  }
  @media (hover: hover) and (pointer: fine) {
    /* 反転（--flip）を殺さないよう scaleX を掛け合わせる */
    .events--flick .events__card:hover .events__photo { transform: scaleX(var(--flip, 1)) scale(1.05); }
  }

  /* 常時スクリム。既存の白罫 .events__card + .events__card::before（top:-1px/height:2px）と
     同詳細度なので top/left/width/height を全部再宣言して打ち消す */
  .events--flick .events__card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, .10);
    z-index: 1;
    pointer-events: none;
  }

  /* 閉じたパネルの霞み */
  .events--flick .events__card::after {
    content: "";
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    /* 2026-08-31 市岡さん指示「表示されていない4箇所のボケ感を弱めて」→ 7.5px → 4px。
       2026-09-01 横山さん「若干しか弱まっていない。もう若干」→ 4px → 2px。
       閉パネルのディテール量（Sobel勾配平均・同一条件で実測）:
         7.5px=3.98 / 4px=5.12 / 3px=6.28 / 2px=8.01 / 1.5px=11.32 / 0px=25.37
       ＝ 4px を1.00とすると 3px:1.23倍 / 2px:1.57倍 / 1.5px:2.21倍。
       前回(7.5→4)の実測値は1.29倍で「若干」と評価されたため、今回は同じ刻みの3pxではなく
       2px（1.57倍）を採る。枝ぶり・かまくらの段が判別できる一方、すりガラス感は残る。
       さらに弱めるなら1.5pxだがほぼ素通しになり、開いている1枚の主役性が落ちる。
       閉パネルには文字が無いのでコントラスト基準には無関係。比較画像は
       _review/blur_compare_20260901.png */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: rgba(1, 89, 179, .10);
    opacity: 1;
    transition: opacity .2s ease-out;
  }
  .events--flick .events__card.is-active::after { opacity: 0; }
  /* backdrop-filter が無い環境（古いSafari等）は不透明度で代替する */
  @supports not (backdrop-filter: blur(1px)) {
    .events--flick .events__card::after { background: rgba(1, 89, 179, .32); }
  }

  /* 本文パネル: 右の青ベタ → 左に寄せたグラデスクリム（参考と同じく写真の上に載せる）。
     2026-08-31 市岡さん指示「テキスト情報のバックの青をもう少しだけ薄くして写真が見えるように」。
     【要点】薄くできなかったのは α のせいではなく **グラデの開始位置380px** だった。
     開催期間の日付は canvas x442.6 まで伸びていてフェード域に食い込むため、
     380px開始のまま α を下げると即不合格になる（.92→.90 で 4.45:1 / .88 で 4.35:1）。
     開始を450pxへ動かす（最長テキスト442.6pxに対し7.4pxの余裕）とボトルネックが消え、
     α を .86/.84 まで下げても **最悪 5.36:1**（変更前の実測 最悪 4.54:1 より改善）。
     文字ゾーンでの写真の寄与は 7% → 15%（約2.1倍）。
     【上限】白文字4.5:1を守れるのは α≒.76 まで（.76/.74 で 4.53:1）。
     写真がはっきり透ける α≦0.6 には原理的に到達できない。
     【文言・写真を変えたら必ずコントラストを実測し直すこと】 */
  /* 2026-09-01 市岡さん選択「5枚ともグラデを薄く」:
       α .86/.84 → .78/.76、かつ帯の終わりを **カードごとの本文右端** に合わせて詰める。
       8/31 は5枚いっしょに450px開始だったが、本文の実インク右端はカードで違う:
         1:344 / 2:437 / 3:442.6 / 4:440.8 / 5:359.2 px
       → --meta-s（不透明を保つ位置＝本文右端+約6px）をカードごとに持ち、
         フェードは +45px で .38、+75px で 0 にする（8/31と同じ45/75の刻み）。
       これで写真が素で見える帯が 157.5px → カード1で257.5px に広がる。
       白文字のコントラスト実測（画素走査・最悪値）は下の「実測」参照。 */
  .events--flick .events__meta {
    position: absolute;
    left: 0;
    top: 0;
    width: 525px;        /* 最長カード(3)の帯 449+75=524px を収める */
    height: 700px;
    z-index: 2;
    background: linear-gradient(to right,
      rgba(1, 89, 179, .78) 0,
      rgba(1, 89, 179, .76) var(--meta-s, 450px),
      rgba(1, 89, 179, .38) calc(var(--meta-s, 450px) + 45px),
      rgba(1, 89, 179, 0)   calc(var(--meta-s, 450px) + 75px));
    opacity: 0;
    pointer-events: none;
    transition: opacity .75s cubic-bezier(.16, 1, .3, 1);      /* 閉じる側 = expo-out（実測） */
  }
  .events--flick .events__card.is-active .events__meta {
    opacity: 1;
    pointer-events: auto;
    transition: opacity .75s cubic-bezier(.25, .46, .45, .94); /* 開く側 = quad-out（実測） */
  }

  /* 帯の終わり位置（本文の実インク右端 + 6px）。文言を変えたら測り直すこと */
  .events--flick .events__card:nth-child(1) { --meta-s: 350px; }
  .events--flick .events__card:nth-child(2) { --meta-s: 443px; }
  .events--flick .events__card:nth-child(3) { --meta-s: 449px; }
  .events--flick .events__card:nth-child(4) { --meta-s: 447px; }
  .events--flick .events__card:nth-child(5) { --meta-s: 365px; }

  /* 横並びなので1枚ずつのフェードアップは無効化する。
     ※ここは詳細度(0,4,0)で上の .events--flick .events__card(0,2,0) に勝つため、
       transition:none と書くと幅のトランジションまで殺してしまう（2026-08-29 実測で判明）。
       幅の指定をここで書き直すこと */
  .js .events--flick .events__card.js-reveal {
    opacity: 1;
    transform: none;
    transition: width .75s cubic-bezier(.16, 1, .3, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    .events--flick .events__card,
    .events--flick .events__photo,
    .events--flick .events__meta,
    .events--flick .events__card::after { transition-duration: 0s; }
  }
}