/* ================================================
   concurrent.day — Dawn to Dusk
   A meditative visualization of parallelism
   ================================================ */

/* ----- Palette tokens ----- */
:root {
    --parchment: #faf5eb;
    --sandstone: #f0e4c8;
    --tarnished-gold: #c4b896;
    --aged-bronze: #8a7e6b;
    --warm-umber: #5c4f3a;
    --charcoal-earth: #2d2a24;
    --terracotta: #b8593a;
    --indigo: #3a4a6e;
    --warm-light: #e8dcc8;

    --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
    --font-mono: 'Inconsolata', 'space', 'Space Mono', monospace;
    --font-body: 'Nunito Sans', 'Inter', system-ui, sans-serif;
}

/* ----- Reset / base ----- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    line-height: 1.8;
    color: var(--charcoal-earth);
    background: var(--parchment);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----- Typography utilities ----- */
.timestamp {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aged-bronze);
}

.lane-label {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aged-bronze);
}

.fragment {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    line-height: 1.8;
    color: var(--charcoal-earth);
    margin: 2.4rem 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.fragment.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Slight rotation for organic feel */
.fragment:nth-of-type(odd) { transform: translateY(20px) rotate(-0.6deg); }
.fragment:nth-of-type(even) { transform: translateY(20px) rotate(0.6deg); }
.fragment.in-view:nth-of-type(odd) { transform: translateY(0) rotate(-0.6deg); }
.fragment.in-view:nth-of-type(even) { transform: translateY(0) rotate(0.6deg); }

/* ============================================================
   MAIN CONTAINER (the day)
   ============================================================ */
.day {
    position: relative;
    background: var(--parchment);
    transition: background 1.2s ease-in-out;
}

.section {
    position: relative;
    width: 100%;
}

/* ============================================================
   DAWN VIEWPORT (100vh)
   ============================================================ */
.dawn {
    height: 100vh;
    min-height: 720px;
    background: linear-gradient(180deg, var(--parchment) 0%, var(--warm-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dawn-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dawn-fork {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 100%);
    height: 100%;
    pointer-events: none;
}

.fork-line {
    fill: none;
    stroke: var(--charcoal-earth);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: pathDraw 2s ease-out forwards;
}

.fork-line.trunk { animation-delay: 0.2s; }
.fork-line.gen1 { animation-delay: 0.8s; }
.fork-line.gen2 { animation-delay: 1.4s; }
.fork-line.gen3 { animation-delay: 2.0s; }

.fork-line.gen1.b { stroke: var(--indigo); }
.fork-line.gen2.b1, .fork-line.gen2.b2 { stroke: var(--indigo); opacity: 0.85; }
.fork-line.gen3.b1a, .fork-line.gen3.b1b,
.fork-line.gen3.b2a, .fork-line.gen3.b2b { stroke: var(--indigo); opacity: 0.7; }

.fork-line.gen1.a { stroke: var(--terracotta); }
.fork-line.gen2.a1, .fork-line.gen2.a2 { stroke: var(--terracotta); opacity: 0.85; }
.fork-line.gen3.a1a, .fork-line.gen3.a1b,
.fork-line.gen3.a2a, .fork-line.gen3.a2b { stroke: var(--terracotta); opacity: 0.7; }

.spawn-marker {
    fill: var(--charcoal-earth);
    opacity: 0;
    animation: spawnIn 0.4s ease-out forwards;
}
.spawn-marker.m1 { animation-delay: 1.0s; }
.spawn-marker.m2,
.spawn-marker.m3 { animation-delay: 1.6s; }
.spawn-marker.m4,
.spawn-marker.m5,
.spawn-marker.m6,
.spawn-marker.m7 { animation-delay: 2.2s; }

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

@keyframes spawnIn {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

.dawn-title {
    position: relative;
    z-index: 2;
    text-align: center;
    pointer-events: none;
}

.domain-name {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--charcoal-earth);
    margin-bottom: 1.2rem;
    opacity: 0;
    animation: gentleFade 1.6s ease-out 0.5s forwards;
}

.dawn-stamp {
    opacity: 0;
    animation: gentleFade 1.6s ease-out 1.2s forwards;
}

@keyframes gentleFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TEMPORAL MARKERS
   ============================================================ */
.temporal-marker {
    position: relative;
    width: 100%;
    padding: 4rem 5vw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
}

.dot-row {
    width: 100%;
    height: 4px;
    background-image: radial-gradient(circle, var(--aged-bronze) 1.5px, transparent 1.6px);
    background-size: 12px 4px;
    background-repeat: repeat-x;
    background-position: 0 50%;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 0.6s ease-out, transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.temporal-marker.in-view .dot-row {
    opacity: 0.7;
    transform: scaleX(1);
}

.temporal-marker .timestamp {
    align-self: flex-start;
    opacity: 0;
    transition: opacity 0.6s ease-out 0.4s;
}

.temporal-marker.in-view .timestamp {
    opacity: 1;
}

.barrier-marker {
    padding-top: 6rem;
    padding-bottom: 2rem;
}

/* ============================================================
   LANES GRID
   ============================================================ */
.lanes-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr 1.4fr;
    column-gap: clamp(1rem, 4vw, 4rem);
    padding: 4rem 5vw;
    position: relative;
    min-height: 200vh;
}

.morning-grid {
    background: linear-gradient(180deg, var(--parchment) 0%, var(--sandstone) 100%);
}

.afternoon-grid {
    background: linear-gradient(180deg, var(--sandstone) 0%, var(--warm-umber) 90%, var(--charcoal-earth) 100%);
}

/* ----- Lane base ----- */
.lane {
    position: relative;
    will-change: transform;
    padding: 2rem 1rem;
    border-left: 1px solid rgba(196, 184, 150, 0.4);
    border-right: 1px solid rgba(196, 184, 150, 0.4);
    transition: border-color 0.3s ease-out, opacity 0.3s ease-out;
}

.lane.borrowed {
    border-left-style: dashed;
    border-right-style: dashed;
    border-color: rgba(196, 184, 150, 0.3);
}

.lane-header {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(138, 126, 107, 0.2);
}

.lane-content {
    position: relative;
    min-height: 600px;
    padding: 1rem;
}

/* ----- Lane textures ----- */
.lane-tex-a {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(184, 89, 58, 0.15) 0,
        rgba(184, 89, 58, 0.15) 2px,
        transparent 2px,
        transparent 12px
    );
}

.lane-tex-b {
    background-image: radial-gradient(
        circle at center,
        rgba(58, 74, 110, 0.2) 1.6px,
        transparent 1.8px
    );
    background-size: 20px 20px;
}

.lane-tex-c {
    background-color: rgba(196, 184, 150, 0.08);
    position: relative;
}

.lane-tex-d {
    background-image:
        radial-gradient(circle at 30% 20%, rgba(92, 79, 58, 0.08) 0, transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(92, 79, 58, 0.07) 0, transparent 60%),
        radial-gradient(circle at 40% 85%, rgba(92, 79, 58, 0.09) 0, transparent 60%);
}

/* ----- Lane content blocks ----- */
.color-block {
    width: 100%;
    height: 80px;
    margin: 1.4rem 0;
    border-radius: 1px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.color-block.in-view {
    opacity: 1;
    transform: translateY(0);
}

.lane-a .color-block { background: linear-gradient(90deg, var(--terracotta) 0%, var(--warm-umber) 100%); opacity: 0.85; }
.lane-a .color-block.in-view { opacity: 0.85; }

.lane-b .color-block { background: linear-gradient(90deg, var(--indigo) 0%, var(--warm-umber) 100%); opacity: 0.7; }
.lane-b .color-block.in-view { opacity: 0.7; }

.lane-c .color-block { background: linear-gradient(180deg, var(--tarnished-gold) 0%, var(--sandstone) 100%); opacity: 0.85; }
.lane-c .color-block.in-view { opacity: 0.85; }

.lane-d .color-block { background: linear-gradient(45deg, var(--warm-umber) 0%, var(--aged-bronze) 100%); opacity: 0.8; }
.lane-d .color-block.in-view { opacity: 0.8; }

.text-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0;
    margin: 1.6rem 0;
    border-top: 1px dotted rgba(138, 126, 107, 0.4);
    border-bottom: 1px dotted rgba(138, 126, 107, 0.4);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aged-bronze);
}

.text-strip span {
    opacity: 0.7;
}

.dotted-block {
    width: 100%;
    height: 100px;
    margin: 1.4rem 0;
    background-image: radial-gradient(circle, var(--indigo) 1.2px, transparent 1.4px);
    background-size: 8px 8px;
    opacity: 0.5;
}

.wave-strip {
    width: 100%;
    height: 360px;
    margin: 1.6rem 0;
}

.wave-strip path {
    fill: none;
    stroke: var(--tarnished-gold);
    stroke-width: 1.2;
    opacity: 0.6;
}

/* ----- Rendezvous bursts ----- */
.rendezvous {
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.rendezvous::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--terracotta) 0%, transparent 70%);
    opacity: 0;
}

.rendezvous.fire::before {
    animation: rendezvousBurst 0.6s ease-out forwards;
}

.rendezvous[data-pair="ab"]::before,
.rendezvous[data-pair="ad"]::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--terracotta) 50%, var(--indigo)) 0%, transparent 70%);
}
.rendezvous[data-pair="cd"]::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--tarnished-gold) 50%, var(--warm-umber)) 0%, transparent 70%);
}
.rendezvous[data-pair="bc"]::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--indigo) 50%, var(--tarnished-gold)) 0%, transparent 70%);
}
.rendezvous[data-pair="ac"]::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--terracotta) 50%, var(--tarnished-gold)) 0%, transparent 70%);
}
.rendezvous[data-pair="bd"]::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--indigo) 50%, var(--warm-umber)) 0%, transparent 70%);
}

@keyframes rendezvousBurst {
    0% { width: 0; height: 0; opacity: 0.45; }
    100% { width: 80px; height: 80px; opacity: 0; }
}

.burst-1 { top: 20%; left: 28%; }
.burst-2 { top: 45%; left: 72%; }
.burst-3 { top: 70%; left: 50%; }
.burst-4 { top: 30%; left: 60%; }
.burst-5 { top: 60%; left: 40%; }
.burst-6 { top: 25%; left: 50%; }
.burst-7 { top: 65%; left: 75%; }

/* Lane crossing brighten effect */
.lane.crossing {
    border-color: rgba(196, 184, 150, 0.85);
    transition: border-color 0.3s ease-out;
}

/* ============================================================
   MIDDAY CONVERGENCE (100vh)
   ============================================================ */
.midday {
    min-height: 100vh;
    background: var(--sandstone);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 5vw;
    overflow: hidden;
}

.midday-band {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 60vh;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: middayBreathe 4s ease-in-out infinite;
}

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

.layered-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stack-element {
    position: absolute;
    border-radius: 1px;
    opacity: 0.55;
    mix-blend-mode: multiply;
}

.stack-element.s1 {
    width: 70%;
    height: 60%;
    background: linear-gradient(45deg, var(--terracotta) 0%, transparent 70%);
    transform: translate(-15%, -10%) rotate(-2deg);
    opacity: 0.45;
}
.stack-element.s2 {
    width: 65%;
    height: 55%;
    background: linear-gradient(135deg, var(--indigo) 0%, transparent 70%);
    transform: translate(20%, 5%) rotate(3deg);
    opacity: 0.4;
}
.stack-element.s3 {
    width: 50%;
    height: 70%;
    background: linear-gradient(180deg, var(--tarnished-gold) 0%, transparent 90%);
    transform: translate(-5%, 15%) rotate(-1deg);
    opacity: 0.5;
}
.stack-element.s4 {
    width: 45%;
    height: 50%;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(184, 89, 58, 0.5) 0,
        rgba(184, 89, 58, 0.5) 2px,
        transparent 2px,
        transparent 14px
    );
    transform: translate(10%, -20%) rotate(1deg);
}
.stack-element.s5 {
    width: 40%;
    height: 45%;
    background-image: radial-gradient(circle, rgba(58, 74, 110, 0.6) 1.5px, transparent 1.7px);
    background-size: 16px 16px;
    transform: translate(-25%, 10%) rotate(-3deg);
    opacity: 0.5;
}
.stack-element.s6 {
    width: 35%;
    height: 70%;
    background: linear-gradient(225deg, var(--warm-umber) 0%, transparent 80%);
    transform: translate(15%, -10%) rotate(2deg);
    opacity: 0.55;
}
.stack-element.s7 {
    width: 60%;
    height: 30%;
    background: linear-gradient(90deg, transparent 0%, var(--aged-bronze) 50%, transparent 100%);
    transform: translateY(20%) rotate(-1deg);
    opacity: 0.35;
}
.stack-element.s8 {
    width: 30%;
    height: 30%;
    background: var(--terracotta);
    border-radius: 50%;
    opacity: 0.25;
    filter: blur(20px);
    transform: translate(0, 0);
}

.midday-text {
    position: relative;
    z-index: 5;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    color: var(--charcoal-earth);
    letter-spacing: 0.02em;
    text-align: center;
    max-width: 600px;
    padding: 0 1rem;
    line-height: 1.5;
}

/* ============================================================
   DUSK RESOLUTION (100vh)
   ============================================================ */
.dusk {
    min-height: 100vh;
    background: var(--charcoal-earth);
    color: var(--parchment);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background 1.5s ease-in-out;
}

.dusk-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dusk-fork {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 100%);
    height: 100%;
    pointer-events: none;
}

.dusk-line {
    fill: none;
    stroke: var(--parchment);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 2s ease-out;
}

.dusk.in-view .dusk-line {
    stroke-dashoffset: 0;
}
.dusk.in-view .dusk-line.gen3 { transition-delay: 0.2s; }
.dusk.in-view .dusk-line.gen2 { transition-delay: 0.8s; }
.dusk.in-view .dusk-line.gen1 { transition-delay: 1.4s; }
.dusk.in-view .dusk-line.trunk { transition-delay: 2.0s; }

.dusk-line.gen1.a { stroke: var(--terracotta); opacity: 0.7; }
.dusk-line.gen1.b { stroke: var(--indigo); opacity: 0.7; }
.dusk-line.gen2.a1, .dusk-line.gen2.a2 { stroke: var(--terracotta); opacity: 0.55; }
.dusk-line.gen2.b1, .dusk-line.gen2.b2 { stroke: var(--indigo); opacity: 0.55; }
.dusk-line.gen3.a1a, .dusk-line.gen3.a1b,
.dusk-line.gen3.a2a, .dusk-line.gen3.a2b { stroke: var(--terracotta); opacity: 0.4; }
.dusk-line.gen3.b1a, .dusk-line.gen3.b1b,
.dusk-line.gen3.b2a, .dusk-line.gen3.b2b { stroke: var(--indigo); opacity: 0.4; }

.dusk-marker {
    fill: var(--parchment);
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.dusk.in-view .dusk-marker { opacity: 0.9; transition-delay: 2.4s; }

.dusk-title {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 5vw;
}

.dusk-stamp {
    color: var(--tarnished-gold);
    margin-bottom: 1.6rem;
    opacity: 0;
    transition: opacity 1.2s ease-out;
    transition-delay: 2.8s;
}

.dusk.in-view .dusk-stamp {
    opacity: 1;
}

.closing-statement {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    color: var(--parchment);
    letter-spacing: 0.04em;
    line-height: 1.5;
    max-width: 640px;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 1.6s ease-out;
    transition-delay: 3.4s;
}

.dusk.in-view .closing-statement {
    opacity: 0.92;
}

/* ============================================================
   SILENCE (final empty space)
   ============================================================ */
.silence {
    height: 50vh;
    background: var(--charcoal-earth);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .lanes-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
        padding: 3rem 4vw;
    }
    .lane-content {
        min-height: 400px;
    }
}

@media (max-width: 480px) {
    .lanes-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .lane {
        padding: 1.4rem 0.6rem;
    }
    .lane-content {
        min-height: 320px;
    }
    .midday-band {
        height: 70vh;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .fork-line, .dusk-line {
        stroke-dashoffset: 0 !important;
    }

    .midday-band {
        animation: none !important;
    }
}