/* miris.monster -- zen-celestial meditation garden */

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

:root{
    --twilight:#1A1625;
    --star-mist:#E8E0D4;
    --sage:#7A8B6F;
    --wisteria:#9B8AAF;
    --dust-gold:#C4A86B;
    --stone:#5C5A65;
    --moonlight:#D4D8E8;
    --void:#0E0B14;
}

body{
    background:radial-gradient(ellipse at 50% 50%,var(--twilight),var(--void));
    color:var(--star-mist);
    font-family:'Space Grotesk',sans-serif;
    font-weight:400;
    font-size:1.0625rem;
    line-height:1.9;
    letter-spacing:0.01em;
    overflow-x:hidden;
    position:relative;
}

/* Star field */
.star-field{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
}

.star{
    position:absolute;
    border-radius:50%;
    animation:star-pulse var(--dur) ease-in-out infinite;
    animation-delay:var(--delay);
}

@keyframes star-pulse{
    0%,100%{opacity:var(--base-op)}
    50%{opacity:calc(var(--base-op) + 0.2)}
}

/* Enso circles */
.enso{
    display:block;
    margin:0 auto;
}

.enso-circle{
    stroke-dasharray:95 100;
    stroke-dashoffset:95;
    transition:stroke-dashoffset 3s cubic-bezier(0.16,1,0.3,1);
}

.enso.drawn .enso-circle{
    stroke-dashoffset:0;
}

.enso-hero{
    width:clamp(200px,40vmin,360px);
    height:auto;
    position:relative;
    z-index:5;
}

.enso-break{
    width:50px;
    height:auto;
    margin:6vh auto;
    opacity:0.5;
}

/* Stations */
.station{
    position:relative;
    z-index:5;
}

/* Station 1: Gate */
.station-gate{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.gate-content{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.gate-text{
    position:absolute;
    text-align:center;
    opacity:0;
    transition:opacity 1.5s ease 2.5s;
}

body.loaded .gate-text{
    opacity:1;
}

.gate-title{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    font-size:clamp(3rem,8vw,8rem);
    letter-spacing:0.02em;
    color:var(--star-mist);
    line-height:1;
}

.gate-sub{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:0.8125rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--sage);
    margin-top:1rem;
}

/* Station 2: Stones */
.station-stones{
    padding:20vh 2rem;
}

.stone-content{
    max-width:600px;
    margin:0 auto;
    text-align:center;
    padding:10vh 0;
}

.stone-heading{
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
    font-style:italic;
    font-size:clamp(1.75rem,4vw,3.5rem);
    color:var(--dust-gold);
    margin-bottom:2rem;
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.stone-heading.revealed{
    opacity:1;
    transform:translateY(0);
}

.stone-text{
    max-width:50ch;
    margin:0 auto;
    color:var(--star-mist);
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.6s ease 0.15s,transform 0.6s ease 0.15s;
}

.stone-text.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Station 3: Reflection Pool */
.station-pool{
    padding:10vh 2rem;
}

.pool-content{
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.pool-statement{
    text-align:center;
    position:relative;
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.pool-statement.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Reflection pseudo-element */
.pool-statement::after{
    content:attr(data-text);
    position:absolute;
    top:100%;
    left:0;
    right:0;
    transform:scaleY(-1);
    opacity:0.04;
    mask-image:linear-gradient(to bottom,black,transparent 60%);
    -webkit-mask-image:linear-gradient(to bottom,black,transparent 60%);
    pointer-events:none;
}

.pool-text{
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
    font-size:clamp(1.75rem,4vw,3.5rem);
    line-height:1.6;
    color:var(--star-mist);
}

/* Station 4: Horizon */
.station-horizon{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(to bottom,transparent,rgba(42,37,53,0.3));
}

.horizon-content{
    text-align:center;
    opacity:0;
    transform:translateY(12px);
    transition:opacity 2s ease,transform 2s ease;
}

.horizon-content.revealed{
    opacity:1;
    transform:translateY(0);
}

.horizon-kanji{
    font-family:'Noto Serif JP',serif;
    font-weight:400;
    font-size:clamp(5rem,15vw,12rem);
    color:var(--star-mist);
    opacity:0.15;
    line-height:1;
    user-select:none;
}

/* Constellation lines */
.constellation-line{
    position:fixed;
    pointer-events:none;
    z-index:2;
    stroke:var(--stone);
    stroke-width:1;
    opacity:0;
    transition:opacity 0.5s ease;
}

/* Responsive */
@media(max-width:768px){
    .enso-hero{
        width:200px;
    }
    .gate-title{
        font-size:clamp(2rem,10vw,4rem);
    }
    .pool-content{
        min-height:60vh;
    }
}

@media(prefers-reduced-motion:reduce){
    .star{animation:none !important}
    .enso-circle{
        stroke-dashoffset:0 !important;
        transition:none !important;
    }
    .stone-heading,.stone-text,.pool-statement,.horizon-content,.gate-text{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}