/* ============================================
   dilemma.quest — Scandinavian Moral Geometry
   ============================================ */

:root {
    --bg-primary: #F4F0EB;
    --bg-alternate: #EDE8F2;
    --text-primary: #2C2C34;
    --text-secondary: #7A7A88;
    --accent-left: #D4A0A0;
    --accent-right: #A0C4B8;
    --accent-tension: #B8A0D4;
    --line-color: #C8C4CC;
    --highlight: #E8C4A8;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.85;
    overflow-x: hidden;
}

/* ---- Typography ---- */
h1, h2 {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: var(--text-primary);
}

h2 {
    font-size: clamp(2rem, 5vw, 4.2rem);
}

p {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    color: var(--text-secondary);
    max-width: 520px;
}

.label-mono {
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-feature-settings: "tnum";
    display: block;
    margin-bottom: 1.5rem;
}

/* ---- Panel System ---- */
.panel {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.panel[data-bg="primary"] {
    background-color: var(--bg-primary);
}

.panel[data-bg="alternate"] {
    background-color: var(--bg-alternate);
}

.panel-content {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Opening Sequence ---- */
.panel-opening {
    background-color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.opening-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.bifurcation-intro {
    width: 100px;
    height: 200px;
    margin-bottom: 2rem;
}

.bifurcation-intro line {
    stroke: var(--line-color);
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.intro-line-main {
    animation: drawLine 2s ease-out 1.5s forwards;
}

.intro-line-left {
    animation: drawLine 1s ease-out 3.5s forwards;
}

.intro-line-right {
    animation: drawLine 1s ease-out 3.5s forwards;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

.title-group {
    text-align: center;
    opacity: 0;
    animation: fadeInTitle 1.5s ease-out 4s forwards;
}

.title-dilemma {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    text-transform: lowercase;
    letter-spacing: 0.15em;
    color: var(--text-primary);
    opacity: 0.6;
}

.title-quest {
    display: block;
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    text-transform: lowercase;
    letter-spacing: 0.15em;
    color: var(--text-primary);
    opacity: 0;
    animation: fadeInQuest 1s ease-out 4.5s forwards;
}

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

@keyframes fadeInQuest {
    to { opacity: 0.4; }
}

.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    opacity: 0;
    animation: fadeInChevron 1s ease-out 6s forwards;
}

.scroll-indicator svg {
    stroke: var(--line-color);
    animation: pulseChevron 2.5s ease-in-out 6.5s infinite;
}

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

@keyframes pulseChevron {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 0.8; transform: translateY(6px); }
}

/* Bifurcation texture background */
.bifurcation-texture {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: repeating-linear-gradient(
        60deg,
        transparent,
        transparent 40px,
        var(--line-color) 40px,
        var(--line-color) 40.5px
    ),
    repeating-linear-gradient(
        -60deg,
        transparent,
        transparent 40px,
        var(--line-color) 40px,
        var(--line-color) 40.5px
    );
    pointer-events: none;
    z-index: 0;
}

/* ---- Geometric Compositions ---- */
.geometric-composition {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.geo-shape {
    position: absolute;
    pointer-events: all;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.geo-shape circle,
.geo-shape polygon,
.geo-shape rect,
.geo-shape line {
    stroke: var(--line-color);
    fill: none;
    transition: stroke-opacity 300ms ease, stroke 300ms ease;
}

/* Panel 1 - Large rotating circle */
.shape-circle-large {
    width: clamp(250px, 40vw, 500px);
    height: clamp(250px, 40vw, 500px);
    opacity: 0;
    transform: scale(0.3);
}

.shape-circle-large.visible {
    opacity: 0.4;
    transform: scale(1);
    animation: slowRotate 60s linear infinite;
}

@keyframes slowRotate {
    to { transform: rotate(360deg); }
}

/* Panel 2 - Opposing shapes */
.shape-left-circle {
    width: clamp(150px, 22vw, 280px);
    height: clamp(150px, 22vw, 280px);
    left: 8%;
    top: 50%;
    transform: translate(0, -50%) scale(0.3);
    opacity: 0;
}

.shape-left-circle.visible {
    opacity: 0.5;
    transform: translate(0, -50%) scale(1);
}

.shape-left-circle circle {
    stroke: var(--accent-left);
}

.shape-right-triangle {
    width: clamp(150px, 22vw, 280px);
    height: clamp(150px, 22vw, 280px);
    right: 8%;
    top: 50%;
    transform: translate(0, -50%) scale(0.3);
    opacity: 0;
}

.shape-right-triangle.visible {
    opacity: 0.5;
    transform: translate(0, -50%) scale(1);
}

.shape-right-triangle polygon {
    stroke: var(--accent-right);
}

.bifurcation-divider {
    width: 4px;
    height: 40vh;
    opacity: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.bifurcation-divider.visible {
    opacity: 0.2;
}

.bifurcation-divider line {
    stroke: var(--line-color);
}

/* Panel 3 - Hexagon vs Rectangle */
.shape-hex-left {
    width: clamp(160px, 24vw, 300px);
    height: clamp(160px, 24vw, 300px);
    left: 10%;
    top: 50%;
    transform: translate(0, -50%) scale(0.3);
    opacity: 0;
}

.shape-hex-left.visible {
    opacity: 0.5;
    transform: translate(0, -50%) scale(1);
    animation: slowRotateHexLeft 80s linear infinite;
}

@keyframes slowRotateHexLeft {
    from { transform: translate(0, -50%) rotate(0deg); }
    to { transform: translate(0, -50%) rotate(-360deg); }
}

.shape-hex-left polygon {
    stroke: var(--accent-left);
}

.shape-rect-right {
    width: clamp(160px, 24vw, 300px);
    height: clamp(160px, 24vw, 300px);
    right: 10%;
    top: 50%;
    transform: translate(0, -50%) scale(0.3);
    opacity: 0;
}

.shape-rect-right.visible {
    opacity: 0.5;
    transform: translate(0, -50%) scale(1);
    animation: slowRotateRectRight 90s linear infinite;
}

@keyframes slowRotateRectRight {
    from { transform: translate(0, -50%) rotate(0deg); }
    to { transform: translate(0, -50%) rotate(360deg); }
}

.shape-rect-right rect {
    stroke: var(--accent-right);
}

/* Panel 4 - Interactive Dilemma */
.dilemma-moment {
    pointer-events: all;
}

.dilemma-shape-left {
    width: clamp(180px, 25vw, 320px);
    height: clamp(180px, 25vw, 320px);
    left: 12%;
    top: 50%;
    transform: translate(0, -50%) scale(0.3);
    opacity: 0;
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dilemma-shape-left.visible {
    opacity: 0.6;
    transform: translate(0, -50%) scale(1);
}

.dilemma-shape-left circle {
    stroke: var(--accent-left);
}

.dilemma-shape-left .shape-fill {
    fill: var(--accent-left);
    opacity: 0.08;
    stroke: none;
}

.dilemma-shape-right {
    width: clamp(180px, 25vw, 320px);
    height: clamp(180px, 25vw, 320px);
    right: 12%;
    top: 50%;
    transform: translate(0, -50%) scale(0.3);
    opacity: 0;
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dilemma-shape-right.visible {
    opacity: 0.6;
    transform: translate(0, -50%) scale(1);
}

.dilemma-shape-right polygon {
    stroke: var(--accent-right);
}

.dilemma-shape-right .shape-fill {
    fill: var(--accent-right);
    opacity: 0.08;
    stroke: none;
}

.dilemma-shape-left.attracted {
    transform: translate(0, -50%) scale(1.15);
    opacity: 0.9;
}

.dilemma-shape-left.attracted .shape-fill {
    opacity: 0.15;
}

.dilemma-shape-left.dimmed {
    opacity: 0.3;
    transform: translate(0, -50%) scale(0.95);
}

.dilemma-shape-right.attracted {
    transform: translate(0, -50%) scale(1.15);
    opacity: 0.9;
}

.dilemma-shape-right.attracted .shape-fill {
    opacity: 0.15;
}

.dilemma-shape-right.dimmed {
    opacity: 0.3;
    transform: translate(0, -50%) scale(0.95);
}

.interference-zone {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--accent-tension);
    opacity: 0;
    mix-blend-mode: multiply;
    transition: opacity 600ms ease;
    pointer-events: none;
}

/* Panel 5 - Overlapping shapes with blend */
.shape-overlap-circle {
    width: clamp(200px, 35vw, 450px);
    height: clamp(200px, 35vw, 450px);
    left: 15%;
    top: 50%;
    transform: translate(0, -50%) scale(0.3);
    opacity: 0;
}

.shape-overlap-circle.visible {
    opacity: 0.4;
    transform: translate(0, -50%) scale(1);
}

.shape-overlap-circle circle {
    stroke: var(--accent-left);
}

.shape-overlap-triangle {
    width: clamp(200px, 35vw, 450px);
    height: clamp(200px, 35vw, 450px);
    right: 15%;
    top: 50%;
    transform: translate(0, -50%) scale(0.3);
    opacity: 0;
}

.shape-overlap-triangle.visible {
    opacity: 0.4;
    transform: translate(0, -50%) scale(1);
}

.shape-overlap-triangle polygon {
    stroke: var(--accent-right);
}

.shape-overlap-blend {
    width: clamp(200px, 35vw, 450px);
    height: clamp(200px, 35vw, 450px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    mix-blend-mode: multiply;
}

.shape-overlap-blend.visible {
    opacity: 0.15;
}

.blend-shape-a {
    fill: var(--accent-left);
    stroke: none;
}

.blend-shape-b {
    fill: var(--accent-right);
    stroke: none;
}

.interference-pattern {
    width: clamp(200px, 35vw, 450px);
    height: clamp(200px, 35vw, 450px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.interference-pattern.visible {
    opacity: 0.3;
}

.interference-pattern line {
    stroke: var(--accent-tension);
}

.interference-pattern rect {
    fill: url(#crosshatch);
}

/* Panel 6 - Final forms */
.shape-final-a {
    width: clamp(120px, 18vw, 220px);
    height: clamp(120px, 18vw, 220px);
    left: 15%;
    top: 30%;
    opacity: 0;
    transform: scale(0.3);
}

.shape-final-a.visible {
    opacity: 0.35;
    transform: scale(1);
    animation: breathe 8s ease-in-out infinite;
}

.shape-final-a circle {
    stroke: var(--accent-left);
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.shape-final-b {
    width: clamp(120px, 18vw, 220px);
    height: clamp(120px, 18vw, 220px);
    right: 15%;
    top: 25%;
    opacity: 0;
    transform: scale(0.3);
}

.shape-final-b.visible {
    opacity: 0.35;
    transform: scale(1);
    animation: breathe 10s ease-in-out 1s infinite;
}

.shape-final-b polygon {
    stroke: var(--accent-right);
}

.shape-final-c {
    width: clamp(100px, 15vw, 180px);
    height: clamp(100px, 15vw, 180px);
    left: 25%;
    bottom: 20%;
    opacity: 0;
    transform: scale(0.3);
}

.shape-final-c.visible {
    opacity: 0.3;
    transform: scale(1);
    animation: breathe 12s ease-in-out 2s infinite;
}

.shape-final-c polygon {
    stroke: var(--accent-tension);
}

.shape-final-d {
    width: clamp(100px, 15vw, 180px);
    height: clamp(100px, 15vw, 180px);
    right: 20%;
    bottom: 25%;
    opacity: 0;
    transform: scale(0.3);
}

.shape-final-d.visible {
    opacity: 0.3;
    transform: scale(1);
    animation: breathe 9s ease-in-out 0.5s infinite;
}

.shape-final-d rect {
    stroke: var(--line-color);
}

.bifurcation-final {
    width: 100%;
    height: 100%;
    opacity: 0;
}

.bifurcation-final.visible {
    opacity: 0.08;
}

.bif-line {
    stroke: var(--line-color);
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
}

.bifurcation-final.visible .bif-1 {
    animation: drawLine 2s ease-out 0.2s forwards;
}

.bifurcation-final.visible .bif-2 {
    animation: drawLine 2s ease-out 0.4s forwards;
}

.bifurcation-final.visible .bif-3 {
    animation: drawLine 1.5s ease-out 1.5s forwards;
}

.bifurcation-final.visible .bif-4 {
    animation: drawLine 1.5s ease-out 1.7s forwards;
}

/* Panel 7 - Closing */
.panel-closing {
    min-height: 70vh;
}

.shape-closing-line {
    width: clamp(200px, 30vw, 400px);
    height: clamp(100px, 15vw, 200px);
    top: 30%;
    opacity: 0;
    transform: scale(0.3);
}

.shape-closing-line.visible {
    opacity: 0.25;
    transform: scale(1);
}

.shape-closing-line line {
    stroke: var(--line-color);
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.shape-closing-line.visible .closing-line-stem {
    animation: drawLine 1.5s ease-out 0.3s forwards;
}

.shape-closing-line.visible .closing-line-fork-left {
    animation: drawLine 1s ease-out 1.5s forwards;
}

.shape-closing-line.visible .closing-line-fork-right {
    animation: drawLine 1s ease-out 1.5s forwards;
}

.shape-closing-circle {
    width: clamp(80px, 12vw, 150px);
    height: clamp(80px, 12vw, 150px);
    left: 25%;
    top: 25%;
    opacity: 0;
    transform: scale(0.3);
}

.shape-closing-circle.visible {
    opacity: 0.2;
    transform: scale(1);
    animation: breathe 10s ease-in-out infinite;
}

.shape-closing-circle circle {
    stroke: var(--accent-left);
}

.shape-closing-triangle {
    width: clamp(80px, 12vw, 150px);
    height: clamp(80px, 12vw, 150px);
    right: 25%;
    top: 25%;
    opacity: 0;
    transform: scale(0.3);
}

.shape-closing-triangle.visible {
    opacity: 0.2;
    transform: scale(1);
    animation: breathe 10s ease-in-out 2s infinite;
}

.shape-closing-triangle polygon {
    stroke: var(--accent-right);
}

.closing-text {
    bottom: 15%;
}

.closing-statement {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 480px;
}

/* ---- Contemplation Text ---- */
.contemplation-text {
    position: relative;
    z-index: 5;
    padding: 2rem;
}

.zone-left {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 420px;
}

.zone-right {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 420px;
    text-align: right;
}

.zone-right p {
    margin-left: auto;
}

.zone-center {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: 560px;
}

.zone-center p {
    margin: 0 auto;
}

.contemplation-text h2 {
    margin-bottom: 1.2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.contemplation-text p {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1) 200ms,
                transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}

.contemplation-text .label-mono {
    opacity: 0;
    transition: opacity 600ms ease;
}

.panel.in-view .contemplation-text h2 {
    opacity: 1;
    transform: translateY(0);
}

.panel.in-view .contemplation-text p {
    opacity: 1;
    transform: translateY(0);
}

.panel.in-view .contemplation-text .label-mono {
    opacity: 1;
}

/* Reversed: when scrolling back out, text fades gracefully */
.panel:not(.in-view) .contemplation-text h2 {
    opacity: 0;
    transform: translateY(20px);
}

.panel:not(.in-view) .contemplation-text p {
    opacity: 0;
    transform: translateY(15px);
}

.panel:not(.in-view) .contemplation-text .label-mono {
    opacity: 0;
}

.subtext {
    font-weight: 300;
    font-style: italic;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
}

/* ---- Scroll Progress ---- */
.scroll-progress {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 40vh;
    z-index: 100;
    opacity: 0;
    transition: opacity 800ms ease;
    cursor: pointer;
}

.scroll-progress.visible {
    opacity: 1;
}

.progress-shape {
    fill: none;
    stroke: var(--line-color);
    stroke-width: 0.8;
}

.progress-fill {
    fill: none;
    stroke: var(--accent-tension);
    stroke-width: 1.5;
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    transition: stroke-dashoffset 100ms linear;
}

/* ---- Magnetic Glow Effect ---- */
.geo-shape.magnetic-hover {
    filter: drop-shadow(0 0 20px rgba(232, 196, 168, 0.15));
}

/* ---- Linen Texture Overlay (subtle) ---- */
.panel-contemplation::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(200, 196, 204, 0.3) 3px,
            rgba(200, 196, 204, 0.3) 3.5px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(200, 196, 204, 0.3) 3px,
            rgba(200, 196, 204, 0.3) 3.5px
        );
    pointer-events: none;
    z-index: 0;
}

/* ---- Frosted glass effect on geometric panels ---- */
.panel-contemplation::after {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(0.3px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
    .bifurcation-intro line {
        animation: none;
        stroke-dashoffset: 0;
    }

    .title-group {
        animation: none;
        opacity: 1;
    }

    .title-quest {
        animation: none;
        opacity: 0.4;
    }

    .scroll-indicator {
        animation: none;
        opacity: 1;
    }

    .scroll-indicator svg {
        animation: none;
    }

    .geo-shape {
        transition: opacity 300ms ease;
    }

    .shape-circle-large.visible {
        animation: none;
    }

    .shape-hex-left.visible {
        animation: none;
        transform: translate(0, -50%) scale(1);
    }

    .shape-rect-right.visible {
        animation: none;
        transform: translate(0, -50%) scale(1);
    }

    .shape-final-a.visible,
    .shape-final-b.visible,
    .shape-final-c.visible,
    .shape-final-d.visible {
        animation: none;
    }

    .shape-closing-circle.visible,
    .shape-closing-triangle.visible {
        animation: none;
    }

    .shape-closing-line.visible line {
        animation: none;
        stroke-dashoffset: 0;
    }

    .bif-line {
        animation: none;
        stroke-dashoffset: 0;
    }

    .contemplation-text h2,
    .contemplation-text p,
    .contemplation-text .label-mono {
        transition: none;
    }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .zone-left,
    .zone-right {
        position: absolute;
        left: 5%;
        right: 5%;
        top: auto;
        bottom: 8%;
        transform: none;
        text-align: center;
        max-width: 100%;
    }

    .zone-right p {
        margin: 0 auto;
    }

    .zone-center {
        bottom: 5%;
        left: 5%;
        right: 5%;
        transform: none;
        max-width: 100%;
    }

    .shape-left-circle,
    .shape-right-triangle,
    .shape-hex-left,
    .shape-rect-right {
        position: absolute;
    }

    .shape-left-circle,
    .shape-hex-left {
        left: 5%;
    }

    .shape-right-triangle,
    .shape-rect-right {
        right: 5%;
    }

    .dilemma-shape-left {
        left: 5%;
    }

    .dilemma-shape-right {
        right: 5%;
    }

    .scroll-progress {
        right: 0.5rem;
    }

    .shape-overlap-circle {
        left: 5%;
    }

    .shape-overlap-triangle {
        right: 5%;
    }

    .closing-statement {
        font-size: clamp(0.95rem, 1.6vw, 1.2rem);
    }
}