/* Car Connections Gifu — モーションレイヤー
   設計原則（CLAUDE.md §8 / DESIGN_RULES 準拠）
   1. ここにあるのは「上乗せの演出」だけ。本文・画像・見出しの可視は site.css が保証する。
      opacity:0 で本文を隠す新規ルールをこのファイルに書かない（隠すのは装飾要素のみ）。
   2. 動かすのは transform / opacity / filter だけ。レイアウトプロパティは動かさない（CLS 0）。
   3. prefers-reduced-motion: reduce で全停止。ファイル末尾で一括無効化する。
   4. JS 前提の演出は「JSが無ければ静止した完成形」に見えること。
   系統: ①CSS自走(JS不要) ②IO reveal(app.js が .is-in を付与) ③GSAP scrub(motion.js) */

/* ============================================================
   ① CSS自走 — JS が1バイトも動かなくても走る
   ============================================================ */

/* 1. 浮遊（装飾バッジ・アイコン） */
@keyframes ccFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.a-float{animation:ccFloat 5.5s ease-in-out infinite}
.a-float--delay{animation-delay:-2.2s}

/* 2. 上下の小刻み（スクロール誘導） */
@keyframes ccBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.a-bob{animation:ccBob 2.4s ease-in-out infinite}

/* 3. 波紋（CTA・電話アイコン） */
@keyframes ccRipple{0%{transform:scale(.85);opacity:.55}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.a-ripple{position:relative;isolation:isolate}
.a-ripple::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:.3;z-index:-1;animation:ccRipple 2.6s ease-out infinite}

/* 4. 光沢スイープ（ボタン・カード） */
@keyframes ccShine{0%{transform:translateX(-120%) skewX(-18deg)}55%,100%{transform:translateX(220%) skewX(-18deg)}}
.a-shine{position:relative;overflow:hidden}
.a-shine::before{content:"";position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);animation:ccShine 4.5s ease-in-out infinite;pointer-events:none}

/* 5. グラデーションの流れ（見出し・帯） */
@keyframes ccGradient{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.a-gradient-text{background:linear-gradient(90deg,var(--primary),#8FD3AC,var(--primary));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ccGradient 7s linear infinite}





/* 10. 下線が伸びる（リンク hover） */
.a-underline{position:relative;display:inline-block}
.a-underline::after{content:"";position:absolute;left:0;right:0;bottom:-.16em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.a-underline:hover::after,.a-underline:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* 11. ホバーで浮上（カード） */
.a-lift{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.a-lift:hover{transform:translateY(-8px);box-shadow:0 22px 48px -24px rgba(16,48,32,.45)}

/* 12. ホバーで画像ズーム（器は overflow:hidden） */
.a-zoomer{overflow:hidden}
.a-zoomer img{transition:transform .9s var(--ease-out)}
.a-zoomer:hover img{transform:scale(1.07)}

/* 13. ホバーで矢印が進む */
.a-arrow svg,.a-arrow .arw{transition:transform .45s var(--ease-out)}
.a-arrow:hover svg,.a-arrow:hover .arw{transform:translateX(6px)}

/* 14. 番号の縦カウンタ風スライド（装飾） */
@keyframes ccSlideUpIn{from{transform:translateY(60%);opacity:0}to{transform:translateY(0);opacity:1}}
.a-num{display:inline-block;animation:ccSlideUpIn .9s var(--ease-out) both}



/* ============================================================
   ② IO reveal のバリエーション追加（app.js が .is-in を付ける）
   既存: up(既定) / left / right / scale / clip
   ============================================================ */
.js [data-anim="blur"]{opacity:0;transform:none;clip-path:none;filter:blur(14px)}
.js [data-anim="blur"].is-in{opacity:1;filter:blur(0)}
.js [data-anim="rise"]{opacity:0;transform:translateY(64px);clip-path:none}
.js [data-anim="rise"].is-in{opacity:1;transform:none}
.js [data-anim="tilt"]{opacity:0;transform:perspective(900px) rotateX(12deg) translateY(38px);clip-path:none;transform-origin:top center}
.js [data-anim="tilt"].is-in{opacity:1;transform:none}
.js [data-anim="mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
.js [data-anim="mask"].is-in{clip-path:inset(0 0 0 0)}
.js [data-anim="wipe"]{opacity:1;transform:none;clip-path:inset(0 0 0 100%)}
.js [data-anim="wipe"].is-in{clip-path:inset(0 0 0 0)}
.js [data-anim="zoomout"]{opacity:0;transform:scale(1.14);clip-path:none}
.js [data-anim="zoomout"].is-in{opacity:1;transform:none}
.js [data-anim],.js [data-anim="blur"]{transition-property:opacity,transform,clip-path,filter}

/* 文字送り: motion.js が語/文字に分割して --i を振る。JS 無しなら普通の文字列のまま */
.cc-split{display:inline-block}
.js .cc-split .cc-w{display:inline-block;opacity:0;transform:translateY(.5em) rotateX(28deg);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i) * 42ms)}
.js .is-in .cc-split .cc-w,.js .cc-split.is-in .cc-w{opacity:1;transform:none}
/* ①と同じ理由のフェイルセーフ（分割後にJSが落ちても文字が消えない） */
.js .cc-split .cc-w{animation:ccFailsafe 0s linear 2.5s forwards}

/* 子要素スタッガの段数を 8 → 16 へ拡張 */
.js [data-stagger].is-in>*:nth-child(9){transition-delay:.68s}
.js [data-stagger].is-in>*:nth-child(10){transition-delay:.76s}
.js [data-stagger].is-in>*:nth-child(11){transition-delay:.84s}
.js [data-stagger].is-in>*:nth-child(12){transition-delay:.92s}
.js [data-stagger].is-in>*:nth-child(13){transition-delay:1s}
.js [data-stagger].is-in>*:nth-child(14){transition-delay:1.08s}
.js [data-stagger].is-in>*:nth-child(15){transition-delay:1.16s}
.js [data-stagger].is-in>*:nth-child(16){transition-delay:1.24s}

/* ============================================================
   ③ GSAP / ポインタ演出の受け皿（motion.js が値を書く）
   ============================================================ */
.a-tilt3d{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--ease-out);will-change:auto}
.a-magnet{transform:translate(var(--mx,0),var(--my,0));transition:transform .35s var(--ease-out)}
.cc-scrollbar{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(var(--p,0));transform-origin:left center;background:linear-gradient(90deg,var(--primary),#8FD3AC);z-index:120;pointer-events:none}

/* 重い演出の描画コストを抑える（INP/描画対策） */
.a-shine,.a-ripple,.a-zoomer{contain:paint}

/* ============================================================
   一括停止 — 動きに敏感なユーザーには一切動かさない
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .a-float,.a-bob,.a-ripple::after,.a-shine::before,.a-gradient-text,.a-num,
  .js .cc-split .cc-w{animation:none!important;transition:none!important}
  .js .cc-split .cc-w{opacity:1!important;transform:none!important}
  .a-lift,.a-zoomer img,.a-arrow svg,.a-underline::after,.a-tilt3d,.a-magnet{transition:none!important}
  .a-lift:hover,.a-zoomer:hover img{transform:none!important}
  .cc-scrollbar{display:none}
}

/* ============================================================
   ④ 追加レイヤー（2026-08-15 増補）— 密度を上げるための機構
   原則は上と同じ: 隠す系は必ず .is-in か ccFailsafe で戻る／transform・opacity・filter のみ
   ============================================================ */

/* --- 4-1. IO reveal の追加バリエーション --- */
.js [data-anim="flip"]{opacity:0;transform:perspective(1000px) rotateY(14deg) translateX(40px);clip-path:none;transform-origin:left center}
.js [data-anim="flip"].is-in{opacity:1;transform:none}
.js [data-anim="skew"]{opacity:0;transform:skewY(3deg) translateY(46px);clip-path:none}
.js [data-anim="skew"].is-in{opacity:1;transform:none}
.js [data-anim="curtain"]{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.js [data-anim="curtain"]::before{content:"";position:absolute;inset:0;background:var(--primary);transform-origin:right center;transform:scaleX(1);transition:transform .9s var(--ease-out);z-index:3;pointer-events:none}
.js [data-anim="curtain"].is-in::before{transform:scaleX(0)}
.js [data-anim="diag"]{opacity:0;transform:translate(-30px,34px);clip-path:none}
.js [data-anim="diag"].is-in{opacity:1;transform:none}
.js [data-anim="circle"]{opacity:1;transform:none;clip-path:circle(0% at 50% 60%)}
.js [data-anim="circle"].is-in{clip-path:circle(78% at 50% 50%);transition:clip-path 1.1s var(--ease-out)}

/* --- 4-2. スクロール駆動（対応ブラウザのみ・JS不要。非対応環境は静止＝完成形） --- */
@supports (animation-timeline: view()){
  .sd-rise{animation:sdRise linear both;animation-timeline:view();animation-range:entry 6% cover 32%}
  @keyframes sdRise{from{transform:translateY(38px)}to{transform:none}}
  .sd-zoom{animation:sdZoom linear both;animation-timeline:view();animation-range:entry 0% cover 46%}
  @keyframes sdZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
  .sd-rot{animation:sdRot linear both;animation-timeline:view();animation-range:cover}
  @keyframes sdRot{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
  .sd-slide{animation:sdSlide linear both;animation-timeline:view();animation-range:cover}
  @keyframes sdSlide{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
}

/* --- 4-3. ホバーの密度 --- */
/* カーソル追従のスポットライト（motion.js が --mx/--my を書く） */
.hv-spot{position:relative;isolation:isolate}
.hv-spot::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .4s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(26,92,58,.16),transparent 62%);
}
.hv-spot:hover::before{opacity:1}
/* 枠が描かれる */
.hv-draw{position:relative}
.hv-draw::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.hv-draw:hover::after{transform:scaleX(1)}
/* アイコンが回る／跳ねる */
.hv-spin svg{transition:transform .6s var(--ease-back)}
.hv-spin:hover svg{transform:rotate(18deg) scale(1.12)}
/* 面がわずかに持ち上がって色が乗る */
.hv-raise{transition:transform .45s var(--ease-out),background .45s}
.hv-raise:hover{transform:translateY(-4px);background:rgba(240,252,245,.9)}

/* --- 4-4. 装飾ループ --- */
@keyframes ccOrbit{to{transform:rotate(360deg) translateX(9px) rotate(-360deg)}}
.a-orbit{animation:ccOrbit 12s linear infinite}
@keyframes ccWave{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(2.5deg)}}
.a-wave{animation:ccWave 6.5s ease-in-out infinite}
@keyframes ccDot{0%,100%{opacity:.35;transform:scale(.86)}50%{opacity:1;transform:scale(1)}}
.a-dot{animation:ccDot 2.2s ease-in-out infinite}
@keyframes ccShimmer{0%{background-position:-140% 0}100%{background-position:240% 0}}
.a-shimmer{background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 48%,transparent 76%);background-size:220% 100%;animation:ccShimmer 3.6s ease-in-out infinite}
/* CTA の呼吸するリング */
@keyframes ccCta{0%{box-shadow:0 0 0 0 rgba(255,179,0,.55)}70%{box-shadow:0 0 0 16px rgba(255,179,0,0)}100%{box-shadow:0 0 0 0 rgba(255,179,0,0)}}
.a-cta{animation:ccCta 3.2s ease-out infinite}

/* --- 4-5. 追従して止まる見出し（pin-spacer を作らない sticky） --- */
.stick{position:sticky;top:96px}
@media(max-width:900px){.stick{position:static}}

/* --- 4-6. クリック波紋（motion.js が span を挿す） --- */
.rip{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.5);pointer-events:none;animation:ccRip .62s ease-out forwards}
@keyframes ccRip{to{transform:scale(2.6);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .a-orbit,.a-wave,.a-dot,.a-shimmer,.a-cta,.rip{animation:none!important}
  .hv-spin svg,.hv-raise,.hv-draw::after{transition:none!important}
  .js [data-anim="curtain"]::before{transform:scaleX(0)!important}
  .stick{position:static}
}