@charset "utf-8";

/* ========================================================
   Base Styles
   ======================================================== */
html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.8;
    letter-spacing: 0.05em;
    user-select: none;
    -webkit-user-select: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ========================================================
   FV Scroll Indicator Animation
   ======================================================== */
@keyframes scrollDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

.scroll-indicator {
    animation: scrollDown 2s infinite ease-in-out;
}

/* ========================================================
   Hamburger Menu Active State
   ======================================================== */
.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.is-active span:nth-child(2) {
    opacity: 0;
}
.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Nav Menu Overlay Active State */
#js-nav-menu.is-open {
    opacity: 1;
    visibility: visible;
}

/* ========================================================
   Swiper Customizations
   ======================================================== */
.swiper-pagination-bullet {
    background-color: #fce7f3; /* Tailwind primary */
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: #ec4899; /* Tailwind accent */
}

/* FV Swiper full height */
.fv-swiper {
    width: 100%;
    height: 100vh; /* fallback */
    height: 100svh;
}

/* ========================================================
   Page Top Button visibility
   ======================================================== */
#js-page-top.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ========================================================
   Catch Copy Animation
   ======================================================== */
@keyframes fadeInBlur {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.fv-catch-copy {
    animation: fadeInBlur 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
    opacity: 0;
}