/* =====================================================================
   大浜スイーツアカデミー — 3D EXPERIENCE「空から、大浜へ。」
   experience.html だけが読む。site.css の変数を使い、.page-experience 配下にだけ効かせる
   方針:
     基本  = 静的（シーンを縦に並べ、全部読める）。JS 無し／prefers-reduced-motion はこの見た目
     拡張  = JS あり ＋ reduced-motion でないときだけ、シーンを画面いっぱいに重ねる（sticky で次のシーンが覆う）
             ゆっくりズーム（--zf → --zt を 8s）、文字のフェードアップ、前のシーンを薄く落とす
   ===================================================================== */

/* ---------- 共通 ---------- */
.page-experience .xp{background:var(--cacao-900);color:#fff;position:relative}
.page-experience .xp :focus-visible{outline:2px solid #fff;outline-offset:3px}
.page-experience .xp-scene{position:relative;overflow:hidden;background:var(--cacao-900)}
.page-experience .xp-scene:focus{outline:none}
.page-experience .xp-stage{position:relative}
.page-experience .xp-media{position:relative;overflow:hidden;background:var(--cacao-700)}
.page-experience .xp-media img{width:100%;height:100%;object-fit:cover;display:block}
.page-experience .xp-veil{position:absolute;inset:0;background:var(--cacao-900);opacity:0;pointer-events:none}
.page-experience .xp-stage .img-note{top:12px;right:12px;bottom:auto;z-index:4}

.page-experience .xp-copy .eyebrow{color:#F4D8B4}
.page-experience .xp-copy h1{font-size:clamp(36px,5vw,66px);letter-spacing:.08em;line-height:1.35;margin:0 0 14px}
.page-experience .xp-copy h2{font-size:clamp(26px,3.6vw,46px);letter-spacing:.06em;line-height:1.45;margin:0 0 14px;color:#fff}
.page-experience .xp-lead{font-family:var(--serif);font-size:clamp(17px,1.8vw,22px);letter-spacing:.06em;line-height:1.8;margin:0 0 12px}
.page-experience .xp-text{max-width:520px;font-size:14px;line-height:2;color:rgba(255,255,255,.88);margin:0 0 22px}
.page-experience .xp-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.page-experience .xp-hint{font-family:var(--en);font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.62);margin:0}
.page-experience .xp-center .xp-text{margin-inline:auto}
.page-experience .xp-center .xp-copy{text-align:center}
.page-experience .xp-center .xp-actions{justify-content:center}

/* 静的レイアウト（基本）: 画像 16:9 ＋ 下に文 */
.page-experience .xp-media{aspect-ratio:16/9;max-height:70vh}
.page-experience .xp-copy{padding:36px 0 56px}
.page-experience .xp-hotspots{list-style:none;margin:0;padding:18px 0 0;display:flex;flex-wrap:wrap;gap:10px;width:min(var(--wrap),calc(100% - 56px));margin-inline:auto}
.page-experience .xp-hotspot{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.42);border-radius:999px;font-size:12.5px;letter-spacing:.06em;color:#fff;transition:background var(--hover),border-color var(--hover)}
.page-experience .xp-hotspot:hover{background:rgba(255,255,255,.12);border-color:#fff}
.page-experience .xp-hotspot-dot{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25);flex:0 0 auto}

/* ---------- シーンの移動（JS があるときだけ） ---------- */
.page-experience .xp-nav{position:fixed;left:50%;bottom:22px;z-index:60;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:999px;background:rgba(36,19,13,.74);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.page-experience .xp.is-inview .xp-nav{opacity:1;visibility:visible}
html:not(.js) .page-experience .xp-nav{display:none}
.page-experience .xp-navbtn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;font-size:15px;transition:background var(--hover),border-color var(--hover),opacity var(--hover)}
.page-experience .xp-navbtn:hover{background:rgba(255,255,255,.14);border-color:#fff}
.page-experience .xp-navbtn[disabled]{opacity:.3;cursor:default}
.page-experience .xp-navbtn[disabled]:hover{background:transparent;border-color:rgba(255,255,255,.4)}
.page-experience .xp-dots{list-style:none;margin:0;padding:0 4px;display:flex;align-items:center;gap:8px}
.page-experience .xp-dot{width:24px;height:24px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.page-experience .xp-dot::before{content:"";display:block;width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.42);transition:width .3s var(--ease),background .3s}
.page-experience .xp-dot:hover::before{background:rgba(255,255,255,.8)}
.page-experience .xp-dot.is-on::before{width:22px;background:#F4D8B4}
.page-experience .xp-dot:focus-visible{outline-offset:4px}
.page-experience .xp-counter{font-family:var(--en);font-size:10px;letter-spacing:.2em;color:#F4D8B4;margin:0;padding:0 8px 0 2px;white-space:nowrap}

/* ---------- シネマティック（JS あり ＋ 動きを減らす設定でない） ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .page-experience .xp:not(.is-static) .xp-scenes{position:relative}
  .js .page-experience .xp:not(.is-static) .xp-scene{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));min-height:520px}
  .js .page-experience .xp:not(.is-static) .xp-stage{position:absolute;inset:0}
  /* 画像枠は上下に 48px の余白（浅いパララックスで端が見えないように）。img はゆっくりズーム */
  .js .page-experience .xp:not(.is-static) .xp-media{position:absolute;inset:-48px 0;aspect-ratio:auto;max-height:none;will-change:transform}
  .js .page-experience .xp:not(.is-static) .xp-media img{transform:scale(var(--zf,1));transition:transform 1.2s var(--ease)}
  .js .page-experience .xp:not(.is-static) .xp-scene.is-active .xp-media img{transform:scale(var(--zt,1.08));transition:transform 8s linear}
  .js .page-experience .xp:not(.is-static) .xp-scene.is-past .xp-media img{transform:scale(var(--zt,1.08));transition:transform 1.2s var(--ease)}
  /* 上端をやわらかく（前のシーンを覆うときの境目）＋ 下を暗く（文字の下地） */
  .js .page-experience .xp:not(.is-static) .xp-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(24,12,8,.55),rgba(24,12,8,0) 22%),linear-gradient(0deg,rgba(24,12,8,.82),rgba(24,12,8,.28) 46%,rgba(24,12,8,.02) 72%)}
  .js .page-experience .xp:not(.is-static) .xp-center .xp-stage::before{background:linear-gradient(180deg,rgba(24,12,8,.5),rgba(24,12,8,.36) 50%,rgba(24,12,8,.62))}
  .js .page-experience .xp:not(.is-static) .xp-veil{z-index:3;transition:opacity .9s var(--ease)}
  .js .page-experience .xp:not(.is-static) .xp-scene.is-past .xp-veil{opacity:.55}
  /* 文: 下寄せ。中央寄せのシーン（はじまり・おわり）は真ん中 */
  .js .page-experience .xp:not(.is-static) .xp-copy{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 0 clamp(96px,14vh,150px)}
  .js .page-experience .xp:not(.is-static) .xp-center .xp-copy{top:0;display:flex;align-items:center;padding:24px 0 72px}
  .js .page-experience .xp:not(.is-static) .xp-copy>.wrap>*{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js .page-experience .xp:not(.is-static) .xp-scene.is-active .xp-copy>.wrap>*{opacity:1;transform:none}
  .js .page-experience .xp:not(.is-static) .xp-scene.is-active .xp-copy>.wrap>:nth-child(2){transition-delay:.12s}
  .js .page-experience .xp:not(.is-static) .xp-scene.is-active .xp-copy>.wrap>:nth-child(3){transition-delay:.24s}
  .js .page-experience .xp:not(.is-static) .xp-scene.is-active .xp-copy>.wrap>:nth-child(4){transition-delay:.36s}
  .js .page-experience .xp:not(.is-static) .xp-scene.is-active .xp-copy>.wrap>:nth-child(5){transition-delay:.48s}
  .js .page-experience .xp:not(.is-static) .xp-scene.is-active .xp-copy>.wrap>:nth-child(6){transition-delay:.6s}
  /* ホットスポット: 画像の上の位置（--x / --y は JS が SCENES から当てる） */
  .js .page-experience .xp:not(.is-static) .xp-hotspots{position:absolute;inset:0;z-index:4;width:auto;margin:0;padding:0;display:block}
  .js .page-experience .xp:not(.is-static) .xp-hotspot{position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);min-height:0;padding:0;border:0;gap:0;white-space:nowrap;opacity:0;transition:opacity .8s var(--ease)}
  .js .page-experience .xp:not(.is-static) .xp-scene.is-active .xp-hotspot{opacity:1;transition-delay:.5s}
  .js .page-experience .xp:not(.is-static) .xp-hotspot:hover{background:transparent}
  .js .page-experience .xp:not(.is-static) .xp-hotspot-dot{position:relative;width:14px;height:14px;box-shadow:none;background:#fff;border:2px solid rgba(255,255,255,.7);background-clip:content-box}
  .js .page-experience .xp:not(.is-static) .xp-hotspot-dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,255,255,.7);animation:xp-pulse 2.6s ease-out infinite}
  .js .page-experience .xp:not(.is-static) .xp-hotspot-label{margin-left:12px;padding:7px 14px;border-radius:999px;background:rgba(36,19,13,.72);border:1px solid rgba(255,255,255,.22);font-size:12px;letter-spacing:.06em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background var(--hover),border-color var(--hover)}
  .js .page-experience .xp:not(.is-static) .xp-hotspot:hover .xp-hotspot-label,
  .js .page-experience .xp:not(.is-static) .xp-hotspot:focus-visible .xp-hotspot-label{background:#fff;color:var(--ink);border-color:#fff}
  .js .page-experience .xp:not(.is-static) .xp-has-spots .xp-copy{padding-bottom:clamp(80px,10vh,110px)}
  .js .page-experience .xp:not(.is-static) .xp-has-spots .xp-text{max-width:460px}
}
@keyframes xp-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* 動きを減らす設定: 静的レイアウトのまま。念のため脈動も止める（site.css が animation を全体で止めているが明示） */
@media (prefers-reduced-motion:reduce){
  .page-experience .xp-hotspot-dot::after{animation:none;display:none}
  .page-experience .xp-media img{transform:none}
}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .page-experience .xp-media{max-height:56vh}
  .page-experience .xp-copy h1{font-size:clamp(32px,8vw,44px)}
  .page-experience .xp-copy h2{font-size:clamp(24px,6vw,34px)}
}
@media (max-width:700px){
  .page-experience .xp-counter{display:none}
  .page-experience .xp-nav{bottom:16px;gap:6px;padding:6px 8px}
  .page-experience .xp-navbtn{width:36px;height:36px}
  /* 狭い画面では、ホットスポットを画像の下部に並べる（重なって読めなくならないように） */
  .js .page-experience .xp:not(.is-static) .xp-has-spots .xp-copy{top:0;bottom:auto;padding:28px 0 0}
  .js .page-experience .xp:not(.is-static) .xp-has-spots .xp-copy h2{font-size:24px}
  .js .page-experience .xp:not(.is-static) .xp-has-spots .xp-text{font-size:13px;margin-bottom:0}
  .js .page-experience .xp:not(.is-static) .xp-hotspots{inset:auto 16px 88px 16px;display:flex;flex-wrap:wrap;gap:8px}
  .js .page-experience .xp:not(.is-static) .xp-hotspot{position:static;transform:none;white-space:normal}
  .js .page-experience .xp:not(.is-static) .xp-hotspot-dot{display:none}
  .js .page-experience .xp:not(.is-static) .xp-hotspot-label{margin-left:0;padding:8px 14px}
}
@media (max-width:600px){
  .page-experience .xp-hotspots{width:calc(100% - 32px)}
  .page-experience .xp-text{font-size:13px}
  .page-experience .xp-actions .btn{width:100%}
  .js .page-experience .xp:not(.is-static) .xp-copy{padding-bottom:clamp(84px,14vh,120px)}
  .js .page-experience .xp:not(.is-static) .xp-center .xp-copy{padding-top:0}
}
/* スマホ: ホットスポットのあるシーンは文が上に来るので、上側も遮光する */
@media (max-width:700px){
  .js .page-experience .xp:not(.is-static) .xp-has-spots .xp-stage::before{background:linear-gradient(180deg,rgba(24,12,8,.8),rgba(24,12,8,.5) 40%,rgba(24,12,8,.08) 62%,rgba(24,12,8,.55))}
}