/**
 * MCØN 웹사이트 스타일시트 - V2
 * "In the silence of the void, a single light whispers the way."
 * 
 * 디자인 컨셉: 완전한 어둠 속 한줄기 빛
 * - 절대적 블랙 배경
 * - 대각선 빛줄기
 * - 산란된 빛 입자
 * - 패럴렉스 스크롤링
 */

/* ========================================
   Google Fonts 임포트
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@300;400&family=Orbitron:wght@400;700;900&display=swap');

/* ========================================
   전역 스타일 리셋
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   CSS 변수 정의 - 공허와 빛
   ======================================== */
:root {
    /* The Void (공허) - 절대적 어둠 */
    --void-absolute: #000000;
    --void-deep: #020204;
    
    /* The Light (빛) - 한줄기 빛 */
    --light-pure: #ffffff;
    --light-glow: rgba(255, 255, 255, 0.4);
    --light-scatter: rgba(255, 255, 255, 0.15);
    --light-whisper: rgba(255, 255, 255, 0.05);
    
    /* Accent - 미묘한 퀀텀 힌트 */
    --quantum-whisper: rgba(0, 217, 255, 0.1);
    --quantum-glow: rgba(0, 217, 255, 0.3);
    
    /* Typography (타이포그래피) */
    --text-bright: rgba(255, 255, 255, 0.9);
    --text-dim: rgba(255, 255, 255, 0.5);
    --text-faint: rgba(255, 255, 255, 0.25);
    --text-whisper: rgba(255, 255, 255, 0.1);
    
    /* Fonts */
    --font-display: 'Orbitron', sans-serif;
    --font-poetic: 'Cormorant Garamond', 'Georgia', serif;
    --font-body: 'Inter', system-ui, sans-serif;
    
    /* Transitions */
    --transition-slow: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 스크롤 기반 변수 (JavaScript에서 업데이트) */
    --scroll-y: 0px;
    --scroll-progress: 0;
    
    /* 워프 효과 변수 */
    --warp-progress: 0;
    --warp-intensity: 0;
}

/* ========================================
   Body - 절대적 공허 + 스냅 스크롤
   ======================================== */
html {
    /* CSS 스냅 비활성화 - JavaScript로 제어 */
    overflow-y: auto;
    height: 100%;
}

body {
    font-family: var(--font-poetic);
    background: var(--void-absolute);
    color: var(--text-dim);
    line-height: 1.8;
    min-height: 100%;
    overflow-x: hidden;
    position: relative;
}

/* 스냅 섹션 - 100vh 고정 */
.snap-section {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* ========================================
   빛줄기 - 대각선으로 가로지르는 한줄기 빛
   ======================================== */
.light-beam {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 1;
    
    /* 대각선 빛줄기 그라디언트 - 매우 밝게 */
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 18%,
        rgba(255, 255, 255, 0.05) 22%,
        rgba(255, 255, 255, 0.15) 28%,
        rgba(255, 255, 255, 0.30) 33%,
        rgba(255, 255, 255, 0.45) 38%,
        rgba(255, 255, 255, 0.30) 43%,
        rgba(255, 255, 255, 0.15) 48%,
        rgba(255, 255, 255, 0.05) 53%,
        transparent 58%,
        transparent 100%
    );
    
    /* 블러 효과 */
    filter: blur(30px);
    
    /* 초기 상태 - JavaScript에서 업데이트 */
    opacity: 0.6;
    
    /* 느린 호흡 애니메이션 */
    animation: light-breathe 12s ease-in-out infinite;
    
    will-change: transform, opacity, filter;
    transition: opacity 0.3s ease-out;
}

@keyframes light-breathe {
    0%, 100% { 
        filter: blur(30px) brightness(1);
    }
    50% { 
        filter: blur(25px) brightness(1.5);
    }
}

/* ========================================
   패럴렉스 레이어 - 깊이감 있는 빛 입자
   워프 효과: 점 → 선 → 점 (스타워즈 스타일)
   ======================================== */
.parallax-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    pointer-events: none;
    z-index: 0;
    will-change: transform, background-image;
}

/* 레이어 1: 가장 먼 배경 - 거의 움직이지 않음 */
.layer-distant {
    opacity: 0.9;
}

/* 레이어 2: 중간 거리 */
.layer-mid {
    opacity: 0.95;
}

/* 레이어 3: 가까운 입자 - 빠르게 움직임 */
.layer-near {
    opacity: 1;
}

/* 기본 반짝임 애니메이션 (워프 중이 아닐 때만) */
body:not(.warping) .layer-mid {
    animation: twinkle-mid 12s ease-in-out infinite;
}

body:not(.warping) .layer-near {
    animation: twinkle-near 8s ease-in-out infinite;
}

@keyframes twinkle-mid {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes twinkle-near {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ========================================
   섹션 컨텐츠 래퍼
   ======================================== */
.section-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ========================================
   헤더 - 시적 인트로
   ======================================== */
.header {
    text-align: center;
    padding: 0 40px;
    /* snap-section에서 flex 속성 상속 */
}

/* 로고 스타일 */
.logo {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 400;
    letter-spacing: 0.5em;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1em;
}

.logo-letter {
    color: var(--text-dim);
    transition: var(--transition-medium);
}

.logo:hover .logo-letter {
    color: var(--text-bright);
}

/* Ø 심볼 - 메인 */
.void-symbol-main {
    color: var(--light-pure);
    font-size: 1.3em;
    position: relative;
    
    /* 스크롤에 따른 스케일 및 글로우 */
    transform: scale(calc(0.8 + (var(--scroll-progress) * 0.4)));
    
    text-shadow: 
        0 0 20px var(--light-glow),
        0 0 40px var(--light-scatter),
        0 0 80px var(--light-whisper);
    
    animation: void-pulse 6s ease-in-out infinite;
    
    will-change: transform, text-shadow;
}

@keyframes void-pulse {
    0%, 100% { 
        text-shadow: 
            0 0 20px var(--light-glow),
            0 0 40px var(--light-scatter),
            0 0 80px var(--light-whisper);
    }
    50% { 
        text-shadow: 
            0 0 30px var(--light-glow),
            0 0 60px var(--light-scatter),
            0 0 100px var(--light-whisper),
            0 0 150px var(--text-whisper);
    }
}

/* 태그라인 */
.tagline {
    font-family: var(--font-poetic);
    font-size: 1.4rem;
    font-weight: 300;
    font-style: italic;
    line-height: 2;
    color: var(--text-dim);
    margin-bottom: 30px;
    letter-spacing: 0.05em;
}

/* 서브타이틀 */
.subtitle {
    font-family: var(--font-poetic);
    font-size: 1rem;
    color: var(--text-faint);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* ========================================
   섹션 공통 스타일
   ======================================== */
section {
    text-align: center;
}

/* ========================================
   시적 텍스트 스타일
   ======================================== */
.poetic-text {
    font-family: var(--font-poetic);
    font-weight: 300;
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    line-height: 2.2;
    color: var(--text-dim);
    margin-bottom: 40px;
}

.poetic-text p {
    margin-bottom: 0.5em;
}

.poetic-text em {
    font-style: italic;
    color: var(--text-bright);
    text-shadow: 0 0 30px var(--light-scatter);
}

.poetic-text .highlight {
    font-size: 1.5rem;
    color: var(--text-bright);
    margin-top: 20px;
}

/* ========================================
   텍스트 등장 효과 (Intersection Observer)
   ======================================== */
.reveal-text {
    opacity: 0;
    transform: translateY(50px);
    transition: 
        opacity 1.2s ease-out,
        transform 1.2s ease-out;
}

.reveal-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 헤더 텍스트는 초기에 보이도록 (JavaScript에서 처리) */
.header .reveal-text {
    opacity: 0;
    transform: translateY(30px);
}

.header .reveal-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 순차적 딜레이 - 각 섹션 내에서 적용 */
section .reveal-text:nth-child(1) { transition-delay: 0s; }
section .reveal-text:nth-child(2) { transition-delay: 0.2s; }
section .reveal-text:nth-child(3) { transition-delay: 0.4s; }
section .reveal-text:nth-child(4) { transition-delay: 0.6s; }

/* ========================================
   Section 1: The Void
   ======================================== */
.section-void .void-symbol-large {
    font-family: var(--font-display);
    font-size: 12rem;
    color: var(--light-pure);
    margin: 60px 0;
    
    text-shadow: 
        0 0 30px var(--light-glow),
        0 0 60px var(--light-scatter),
        0 0 120px var(--light-whisper);
    
    animation: void-large-pulse 8s ease-in-out infinite;
}

@keyframes void-large-pulse {
    0%, 100% { 
        opacity: 0.8;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.05);
    }
}

/* ========================================
   Section 2: The Light
   ======================================== */
.section-light {
    position: relative;
}

.light-divider {
    width: 1px;
    height: 150px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--light-scatter),
        var(--light-glow),
        var(--light-scatter),
        transparent
    );
    margin: 60px 0;
    animation: light-divider-pulse 4s ease-in-out infinite;
}

@keyframes light-divider-pulse {
    0%, 100% { opacity: 0.5; height: 150px; }
    50% { opacity: 1; height: 180px; }
}

/* ========================================
   Section 3: The Journey
   ======================================== */
.journey-letters {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
}

.journey-item {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px 0;
    border-bottom: 1px solid var(--text-whisper);
    transition: var(--transition-fast);
}

.journey-item:hover {
    border-bottom-color: var(--light-scatter);
}

.journey-item .letter {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--text-faint);
    width: 80px;
    text-align: center;
    transition: var(--transition-fast);
}

.journey-item:hover .letter {
    color: var(--light-pure);
    text-shadow: 0 0 20px var(--light-scatter);
}

.journey-item .meaning {
    font-family: var(--font-poetic);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--text-dim);
    transition: var(--transition-fast);
}

.journey-item:hover .meaning {
    color: var(--text-bright);
}

/* ========================================
   Section 4: The Philosophy
   ======================================== */
.section-philosophy .quote {
    font-family: var(--font-poetic);
    font-size: 2rem;
    font-style: italic;
    color: var(--text-bright);
    margin-bottom: 80px;
    padding: 40px;
    border-left: 2px solid var(--light-scatter);
    text-shadow: 0 0 40px var(--light-whisper);
}

.section-philosophy .final-words {
    margin-top: 60px;
    font-size: 1.5rem;
}

.section-philosophy .final-words em {
    font-size: 1.8rem;
}

/* ========================================
   푸터
   ======================================== */
.footer {
    text-align: center;
    padding: 0 40px;
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0.3em;
    color: var(--text-faint);
    margin-bottom: 40px;
}

.footer-poetry {
    font-family: var(--font-poetic);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-dim);
    line-height: 2;
    margin-bottom: 40px;
}

.footer-poetry p {
    margin-bottom: 5px;
}

.infinity-symbol {
    font-size: 3rem;
    color: var(--text-faint);
    opacity: 0.5;
    animation: infinity-pulse 6s ease-in-out infinite;
}

@keyframes infinity-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

/* ========================================
   반응형 디자인
   ======================================== */
@media (max-width: 1024px) {
    .logo {
        font-size: 4rem;
    }
    
    .section-void .void-symbol-large {
        font-size: 8rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 25px;
    }
    
    .logo {
        font-size: 2.5rem;
        letter-spacing: 0.3em;
    }
    
    .header {
        padding: 20vh 0 10vh;
    }
    
    .tagline {
        font-size: 1.1rem;
    }
    
    .poetic-text {
        font-size: 1.1rem;
    }
    
    .section-void .void-symbol-large {
        font-size: 6rem;
    }
    
    .section-philosophy .quote {
        font-size: 1.4rem;
        padding: 20px;
    }
    
    .journey-item {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .journey-item .letter {
        width: auto;
    }
    
    /* 모바일에서 중간 레이어 제거 (성능) */
    .layer-mid {
        display: none;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 2rem;
    }
    
    .section-void .void-symbol-large {
        font-size: 4rem;
    }
    
    .main-content {
        gap: 20vh;
    }
}

/* ========================================
   모션 감소 선호 시
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .light-beam,
    .parallax-layer,
    .void-symbol-main,
    .void-symbol-large,
    .light-divider,
    .infinity-symbol {
        animation: none;
    }
    
    .reveal-text {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ========================================
   스크롤바 커스텀
   ======================================== */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: var(--void-absolute);
}

::-webkit-scrollbar-thumb {
    background: var(--text-whisper);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-faint);
}

/* ========================================
   선택 영역 스타일
   ======================================== */
::selection {
    background: rgba(255, 255, 255, 0.15);
    color: var(--light-pure);
}