/* ===== CSS Custom Properties ===== */
:root {
    --bg: #06101f;
    --text: #c8d8ec;
    --text-display: #e8f0fa;
    --line: #ffffff;
    --marble-base: #162744;
    --marble-vein: #0b1a3d;
    --marble-highlight: #2a4a7f;
    --accent: #5b8cc9;
    --accent-warm: #a3784e;
    --accent-data: #4a6fa5;
    --void-gradient: #0d1f3d;
}

body.inverted {
    --bg: #e8f0fa;
    --text: #162744;
    --text-display: #0d1f3d;
    --line: #a3784e;
    --marble-base: #c8d8ec;
    --marble-vein: #e8f0fa;
    --marble-highlight: #4a6fa5;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.85;
    letter-spacing: 0.02em;
    overflow-x: hidden;
    transition: background-color 0.6s ease, color 0.6s ease;
    border-radius: 0;
}

/* ===== Scroll Container ===== */
#scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    height: 100vh;
}

.section {
    min-height: 100vh;
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(ellipse at 70% 30%, var(--void-gradient) 0%, var(--bg) 70%);
    transition: background 0.6s ease;
}

body.inverted .section {
    background: var(--bg);
}

/* ===== Cursor Halo ===== */
#cursor-halo {
    position: fixed;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 140, 201, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

#cursor-halo.intense {
    background: radial-gradient(circle, rgba(91, 140, 201, 0.3) 0%, transparent 70%);
}

/* ===== Degree Counter ===== */
#degree-counter {
    position: fixed;
    top: 24px;
    left: 24px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-data);
    z-index: 100;
    transition: color 0.6s ease;
}

/* ===== Navigation ===== */
#nav-line {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
    z-index: 100;
    display: flex;
    gap: 2em;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.4em;
}

#nav-line a {
    color: var(--accent-data);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#nav-line a:hover {
    color: var(--text-display);
}

/* ===== Degree Ticks ===== */
#degree-ticks {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 40px;
    z-index: 50;
    pointer-events: none;
}

.tick {
    position: absolute;
    left: 0;
    width: 12px;
    height: 1px;
    background: var(--accent-data);
}

.tick-label {
    position: absolute;
    left: 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 300;
    color: var(--accent-data);
    letter-spacing: 0.1em;
    transform: translateY(-50%);
}

/* ===== Meridian Lines ===== */
.meridian-line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--line);
    transform: translateX(-50%);
    z-index: 25;
    transition: background-color 0.6s ease;
}

#hero-line {
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    animation: drawLine 1.2s ease-out 0.4s forwards;
}

@keyframes drawLine {
    to { transform: translateX(-50%) scaleY(1); }
}

.meridian-separator {
    position: absolute;
    left: 50%;
    top: 20%;
    width: 1px;
    height: 60%;
    background: var(--line);
    opacity: 0.4;
    transform: translateX(-50%);
    z-index: 25;
}

.meridian-final {
    width: 4px;
    background: var(--line);
    animation: pulseLine 2s ease-in-out infinite;
}

@keyframes pulseLine {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== Typography ===== */
.display-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(3.5rem, 10vw, 9rem);
    letter-spacing: 0.06em;
    line-height: 0.95;
    color: var(--text-display);
    font-variant: small-caps;
    text-transform: lowercase;
    transition: color 0.6s ease;
}

.body-text {
    max-width: 38ch;
    margin-bottom: 3.5rem;
    color: var(--text);
    transition: color 0.6s ease;
}

.accent-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-data);
    transition: color 0.6s ease;
}

/* ===== Surface Text (Hero) ===== */
.surface-text {
    position: absolute;
    z-index: 30;
    opacity: 0;
}

.surface-left {
    right: calc(50% + 20px);
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    animation: fadeInTitle 0.8s ease-out 1.6s forwards;
}

.surface-right {
    left: calc(50% + 20px);
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
    animation: fadeInTitle 0.8s ease-out 1.8s forwards;
}

@keyframes fadeInTitle {
    to { opacity: 1; }
}

/* ===== Marble Panels ===== */
.marble-panel {
    position: relative;
    z-index: 20;
    padding: 3rem 2.5rem;
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.6s ease;
    background:
        repeating-linear-gradient(
            137deg,
            transparent 0px,
            transparent 18px,
            rgba(11, 26, 61, 0.3) 18px,
            rgba(11, 26, 61, 0.3) 19px
        ),
        repeating-linear-gradient(
            -47deg,
            transparent 0px,
            transparent 32px,
            rgba(42, 74, 127, 0.15) 32px,
            rgba(42, 74, 127, 0.15) 33px
        ),
        radial-gradient(
            ellipse at 30% 50%,
            rgba(42, 74, 127, 0.2) 0%,
            transparent 70%
        ),
        linear-gradient(180deg, var(--marble-base) 0%, #1a2f52 100%);
    border-radius: 0;
}

body.inverted .marble-panel {
    background:
        repeating-linear-gradient(
            137deg,
            transparent 0px,
            transparent 18px,
            rgba(200, 216, 236, 0.3) 18px,
            rgba(200, 216, 236, 0.3) 19px
        ),
        repeating-linear-gradient(
            -47deg,
            transparent 0px,
            transparent 32px,
            rgba(74, 111, 165, 0.15) 32px,
            rgba(74, 111, 165, 0.15) 33px
        ),
        radial-gradient(
            ellipse at 30% 50%,
            rgba(74, 111, 165, 0.2) 0%,
            transparent 70%
        ),
        linear-gradient(180deg, var(--marble-base) 0%, #e8f0fa 100%);
}

/* Panel reveal animation */
.marble-panel {
    opacity: 0;
    transform: translateX(-100%) rotate(-6deg);
}

.marble-panel.revealed {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Section-specific layouts ===== */

/* Section 0 — Origin */
#section-0 .marble-panel {
    position: absolute;
    bottom: 12%;
    left: 10%;
    max-width: 500px;
    z-index: 30;
}

.explore-link {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    z-index: 30;
    opacity: 0;
    animation: fadeInTitle 0.8s ease-out 2.8s forwards;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease;
}

.explore-link:hover {
    color: var(--text-display);
}

/* Section 45 — Offset */
#section-45 {
    flex-direction: column;
    align-items: flex-start;
    padding: 8vh 8vw;
    gap: 2rem;
}

#section-45 .panel-offset-1 {
    align-self: flex-start;
    max-width: 550px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 12% 100%);
}

#section-45 .panel-offset-2 {
    align-self: flex-end;
    max-width: 450px;
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
}

#section-45 .panel-offset-3 {
    align-self: center;
    clip-path: polygon(0% 0%, 100% 30%, 100% 100%, 0% 70%);
    padding: 2rem 2.5rem;
}

/* Section 90 — Quarter */
#section-90 {
    flex-direction: column;
}

.section-split {
    display: flex;
    width: 100%;
    height: 80%;
}

.split-left, .split-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.split-left .marble-panel {
    clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 0% 100%);
    max-width: 450px;
}

.split-right .marble-panel {
    clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
    max-width: 450px;
}

/* Section 135 — Approach */
#section-135 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4vh 6vw;
    gap: 1rem;
}

#section-135 .panel-approach-1 {
    max-width: 600px;
    align-self: flex-end;
    clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
}

#section-135 .panel-approach-2 {
    max-width: 500px;
    align-self: flex-start;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 8% 100%);
}

#section-135 .panel-approach-3 {
    max-width: 480px;
    align-self: flex-end;
    margin-top: -2rem;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

#section-135 .panel-approach-4 {
    align-self: center;
    clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 80%);
    padding: 1.5rem 2.5rem;
}

/* Section 180 — Meridian */
#section-180 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6vh 8vw;
    gap: 2rem;
}

#section-180 .panel-meridian {
    max-width: 600px;
    clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
}

#section-180 .panel-meridian-2 {
    max-width: 550px;
    align-self: flex-end;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 6% 100%);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    #nav-line {
        display: none;
    }

    .surface-left, .surface-right {
        position: relative;
        right: auto;
        left: auto;
        top: auto;
        transform: none;
        text-align: center;
    }

    #section-0 {
        flex-direction: column;
    }

    .section-split {
        flex-direction: column;
    }

    .marble-panel {
        clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%) !important;
    }
}