/* eesugi.com - Vertical Fog Minimalism */
/* Japanese cedar grove (杉 / sugi) digital meditation space */
/*
   Palette (140-150 hue range, green-grey monochromatic):
   Canopy Dark:  #2C3A33 - Primary text, structural strokes
   Cedar Bark:   #4A5D52 - Trunk lines, borders, accent strokes
   Deep Moss:    #3D4F45 - Body text, secondary elements
   Lichen Grey:  #8B9A8E - Metadata, disabled states, subtle borders
   Morning Fog:  #C7CEC8 - Dividers, background accents, ghost elements
   Pale Canopy:  #E8ECE9 - Card backgrounds, hover states
   Cloud Gap:    #F4F6F4 - Page background, primary negative space
   White Sky:    #FAFBFA - Fog overlay, lightest background layer
*/

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #F4F6F4;
    color: #3D4F45;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(16px, 1.8vw, 22px);
    line-height: 2.0;
    overflow-x: hidden;
    cursor: none;
}

/* ===== ENTRANCE SEQUENCE ===== */
/* Phase 1: 1.5s of pure #F4F6F4, then trunks draw, then title fades in */
body.loading {
    overflow: hidden;
}

body.loading .scroll-container,
body.loading .nav-heartbeat,
body.loading .sound-toggle {
    opacity: 0;
}

body.loading .trunk-mg {
    opacity: 0;
    transition: opacity 1.5s ease 2s;
}

body:not(.loading) .trunk-mg {
    opacity: 0.6;
    transition: opacity 1.5s ease;
}

/* ===== FOG LAYERS ===== */
/* Radial + linear gradients creating atmospheric fog */
.fog-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.fog-layer-1 {
    background: radial-gradient(ellipse at 50% 60%, rgba(250, 251, 250, 0) 0%, rgba(199, 206, 200, 0.15) 100%);
}

.fog-layer-2 {
    background: linear-gradient(to bottom, transparent 0%, rgba(232, 236, 233, 0.08) 100%);
}

/* Fog drift: 2% horizontal translation over 120s, felt rather than seen */
@keyframes fog-drift-1 {
    0% { transform: translateX(0) translateY(var(--fog-parallax-y, 0px)); }
    50% { transform: translateX(2%) translateY(var(--fog-parallax-y, 0px)); }
    100% { transform: translateX(0) translateY(var(--fog-parallax-y, 0px)); }
}

@keyframes fog-drift-2 {
    0% { transform: translateX(0) translateY(var(--fog-parallax-y2, 0px)); }
    50% { transform: translateX(-1.5%) translateY(var(--fog-parallax-y2, 0px)); }
    100% { transform: translateX(0) translateY(var(--fog-parallax-y2, 0px)); }
}

.fog-layer-1 {
    animation: fog-drift-1 120s linear infinite;
}

.fog-layer-2 {
    animation: fog-drift-2 120s linear infinite;
}

/* ===== CEDAR TRUNKS ===== */
/* Vertical lines evoking cedar trunks receding into fog */
.trunk {
    position: fixed;
    top: 0;
    z-index: 2;
    pointer-events: none;
}

/* Foreground trunks: 3px wide, #4A5D52, full opacity */
/* Entrance: clip-path draws from top to bottom over 2s */
.trunk-fg {
    width: 3px;
    background-color: #4A5D52;
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 2s cubic-bezier(0.22, 1, 0.36, 1);
}

body.trunks-visible .trunk-fg {
    clip-path: inset(0);
}

.trunk-left {
    left: 20%;
    height: 75vh;
    top: 10vh;
}

.trunk-center {
    left: 50%;
    height: 80vh;
    top: 5vh;
}

.trunk-right {
    left: 80%;
    height: 65vh;
    top: 15vh;
}

/* Mid-ground trunks: 2px wide, #8B9A8E, 60% opacity, slight blur */
.trunk-mg {
    width: 2px;
    background-color: #8B9A8E;
    opacity: 0.6;
    filter: blur(0.5px);
}

.trunk-mg-1 {
    left: 10%;
    height: 50vh;
    top: 20vh;
}

.trunk-mg-2 {
    left: 35%;
    height: 55vh;
    top: 15vh;
}

.trunk-mg-3 {
    left: 65%;
    height: 45vh;
    top: 25vh;
}

.trunk-mg-4 {
    left: 90%;
    height: 60vh;
    top: 10vh;
}

/* Background trunks container: 1px wide, #C7CEC8, 30% opacity, heavy blur */
.trunk-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.trunk-bg {
    position: absolute;
    width: 1px;
    background-color: #C7CEC8;
    opacity: 0;
    filter: blur(1.5px);
    transition: opacity 2s ease;
}

.trunk-bg.visible {
    opacity: 0.3;
}

/* ===== CURSOR FOLLOWER ===== */
/* 6px circle, #8B9A8E, follows 300ms behind cursor */
/* Fades out over 2s when cursor stops, reappears with scale-up */
.cursor-follower {
    position: fixed;
    width: 6px;
    height: 6px;
    background-color: #8B9A8E;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: scale(0);
    transition: opacity 2s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, left, top;
}

.cursor-follower.active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cursor-follower.fading {
    opacity: 0;
    transform: scale(1);
    transition: opacity 2s ease, transform 0.4s ease;
}

/* ===== SCROLL CONTAINER ===== */
/* scroll-snap-type: y proximity -- gentle magnetization, not hard locking */
.scroll-container {
    scroll-snap-type: y proximity;
    position: relative;
    z-index: 3;
    transition: opacity 0.5s ease;
}

/* ===== CHAMBERS ===== */
.chamber {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    scroll-snap-align: start;
}

.chamber-content {
    max-width: 100%;
    width: 100%;
    position: relative;
}

/* ===== FOG GAP ===== */
/* 100vh of intentional void - ma (間) - the silence between movements */
.fog-gap {
    height: 100vh;
    position: relative;
}

/* ===== CHAMBER 1: CANOPY ===== */
/* Domain name in thin vertical strokes, positioned high like treetops against sky */
.chamber-1 {
    align-items: flex-start;
    padding-top: 20vh;
}

.canopy-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 300;
    font-size: clamp(28px, 5vw, 56px);
    letter-spacing: 0.3em;
    color: #2C3A33;
    text-transform: lowercase;
    display: flex;
    gap: 0;
}

.title-letter {
    opacity: 0;
    display: inline-block;
    transition: opacity 0.4s ease;
}

body.title-visible .title-letter {
    opacity: 1;
}

/* Single horizontal treeline: 1px, #8B9A8E at 40% opacity */
.treeline {
    width: 200px;
    height: 1px;
    background-color: #8B9A8E;
    opacity: 0.4;
    margin-top: 8vh;
}

/* ===== CHAMBER 2: TRUNK ===== */
/* Single prose paragraph (<=40 words) on center axis */
/* Flanking cedar trunk accent on left axis */
.chamber-2 {
    position: relative;
}

.chamber-trunk-accent {
    position: absolute;
    left: 20%;
    top: 20vh;
    width: 3px;
    height: 60vh;
    background-color: #4A5D52;
}

.trunk-content {
    max-width: 40ch;
    margin-left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.trunk-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(16px, 1.8vw, 22px);
    line-height: 2.0;
    color: #3D4F45;
}

/* ===== BLUR-FOCUS REVEAL ===== */
/* Text loads blurred, transitions to clear as fog lifts */
/* blur(8px) + opacity 0.3 -> blur(0) + opacity 1 over 1.2s */
.blur-reveal {
    filter: blur(8px);
    opacity: 0.3;
    transition: filter 1.2s ease, opacity 1.2s ease;
}

.blur-reveal.revealed {
    filter: blur(0);
    opacity: 1;
}

/* ===== CHAMBER 3: MOSS ===== */
/* Three small content cards along three axes at staggered vertical positions */
/* offset by 15vh each, enormous internal padding, gaps wider than cards */
.chamber-3 {
    min-height: 120vh;
    align-items: flex-start;
    padding-top: 10vh;
}

.moss-content {
    position: relative;
    height: 100vh;
}

/* Moss texture: repeating-radial-gradient dots (#8B9A8E at 5% opacity, 1px, 8px spacing) */
.moss-card {
    position: absolute;
    border: 1px solid #C7CEC8;
    border-radius: 1px;
    padding: 3rem 2.5rem;
    max-width: 280px;
    background-color: #FAFBFA;
    background-image: repeating-radial-gradient(
        circle at 4px 4px,
        rgba(139, 154, 142, 0.05) 0px,
        rgba(139, 154, 142, 0.05) 1px,
        transparent 1px,
        transparent 8px
    );
}

.moss-card-1 {
    left: 20%;
    top: 5vh;
    transform: translateX(-50%);
}

.moss-card-2 {
    left: 50%;
    top: 20vh;
    transform: translateX(-50%);
}

.moss-card-3 {
    left: 80%;
    top: 35vh;
    transform: translateX(-50%);
}

/* Monospace accent: IBM Plex Mono, 300, 11px, 0.15em spacing, #8B9A8E at 70% */
.card-label {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: rgba(139, 154, 142, 0.7);
    text-transform: uppercase;
    display: block;
    margin-bottom: 1.5rem;
}

.card-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.9;
    color: #3D4F45;
}

/* ===== CHAMBER 4: FOG ===== */
/* Full-bleed layered CSS gradients creating fog between trunks */
/* One line of text in lightest weight, almost invisible - a koan */
.chamber-4 {
    position: relative;
    overflow: hidden;
}

.fog-chamber-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(199, 206, 200, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 40%, rgba(232, 236, 233, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 60%, rgba(250, 251, 250, 0.5) 0%, transparent 60%),
        linear-gradient(to bottom, rgba(244, 246, 244, 0.3), rgba(199, 206, 200, 0.2));
    z-index: 0;
}

.fog-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 10vw;
}

.koan {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(18px, 2.2vw, 28px);
    line-height: 2.0;
    color: #8B9A8E;
    font-style: italic;
}

/* ===== CHAMBER 5: ROOT ===== */
/* Contact/closing info anchored to bottom like roots in earth */
.chamber-5 {
    align-items: flex-end;
    padding-bottom: 10vh;
}

.root-content {
    text-align: center;
}

.root-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.root-domain {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 300;
    font-size: clamp(18px, 2.5vw, 32px);
    letter-spacing: 0.2em;
    color: #2C3A33;
}

.root-meta {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(14px, 1.4vw, 18px);
    color: #8B9A8E;
    font-style: italic;
}

.root-contact {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: rgba(139, 154, 142, 0.7);
    margin-top: 2rem;
}

/* ===== NAVIGATION HEARTBEAT ===== */
/* 8px circle, #4A5D52, fixed bottom-center, pulses once every 8s */
/* On hover, expands to reveal five chamber dots */
.nav-heartbeat {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: none;
    transition: opacity 0.5s ease;
}

.heartbeat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #4A5D52;
    animation: heartbeat 8s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 90%, 100% { transform: scale(1); opacity: 0.6; }
    95% { transform: scale(1.4); opacity: 1; }
}

.heartbeat-chambers {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.nav-heartbeat:hover .heartbeat-chambers {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.chamber-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #8B9A8E;
    opacity: 0.5;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    cursor: none;
}

.chamber-dot.active {
    opacity: 1;
    background-color: #4A5D52;
}

/* ===== SOUND TOGGLE ===== */
/* Speaker icon bottom-right: SVG circle with single arc */
.sound-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
    cursor: none;
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

.sound-toggle:hover {
    opacity: 1;
}

.sound-toggle.playing {
    opacity: 1;
}

.sound-icon {
    display: block;
}

/* ===== RESPONSIVE (below 768px) ===== */
/* Three-axis -> single center axis. Trunk lines to left/right edges. */
/* Chamber gaps 100vh -> 50vh. Fog simplifies to single gradient. */
@media (max-width: 768px) {
    .fog-gap {
        height: 50vh;
    }

    /* Collapse to two edge trunks, partially hidden */
    .trunk-left {
        left: -1px;
        height: 60vh;
        width: 2px;
    }

    .trunk-center {
        display: none;
    }

    .trunk-right {
        left: calc(100% - 1px);
        height: 55vh;
        width: 2px;
    }

    .trunk-mg {
        display: none;
    }

    .chamber-trunk-accent {
        left: 5%;
        height: 40vh;
        width: 2px;
    }

    .trunk-content {
        margin-left: 50%;
        padding: 0 2rem;
        max-width: 90%;
    }

    /* Cards stack vertically on center axis */
    .moss-card-1,
    .moss-card-2,
    .moss-card-3 {
        position: relative;
        left: 50%;
        top: auto;
        margin-bottom: 4vh;
    }

    .moss-content {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 1rem;
    }

    .moss-card {
        max-width: 90%;
    }

    .chamber-3 {
        min-height: auto;
        padding: 10vh 0;
    }

    .fog-content {
        padding: 0 5vw;
    }

    /* Simplified fog: single gradient */
    .fog-layer-1 {
        background: linear-gradient(to bottom, transparent, rgba(199, 206, 200, 0.1));
    }

    .fog-layer-2 {
        background: linear-gradient(to bottom, transparent 50%, rgba(232, 236, 233, 0.06) 100%);
    }

    body {
        cursor: auto;
    }

    .cursor-follower {
        display: none;
    }

    .nav-heartbeat,
    .sound-toggle,
    .chamber-dot {
        cursor: auto;
    }
}