/* ===================================================
   Scroll Animations — 和モダン・ゆっくりふわっと
=================================================== */

/* Base: hidden state */
.fade-up,
.fade-in,
.fade-left,
.fade-right {
    opacity: 0;
    will-change: opacity, transform;
}

.fade-up    { transform: translateY(40px); }
.fade-in    { transform: translateY(0); }
.fade-left  { transform: translateX(-30px); }
.fade-right { transform: translateX(30px); }

/* Visible state */
.fade-up.is-visible,
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity  var(--dur-slow) var(--easing),
        transform var(--dur-slow) var(--easing);
}

.fade-left.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity  var(--dur-slow) var(--easing),
        transform var(--dur-slow) var(--easing);
}

.fade-right.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity  var(--dur-slow) var(--easing),
        transform var(--dur-slow) var(--easing);
}

/* Stagger delays */
.fade-up:nth-child(1),
.fade-in:nth-child(1) { transition-delay: 0s; }
.fade-up:nth-child(2),
.fade-in:nth-child(2) { transition-delay: 0.15s; }
.fade-up:nth-child(3),
.fade-in:nth-child(3) { transition-delay: 0.30s; }
.fade-up:nth-child(4),
.fade-in:nth-child(4) { transition-delay: 0.45s; }
.fade-up:nth-child(5),
.fade-in:nth-child(5) { transition-delay: 0.60s; }

/* Explicit delay utilities */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.5s !important; }
.delay-5 { transition-delay: 0.7s !important; }
.delay-6 { transition-delay: 0.9s !important; }

/* ページタイトル後の要素用：長めのディレイ */
.delay-after-title-1 { transition-delay: 0.8s !important; }
.delay-after-title-2 { transition-delay: 1.2s !important; }
.delay-after-title-3 { transition-delay: 1.6s !important; }

/* Page load fade-in (applied by JS on body) */
body.page-loaded {
    animation: pageEnter 1.2s var(--easing) both;
}

@keyframes pageEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Line draw animation for decorative elements */
.line-draw {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s var(--easing);
}

.line-draw.is-visible {
    transform: scaleX(1);
}

/* Blur-in: ぼかしが外れてくっきり表示 */
.blur-in {
    opacity: 0;
    filter: blur(14px);
    will-change: opacity, filter;
}

.blur-in.is-visible {
    opacity: 1;
    filter: blur(0px);
    transition:
        opacity var(--dur-slow) var(--easing),
        filter  var(--dur-slow) var(--easing);
}

/* Title wind: 左下→右上の対角線から広がるワイプ */
.title-wind {
    clip-path: polygon(-5% 110%, -5% 110%, 110% -10%, 110% -10%);
    filter: blur(4px);
}

body.page-loaded .title-wind,
.title-wind.is-visible {
    animation: titleWind 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes titleWind {
    from {
        clip-path: polygon(-5% 110%, -5% 110%, 110% -10%, 110% -10%);
        filter: blur(4px);
    }
    to {
        clip-path: polygon(-5% 110%, -5% -10%, 110% -10%, 110% 110%);
        filter: blur(0);
    }
}

/* Scale in for images */
.scale-in {
    opacity: 0;
    transform: scale(1.04);
    transition:
        opacity  1.0s var(--easing),
        transform 1.2s var(--easing);
}

.scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}