/* miris.tech -- editorial magazine with aurora accents */

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

:root{
    --slate:#2A2D35;
    --parchment:#F0EDE8;
    --steel:#6B7080;
    --cyan:#3AC5C9;
    --green:#4AE88C;
    --violet:#8B6EC7;
    --ink:#14161C;
    --fog:#D8D4CE;
}

body{
    background:var(--slate);
    color:var(--parchment);
    font-family:'Libre Caslon Text',serif;
    font-weight:400;
    font-size:1.0625rem;
    line-height:1.85;
    overflow-x:hidden;
}

/* 16-column grid */
.spread-grid{
    display:grid;
    grid-template-columns:repeat(16,1fr);
    gap:1rem;
    max-width:1400px;
    margin:0 auto;
    padding:0 2rem;
    position:relative;
    z-index:2;
}

/* Spreads */
.spread{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    padding:6vh 0;
}

/* Aurora lines */
.aurora-line{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg,var(--cyan),var(--green),var(--violet),var(--cyan));
    background-size:300% 100%;
    animation:aurora-shift 10s linear infinite;
}

.aurora-multi{
    height:3px;
    background:linear-gradient(90deg,var(--cyan),var(--green),var(--violet),var(--cyan),var(--green));
    background-size:400% 100%;
}

@keyframes aurora-shift{
    from{background-position:0% 50%}
    to{background-position:300% 50%}
}

/* Collage layer */
.collage-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
}

.collage-word{
    position:absolute;
    font-family:'Libre Caslon Display',serif;
    font-size:14rem;
    color:var(--steel);
    opacity:0.04;
    line-height:1;
    user-select:none;
}

.cw-1{top:10%;left:5%;transform:rotate(3deg)}
.cw-2{top:40%;right:5%;transform:rotate(-5deg)}
.cw-3{bottom:5%;left:30%;transform:rotate(6deg)}

/* Section numbers */
.section-number{
    position:absolute;
    top:3rem;
    left:3rem;
    font-family:'JetBrains Mono',monospace;
    font-size:8rem;
    color:var(--steel);
    opacity:0.06;
    line-height:1;
    z-index:1;
    pointer-events:none;
}

/* Spread 1: Masthead */
.spread-masthead{
    background:var(--slate);
}

.masthead-title{
    font-family:'Libre Caslon Display',serif;
    font-weight:400;
    font-size:clamp(4rem,11vw,12rem);
    letter-spacing:-0.03em;
    line-height:0.95;
    color:var(--parchment);
    grid-column:1/15;
    opacity:0;
    transition:opacity 1s ease;
}

.masthead-title.typed{
    opacity:1;
}

/* Spread 2: Essay */
.spread-essay{
    background:var(--parchment);
    color:var(--ink);
}

.spread-essay .section-number{color:var(--fog)}

.essay-column{
    grid-column:2/8;
}

.essay-heading{
    font-family:'Libre Caslon Display',serif;
    font-weight:400;
    font-size:clamp(2rem,5vw,4.5rem);
    letter-spacing:-0.01em;
    color:var(--ink);
    margin-bottom:2rem;
    position:relative;
    min-height:1.2em;
}

.essay-heading .tw-cursor{
    display:inline;
    color:var(--cyan);
    animation:blink 0.8s step-end infinite;
}

@keyframes blink{
    0%,100%{opacity:1}
    50%{opacity:0}
}

.essay-text{
    margin-bottom:1.5rem;
    color:var(--ink);
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

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

.pull-quote{
    margin:2.5rem 0;
    padding:2rem 0 2rem 2rem;
    border-left:2px solid var(--cyan);
    position:relative;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.pull-quote.revealed{
    opacity:1;
    transform:translateY(0);
}

.pq-mark{
    position:absolute;
    top:-1rem;
    left:-1rem;
    font-family:'Libre Caslon Display',serif;
    font-size:12rem;
    color:var(--cyan);
    opacity:0.08;
    line-height:1;
    pointer-events:none;
}

.pull-quote p{
    font-style:italic;
    font-size:clamp(1.25rem,2.5vw,2rem);
    color:var(--ink);
    line-height:1.5;
}

.essay-collage{
    grid-column:10/16;
    position:relative;
    min-height:300px;
}

.collage-frag{
    position:absolute;
    font-family:'Libre Caslon Display',serif;
    color:var(--fog);
    opacity:0.06;
    line-height:1;
    user-select:none;
}

.frag-1{font-size:6rem;top:0;left:0;transform:rotate(-4deg)}
.frag-2{font-size:8rem;top:30%;right:0;transform:rotate(3deg)}
.frag-3{font-size:5rem;bottom:20%;left:10%;transform:rotate(-2deg)}
.frag-4{font-size:4rem;bottom:0;right:20%;transform:rotate(5deg)}

/* Spread 3: Gallery */
.spread-gallery{
    background:var(--ink);
}

.gallery-list{
    grid-column:1/17;
}

.gallery-entry{
    padding:4vh 2rem;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.gallery-entry.revealed{
    opacity:1;
    transform:translateY(0);
}

.gallery-name{
    font-family:'Libre Caslon Display',serif;
    font-weight:400;
    font-size:clamp(2.5rem,6vw,5rem);
    color:var(--parchment);
    letter-spacing:-0.02em;
    line-height:1.1;
}

.gallery-underline{
    height:2px;
    width:0;
    margin:1rem 0;
    transition:width 1s ease 0.3s;
}

.gallery-entry.revealed .gallery-underline{
    width:100%;
}

.underline-cyan{background:var(--cyan)}
.underline-green{background:var(--green)}
.underline-violet{background:var(--violet)}

.gallery-desc{
    font-size:1rem;
    color:var(--steel);
    max-width:60ch;
}

/* Spread 4: Colophon */
.spread-colophon{
    background:var(--slate);
}

.colophon-content{
    grid-column:5/13;
}

.colophon-text{
    color:var(--parchment);
    margin-bottom:2rem;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

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

.colophon-close{
    font-family:'Libre Caslon Display',serif;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--cyan);
    letter-spacing:-0.01em;
    opacity:0;
    transition:opacity 0.6s ease 0.3s;
}

.colophon-close.revealed{
    opacity:1;
}

.fin{
    text-align:center;
    font-family:'JetBrains Mono',monospace;
    font-size:0.8125rem;
    letter-spacing:0.1em;
    color:var(--steel);
    padding:4rem 0 2rem;
    opacity:0;
    transition:opacity 0.6s ease;
}

.fin.revealed{
    opacity:1;
}

/* Responsive */
@media(max-width:768px){
    .spread-grid{
        grid-template-columns:1fr;
    }
    .essay-column,.essay-collage,.gallery-list,.colophon-content{
        grid-column:1;
    }
    .masthead-title{grid-column:1}
    .essay-collage{display:none}
    .collage-word{font-size:6rem}
    .section-number{font-size:4rem;top:1.5rem;left:1.5rem}
}

@media(prefers-reduced-motion:reduce){
    .aurora-line{animation:none}
    .masthead-title{opacity:1 !important;transition:none !important}
    .essay-text,.pull-quote,.gallery-entry,.colophon-text,.colophon-close,.fin{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
    .gallery-underline{width:100% !important;transition:none !important}
    .essay-heading .tw-cursor{display:none}
}