/* continua.quest - Ethereal Coastal Liminality */

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

:root{
    --fog:#F0EDE8;
    --slate:#2C3A47;
    --horizon:#7BA7BC;
    --amber:#C4956A;
    --mist:#D5CFC7;
    --teal:#1A5E63;
    --lavender:#B8B0C8;
    --scroll-pct:0;
}

html{scroll-behavior:auto}

body{
    background:var(--fog);
    color:var(--slate);
    font-family:'EB Garamond',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.25rem);
    line-height:1.7;
    letter-spacing:0.01em;
    overflow-x:auto;
    overflow-y:hidden;
    height:100vh;
}

/* Grain overlay */
.grain-overlay{
    position:fixed;
    inset:0;
    width:100%;height:100%;
    z-index:100;
    pointer-events:none;
    opacity:0.03;
    mix-blend-mode:multiply;
}

/* Planes */
.plane{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    pointer-events:none;
    will-change:transform;
}

/* Plane 0: Gradient sky */
.plane-0{
    z-index:0;
    background:linear-gradient(
        90deg,
        var(--lavender) 0%,
        var(--fog) 15%,
        var(--mist) 35%,
        #E8DFD4 50%,
        var(--fog) 65%,
        var(--mist) 85%,
        var(--lavender) 100%
    );
    background-size:300% 100%;
    background-position:calc(var(--scroll-pct) * 200%) 0;
}

/* Plane 1: Cloud forms */
.plane-1{
    z-index:1;
}

.cloud-form{
    position:absolute;
    border-radius:50%;
    filter:blur(40px);
    opacity:0.12;
    animation:tidalBreathe 12s ease-in-out infinite;
}

.cf1{width:400px;height:200px;background:var(--mist);top:15%;left:10%}
.cf2{width:300px;height:250px;background:var(--lavender);top:50%;left:35%;animation-delay:-3s}
.cf3{width:500px;height:180px;background:var(--mist);top:25%;left:60%;animation-delay:-6s}
.cf4{width:350px;height:220px;background:var(--lavender);top:65%;left:80%;animation-delay:-9s}
.cf5{width:280px;height:160px;background:var(--mist);top:40%;left:120%;animation-delay:-4s}

@keyframes tidalBreathe{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-15px)}
}

/* Plane 3: Ruled lines */
.plane-3{
    z-index:3;
}

.ruled-line{
    position:absolute;
    left:0;
    width:300vw;
    height:0.5px;
    background:var(--mist);
    opacity:0.2;
}

/* Plane 4: Typographic fragments */
.plane-4{
    z-index:4;
}

.typo-frag{
    position:absolute;
    font-family:'EB Garamond',serif;
    font-weight:400;
    font-size:clamp(200px,30vw,500px);
    color:var(--slate);
    opacity:0.05;
    line-height:1;
    pointer-events:none;
}

/* Scroll track (Plane 2 content) */
.scroll-track{
    position:relative;
    z-index:5;
    height:100vh;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

.content-rail{
    display:flex;
    align-items:stretch;
    height:100vh;
    width:max-content;
}

/* Zones */
.zone{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100vh;
    flex-shrink:0;
}

.zone-a{width:100vw;padding:0 clamp(40px,8vw,120px)}
.zone-b{width:80vw;padding:0 clamp(40px,6vw,80px)}
.zone-c{width:120vw;padding:0 clamp(40px,6vw,80px)}
.zone-d{width:100vw;padding:0 clamp(40px,6vw,80px)}
.zone-e{width:90vw;padding:0 clamp(40px,6vw,80px)}

.zone-gap-1{width:40vw}
.zone-gap-2{width:50vw}
.zone-gap-3{width:30vw}

.zone-wave{
    width:15vw;
    display:flex;
    align-items:center;
    justify-content:center;
}

.wave-svg{
    height:80vh;
    width:100%;
}

/* Content clusters */
.content-cluster{
    max-width:55ch;
}

/* Typography */
.quest-title{
    font-family:'EB Garamond',serif;
    font-weight:500;
    font-size:clamp(2.5rem,6vw,8rem);
    letter-spacing:0.02em;
    line-height:1.2;
    color:var(--slate);
}

.accent-dot{
    color:var(--teal);
}

.section-display{
    font-family:'EB Garamond',serif;
    font-weight:500;
    font-size:clamp(1.8rem,4vw,4rem);
    letter-spacing:0.02em;
    line-height:1.2;
    color:var(--slate);
}

.passage{
    max-width:50ch;
    color:var(--slate);
}

.small-passage{
    font-size:clamp(0.9rem,1.1vw,1.1rem);
}

.hl{
    color:var(--teal);
}

.mono-accent{
    font-family:'IBM Plex Mono',monospace;
    font-weight:300;
    color:var(--horizon);
}

.closing-mark{
    font-family:'EB Garamond',serif;
    font-weight:400;
    font-size:clamp(1.2rem,2vw,2rem);
    color:var(--amber);
    letter-spacing:0.02em;
}

/* Word reveal animation */
.passage .word,.section-display .word,.quest-title .word{
    display:inline-block;
    opacity:0;
    transform:translateX(30px);
    transition:opacity 600ms cubic-bezier(0.25,0.1,0.25,1),
               transform 600ms cubic-bezier(0.25,0.1,0.25,1);
}

.passage .word.vis,.section-display .word.vis,.quest-title .word.vis{
    opacity:1;
    transform:translateX(0);
}

/* Scroll indicator */
.scroll-indicator{
    position:fixed;
    bottom:24px;
    left:10%;right:10%;
    height:1px;
    z-index:50;
    pointer-events:none;
}

.indicator-line{
    width:100%;
    height:1px;
    background:var(--mist);
    opacity:0.3;
}

.indicator-dot{
    position:absolute;
    top:-3px;
    left:0;
    width:7px;height:7px;
    border-radius:50%;
    background:var(--teal);
    transition:left 100ms ease;
}

.fixed-domain{
    position:fixed;
    bottom:10px;
    left:16px;
    font-family:'Inter',sans-serif;
    font-weight:300;
    font-size:10px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--mist);
    z-index:50;
}

/* Responsive: vertical on mobile */
@media(max-width:768px){
    body{
        overflow-x:hidden;
        overflow-y:auto;
        height:auto;
    }

    .scroll-track{
        height:auto;
        overflow-x:hidden;
        overflow-y:visible;
    }

    .content-rail{
        flex-direction:column;
        width:100%;
        height:auto;
    }

    .zone{
        width:100% !important;
        height:auto;
        min-height:80vh;
        padding:clamp(24px,5vw,40px) !important;
    }

    .zone-gap-1,.zone-gap-2,.zone-gap-3{min-height:30vh}
    .zone-wave{min-height:20vh;width:100% !important}

    .wave-svg{
        height:auto;
        width:80%;
        transform:rotate(90deg);
    }

    .plane-1,.plane-4{display:none}

    .ruled-line{width:100vw}

    .scroll-indicator{display:none}
}

@media(prefers-reduced-motion:reduce){
    .cloud-form{animation:none}
    .passage .word,.section-display .word,.quest-title .word{
        opacity:1;
        transform:none;
        transition:none;
    }
}