@charset "utf-8";

@property --anim {
    syntax: '<number>';
    initial-value: 0;
    inherits: true; /* ::before継承のためtrue */
}

/*＝＝＝＝＝＝＝＝＝＝ スクロールアニメーション ＝＝＝＝＝＝＝＝＝＝*/
/* デフォルトのタイミング（JSが読む） */
.js_scroll { --anim-duration: 2; --anim-ease: power3.out; }

/* BlurIn: ぼかし解除 + フェード */
.js_scroll_BlurIn { --anim: 0; opacity: var(--anim); filter: blur(calc(4px * (1 - var(--anim)))); }

/* ZoomIn: スケールアップ + フェード（中心基準） */
.js_scroll_ZoomIn { --anim: 0; opacity: var(--anim); scale: calc(var(--anim) * 0.03 + 0.97); transform-origin: center; }

/* FadeUp: 下から浮き上がり + フェード */
.js_scroll_FadeUp { --anim: 0; opacity: var(--anim); translate: 0 calc(10px * (1 - var(--anim))); }

/* FadeIn: フェードのみ */
.js_scroll_FadeIn { --anim: 0; opacity: var(--anim); }

/* SlideInRight/Left: 横スライド + フェード（スクロール連動なし） */
.js_scroll_SlideInRight { --anim: 0; --anim-duration: 2; --anim-ease: power3.out; --anim-scrub: 0; opacity: var(--anim); translate: calc(min(45vw, 600px) * (1 - var(--anim))) 0; }
.js_scroll_SlideInLeft  { --anim: 0; --anim-duration: 2; --anim-ease: power3.out; --anim-scrub: 0; opacity: var(--anim); translate: calc(max(-45vw, -600px) * (1 - var(--anim))) 0; }

/* SlideInRightBefore: 要素自体は動かさず::beforeだけスライド（親につける） */
.js_scroll_SlideInRightBefore { --anim: 0; --anim-duration: 3; --anim-ease: power3.out; --anim-scrub: 0; }
.js_scroll_SlideInRightBefore::before { opacity: var(--anim); translate: calc(min(45vw, 600px) * (1 - var(--anim))) 0; }


/* text-animation 相当: class="js_scroll js_scroll_BlurIn"
   image-animation 相当: class="js_scroll js_scroll_ZoomIn" */