/* はりまガレージ 見本レイアウト・ギミック版（S_mihon_fx）
   レイアウトは style.css（R_mihon と同じ）のまま、動きだけをここで足す。
   動きは html.fx-on のときだけ（fx.js が動きを減らす設定でないときに付ける）。
   色は役割の変数（--c-*）とそこから作った変数だけ。 */

/* ---------- 開幕：レッカー車がロゴを運んでくる ---------- */
.fx-intro{position:fixed;inset:0;z-index:300;display:grid;place-items:center;pointer-events:auto;cursor:pointer}
.fx-intro::before,.fx-intro::after{content:"";position:absolute;left:0;right:0;height:50.5%;background:var(--navy);transition:transform .7s cubic-bezier(.7,0,.2,1)}
.fx-intro::before{top:0}
.fx-intro::after{bottom:0}
.fx-intro .fx-road{position:absolute;left:0;right:0;top:calc(50% + 34px);height:3px;background:repeating-linear-gradient(90deg,var(--gold) 0 26px,transparent 26px 46px);z-index:1;animation:fx-road .5s linear infinite;transition:opacity .3s}
.fx-intro .fx-rig{position:relative;z-index:2;display:flex;align-items:flex-end;gap:6px;color:var(--gold);animation:fx-drive-in 1.1s cubic-bezier(.2,.7,.2,1) both;transition:opacity .3s}
.fx-intro .fx-rig svg{width:84px;height:84px}
.fx-intro .fx-load{display:flex;flex-direction:column;line-height:1.1;padding:10px 16px;border-radius:8px;border:2px solid var(--gold);margin-bottom:22px;background:var(--navy-2)}
.fx-intro .fx-load b{font-size:1.6rem;color:var(--on-navy);letter-spacing:.06em}
.fx-intro .fx-load small{font-family:var(--en);font-size:.9rem;letter-spacing:.24em;color:var(--on-navy-2)}
.fx-intro .fx-skip{position:absolute;right:20px;bottom:18px;z-index:2;font-size:.78rem;color:var(--on-navy-2)}
.fx-intro.out::before{transform:translateY(-100%)}
.fx-intro.out::after{transform:translateY(100%)}
.fx-intro.out .fx-rig,.fx-intro.out .fx-road,.fx-intro.out .fx-skip{opacity:0}
.fx-intro.out{pointer-events:none}
@keyframes fx-drive-in{0%{transform:translateX(-70vw)}80%{transform:translateX(12px)}100%{transform:none}}
@keyframes fx-road{to{background-position:-46px 0}}

/* ---------- 読み進み：ヘッダー下の道路を車が走る ---------- */
.fx-progress{position:fixed;left:0;right:0;top:72px;height:4px;z-index:49;pointer-events:none;background:color-mix(in srgb,var(--navy) 20%,transparent)}
.fx-progress i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0)*100%);background:var(--gold)}
.fx-progress svg{position:absolute;top:-9px;left:calc(var(--p,0)*100% - 22px);width:22px;height:22px;color:var(--gold);filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--c-main) 50%,transparent))}
@media (max-width:860px){.fx-progress{top:60px}}

/* ---------- 見えたら出る（共通） ---------- */
.fx-on .fx-up{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.fx-on .fx-up.in{opacity:1;transform:none}

/* ---------- FV ---------- */
.hero-hand .ch{font-style:normal}
.fx-on .hero-hand .ch{display:inline-block;line-height:1;opacity:0;transform:translateY(-.5em) rotate(-8deg);animation:fx-ink .45s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(var(--d)*45ms + var(--fx-start,0ms))}
@keyframes fx-ink{to{opacity:1;transform:none}}
.fx-on .hero h1 .ln{display:inline-block;vertical-align:top;clip-path:inset(0 0 100% 0);transform:translateY(40%);animation:fx-line .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--fx-start,0ms) + 700ms + var(--d)*160ms)}
@keyframes fx-line{to{clip-path:inset(-20% -10% -20% 0);transform:none}}
.hero h1 em{position:relative;display:inline-block}
.fx-on .hero h1 em::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.04em;height:.16em;border-radius:4px;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:fx-marker .6s cubic-bezier(.6,0,.2,1) forwards;animation-delay:calc(var(--fx-start,0ms) + 1500ms)}
@keyframes fx-marker{to{transform:scaleX(1)}}
.fx-on .hero h1 em{animation:fx-pop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--fx-start,0ms) + 1500ms)}
@keyframes fx-pop{0%{transform:none}40%{transform:scale(1.12) rotate(-2deg)}100%{transform:none}}
.fx-on .hero-lead,.fx-on .hero-cta{opacity:0;transform:translateY(16px);animation:fx-fade .7s forwards;animation-delay:calc(var(--fx-start,0ms) + 1700ms)}
.fx-on .hero-cta{animation-delay:calc(var(--fx-start,0ms) + 1900ms)}
@keyframes fx-fade{to{opacity:1;transform:none}}
.hero-photo{overflow:hidden}
.fx-on .hero-photo img{transform:translate(var(--mx,0px),var(--my,0px)) scale(1.08);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
/* マウスの位置にヘッドライトの光 */
.fx-beam{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(260px 200px at var(--bx,70%) var(--by,50%),color-mix(in srgb,var(--gold) 26%,transparent),transparent 70%);mix-blend-mode:screen}
.hero:hover .fx-beam{opacity:1}
/* 電話アイコンが時々鳴る */
.fx-on .btn-tel svg,.fx-on .cta-num svg,.fx-on .hd-tel svg{animation:fx-ring 4.5s ease-in-out infinite;transform-origin:50% 60%}
@keyframes fx-ring{0%,82%,100%{transform:none}84%,88%,92%{transform:rotate(-16deg)}86%,90%,94%{transform:rotate(16deg)}}
.fx-on .hd-tel{position:relative;overflow:hidden}
.fx-on .hd-tel::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--c-bg) 55%,transparent) 50%,transparent 65%);transform:translateX(-120%);animation:fx-shine 4.5s ease-in-out infinite}
@keyframes fx-shine{0%,60%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}

/* ---------- 吸い付くボタンと波紋 ---------- */
.fx-rp{position:relative;overflow:hidden}
.sp-tel.fx-rp{position:fixed}
.fx-mag{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:color-mix(in srgb,var(--c-bg) 45%,transparent);transform:scale(0);animation:fx-rip .6s ease-out forwards}
@keyframes fx-rip{to{transform:scale(1);opacity:0}}

/* ---------- 特長の帯 ---------- */
.fx-on .points li{opacity:0;transform:translateY(18px) scale(.96);transition:opacity .55s,transform .55s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--i,0)*110ms)}
.fx-on .points.in li{opacity:1;transform:none}
.fx-on .points.in svg{animation:fx-bounce .7s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i,0)*110ms + 150ms)}
@keyframes fx-bounce{0%{transform:scale(.3) rotate(-25deg)}100%{transform:none}}
.points li:hover svg{animation:fx-wiggle .5s ease-in-out}
@keyframes fx-wiggle{25%{transform:rotate(-12deg) translateY(-3px)}75%{transform:rotate(10deg) translateY(-3px)}}
.points b[data-count]{font-variant-numeric:tabular-nums}

/* ---------- 強み ---------- */
.intro-photo{overflow:hidden}
.fx-on .intro-photo{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.fx-on .intro-photo.in{clip-path:inset(0 0 0 0)}
.fx-on .intro-photo img{transform:scale(1.15);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.fx-on .intro-photo.in img{transform:scale(1)}
.fx-on .hand-tag{transform-origin:20% -40%;transform:rotate(-6deg)}
.fx-on .intro-photo.in .hand-tag{animation:fx-swing 2.2s ease-out .9s both}
.fx-on .hand-tag:hover{animation:fx-swing 1.6s ease-out both}
@keyframes fx-swing{0%{transform:rotate(-30deg)}25%{transform:rotate(10deg)}45%{transform:rotate(-14deg)}65%{transform:rotate(-2deg)}85%{transform:rotate(-8deg)}100%{transform:rotate(-6deg)}}
.fx-tilt{transform-style:preserve-3d}
html.fx-on .fx-tilt.fx-tilt:hover{transform:perspective(700px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(var(--ty,0px));transition:transform .2s,opacity .7s,border-color .15s;transition-delay:0s}

/* ---------- 車種：駐車場に入ってくる＋光が走る ---------- */
.fx-on .car{opacity:0;transform:translateX(60px) skewX(-8deg);transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.25,1.15);transition-delay:calc(var(--i,0)*80ms)}
.fx-on .car-row.in .car{opacity:1;transform:none}
.car button{position:relative}
.car .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--c-bg) 50%,transparent) 48%,transparent 62%);transform:translateX(-130%);transition:transform .7s;pointer-events:none}
.car button:hover .pic::after,.car button:focus-visible .pic::after{transform:translateX(130%)}
.car .pic img{transition:transform .5s}
.car button:hover .pic img{transform:scale(1.08)}
.car-row.drag{cursor:grabbing;scroll-snap-type:none}
.car-row.drag button{pointer-events:none}
.fx-on .car-detail-in{animation:fx-drop .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes fx-drop{from{opacity:0;transform:translateY(-14px) scale(.98)}}
.fx-on .car-detail .fees div{animation:fx-fade .45s both;animation-delay:calc(var(--i,0)*80ms);opacity:0;transform:translateY(10px)}
.fx-on .price-table:not([hidden]) tbody tr{animation:fx-row .45s both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes fx-row{from{opacity:0;transform:translateX(-18px)}}

/* ---------- サービス：ガレージのシャッターが上がる ---------- */
/* ガレージのシャッター：明るい鋼板のスラット（14px ごとの段）＋濃い下框。下から巻き上がるように上へ抜ける */
.svc-pic{position:relative;overflow:hidden;--st-hi:color-mix(in srgb,var(--c-bg) 92%,var(--c-deep));--st-md:color-mix(in srgb,var(--c-bg) 70%,var(--c-deep));--st-lo:color-mix(in srgb,var(--c-bg) 45%,var(--c-deep));--st-gv:color-mix(in srgb,var(--c-main) 75%,var(--c-deep))}
.fx-on .svc-pic::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(var(--st-gv),var(--st-gv)) bottom/100% 4px no-repeat,
    linear-gradient(var(--c-main),color-mix(in srgb,var(--c-main) 70%,var(--c-deep))) bottom 4px left 0/100% 10px no-repeat,
    linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--c-bg) 45%,transparent) 30%,transparent 55%,color-mix(in srgb,var(--c-main) 10%,transparent) 100%),
    repeating-linear-gradient(180deg,var(--st-hi) 0 2px,var(--st-md) 2px 7px,var(--st-lo) 11px,var(--st-gv) 11px 13px,var(--st-hi) 13px 14px);
  box-shadow:inset 6px 0 0 var(--st-lo),inset -6px 0 0 var(--st-lo);
  transition:transform 1.5s cubic-bezier(.5,0,.25,1);transition-delay:calc(var(--i,0)*180ms + 250ms)}
/* 下框の取っ手 */
.fx-on .svc-pic::after{content:"";position:absolute;left:50%;bottom:6px;width:52px;height:6px;margin-left:-26px;z-index:2;border-radius:3px;background:var(--st-md);box-shadow:0 1px 0 var(--st-gv);transition:transform 1.5s cubic-bezier(.5,0,.25,1);transition-delay:calc(var(--i,0)*180ms + 250ms)}
.fx-on .svc-cards li.in .svc-pic::before{transform:translateY(-101%)}
.fx-on .svc-cards li.in .svc-pic::after{transform:translateY(calc(-1 * var(--h,200px) - 30px))}
.svc-pic img{transition:transform .6s}
.svc-cards li:hover .svc-pic img{transform:scale(1.07)}

/* ---------- ご利用にあたって ---------- */
.rule-cards img{transition:transform .5s,filter .5s}
.rule-cards li:hover img{transform:translateY(-4px)}
.fx-on .detail:not([hidden]){animation:fx-drop .45s cubic-bezier(.3,1.3,.5,1)}

/* ---------- ご利用の流れ：道路を車が進む ---------- */
.steps{position:relative}
.fx-lane{position:absolute;left:20px;right:20px;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:color-mix(in srgb,var(--c-deep) 18%,transparent);pointer-events:none}
.fx-lane i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0)*100%);border-radius:3px;background:repeating-linear-gradient(90deg,var(--gold) 0 18px,transparent 18px 28px)}
.fx-lane svg{position:absolute;top:50%;left:calc(var(--p,0)*100%);width:40px;height:40px;margin:-24px 0 0 -20px;color:var(--navy);transition:transform .2s}
.steps li{z-index:1}
.steps li.lit .no{animation:fx-bounce .6s cubic-bezier(.3,1.6,.5,1);background:var(--gold);color:var(--navy)}
.steps .no{transition:background .3s,color .3s}
/* スマホ：カードの間を S 字に折り返す道（カードの裏をくぐる）。すき間を広げて車が見えるようにする */
.fx-snake{display:none}
@media (max-width:860px){
  .fx-lane{display:none}
  .fx-on .steps{gap:68px}
  .fx-snake{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
  .fx-snake svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .fx-snake path{fill:none;stroke-linecap:round;stroke-linejoin:round}
  .fx-snake .rd{stroke:color-mix(in srgb,var(--c-deep) 30%,var(--c-soft));stroke-width:22}
  .fx-snake .cl{stroke:var(--c-bg);stroke-width:2;stroke-dasharray:8 9}
  .fx-snake .pg{stroke:var(--gold);stroke-width:3;stroke-dasharray:9999;stroke-dashoffset:9999}
  .fx-snake .sn-car path.cb{fill:var(--navy);stroke:none}
  .fx-snake .sn-car .cw{fill:color-mix(in srgb,var(--c-bg) 80%,var(--c-accent));stroke:none}
  .fx-snake .sn-car path.ch{fill:var(--gold);stroke:none}
  .fx-snake .sn-car .cr{fill:color-mix(in srgb,var(--navy) 80%,var(--c-deep))}
  .steps li:not(:last-child)::after{display:none}
}

/* ---------- 会社・エリア ---------- */
.fx-on .chips li{opacity:0;transform:translateY(-18px) scale(.8)}
.fx-on .chips.in li{animation:fx-pin .55s cubic-bezier(.3,1.7,.5,1) forwards;animation-delay:calc(var(--i,0)*90ms)}
@keyframes fx-pin{to{opacity:1;transform:none}}
.info-photo{overflow:hidden}
.fx-on .info-photo img{transform:scale(1.12) translateY(var(--py,0px));transition:transform .2s linear}

/* ---------- 電話の帯：番号が発車案内板のように回る ---------- */
/* .cta-num span などの指定に負けないよう .flip を重ねて強くする */
.flip.flip{display:inline-block;overflow:hidden;height:1.2em;line-height:1.2em;vertical-align:bottom}
.flip.flip>span{display:flex;flex-direction:column;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.flip.flip>span>span{display:block;height:1.2em;line-height:1.2em}

/* ---------- おまけ：ロゴを3回押すとレッカー車が横切る ---------- */
.fx-cameo{position:fixed;left:0;bottom:90px;z-index:250;display:flex;align-items:flex-end;gap:6px;color:var(--gold);pointer-events:none;animation:fx-cross 3.2s linear forwards}
.fx-cameo svg{width:72px;height:72px;filter:drop-shadow(0 4px 6px color-mix(in srgb,var(--c-main) 35%,transparent))}
.fx-cameo span{background:var(--navy);color:var(--on-navy);font-weight:700;font-size:.85rem;padding:6px 12px;border-radius:14px 14px 14px 2px;margin-bottom:56px;white-space:nowrap}
@keyframes fx-cross{from{transform:translateX(-260px)}to{transform:translateX(calc(100vw + 40px))}}
.logo.honk .logo-mark{animation:fx-wiggle .4s}

@media (prefers-reduced-motion:reduce){
  .fx-intro,.fx-progress,.fx-beam,.fx-lane,.fx-snake,.fx-cameo{display:none !important}
  *{animation:none !important}
}

/* 設定画面のプレビューで「動きなし」のとき */
.hg-still *, .hg-still *::before, .hg-still *::after { transition: none !important; animation: none !important; }