/* ============================================================
   home.css — 홈 화면 전용 스타일
   home.html 의 <style> 블록에서 분리
   ============================================================ */

body {
    font-family: 'Noto Sans JP', 'Inter', sans-serif;
}

.font-display {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.02em;
}

/* ─────── 카드 호버 효과 ─────── */
.card-lift {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.12);
}

/* ─────── 그라디언트 텍스트 ─────── */
.gradient-text {
    background: linear-gradient(135deg, #6b3ff7 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─────── 애니메이션 ─────── */
@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-12px) rotate(1deg);
    }
}

.float {
    animation: float 5s ease-in-out infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.pulse-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─────── 모달 ─────── */
.modal-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-content {
    transform: translateY(0) scale(1);
}

/* ─────── 기본 ─────── */
html {
    scroll-behavior: smooth;
}

[x-cloak] {
    display: none !important;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   Hero (sticky full viewport)
   ============================================================ */
/* !important beats Tailwind's `relative` class on the same element */
.hero-sticky {
    position: sticky !important;
    top: 0;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-bg {
    /* Relative to this CSS file (web/static/css/home.css) so it works under any
       BASE_PATH mount — root or /TRAVENDER/api/... */
    background-image: url('../images/hero/storyotaru_otaru-canal01.jpg');
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.40) 50%, rgba(0, 0, 0, 0.15) 100%);
}

/* ============================================================
   Page Stack — Hero 위로 올라오는 흰 카드 (Triple 식)
   둥근 상단 모서리 + 첫 화면에서 hero 가 정확히 100vh 차지하도록 음수 margin 없음
   ============================================================ */
.page-stack {
    position: relative;
    z-index: 10;
    background: #ffffff;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
}

/* ============================================================
   Header — 항상 고정 + 투명 (선/배경/그림자 없음)
   ============================================================ */
html body>header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 어두운 섹션 위(hero 또는 data-header-dark 섹션)에서 헤더 글자 흰색 */
body.hero-on-screen>header a,
body.hero-on-screen>header button,
body.hero-on-screen>header span {
    color: #ffffff !important;
}

/* 단, 흰 배경 컨테이너(드롭다운) 안의 글자는 어두운 색 유지 */
body.hero-on-screen>header .bg-white a,
body.hero-on-screen>header .bg-white button,
body.hero-on-screen>header .bg-white span {
    color: rgb(81, 93, 119) !important;
}

/* 호버 시 반투명 흰 배경 + 흰 글자 유지 (어두운 섹션 위) */
body.hero-on-screen>header nav a:hover,
body.hero-on-screen>header nav button:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

/* 드롭다운 안 호버 (밝은 회색 + 어두운 글자) */
body.hero-on-screen>header .bg-white a:hover,
body.hero-on-screen>header .bg-white button:hover {
    background-color: rgb(246, 247, 249) !important;
    color: rgb(26, 29, 36) !important;
}

/* 로고 보조 텍스트 (작은 회색 글자) */
body.hero-on-screen>header .text-ink-400 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* 우측 auth 버튼 (로그인 = outline / 회원가입 = primary) - 어두운 섹션 위 처리
   nav hover 규칙은 nav 자식만 잡으므로 우측 영역은 별도 처리 필요 */
body.hero-on-screen>header a[data-auth-btn] {
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

body.hero-on-screen>header a[data-auth-btn]:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* 회원가입(primary, 검정 채움)은 어두운 배경 위에서 흰 박스로 반전 */
body.hero-on-screen>header a[data-auth-btn-primary] {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: rgb(26, 29, 36) !important;
}

body.hero-on-screen>header a[data-auth-btn-primary]:hover {
    background-color: rgba(255, 255, 255, 0.92) !important;
    color: rgb(26, 29, 36) !important;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 640px) {
    .hero-sticky {
        min-height: 90vh;
    }
}