/* === Reset & Base === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: #1e2a3a;
    background: #f0f4f8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    /* Palette: #e8e0d8 #a8d0d0 #d8d0e8 #f8fafc #c8dae8 #b8c8d8 #1e2a3a #f0f4f8 */
}

/* === Sections === */
.section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.snap-section {
    scroll-snap-align: start;
}

/* === Gradient Mesh === */
.gradient-mesh, .gradient-mesh-bg, .gradient-mesh-full {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(200, 218, 232, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(216, 208, 232, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(232, 224, 216, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 40%, rgba(168, 208, 208, 0.2) 0%, transparent 50%);
    background-size: 200% 200%;
    animation: meshDrift 90s ease-in-out infinite alternate;
}

.mesh-warm {
    background:
        radial-gradient(ellipse at 30% 60%, rgba(232, 224, 216, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(216, 208, 232, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(200, 218, 232, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 20%, rgba(168, 208, 208, 0.3) 0%, transparent 50%);
    background-size: 200% 200%;
    animation: meshDrift 80s ease-in-out infinite alternate;
}

.mesh-warmest {
    background:
        radial-gradient(ellipse at 25% 40%, rgba(232, 224, 216, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 60%, rgba(216, 208, 232, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 20%, rgba(168, 208, 208, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(200, 218, 232, 0.3) 0%, transparent 50%);
    background-size: 200% 200%;
    animation: meshDrift 70s ease-in-out infinite alternate;
}

@keyframes meshDrift {
    0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; }
    25% { background-position: 30% 20%, 70% 40%, 20% 60%, 80% 30%; }
    50% { background-position: 50% 50%, 30% 70%, 80% 20%, 40% 80%; }
    75% { background-position: 70% 30%, 50% 90%, 30% 40%, 60% 10%; }
    100% { background-position: 100% 100%, 0% 50%, 50% 0%, 100% 50%; }
}

/* === Frost Glass === */
.frost-panel {
    background: rgba(240, 244, 248, 0.6);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(200, 218, 232, 0.4);
}

.frost-overlay {
    background: rgba(248, 250, 252, 0.7);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
}

/* === Skeleton Loading === */
.skeleton-text {
    position: relative;
}

.skeleton-text.loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #b8c8d8 25%, #c8dae8 50%, #b8c8d8 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
    z-index: 2;
}

.skeleton-text.loading > * {
    opacity: 0;
}

.skeleton-text.revealed > * {
    opacity: 1;
    transition: opacity 500ms ease;
}

.skeleton-text.revealed::before {
    opacity: 0;
    transition: opacity 300ms ease;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === Section 1: Opening Split === */
#opening-split {
    display: grid;
    grid-template-columns: 55fr 45fr;
    height: 100vh;
}

.split-left {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.hero-korean {
    font-family: 'Noto Serif KR', serif;
    font-size: clamp(5rem, 15vw, 14rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1e2a3a;
    word-break: keep-all;
    text-rendering: optimizeLegibility;
}

.hero-korean .char {
    display: inline-block;
    opacity: 0;
    transition: opacity 800ms ease;
}

.hero-korean .char.visible {
    opacity: 1;
}

.split-right {
    position: relative;
    overflow: hidden;
}

.geo-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* === Section 2: Convergence === */
#convergence {
    display: grid;
    grid-template-columns: 55fr 45fr;
    height: 100vh;
    position: relative;
}

.convergence-left, .convergence-right {
    transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.convergence-left.converged {
    transform: translateX(10%);
}

.convergence-right.converged {
    transform: translateX(-10%);
}

.convergence-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 48px 96px;
    border-radius: 4px;
    z-index: 10;
    text-align: center;
}

.headline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: #1e2a3a;
    line-height: 1.2;
    white-space: nowrap;
}

/* === Section 3: Drift === */
.drift-section {
    min-height: 200vh;
    position: relative;
    padding: 96px 0;
}

.gradient-mesh-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.drift-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
}

.thought-fragment {
    max-width: 60ch;
    margin-bottom: 192px;
    position: relative;
    padding: 48px;
}

.fragment-left {
    margin-right: auto;
}

.fragment-right {
    margin-left: auto;
}

.thought-fragment h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.4;
    color: #1e2a3a;
}

.fragment-shape {
    position: absolute;
    width: 120px;
    height: 120px;
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
}

.fragment-left .fragment-shape {
    right: -60px;
    top: -30px;
}

.fragment-right .fragment-shape {
    left: -60px;
    bottom: -30px;
}

.geo-pentagon {
    background: rgba(216, 208, 232, 0.4);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    animation: floatShape 120s linear infinite;
}

.geo-hexagon {
    background: rgba(200, 218, 232, 0.3);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    animation: floatVertical 20s ease-in-out infinite alternate;
}

.geo-triangle {
    background: rgba(184, 200, 216, 0.35);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    animation: floatShape 90s linear infinite reverse;
}

.geo-irregular {
    background: rgba(232, 224, 216, 0.3);
    clip-path: polygon(30% 0%, 70% 5%, 100% 35%, 95% 70%, 65% 100%, 25% 90%, 0% 60%, 5% 25%);
    animation: floatShape 100s linear infinite;
}

@keyframes floatShape {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes floatVertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

/* === Section 4: Expansion === */
#expansion {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative;
}

.gradient-mesh-full {
    position: absolute;
    inset: 0;
    z-index: 0;
}

#expansion .geo-container {
    z-index: 1;
}

.expansion-text {
    position: relative;
    z-index: 2;
    text-align: center;
}

.korean-final {
    font-family: 'Noto Serif KR', serif;
    font-weight: 300;
    font-size: clamp(2.5rem, 8vw, 7rem);
    color: #1e2a3a;
    opacity: 0.7;
    word-break: keep-all;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.04em;
}

/* === Section 5: Return === */
#return-section {
    display: grid;
    grid-template-columns: 45fr 55fr;
    height: 100vh;
    position: relative;
}

.return-left {
    position: relative;
}

.return-right {
    position: relative;
}

.return-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.return-shape {
    width: 120px;
    height: 120px;
}

.decagon-morph {
    width: 100%;
    height: 100%;
}

.return-domain {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: #1e2a3a;
}

.return-tagline {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    line-height: 1.7;
    color: #1e2a3a;
    opacity: 0.7;
}

.circle-pulse {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1.5px solid rgba(168, 208, 208, 0.5);
    animation: pulse 4s ease-in-out infinite;
    margin-top: 24px;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 0.8; }
}

/* === Geometric Shapes (generated by JS) === */
.geo-shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    animation: float var(--duration, 25s) ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s);
}

@keyframes float {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(10px, -15px) rotate(30deg); }
    66% { transform: translate(-8px, 10px) rotate(-20deg); }
    100% { transform: translate(5px, -5px) rotate(15deg); }
}

/* === Responsive === */
@media (max-width: 768px) {
    #opening-split {
        grid-template-columns: 1fr;
        grid-template-rows: 60vh 40vh;
    }

    #convergence {
        grid-template-columns: 1fr;
    }

    .convergence-left { display: none; }
    .convergence-right { display: none; }

    .convergence-center {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        padding: 24px;
        background: rgba(248, 250, 252, 0.85);
    }

    .headline {
        white-space: normal;
    }

    #return-section {
        grid-template-columns: 1fr;
    }

    .return-left { display: none; }

    .thought-fragment {
        margin-bottom: 96px;
    }
}