/* ===== Custom Properties ===== */
:root {
    --hot-magenta: #FF2D8C;
    --electric-teal: #00F5D4;
    --digital-lilac: #C77DFF;
    --acid-lemon: #EEFF00;
    --midnight-grape: #1A0033;
    --cream-static: #FFF5F0;
    --candy-pink: #FF6B9D;
    --neon-cyan: #00D4AA;
    --chrome-1: #e0e0e0;
    --chrome-2: #ffffff;
    --chrome-3: #b0b0b0;
    --chrome-4: #c0c0c0;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    color: var(--cream-static);
    background: var(--midnight-grape);
    overflow-x: hidden;
    line-height: 1.75;
}

/* ===== Scanlines Overlay ===== */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.04) 2px,
        rgba(0, 0, 0, 0.04) 4px
    );
}

/* ===== Fixed Watermark ===== */
.watermark {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.watermark-domain {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--cream-static);
}

.watermark-hangul {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: var(--electric-teal);
}

/* ===== Chapter Base ===== */
.chapter {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ===== Chapter 1: The Arrival ===== */
.chapter-arrival {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(ellipse at 30% 70%, var(--candy-pink), var(--digital-lilac) 50%, var(--electric-teal));
    animation: gradient-shift 20s ease infinite alternate;
}

@keyframes gradient-shift {
    0% { background: radial-gradient(ellipse at 30% 70%, var(--candy-pink), var(--digital-lilac) 50%, var(--electric-teal)); }
    33% { background: radial-gradient(ellipse at 50% 30%, var(--candy-pink), var(--digital-lilac) 50%, var(--neon-cyan)); }
    66% { background: radial-gradient(ellipse at 70% 60%, var(--hot-magenta), var(--digital-lilac) 50%, var(--electric-teal)); }
    100% { background: radial-gradient(ellipse at 40% 50%, var(--candy-pink), var(--digital-lilac) 50%, var(--electric-teal)); }
}

.arrival-title {
    display: flex;
    gap: 2vw;
    position: relative;
}

.arrival-title .char {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(6rem, 14vw, 12rem);
    letter-spacing: 0.08em;
    color: var(--cream-static);
    text-shadow: 0 0 40px rgba(255, 45, 140, 0.4), 0 0 80px rgba(199, 125, 255, 0.2);
    opacity: 0;
    will-change: transform, opacity;
}

.char-1 {
    transform: translateX(-50px) translateY(-20px);
}

.char-2 {
    transform: translateX(50px) translateY(20px);
}

.char.visible {
    animation: glitch-in 0.6s cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes glitch-in {
    0% { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(3px); }
    5% { transform: translateX(-3px); }
    10% { transform: translateX(0); clip-path: inset(0); }
    100% { opacity: 1; transform: translateX(0) translateY(0); clip-path: inset(0); }
}

.arrival-subtitle {
    font-family: 'Major Mono Display', monospace;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    letter-spacing: 0.15em;
    color: var(--cream-static);
    opacity: 0.6;
    margin-top: 2rem;
    text-transform: uppercase;
}

.arrival-watermark {
    font-family: 'Major Mono Display', monospace;
    font-size: 1rem;
    color: var(--cream-static);
    opacity: 0.3;
    margin-top: 4rem;
    animation: pulse-watermark 4s ease-in-out infinite;
}

@keyframes pulse-watermark {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.4; }
}

/* ===== Chapter 2: Going Ahead ===== */
.chapter-ahead {
    min-height: 120vh;
    background: var(--midnight-grape);
    padding: 10vh 0;
    position: relative;
}

.slash {
    position: absolute;
    width: 200%;
    height: 4px;
    transform-origin: center;
    pointer-events: none;
}

.slash-1 {
    top: 15%;
    left: -50%;
    background: var(--electric-teal);
    transform: rotate(15deg);
    opacity: 0.7;
}

.slash-2 {
    top: 55%;
    left: -50%;
    background: var(--hot-magenta);
    transform: rotate(-15deg);
    opacity: 0.5;
    height: 3px;
}

.slash-3 {
    top: 80%;
    left: -50%;
    background: var(--electric-teal);
    transform: rotate(15deg);
    opacity: 0.4;
    height: 5px;
}

/* Color blocks */
.color-block {
    position: absolute;
    pointer-events: none;
}

.block-magenta {
    width: 180px;
    height: 120px;
    background: var(--hot-magenta);
    top: 20%;
    right: 8vw;
    transform: rotate(15deg);
    opacity: 0.6;
    mix-blend-mode: screen;
}

.block-teal {
    width: 140px;
    height: 200px;
    background: var(--electric-teal);
    top: 45%;
    right: 15vw;
    transform: rotate(-15deg);
    opacity: 0.4;
    mix-blend-mode: screen;
}

.block-teal-sm {
    width: 60px;
    height: 60px;
    background: var(--electric-teal);
    top: 30%;
    right: 30vw;
    transform: rotate(30deg);
    opacity: 0.5;
}

.block-magenta-sm {
    width: 40px;
    height: 100px;
    background: var(--hot-magenta);
    top: 65%;
    right: 5vw;
    transform: rotate(-15deg);
    opacity: 0.5;
}

/* Chrome Hangul */
.chrome-hangul {
    position: absolute;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    background: linear-gradient(135deg, var(--chrome-1), var(--chrome-2), var(--chrome-3), var(--chrome-2), var(--chrome-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: contrast(1.3) brightness(1.1);
    pointer-events: none;
    will-change: transform;
}

.chrome-ah {
    font-size: 15rem;
    top: 10%;
    right: 10vw;
    animation: chrome-rotate 8s ease-in-out infinite alternate;
    opacity: 0.8;
}

.chrome-seo {
    font-size: 10rem;
    top: 50%;
    right: 25vw;
    animation: chrome-rotate 8s ease-in-out infinite alternate-reverse;
    opacity: 0.6;
}

@keyframes chrome-rotate {
    0% { transform: perspective(600px) rotateY(-15deg); }
    100% { transform: perspective(600px) rotateY(15deg); }
}

/* Text column */
.ahead-text {
    position: relative;
    z-index: 10;
    max-width: 38ch;
    margin-left: 12vw;
    padding: 8vh 0;
}

.section-label {
    font-family: 'Major Mono Display', monospace;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    letter-spacing: 0.15em;
    color: var(--electric-teal);
    text-transform: uppercase;
    margin-bottom: 3rem;
}

.ahead-paragraph {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.75;
    color: var(--cream-static);
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.3s cubic-bezier(0.2, 0, 0, 1), transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.ahead-paragraph.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* ===== Chapter 3: Void ===== */
.chapter-void {
    height: 60vh;
    background: var(--digital-lilac);
    position: relative;
    transition: background-color 2s ease;
    /* Dot grid pattern */
    background-image: radial-gradient(circle, rgba(26, 0, 51, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    background-color: var(--digital-lilac);
}

.void-scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--cream-static) 30%, var(--cream-static) 70%, transparent);
    opacity: 0.15;
    animation: drift 30s linear infinite;
}

@keyframes drift {
    0% { top: 100%; }
    100% { top: -3px; }
}

/* ===== Chapter 4: Destination ===== */
.chapter-destination {
    min-height: 120vh;
    background: linear-gradient(180deg, var(--midnight-grape), #0D001A);
    padding: 15vh 0;
    position: relative;
}

.chrome-do {
    font-size: clamp(8rem, 20vw, 18rem);
    top: 15%;
    right: 8vw;
    animation: chrome-rotate 12s ease-in-out infinite alternate;
    opacity: 0.5;
}

.destination-text {
    position: relative;
    z-index: 10;
    max-width: 32ch;
    margin-left: 22vw;
}

.dest-line {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.75;
    color: var(--cream-static);
    margin-bottom: 0.75rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.dest-line.revealed {
    opacity: 1;
    transform: translateY(0);
}

.acid-highlight {
    color: var(--acid-lemon);
    font-weight: 500;
    text-shadow: 0 0 20px rgba(238, 255, 0, 0.4);
}

.highlight-line {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    letter-spacing: 0.08em;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ===== Chapter 5: Again ===== */
.chapter-again {
    height: 80vh;
    background: radial-gradient(ellipse at 30% 70%, var(--candy-pink), var(--digital-lilac) 50%, var(--electric-teal));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Ghost fragments */
.ghost {
    position: absolute;
    opacity: 0.12;
    pointer-events: none;
    animation: ghost-drift 20s linear infinite;
}

.ghost-char-1 {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 8rem;
    color: var(--cream-static);
    top: 10%;
    left: 15%;
}

.ghost-char-2 {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 6rem;
    color: var(--cream-static);
    top: 60%;
    right: 20%;
    animation-delay: -7s;
}

.ghost-char-3 {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 5rem;
    color: var(--cream-static);
    top: 30%;
    right: 10%;
    animation-delay: -12s;
}

.ghost-block-1 {
    width: 120px;
    height: 80px;
    background: var(--hot-magenta);
    top: 70%;
    left: 8%;
    transform: rotate(15deg);
}

.ghost-block-2 {
    width: 80px;
    height: 140px;
    background: var(--electric-teal);
    top: 20%;
    right: 35%;
    transform: rotate(-15deg);
    animation-delay: -4s;
}

.ghost-slash {
    width: 200%;
    height: 3px;
    background: var(--electric-teal);
    top: 45%;
    left: -50%;
    transform: rotate(15deg);
}

@keyframes ghost-drift {
    0% { transform: translateY(0); }
    100% { transform: translateY(30px); }
}

.again-title {
    display: flex;
    gap: 1vw;
    position: relative;
    z-index: 10;
}

.dissolve-char {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(6rem, 14vw, 12rem);
    letter-spacing: 0.08em;
    color: var(--cream-static);
    text-shadow: 0 0 40px rgba(255, 45, 140, 0.3);
    animation: dissolve 4s ease-in-out infinite alternate;
}

.dissolve-char:nth-child(2) {
    animation-delay: 0.5s;
}

@keyframes dissolve {
    0%, 70% { opacity: 1; filter: none; }
    100% { opacity: 0.4; filter: blur(2px); }
}

.final-domain {
    font-family: 'Major Mono Display', monospace;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    letter-spacing: 0.15em;
    color: var(--cream-static);
    margin-top: 4rem;
    opacity: 0;
    transition: opacity 1.5s ease;
    position: relative;
    z-index: 10;
}

.final-domain.revealed {
    opacity: 1;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .ahead-text {
        margin-left: 5vw;
        max-width: 90vw;
    }

    .destination-text {
        margin-left: 5vw;
        max-width: 90vw;
    }

    .chrome-ah {
        font-size: 8rem;
        right: 2vw;
    }

    .chrome-seo {
        font-size: 5rem;
        right: 5vw;
    }

    .chrome-do {
        font-size: 8rem;
        right: 2vw;
    }

    .block-magenta, .block-teal {
        display: none;
    }
}