@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');

/*
 * Typography and autumn hero effect.
 * Kept separate from main.css so the original Type 3 page remains untouched.
 */
html,
body,
button,
input,
select,
textarea {
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'kern';
    text-rendering: optimizeLegibility;
}

#home h1,
#home h1 span,
[class*='tracking-'],
.theme-switcher > span {
    font-family: 'Montserrat', 'Pretendard', sans-serif;
}

#home {
    isolation: isolate;
    overflow: hidden;
}

#home .img-placeholder {
    z-index: 0;
}

#home .img-placeholder > .absolute.inset-0 {
    z-index: 3;
}

.autumn-leaves {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    perspective: 900px;
    contain: layout paint;
}

.autumn-leaf {
    --leaf-opacity: 0.82;
    --leaf-blur: 0px;
    --wind-drift: 48px;
    --sway-left: -24px;
    --sway-right: 30px;
    --spin-start: -25deg;
    --spin-end: 205deg;
    --tilt-start: 30deg;
    --tilt-end: -45deg;
    position: absolute;
    top: 0;
    left: var(--leaf-left);
    width: var(--leaf-size);
    height: var(--leaf-size);
    opacity: 0;
    will-change: top, transform, opacity;
    animation: autumn-leaf-fall var(--fall-duration) linear var(--fall-delay) forwards;
}

.autumn-leaf-sway {
    display: block;
    width: 100%;
    height: 100%;
    will-change: transform;
    animation:
        autumn-leaf-sway var(--sway-duration) ease-in-out
        var(--sway-delay) infinite alternate;
}

.autumn-leaf img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: var(--leaf-opacity);
    filter:
        blur(var(--leaf-blur))
        drop-shadow(0 3px 3px rgba(56, 28, 8, 0.18));
    transform-origin: 48% 44%;
    will-change: transform;
    animation:
        autumn-leaf-tumble var(--tumble-duration) ease-in-out
        var(--tumble-delay) infinite alternate;
}

.autumn-leaves.is-paused .autumn-leaf,
.autumn-leaves.is-paused .autumn-leaf-sway,
.autumn-leaves.is-paused .autumn-leaf img {
    animation-play-state: paused;
}

@keyframes autumn-leaf-fall {
    0% {
        top: -18%;
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }

    8% {
        opacity: var(--leaf-opacity);
    }

    94% {
        opacity: var(--leaf-opacity);
    }

    100% {
        top: 116%;
        opacity: 0;
        transform: translate3d(var(--wind-drift), 25px, 0);
    }
}

@keyframes autumn-leaf-sway {
    0% {
        transform: translate3d(var(--sway-left), 0, 0) rotateZ(-2deg);
    }

    100% {
        transform: translate3d(var(--sway-right), 0, 0) rotateZ(3deg);
    }
}

@keyframes autumn-leaf-tumble {
    0% {
        transform:
            rotateX(var(--tilt-start))
            rotateY(-18deg)
            rotateZ(var(--spin-start))
            scaleX(0.86);
    }

    38% {
        transform:
            rotateX(-12deg)
            rotateY(54deg)
            rotateZ(48deg)
            scaleX(0.62);
    }

    67% {
        transform:
            rotateX(42deg)
            rotateY(-28deg)
            rotateZ(132deg)
            scaleX(0.9);
    }

    100% {
        transform:
            rotateX(var(--tilt-end))
            rotateY(32deg)
            rotateZ(var(--spin-end))
            scaleX(0.72);
    }
}

@media (max-width: 767px) {
    .autumn-leaf {
        filter: saturate(0.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    .autumn-leaves {
        display: none;
    }
}