/* ==========================================================================
   DMOなんじょう ― 追加モーション（2026-07-13 Masami指示）
   ①地図の南城市が脈打つ ②写真帯4枚のKen Burns ③カードのホバー浮き。
   既存の reveal.js（リビール＋パララックス）と共存。写真帯はパララックス対象から外し
   （reveal.js §②で .strip を除外）、ここで純粋なKen Burnsをかける。
   家訓（動きはフェード基調）を壊さない、ごく緩やかな動きに限る。
   撤去＝head.php の1行＋本ファイル＋reveal.js の除外1行を戻すだけ。
   ========================================================================== */

/* ── ① 地図：南城市のリングがゆっくり脈打つ（場所へ目を導く） ── */
.omap__dot--ring{position:relative}
.omap__dot--ring::after{
  content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(255,255,255,.6);
  animation:dmo-pulse 2.6s ease-out infinite}
@keyframes dmo-pulse{
  0%{opacity:.9;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
  70%{opacity:0;box-shadow:0 0 0 16px rgba(255,255,255,0)}
  100%{opacity:0;box-shadow:0 0 0 16px rgba(255,255,255,0)}}

/* ── ② 写真帯4枚：ごく淡いKen Burns（1枚ずつ向きを変えて単調回避） ── */
.strip .ph--filled{overflow:hidden}
.strip .ph--filled img{
  transform-origin:center;
  animation:dmo-kb-a 10s ease-in-out infinite alternate;will-change:transform}
.strip .ph:nth-child(2) .ph--filled img,
.strip .ph:nth-child(2) img{animation-name:dmo-kb-b}
.strip .ph:nth-child(3) .ph--filled img,
.strip .ph:nth-child(3) img{animation-name:dmo-kb-c}
.strip .ph:nth-child(4) .ph--filled img,
.strip .ph:nth-child(4) img{animation-name:dmo-kb-d}
/* 大きくはっきり動く（2026-07-13 Masami検品で再強調）：10秒・scale 1.0→1.18＋大きめパン */
@keyframes dmo-kb-a{from{transform:scale(1.00) translate(0,0)}to{transform:scale(1.18) translate(-4%,3%)}}
@keyframes dmo-kb-b{from{transform:scale(1.16) translateX(5%)}to{transform:scale(1.16) translateX(-5%)}}
@keyframes dmo-kb-c{from{transform:scale(1.18) translate(3%,-3%)}to{transform:scale(1.00) translate(0,0)}}
@keyframes dmo-kb-d{from{transform:scale(1.14) translateY(4%)}to{transform:scale(1.14) translateY(-5%)}}

/* 写真帯：触れると枠内でぐっと寄る（内側imgのKen Burnsと別レイヤーなので競合しない） */
.strip .ph--filled{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.strip .ph:hover .ph--filled{transform:scale(1.18)}

/* ── ③ カードのホバー浮き＋ポインター追従チルト（2026-07-14 Masami指示で拡張） ──
   transform は「浮き（--lift）×傾き（--rx/--ry・dmo-motion.js が更新）」の合成。 */
.works a,.doors a{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .25s cubic-bezier(.2,.6,.2,1),box-shadow .3s ease;will-change:transform}
.works a:hover,.doors a:hover{
  --lift:-5px;
  box-shadow:0 14px 34px -12px rgba(30,103,135,.38)}
/* doors 内の入口リンク帯（doors__rest）は控えめに */
.doors__rest a{transition:transform .2s ease,background .2s ease}
.doors__rest a:hover{transform:translateY(-2px)}

/* ── 動きへの配慮：reduced-motion は一切動かさない ── */
@media (prefers-reduced-motion:reduce){
  .omap__dot--ring::after{animation:none;opacity:0}
  .strip .ph--filled img,.strip img{animation:none}
  .strip .ph--filled{transition:none}
  .strip .ph:hover .ph--filled{transform:none}
  .works a,.doors a,.doors__rest a{transition:none}
  .works a:hover,.doors a:hover{transform:none;box-shadow:none}
}

/* ── きょうの南城（天気ライン・weather.php）── */
.weatherline{margin:0 0 14px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  color:#fff;font-size:17px;letter-spacing:.04em}
.weatherline__k{font-weight:700;letter-spacing:.14em;font-size:13px;
  border:1px solid rgba(255,255,255,.6);border-radius:var(--radius);padding:4px 14px}
.weatherline__w{font-weight:700;font-size:clamp(17px,2vw,21px)}
.weatherline__t{font-size:clamp(15px,1.8vw,18px);font-weight:500;color:#fff}
.weatherline__s{font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.65)}

/* ── 取り組みカード：ホバーの質感（写真の寄りは scale＝パララックスの transform と共存） ── */
.works a .ph--filled img{scale:1;transition:scale .7s cubic-bezier(.2,.6,.2,1)}
.works a:hover .ph--filled img{scale:1.07}
.works .ph{overflow:hidden}
.works .w__t{background:linear-gradient(var(--sora-koi),var(--sora-koi)) no-repeat left calc(100% - 1px)/0 1px;
  padding-bottom:3px;transition:background-size .5s cubic-bezier(.2,.6,.2,1),color .2s}
.works a:hover .w__t{background-size:100% 1px}
.doors__rest a i{display:inline-block;transition:transform .3s cubic-bezier(.2,.6,.2,1)}
.doors__rest a:hover i{transform:translateX(6px)}

/* ── 登場演出：リビール（.rv/.is-in＝reveal.js）に写真の「めくれ」を重ねる ── */
html.js-rv .rv .ph--filled,html.js-rv .ph--filled.rv{
  clip-path:inset(0 92% 0 0);transition:clip-path 1.1s cubic-bezier(.2,.6,.2,1) .08s}
html.js-rv .rv.is-in .ph--filled,html.js-rv .ph--filled.rv.is-in{clip-path:inset(0 0 0 0)}

/* ── 観光データ：KPIカウントアップ（dmo-motion.js） ── */
.dchart__kpi{display:flex;gap:8px 30px;flex-wrap:wrap;margin:16px 0 2px}
.dchart__kpi span{display:flex;align-items:baseline;gap:5px}
.dchart__kpi b{font-family:var(--font-latin);font-weight:500;font-size:clamp(22px,2.4vw,29px);
  letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.dchart__kpi i{font-style:normal;font-size:11px;color:var(--ink-soft)}
.dchart__kpi small{font-size:10px;letter-spacing:.06em;color:var(--ink-faint);margin-left:2px}

@media (prefers-reduced-motion:reduce){
  .works a,.doors a{transform:none;transition:none}
  .works a .ph--filled img{scale:none;transition:none}
  .works .w__t{transition:none}
  .doors__rest a i{transition:none}
  html.js-rv .rv .ph--filled,html.js-rv .ph--filled.rv{clip-path:none;transition:none}
}

/* ── 映像帯（なんじぃ商店とフッターの間・2026-07-14 Masami指示） ── */
.vband{position:relative;overflow:hidden;height:clamp(280px,36vw,500px);margin-top:clamp(48px,7vw,88px)}
/* 街と湾が見えるよう、映像は下寄りを写す（object-position・2026-07-14 Masami指示）。明るさ・彩度もわずかに補正 */
.vband__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 84%;
  filter:saturate(1.12) brightness(1.06)}
.vband__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,33,31,.08),rgba(21,33,31,.20))}
.vband__copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  margin:0;color:#fff;font-weight:700;letter-spacing:.2em;font-size:clamp(18px,2.6vw,27px);
  text-shadow:0 2px 26px rgba(21,33,31,.6),0 1px 6px rgba(21,33,31,.45)}
.vband__copy small{font-weight:400;font-size:10px;letter-spacing:.34em;color:rgba(255,255,255,.82)}
@media (prefers-reduced-motion:reduce){
  .vband__media{object-position:center}
}