/* continu.ax - Kinetic Cartographic Coordinate Plane */

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

:root{
    --substrate:#F4F1EB;
    --grid:#C8D5DF;
    --axis:#7B8FA1;
    --ink:#1C2A38;
    --sienna:#E8572A;
    --green:#2A7B5F;
    --umber:#3D2C24;
    --gold:#D4A44C;
}

html{scroll-behavior:smooth}

body{
    background:var(--substrate);
    color:var(--ink);
    font-family:'Instrument Serif',serif;
    font-weight:400;
    font-size:clamp(1rem,1.8vw,1.35rem);
    line-height:1.72;
    overflow-x:hidden;
}

/* Grid background */
.grid-bg{
    position:fixed;
    inset:0;
    width:100%;height:100%;
    z-index:0;
    pointer-events:none;
}

/* Axes */
.axis{
    position:fixed;
    z-index:2;
    pointer-events:none;
}

.axis-x{
    top:60%;
    left:0;right:0;
    height:1px;
    background:var(--axis);
}

.axis-y{
    left:38%;
    top:0;bottom:0;
    width:1px;
    background:var(--axis);
}

/* Origin pulse */
.origin-pulse{
    position:fixed;
    left:38%;top:60%;
    width:12px;height:12px;
    margin-left:-6px;margin-top:-6px;
    border-radius:50%;
    background:var(--sienna);
    z-index:3;
    pointer-events:none;
    animation:pulse 2.5s ease-in-out infinite;
}

@keyframes pulse{
    0%{transform:scale(1);opacity:1}
    50%{transform:scale(1.8);opacity:0.3}
    100%{transform:scale(1);opacity:1}
}

/* Lissajous canvas */
.lissajous-canvas{
    position:fixed;
    bottom:0;right:0;
    width:40vw;height:40vh;
    z-index:1;
    pointer-events:none;
}

/* Frames */
.frame{
    min-height:100vh;
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:38% 62%;
    grid-template-rows:60% 40%;
}

/* Quadrant positioning */
.q1-content{
    grid-column:2;grid-row:1;
    display:flex;
    align-items:center;
    padding:clamp(24px,4vw,60px);
}

.q2-content{
    grid-column:1;grid-row:1;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    padding:clamp(24px,4vw,60px);
    padding-top:clamp(40px,8vh,80px);
}

.q3-content{
    grid-column:1;grid-row:2;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:flex-start;
    padding:clamp(24px,4vw,60px);
    text-align:right;
}

.frame-center{
    grid-column:1/3;grid-row:1/3;
    justify-content:center;
    align-items:center;
    text-align:center;
}

/* Hero domain */
.hero-domain{
    font-family:'DM Mono',monospace;
    font-weight:500;
    font-size:clamp(4rem,12vw,14rem);
    letter-spacing:0.04em;
    color:var(--ink);
    line-height:1;
}

.dot-pulse{
    color:var(--sienna);
    animation:dotPulse 2s ease-in-out infinite;
    display:inline-block;
}

@keyframes dotPulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:0.5;transform:scale(1.3)}
}

/* Frame label */
.frame-label{
    font-family:'Syne',sans-serif;
    font-weight:700;
    font-size:clamp(0.7rem,1vw,0.9rem);
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--axis);
}

/* Narrative text */
.narrative{
    max-width:45ch;
    color:var(--ink);
}

/* Reveal */
.reveal-el{
    opacity:0;
    transform:translateX(20px);
    transition:opacity 600ms cubic-bezier(0.25,0.1,0.25,1),transform 600ms cubic-bezier(0.25,0.1,0.25,1);
}

.reveal-el.visible{
    opacity:1;
    transform:translateX(0);
}

/* Big word */
.big-word{
    font-family:'DM Mono',monospace;
    font-weight:500;
    font-size:clamp(3rem,12vw,12rem);
    letter-spacing:0.04em;
    color:var(--ink);
    overflow:hidden;
}

.big-word .bchar{
    display:inline-block;
    opacity:0;
    transform:translateX(20px);
}

.big-word .bchar.show{
    opacity:1;
    transform:translateX(0);
    transition:opacity 200ms ease,transform 200ms ease;
}

/* Closing mark */
.closing-mark{
    font-family:'DM Mono',monospace;
    font-weight:400;
    font-size:0.85rem;
    color:var(--axis);
    letter-spacing:0.04em;
    margin-top:2rem;
}

/* Responsive */
@media(max-width:768px){
    .frame{
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .q1-content,.q2-content,.q3-content,.frame-center{
        grid-column:1;
        grid-row:auto;
        padding:clamp(16px,3vw,32px);
        justify-content:flex-start;
        align-items:flex-start;
        text-align:left;
    }

    .axis-y{left:16px}
    .origin-pulse{left:16px}

    .lissajous-canvas{
        width:50vw;
        height:30vh;
    }

    .hero-domain{
        font-size:clamp(2rem,8vw,5rem);
    }
}