/* ================================================= 
   1. 遅延設定 (0.1秒 〜 3.0秒)
================================================== */
.mca-delay-100 { --mca-delay: 0.1s; }
.mca-delay-200 { --mca-delay: 0.2s; }
.mca-delay-300 { --mca-delay: 0.3s; }
.mca-delay-400 { --mca-delay: 0.4s; }
.mca-delay-500 { --mca-delay: 0.5s; }
.mca-delay-600 { --mca-delay: 0.6s; }
.mca-delay-700 { --mca-delay: 0.7s; }
.mca-delay-800 { --mca-delay: 0.8s; }
.mca-delay-900 { --mca-delay: 0.9s; }
.mca-delay-1000 { --mca-delay: 1.0s; }
.mca-delay-1100 { --mca-delay: 1.1s; }
.mca-delay-1200 { --mca-delay: 1.2s; }
.mca-delay-1300 { --mca-delay: 1.3s; }
.mca-delay-1400 { --mca-delay: 1.4s; }
.mca-delay-1500 { --mca-delay: 1.5s; }
.mca-delay-1600 { --mca-delay: 1.6s; }
.mca-delay-1700 { --mca-delay: 1.7s; }
.mca-delay-1800 { --mca-delay: 1.8s; }
.mca-delay-1900 { --mca-delay: 1.9s; }
.mca-delay-2000 { --mca-delay: 2.0s; }
.mca-delay-2100 { --mca-delay: 2.1s; }
.mca-delay-2200 { --mca-delay: 2.2s; }
.mca-delay-2300 { --mca-delay: 2.3s; }
.mca-delay-2400 { --mca-delay: 2.4s; }
.mca-delay-2500 { --mca-delay: 2.5s; }
.mca-delay-2600 { --mca-delay: 2.6s; }
.mca-delay-2700 { --mca-delay: 2.7s; }
.mca-delay-2800 { --mca-delay: 2.8s; }
.mca-delay-2900 { --mca-delay: 2.9s; }
.mca-delay-3000 { --mca-delay: 3.0s; }

/* ================================================= 
   2. アニメーション定義
================================================== */

.mca-zoom-in { opacity: 0; transform: scale(0.8); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.mca-zoom-in.mca-active { opacity: 1; transform: scale(1); transition-delay: var(--mca-delay, 0s); }

.mca-slide-up-blur { opacity: 0; filter: blur(8px); transform: translateY(20px); transition: all 1s ease; }
.mca-slide-up-blur.mca-active { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: var(--mca-delay, 0s); }

.mca-rotate-float { opacity: 0; transform: translateY(20px) rotate(-10deg); transition: all 0.8s ease; }
.mca-rotate-float.mca-active { opacity: 1; transform: translateY(0) rotate(0); transition-delay: var(--mca-delay, 0s); }

.mca-bounce-in { opacity: 0; transform: translateY(30px) scale(0.9); transition: all 0.8s cubic-bezier(0.34, 1.5, 0.6, 1); }
.mca-bounce-in.mca-active { opacity: 1; transform: translateY(0) scale(1); transition-delay: var(--mca-delay, 0s); }

/* 05. Elegant Reveal (刷新: 汎用性の高い、少し縮小した状態から滑らかにフェードイン＆浮き上がり) */
.mca-elegant-reveal { opacity: 0; transform: translateY(20px) scale(0.98); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.mca-elegant-reveal.mca-active { opacity: 1; transform: translateY(0) scale(1); transition-delay: var(--mca-delay, 0s); }

.mca-soft-glow { opacity: 0; filter: brightness(2); transition: all 1.5s; }
.mca-soft-glow.mca-active { opacity: 1; filter: brightness(1); transition-delay: var(--mca-delay, 0s); }

.mca-3d-rotate { opacity: 0; transform: perspective(800px) rotateY(-30deg); transition: all 1s; }
.mca-3d-rotate.mca-active { opacity: 1; transform: perspective(800px) rotateY(0); transition-delay: var(--mca-delay, 0s); }

.mca-image-zoom { overflow: hidden; opacity: 0; transition: opacity 0.8s; }
.mca-image-zoom.mca-active { opacity: 1; transition-delay: var(--mca-delay, 0s); }
.mca-image-zoom > * { transform: scale(1.5); transition: transform 1.2s ease; display: block; width: 100%; }
.mca-image-zoom.mca-active > * { transform: scale(1); transition-delay: var(--mca-delay, 0s); }

.mca-through-up { opacity: 0; transform: translateY(100%); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.mca-through-up.mca-active { opacity: 1; transform: translateY(0); transition-delay: var(--mca-delay, 0s); }

.mca-stagger-text { opacity: 0; letter-spacing: -0.3em; filter: blur(5px); transition: all 1s; }
.mca-stagger-text.mca-active { opacity: 1; letter-spacing: normal; filter: blur(0); transition-delay: var(--mca-delay, 0s); }

.mca-swing-drop { opacity: 0; transform: translateY(-30px) rotateX(-50deg); transform-origin: top; transition: all 0.8s cubic-bezier(0.17, 0.88, 0.3, 1.2); }
.mca-swing-drop.mca-active { opacity: 1; transform: translateY(0) rotateX(0); transition-delay: var(--mca-delay, 0s); }

.mca-shine-fade { position: relative; opacity: 0; transition: opacity 1s; overflow: hidden; }
.mca-shine-fade.mca-active { opacity: 1; transition-delay: var(--mca-delay, 0s); }
.mca-shine-fade::after { content:''; position:absolute; top:0; left:-100%; width:40%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent); transition: left 0.8s; }
.mca-shine-fade.mca-active::after { left: 150%; transition-delay: var(--mca-delay, 0s); }

.mca-double-reveal { position: relative; overflow: hidden; visibility: hidden; }
.mca-double-reveal::before { content:''; position:absolute; inset:0; background:currentColor; transform:translateX(-101%); z-index: 2; }
.mca-double-reveal.mca-active { visibility: visible; transition: visibility 0s var(--mca-delay, 0s); }
.mca-double-reveal.mca-active::before { transform:translateX(101%); transition: transform 0.6s var(--mca-delay, 0s); }
.mca-double-reveal > * { opacity:0; }
.mca-double-reveal.mca-active > * { opacity:1; transition: opacity 0.3s calc(var(--mca-delay, 0s) + 0.4s); }

.mca-blur-focus { opacity: 0; filter: blur(20px); transform: scale(1.1); transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.mca-blur-focus.mca-active { opacity: 1; filter: blur(0); transform: scale(1); transition-delay: var(--mca-delay, 0s); }

.mca-simple-fade { opacity: 0; transition: opacity 1.5s ease; }
.mca-simple-fade.mca-active { opacity: 1; transition-delay: var(--mca-delay, 0s); }

.mca-slide-in-left { opacity: 0; transform: translateX(-40px); transition: all 1s; }
.mca-slide-in-left.mca-active { opacity: 1; transform: translateX(0); transition-delay: var(--mca-delay, 0s); }

.mca-border-reveal { opacity: 0; transform: perspective(600px) rotateX(-90deg); transform-origin: top; }
.mca-border-reveal.mca-active { opacity: 1; transform: perspective(600px) rotateX(0); transition: all 0.8s cubic-bezier(0.17, 0.88, 0.3, 1.2) var(--mca-delay, 0s); }

.mca-parallax-shadow { opacity: 0; transform: translateY(10px); transition: all 0.8s; }
.mca-parallax-shadow.mca-active { opacity: 1; transform: translateY(0); box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition-delay: var(--mca-delay, 0s); }

.mca-focus-zoom { opacity: 0; transform: scale(1.1); filter: brightness(1.3); transition: all 1.2s; letter-spacing: 0.1em; }
.mca-focus-zoom.mca-active { opacity: 1; transform: scale(1); filter: brightness(1); letter-spacing: normal; transition-delay: var(--mca-delay, 0s); }

/* 20. Mask Slide (刷新: 左から右へスッとクリップマスクが開く、洗練されたワイプ表示) */
.mca-mask-slide { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-15px); transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.mca-mask-slide.mca-active { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); transition-delay: var(--mca-delay, 0s); }