/* economics.day - Retro-Futuristic Masonry Economics */

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

:root{
    --void:#070B14;
    --deep:#0B0F1A;
    --twilight:#15202E;
    --steel:#5B8FA8;
    --ethereal:#8EC5D6;
    --mist:#B8D4E3;
    --ice:#D6E5EE;
    --frost:#EEF4F8;
    --amber:#D4A843;
    --coral:#C75B4A;
}

body{
    background:var(--void);
    color:var(--ice);
    font-family:'Literata',serif;
    font-weight:400;
    font-variation-settings:'opsz' 14;
    font-size:clamp(0.95rem,1.4vw,1.15rem);
    line-height:1.65;
    overflow-x:hidden;
}

/* Scan-line overlay */
body::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:100;
    pointer-events:none;
    background:repeating-linear-gradient(transparent,transparent 2px,rgba(7,11,20,0.03) 2px,rgba(7,11,20,0.03) 4px);
}

/* Organic blob layer */
.blob-layer{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
}

.blob{
    position:absolute;
    border-radius:50%;
    background:var(--ethereal);
    filter:blur(60px);
    opacity:0;
    transition:opacity 0.8s ease;
}

.blob.visible{opacity:0.04}

.b1{width:400px;height:400px;top:10%;left:15%;animation:blobDrift1 15s ease-in-out infinite}
.b2{width:300px;height:350px;top:40%;right:10%;animation:blobDrift2 19s ease-in-out infinite}
.b3{width:250px;height:250px;bottom:20%;left:30%;animation:blobDrift3 23s ease-in-out infinite}
.b4{width:350px;height:300px;top:60%;left:50%;animation:blobDrift2 17s ease-in-out infinite reverse}

@keyframes blobDrift1{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(30px,-20px) scale(1.03)}
}

@keyframes blobDrift2{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(-25px,15px) scale(0.97)}
}

@keyframes blobDrift3{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(20px,25px) scale(1.02)}
}

/* Scroll gauge */
.scroll-gauge{
    position:fixed;
    right:12px;
    top:10%;
    height:80%;
    width:2px;
    z-index:20;
}

.gauge-track{
    width:2px;
    height:100%;
    background:linear-gradient(180deg,var(--steel),var(--ethereal));
    opacity:0.2;
}

.gauge-node{
    position:absolute;
    top:0;
    left:-3px;
    width:8px;height:8px;
    border-radius:50%;
    background:var(--ethereal);
    transition:top 0.1s linear;
}

/* Masonry grid */
.masonry{
    position:relative;
    z-index:1;
    column-count:3;
    column-gap:1.8rem;
    padding:clamp(2rem,4vw,4rem) clamp(5vw,5vw,5vw);
    max-width:1400px;
    margin:0 auto;
}

/* Tiles */
.tile{
    break-inside:avoid;
    margin-bottom:1.8rem;
    border-radius:8px;
}

/* Tile entrance animation */
.tile-entrance{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1),transform 0.6s cubic-bezier(0.22,1,0.36,1);
}

.tile-entrance.shown{
    opacity:1;
    transform:translateY(0);
}

/* Hero tile */
.hero-tile{
    column-span:all;
    text-align:center;
    padding:clamp(60px,10vh,120px) clamp(24px,4vw,60px);
    position:relative;
    overflow:hidden;
}

.hero-icon-bg{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:200px;height:200px;
    opacity:0.08;
}

.hero-title{
    font-family:'Anybody',sans-serif;
    font-weight:800;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.02em;
    line-height:1.05;
    color:var(--frost);
    position:relative;
    z-index:2;
}

.mid-hero{
    font-size:clamp(2rem,5vw,4rem);
    font-weight:600;
}

.hero-sub{
    font-family:'Literata',serif;
    font-weight:300;
    font-variation-settings:'opsz' 14;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:var(--ice);
    max-width:50ch;
    margin:2rem auto 0;
    position:relative;
    z-index:2;
    opacity:0.7;
}

/* Data tile */
.data-tile{
    min-height:180px;
    background:rgba(184,212,227,0.04);
    border:1px solid rgba(91,143,168,0.15);
    padding:clamp(16px,2vw,24px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0.5rem;
}

.data-tile.in-view{
    animation:pulse 3s ease-in-out infinite;
}

@keyframes pulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.015)}
}

.tile-icon{
    width:32px;height:32px;
    margin-bottom:0.5rem;
}

.data-value{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(1.4rem,2.5vw,2rem);
    letter-spacing:0.04em;
    color:var(--ethereal);
}

.data-label{
    font-family:'Anybody',sans-serif;
    font-weight:400;
    font-size:clamp(0.65rem,0.9vw,0.8rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--steel);
}

/* Narrative tile */
.narrative-tile{
    min-height:200px;
    background:var(--deep);
    padding:clamp(24px,3vw,40px);
}

.section-heading{
    font-family:'Anybody',sans-serif;
    font-weight:600;
    font-size:clamp(1.6rem,3vw,2.4rem);
    letter-spacing:0.02em;
    line-height:1.2;
    color:var(--frost);
    margin-bottom:1rem;
}

.body-text{
    margin-bottom:1rem;
}

/* Dissolution */
.dissolve-1{opacity:0.6;margin-bottom:8rem}

/* Responsive */
@media(min-width:1400px){.masonry{column-count:4}}
@media(max-width:900px){.masonry{column-count:2}}
@media(max-width:600px){
    .masonry{column-count:1}
    .scroll-gauge{display:none}
}

@media(prefers-reduced-motion:reduce){
    .blob{animation:none}
    .data-tile.in-view{animation:none}
    .tile-entrance{opacity:1;transform:none;transition:none}
    body::after{display:none}
}