/* ── Scroll Animations ─────────────────────────────────── */

/* Base: hidden before scroll trigger */
.scroll-fade-up,
.scroll-fade-down,
.scroll-fade-left,
.scroll-fade-right,
.scroll-scale-in,
.scroll-swing {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

/* Visible state */
.scroll-fade-up.is-visible,
.scroll-fade-down.is-visible,
.scroll-fade-left.is-visible,
.scroll-fade-right.is-visible,
.scroll-scale-in.is-visible,
.scroll-swing.is-visible {
    opacity: 1;
    transform: none;
}

/* Fade up */
.scroll-fade-up { transform: translateY(40px); }

/* Fade down */
.scroll-fade-down { transform: translateY(-40px); }

/* Fade left */
.scroll-fade-left { transform: translateX(-40px); }

/* Fade right */
.scroll-fade-right { transform: translateX(40px); }

/* Scale in */
.scroll-scale-in { transform: scale(0.9); }

/* Swing/tilt */
.scroll-swing {
    transform-origin: top center;
    transform: rotate(-5deg);
}

.scroll-swing.is-visible {
    animation: cch-swing 1s ease-in-out;
}

@keyframes cch-swing {
    0%   { transform: rotate(-5deg); }
    20%  { transform: rotate(3deg); }
    40%  { transform: rotate(-3deg); }
    60%  { transform: rotate(2deg); }
    80%  { transform: rotate(-1deg); }
    100% { transform: rotate(0deg); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .scroll-fade-up,
    .scroll-fade-down,
    .scroll-fade-left,
    .scroll-fade-right,
    .scroll-scale-in,
    .scroll-swing {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}

/* Drop bounce */
.scroll-drop-bounce {
    opacity: 0;
    transform: translateY(-80px);
    will-change: opacity, transform;
}

.scroll-drop-bounce.is-visible {
    opacity: 1;
    animation: cch-drop-bounce 1s ease-out forwards;
}

@keyframes cch-drop-bounce {
    0%   { opacity: 0; transform: translateY(-80px); }
    40%  { opacity: 1; transform: translateY(0); }
    55%  { transform: translateY(-15px); }
    70%  { transform: translateY(0); }
    80%  { transform: translateY(-6px); }
    90%  { transform: translateY(0); }
    95%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

/* Drop swing — falls down and swings while settling */
.scroll-drop-swing {
    opacity: 0;
    transform: translateY(-80px) rotate(-5deg);
    transform-origin: top center;
    will-change: opacity, transform;
}

.scroll-drop-swing.is-visible {
    opacity: 1;
    animation: cch-drop-swing 1.2s ease-out forwards;
}

@keyframes cch-drop-swing {
    0%   { opacity: 0; transform: translateY(-80px) rotate(-5deg); }
    35%  { opacity: 1; transform: translateY(0) rotate(3deg); }
    50%  { transform: translateY(-10px) rotate(-2deg); }
    65%  { transform: translateY(0) rotate(1.5deg); }
    78%  { transform: translateY(-4px) rotate(-1deg); }
    88%  { transform: translateY(0) rotate(0.5deg); }
    100% { transform: translateY(0) rotate(0); }
}

/* Diagonal slide — from bottom-left */
.scroll-fade-diagonal {
    opacity: 0;
    transform: translate(-60px, 60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.scroll-fade-diagonal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-fade-diagonal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Diagonal slide — from bottom-left */
.scroll-fade-diagonal {
    opacity: 0;
    transform: translate(-60px, 60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.scroll-fade-diagonal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-fade-diagonal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- Homepage hero entrance --- */
.hero-fade-in {
    opacity: 0;
    animation: heroFadeIn 1.0s ease-out 0.1s forwards;
}
.hero-slide-up {
    opacity: 0;
    transform: translateY(80px);
    animation: heroSlideUp 1.2s ease-out 1.5s forwards;
}

@keyframes heroFadeIn {
    to { opacity: 1; }
}
@keyframes heroSlideUp {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-fade-in,
    .hero-slide-up {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* --- Torn edge mask for homepage blue section --- */
.torn-edge-left img {
    clip-path: polygon(
        8% 0%, 100% 0%, 100% 100%, 8% 100%,
        6% 97%, 4% 94%, 7% 90%, 5% 86%, 3% 82%,
        6% 78%, 4% 74%, 7% 70%, 5% 66%, 3% 62%,
        6% 58%, 4% 54%, 7% 50%, 5% 46%, 3% 42%,
        6% 38%, 4% 34%, 7% 30%, 5% 26%, 3% 22%,
        6% 18%, 4% 14%, 7% 10%, 5% 6%, 3% 3%
    );
}