/* ============================================
   mujun.studio - Evolved Minimal Aurora
   ============================================ */
:root {
    --obsidian: #0D0D12;
    --deep-graphite: #161620;
    --lunar-ash: #C8C8D4;
    --bone-white: #E8E4DF;
    --spectral-teal: #2DD4A8;
    --violet-drift: #7B61FF;
    --amber-haze: #F0A868;
    --rose-signal: #E85D8C;
    --faint-graphite: #2A2A36;
    --ash-gray: #4A4A5A;
    --aurora: linear-gradient(90deg, #2DD4A8 0%, #7B61FF 35%, #E85D8C 65%, #F0A868 100%);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    background: var(--obsidian);
    color: var(--lunar-ash);
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.75;
    overflow-x: hidden;
}

/* --- Cursor Halo --- */
.cursor-halo {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    background: radial-gradient(circle 120px at var(--mx, 50%) var(--my, 50%), rgba(45, 212, 168, 0.04), transparent);
}

/* --- Zones --- */
.zone {
    position: relative;
}

/* --- Aurora Line --- */
.aurora-line {
    position: relative;
    width: 100%;
    height: 1px;
    background: var(--aurora);
    opacity: 0.5;
    animation: auroraPulse 4s ease-in-out infinite alternate;
}
@keyframes auroraPulse {
    0% { opacity: 0.3; }
    100% { opacity: 0.8; }
}
.aurora-line--reveal {
    clip-path: inset(0 50%);
    transition: clip-path 2s cubic-bezier(0.23, 1, 0.32, 1);
}
.aurora-line--reveal.revealed {
    clip-path: inset(0 0%);
}
.aurora-line--bottom {
    position: absolute;
    bottom: 0;
    left: 0;
}
.aurora-dot {
    position: absolute;
    top: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--aurora);
}
.aurora-dot--left { left: 0; }
.aurora-dot--right { right: 0; }

/* ============================
   ZONE 1: THE THRESHOLD
   ============================ */
.zone-threshold {
    height: 100vh;
    display: grid;
    place-items: center;
    background: var(--obsidian);
    opacity: 0;
    animation: zoneIn 1.5s ease-out 0.3s forwards;
}
@keyframes zoneIn {
    to { opacity: 1; }
}
.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(4rem, 12vw, 9rem);
    letter-spacing: 0.04em;
    color: var(--bone-white);
    text-align: center;
    line-height: 1.1;
}
.zone-threshold .aurora-line {
    margin-top: clamp(2rem, 4vh, 4rem);
    width: 100vw;
    position: absolute;
    bottom: 30%;
    left: 0;
}

/* ============================
   ZONE 2: THE CONTRADICTION WALL
   ============================ */
.zone-wall {
    padding: 4rem 1px;
    background: var(--obsidian);
}
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    max-width: 1400px;
    margin: 0 auto;
}
.masonry-item {
    background: var(--deep-graphite);
    padding: clamp(1.5rem, 3vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    opacity: 0;
    transform: scaleY(0.3);
    transform-origin: top;
    transition: opacity 800ms cubic-bezier(0.23, 1, 0.32, 1), transform 800ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: var(--stagger, 0ms);
    will-change: transform, opacity;
}
.masonry-item.visible {
    opacity: 1;
    transform: scaleY(1);
}
.masonry-span-2 { grid-column: span 2; }
.masonry-span-3 { grid-column: span 3; }
.masonry-tall { grid-row: span 2; }
.block-heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 4vw, 3rem);
    letter-spacing: 0.02em;
    color: var(--bone-white);
    text-align: center;
}
.block-heading--large {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    background: var(--aurora);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.block-text {
    font-family: 'EB Garamond', serif;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.75;
    color: var(--lunar-ash);
    max-width: 38em;
}

/* Aurora Fields (gradient abstract blocks) */
.aurora-field {
    width: 100%;
    height: 100%;
    min-height: 180px;
    border-radius: 0;
}
.aurora-field--1 {
    background: linear-gradient(135deg, rgba(45, 212, 168, 0.3) 0%, rgba(123, 97, 255, 0.2) 100%);
}
.aurora-field--2 {
    background: linear-gradient(225deg, rgba(232, 93, 140, 0.25) 0%, rgba(240, 168, 104, 0.2) 100%);
}

/* Duotone blocks */
.duotone-block {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 180px;
    overflow: hidden;
}
.duotone-img {
    position: absolute;
    inset: 0;
    filter: grayscale(100%) contrast(1.1);
}
.duotone-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--obsidian);
    mix-blend-mode: multiply;
    transition: background 600ms cubic-bezier(0.23, 1, 0.32, 1);
}
.duotone-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--violet-drift);
    mix-blend-mode: screen;
    opacity: 0.7;
    transition: background 600ms cubic-bezier(0.23, 1, 0.32, 1);
}
.duotone-interactive:hover .duotone-img::before {
    background: var(--deep-graphite);
}
.duotone-interactive:hover .duotone-img::after {
    background: var(--amber-haze);
}
/* CSS abstract textures instead of real photos */
.duotone-img--1 { background: linear-gradient(45deg, #333 25%, #555 50%, #222 75%); }
.duotone-img--2 { background: linear-gradient(135deg, #444 0%, #222 50%, #555 100%); }
.duotone-img--3 { background: linear-gradient(180deg, #2a2a2a 0%, #444 40%, #1a1a1a 100%); }
.duotone-img--4 { background: repeating-linear-gradient(0deg, #333 0px, #333 4px, #444 4px, #444 8px); }
.duotone-img--5 { background: radial-gradient(circle at 30% 40%, #555 0%, #222 100%); }
.duotone-img--6 { background: linear-gradient(225deg, #3a3a3a 0%, #1a1a1a 100%); }
.duotone-img--7 { background: repeating-linear-gradient(45deg, #333 0px, #333 2px, #444 2px, #444 6px); }
.duotone-img--8 { background: radial-gradient(ellipse at 70% 60%, #444 0%, #1a1a1a 100%); }

/* ============================
   ZONE 3: THE BREATH
   ============================ */
.zone-breath {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10vh 5vw;
    background: var(--obsidian);
}
.breath-text {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.85;
    max-width: 38em;
    text-align: left;
}
.breath-text .word {
    color: var(--ash-gray);
    transition: color 500ms cubic-bezier(0.23, 1, 0.32, 1);
    display: inline;
}
.breath-text .word.active {
    /* color set via JS with --aurora variable */
}
.breath-text .word.awakened {
    color: #6A6A7A;
}

/* ============================
   ZONE 4: THE DENSE FIELD
   ============================ */
.zone-dense {
    padding: 2rem 1px;
    background: var(--obsidian);
    position: relative;
}
.aurora-bg {
    position: fixed;
    inset: 0;
    background: var(--aurora);
    background-size: 200% 100%;
    opacity: 0.08;
    animation: auroraDrift 30s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes auroraDrift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.dense-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.dense-item {
    background: var(--deep-graphite);
    min-height: 200px;
    opacity: 0;
    transform: scaleY(0.3);
    transform-origin: top;
    transition: opacity 800ms cubic-bezier(0.23, 1, 0.32, 1), transform 800ms cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform, opacity;
}
.dense-item.visible {
    opacity: 1;
    transform: scaleY(1);
}
.dense-span-2 { grid-column: span 2; }

/* ============================
   ZONE 5: THE SIGNAL
   ============================ */
.zone-signal {
    height: 100vh;
    display: grid;
    place-items: center;
    background: var(--obsidian);
}
.signal-text {
    font-family: 'Cormorant SC', serif;
    font-weight: 400;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    letter-spacing: 0.3em;
    color: var(--lunar-ash);
    text-align: center;
    margin-bottom: 3rem;
}
.signal-sc {
    display: inline;
}
.signal-divider {
    margin: 0 1.5rem;
    color: var(--faint-graphite);
}

/* ============================
   ZONE 6: THE ECHO
   ============================ */
.zone-echo {
    height: 50vh;
    display: grid;
    place-items: center;
    background: var(--obsidian);
    overflow: hidden;
    position: relative;
}
.echo-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(6rem, 20vw, 16rem);
    color: var(--bone-white);
    opacity: 0.1;
    clip-path: inset(33% 0);
    letter-spacing: 0.02em;
    line-height: 1;
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 1024px) {
    .masonry-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .masonry-span-3 { grid-column: span 3; }
}
@media (max-width: 768px) {
    .masonry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .masonry-span-2, .masonry-span-3 { grid-column: span 2; }
    .dense-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dense-span-2 { grid-column: span 2; }
    .cursor-halo { display: none; }
    .signal-divider { display: block; margin: 0.5rem 0; }
}
@media (max-width: 480px) {
    .masonry-grid, .dense-grid {
        grid-template-columns: 1fr;
    }
    .masonry-span-2, .masonry-span-3, .dense-span-2 { grid-column: span 1; }
}