/* ── 7일 창조 체험 v2 ── */

/* ── 기본 리셋 ── */
.creation-page {
    background: #000;
}

/* ── 네비게이션 숨김/노출 ── */
.creation-page .top-nav-row {
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.creation-page .top-nav-title {
    margin-top: 0;
}

.creation-page.nav-visible .top-nav-row {
    transform: translateY(0);
    opacity: 1;
}

.creation-main {
    background: #000;
}

html:has(.creation-page) {
    scroll-snap-type: y mandatory;
}

/* ── 섹션 공통 ── */
.cr-section {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    scroll-snap-align: start;
}

.cr-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 640px;
    width: 100%;
    padding: 6rem 2rem;
}

/* ── 날 번호 (대형 워터마크) ── */
.cr-day-num {
    font-family: 'Noto Serif KR', Georgia, serif;
    font-size: clamp(6rem, 18vw, 12rem);
    font-weight: 200;
    line-height: 1;
    color: rgba(255, 255, 255, 0.04);
    margin-bottom: -1.5rem;
    pointer-events: none;
    user-select: none;
}

/* ── 타이포그래피 ── */
.cr-label {
    display: block;
    font-family: 'Noto Serif KR', Georgia, serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 1.5rem;
}

.cr-title {
    font-family: 'Noto Serif KR', Georgia, serif;
    font-size: clamp(1.5rem, 5vw, 2.6rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.7;
    letter-spacing: 0.03em;
    margin: 0 0 2rem;
}

.cr-body {
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    line-height: 2.2;
    letter-spacing: 0.02em;
    margin: 0 0 1.5rem;
}

.cr-verdict {
    font-family: 'Noto Serif KR', Georgia, serif;
    font-size: clamp(0.85rem, 2vw, 1rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.08em;
    margin: 0;
}

.cr-verdict-final {
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(1rem, 2.5vw, 1.15rem);
}

.cr-ref {
    display: block;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.25);
    margin-top: 1.5rem;
}

/* ── 스크롤 힌트 (프롤로그) ── */
.cr-scroll-hint {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    animation: cr-hint-fade 1.5s ease-in-out 0.5s both;
}

.cr-scroll-hint-text {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 400;
}

.cr-scroll-arrow {
    display: block;
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
    position: relative;
    animation: cr-scroll-bounce 2s ease-in-out infinite;
}

.cr-scroll-arrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

@keyframes cr-scroll-bounce {
    0%, 100% { transform: translateY(-4px); opacity: 0.4; }
    50% { transform: translateY(4px); opacity: 0.8; }
}

@keyframes cr-hint-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ── 장식 레이어 (.cr-deco) ── */
.cr-deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* 프롤로그: 완전한 어둠 */
.cr-prologue {
    background: #000;
}

.cr-deco-void::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(40, 40, 80, 0.15) 0%, transparent 70%);
    animation: cr-void-pulse 6s ease-in-out infinite;
}

@keyframes cr-void-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
}

/* 1일차: 빛 — 어둠에서 빛이 서서히 드러남 */
.cr-day1 {
    background: #000;
}

/* 배경색: 빛이 먼저 나타난 뒤(0.8s) 어둠→네이비 전환 */
.cr-day1.cr-revealed {
    animation: cr-day1-bg 4s ease-out 0.8s forwards;
}

@keyframes cr-day1-bg {
    0% { background: #000; }
    100% { background: #0b1526; }
}

.cr-day1 .cr-title {
    text-shadow: 0 0 80px rgba(220, 230, 255, 0.5), 0 0 160px rgba(200, 210, 255, 0.2);
}

/* 빛 — opacity-only 블룸 (scale 제거, 단계적 밝기 증가) */
.cr-deco-light {
    opacity: 0;
    background:
        /* 중앙 밝은 핵심점 */
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 0.5%, rgba(200, 215, 255, 0.15) 3%, transparent 8%),
        /* 중앙 소프트 글로우 */
        radial-gradient(circle at 50% 42%, rgba(180, 200, 240, 0.12) 0%, rgba(120, 150, 200, 0.04) 15%, transparent 35%),
        /* 방사형 빛줄기 */
        conic-gradient(
            from 0deg at 50% 42%,
            transparent 0deg, rgba(255,255,255,0.18) 1deg, transparent 2.5deg,
            transparent 18deg, rgba(220,230,255,0.10) 19deg, transparent 20.5deg,
            transparent 42deg, rgba(255,255,255,0.14) 43deg, transparent 44.5deg,
            transparent 68deg, rgba(220,230,255,0.08) 69deg, transparent 70deg,
            transparent 88deg, rgba(255,255,255,0.20) 89deg, transparent 91deg,
            transparent 110deg, rgba(220,230,255,0.06) 111deg, transparent 112.5deg,
            transparent 138deg, rgba(255,255,255,0.12) 139deg, transparent 140.5deg,
            transparent 162deg, rgba(220,230,255,0.09) 163deg, transparent 164.5deg,
            transparent 178deg, rgba(255,255,255,0.18) 179deg, transparent 181deg,
            transparent 200deg, rgba(220,230,255,0.07) 201deg, transparent 202.5deg,
            transparent 222deg, rgba(255,255,255,0.13) 223deg, transparent 224.5deg,
            transparent 248deg, rgba(220,230,255,0.08) 249deg, transparent 250.5deg,
            transparent 268deg, rgba(255,255,255,0.20) 269deg, transparent 271deg,
            transparent 295deg, rgba(220,230,255,0.06) 296deg, transparent 297.5deg,
            transparent 318deg, rgba(255,255,255,0.11) 319deg, transparent 320.5deg,
            transparent 342deg, rgba(220,230,255,0.09) 343deg, transparent 344.5deg,
            transparent 360deg
        );
}

/* 진입 시 단계적 블룸: 미세한 빛→완전 등장→호흡 루프 */
.cr-day1.cr-revealed .cr-deco-light {
    animation: cr-light-bloom 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cr-light-bloom {
    0%   { opacity: 0; }
    8%   { opacity: 0.06; }   /* 아주 미세한 빛 힌트 */
    25%  { opacity: 0.2; }    /* 중앙 글로우 인지 */
    50%  { opacity: 0.5; }    /* 빛줄기 서서히 드러남 */
    75%  { opacity: 0.8; }
    100% { opacity: 1; }
}

/* 빛줄기 마스크 — 중앙에서 바깥으로 퍼지는 비네팅 */
.cr-deco-light::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 42%,
        transparent 0%,
        rgba(11, 21, 38, 0.3) 10%,
        rgba(11, 21, 38, 0.85) 35%,
        #0b1526 55%);
}

/* 십자 빛줄기 — 메인 블룸 후(1.2s) 등장 */
.cr-deco-light::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        /* 수평 빛줄기 */
        linear-gradient(to right,
            transparent 20%,
            rgba(200, 215, 255, 0.03) 35%,
            rgba(255, 255, 255, 0.12) 48%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.12) 52%,
            rgba(200, 215, 255, 0.03) 65%,
            transparent 80%),
        /* 수직 빛줄기 */
        linear-gradient(to bottom,
            transparent 15%,
            rgba(200, 215, 255, 0.02) 30%,
            rgba(255, 255, 255, 0.1) 40%,
            rgba(255, 255, 255, 0.18) 42%,
            rgba(255, 255, 255, 0.1) 44%,
            rgba(200, 215, 255, 0.02) 55%,
            transparent 70%);
    mix-blend-mode: screen;
    transition: opacity 2.5s ease-out;
}

.cr-day1.cr-revealed .cr-deco-light::after {
    opacity: 1;
    transition-delay: 1.2s;
}


/* 2일차: 궁창 — 어둠에서 물이 나뉘며 궁창이 드러남 */
.cr-day2 {
    background: linear-gradient(to bottom,
        #051228 0%,
        #071c42 38%,
        #081e48 44%,
        #0a2255 48%,
        #071a3a 52%,
        #061535 56%,
        #051230 62%,
        #020c1e 100%);
}

.cr-day2 .cr-title {
    text-shadow: 0 0 60px rgba(122, 184, 232, 0.3);
}

/* ②③ 궁창 분리선: 중앙에서 양옆으로 펼쳐지며 글로우 확대 */
.cr-deco-sky::before {
    content: '';
    position: absolute;
    top: 48%;
    left: 50%;
    width: 0;
    height: 2px;
    z-index: 2;
    transform: translateX(-50%);
    background: linear-gradient(to right,
        transparent 0%,
        rgba(122, 184, 232, 0.3) 10%,
        rgba(160, 210, 255, 0.5) 40%,
        rgba(180, 220, 255, 0.6) 50%,
        rgba(160, 210, 255, 0.5) 60%,
        rgba(122, 184, 232, 0.3) 90%,
        transparent 100%);
    box-shadow: 0 0 12px 2px rgba(122, 184, 232, 0.15),
                0 0 30px 4px rgba(122, 184, 232, 0.06);
    transition: width 2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.cr-day2.cr-revealed .cr-deco-sky::before {
    width: 100%;
}


/* 3일차: 땅과 식물 — 하단 지평선 + 초록 파티클 */
.cr-day3 {
    background: linear-gradient(to bottom,
        #040e04 0%,
        #0a2210 50%,
        #102e12 75%,
        #183a18 100%);
}

.cr-day3 .cr-title {
    text-shadow: 0 0 60px rgba(93, 186, 110, 0.25);
}

.cr-deco-earth::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(to top, rgba(30, 70, 30, 0.15), transparent);
}

.cr-deco-earth::after {
    content: '';
    position: absolute;
    bottom: 12%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(93, 186, 110, 0.06) 0%, transparent 70%);
    animation: cr-grow 5s ease-in-out infinite;
}

@keyframes cr-grow {
    0%, 100% { transform: translateX(-50%) scale(0.8); opacity: 0.4; }
    50% { transform: translateX(-50%) scale(1.2); opacity: 0.7; }
}

/* 4일차: 해, 달, 별 — 점 배경 + 글로우 */
.cr-day4 {
    background: radial-gradient(ellipse at 50% 30%, #0c0035 0%, #050020 50%, #010010 100%);
}

.cr-day4 .cr-title {
    text-shadow: 0 0 80px rgba(255, 209, 102, 0.35), 0 0 200px rgba(255, 209, 102, 0.1);
}

.cr-deco-stars {
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 25% 55%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 40% 15%, rgba(255,209,102,0.7), transparent),
        radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1.5px 1.5px at 80% 60%, rgba(255,209,102,0.5), transparent),
        radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 60% 45%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 35% 85%, rgba(255,209,102,0.4), transparent);
    animation: cr-twinkle 3s ease-in-out infinite alternate;
}

.cr-deco-stars::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 209, 102, 0.12) 0%, transparent 70%);
    box-shadow: 0 0 60px 20px rgba(255, 209, 102, 0.06);
}

@keyframes cr-twinkle {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* 5일차: 물고기와 새 — 물결 + 깊은 바다 */
.cr-day5 {
    background: linear-gradient(to bottom,
        #031a2e 0%,
        #062840 40%,
        #073550 60%,
        #042030 100%);
}

.cr-day5 .cr-title {
    text-shadow: 0 0 60px rgba(72, 202, 228, 0.3);
}

.cr-deco-sea::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 48%,
            rgba(72, 202, 228, 0.03) 49%,
            rgba(72, 202, 228, 0.05) 50%,
            rgba(72, 202, 228, 0.03) 51%,
            transparent 52%,
            transparent 100%
        );
    animation: cr-wave 8s linear infinite;
}

@keyframes cr-wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(25%); }
}

/* 6일차: 동물과 사람 — 따뜻한 대지 */
.cr-day6 {
    background: radial-gradient(ellipse at 50% 60%, #2d1300 0%, #1a0a00 50%, #0d0500 100%);
}

.cr-day6 .cr-title {
    text-shadow: 0 0 60px rgba(224, 122, 58, 0.3), 0 0 120px rgba(224, 122, 58, 0.1);
}

.cr-deco-human::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(50, 25, 5, 0.3), transparent);
}

.cr-deco-human::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 122, 58, 0.05) 0%, transparent 70%);
    animation: cr-life-glow 4s ease-in-out infinite;
}

@keyframes cr-life-glow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.8; }
}

/* 7일차: 안식 — 황금빛 고요 */
.cr-day7 {
    background: radial-gradient(ellipse at 50% 40%, #1e1600 0%, #120e00 50%, #080600 100%);
}

.cr-day7 .cr-title {
    text-shadow: 0 0 80px rgba(244, 192, 111, 0.3), 0 0 200px rgba(244, 192, 111, 0.1);
}

.cr-deco-rest::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 192, 111, 0.04) 0%, transparent 60%);
    animation: cr-rest-glow 6s ease-in-out infinite;
}

@keyframes cr-rest-glow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* 에필로그 */
.cr-epilogue {
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(to bottom, #0d0800, #000);
}

.cr-epilogue-text {
    font-family: 'Noto Serif KR', Georgia, serif;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 400;
    color: rgba(244, 192, 111, 0.85);
    line-height: 1.8;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.cr-epilogue-links {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 2.5rem;
}

.cr-btn {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 1.4rem;
    border: none;
    border-radius: 10px;
    background: rgba(244, 192, 111, 0.9);
    color: #1a1000;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.cr-btn-ghost {
    background: transparent;
    border: 1px solid rgba(244, 192, 111, 0.4);
    color: rgba(244, 192, 111, 0.85);
}

@media (hover: hover) and (pointer: fine) {
    .cr-btn:hover {
        background: rgba(244, 192, 111, 1);
        transform: translateY(-1px);
    }
    .cr-btn-ghost:hover {
        background: rgba(244, 192, 111, 0.1);
        border-color: rgba(244, 192, 111, 0.7);
        color: #f4c06f;
    }
}

.cr-btn:active {
    transform: scale(0.97);
}

/* ── 스크롤 페이드인 ── */
.cr-fade {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(5px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cr-fade.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* 섹션 내 순차 딜레이 (최대 1초 이내 완료) */
.cr-inner .cr-fade:nth-child(1) { transition-delay: 0s; }
.cr-inner .cr-fade:nth-child(2) { transition-delay: 0.15s; }
.cr-inner .cr-fade:nth-child(3) { transition-delay: 0.3s; }
.cr-inner .cr-fade:nth-child(4) { transition-delay: 0.5s; }
.cr-inner .cr-fade:nth-child(5) { transition-delay: 0.7s; }
.cr-inner .cr-fade:nth-child(6) { transition-delay: 0.9s; }

/* ── 진행 바 ── */
.cr-progress {
    position: fixed;
    bottom: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    z-index: 100;
    transition: opacity 0.3s ease;
}

.cr-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, rgba(232,213,160,0.6), rgba(244,192,111,0.8));
    transition: width 0.3s ease;
}

.cr-progress-label {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.3);
}

/* ── 감소된 모션 ── */
@media (prefers-reduced-motion: reduce) {
    .cr-fade {
        transition: opacity 0.15s ease !important;
        transform: none !important;
        filter: none !important;
    }
    .cr-deco * {
        animation: none !important;
    }
    .cr-scroll-arrow {
        animation: none !important;
    }
}

/* ── 모바일 (≤576px) ── */
@media (max-width: 576px) {
    .cr-inner {
        padding: 5rem 1.25rem;
    }

    .cr-day-num {
        font-size: clamp(4rem, 20vw, 7rem);
        margin-bottom: -1rem;
    }

    .cr-title {
        font-size: clamp(1.3rem, 6vw, 1.7rem);
    }

    .cr-body {
        font-size: 0.88rem;
        line-height: 2;
    }

    .cr-scroll-hint {
        bottom: 4.5rem;
    }

    .cr-progress {
        height: 4px;
    }

    .cr-progress-label {
        right: 8px;
        bottom: 8px;
        font-size: 0.6rem;
    }

    .cr-epilogue-links {
        flex-direction: column;
        align-items: center;
    }

    .cr-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── 태블릿 (577px–1024px) ── */
@media (min-width: 577px) and (max-width: 1024px) {
    .cr-inner {
        max-width: 580px;
        padding: 4.5rem 2rem;
    }

    .cr-day-num {
        font-size: clamp(5rem, 14vw, 9rem);
    }

    .cr-title {
        font-size: clamp(1.4rem, 4vw, 2.2rem);
    }
}

/* ── 데스크탑 (≥1025px) ── */
@media (min-width: 1025px) {
    .cr-inner {
        max-width: 680px;
        padding: 6rem 2rem;
    }

    .cr-section {
        min-height: 100vh;
    }
}