/* LP の動き。Main.dc.html の値をそのまま移したもの */

/* 登場 */
.m-in { animation: mRise .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d,0)*1ms); }
.m-ch { display: inline-block; animation: mChar .9s cubic-bezier(.2,.9,.25,1.15) both; animation-delay: calc(var(--d,0)*1ms); }
.m-word { display: inline-block; white-space: nowrap; }
.m-drop { animation: mDrop 1.1s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--d,0)*1ms); }
.m-fade { animation: mFadeUp .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mRise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes mChar { from { opacity: 0; transform: translateY(.7em) scale(.8); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mDrop { 0% { opacity: 0; transform: translateY(-60px) scale(.4) rotate(-18deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes mFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ずっと続く動き */
.m-float { animation: mFloat 6s ease-in-out infinite; animation-delay: calc(var(--d,0)*1ms); }
@keyframes mFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(calc(var(--amp,16px) * -1)) rotate(var(--r,0deg)); } }
.m-breathe { animation: mBreathe 5s ease-in-out infinite; animation-delay: calc(var(--d,0)*1ms); }
@keyframes mBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.m-spin { animation: mSpin 70s linear infinite; }
.m-spin.m-rev { animation-direction: reverse; animation-duration: 90s; }
@keyframes mSpin { to { transform: rotate(360deg); } }
/* 幅の広い層を1枚で動かすと端末の描画の上限を超えるので、同じ帯を2枚並べて1枚ぶんずつ動かす */
.m-marquee { display: flex; width: max-content; }
.mq-track { display: flex; flex: none; animation: mMarq 40s linear infinite; }
@keyframes mMarq { to { transform: translateX(-100%); } }

/* 触ったときの動き */
.m-lift { transition: transform .5s cubic-bezier(.34,1.56,.64,1), background-color .7s ease, box-shadow .7s ease; }
.m-lift:hover { transform: translateY(-10px); }
.m-lift:hover .m-wig { animation: mWig .8s cubic-bezier(.34,1.56,.64,1); }
@keyframes mWig { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-9deg) scale(1.08); } 60% { transform: rotate(6deg) scale(1.04); } 100% { transform: rotate(0) scale(1); } }
.m-hop { transition: transform .5s cubic-bezier(.34,1.8,.64,1); }
.m-hop:hover { transform: translateY(-12px) scale(1.06) rotate(-4deg); }
.m-glide { transition: transform .55s cubic-bezier(.34,1.56,.64,1), background-color .5s ease, box-shadow .5s ease, color .5s ease, opacity .4s ease; }
.m-acc { transition: grid-template-rows .5s cubic-bezier(.2,.8,.2,1); }

/* 光が走る */
.m-shine { position: relative; overflow: hidden; isolation: isolate; }
.m-shine::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform: translateX(-130%); animation: mShine 3.8s ease-in-out infinite; }
.m-gloss { position: relative; }
.m-gloss::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(110deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%); transform: translateX(-130%); animation: mShine 5.5s ease-in-out infinite; animation-delay: calc(var(--d,0)*1ms); }
@keyframes mShine { 0%,60% { transform: translateX(-130%); } 88%,100% { transform: translateX(130%); } }
.m-pulse { animation: mPulse 2.6s ease-in-out infinite; }
@keyframes mPulse {
  0%,100% { box-shadow: 0 10px 24px color-mix(in srgb, var(--accSolid) 35%, transparent), 0 0 0 0 color-mix(in srgb, var(--accSolid) 45%, transparent); }
  60% { box-shadow: 0 10px 24px color-mix(in srgb, var(--accSolid) 35%, transparent), 0 0 0 18px color-mix(in srgb, var(--accSolid) 0%, transparent); }
}

/* スクロールの進み具合(対応しているブラウザだけ) */
.m-prog { display: none; }
@supports (animation-timeline: scroll()) {
  .m-prog { display: block; transform-origin: left center; animation: mProg linear both; animation-timeline: scroll(root); }
}
@keyframes mProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* スクロールで浮かび上がる */
.rv { opacity: 0; transform: translateY(56px) scale(.96); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1.3s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i,0)*120ms); }
.rv-h { opacity: 0; transform: translateY(40px); filter: blur(10px); transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.16,1,.3,1), filter 1.1s ease; transition-delay: calc(var(--i,0)*120ms); }
.rv.is-in, .rv-h.is-in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .m-prog { display: none; }
  .rv, .rv-h { opacity: 1 !important; transform: none !important; filter: none !important; }
}