/* haroo.day - Retro-Futuristic Candy Metropolis */

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

:root{
    --lavender-dusk:#C8A2E8;
    --peach-dawn:#FFB4A2;
    --electric-strawberry:#FF3F8E;
    --mint-neon:#3FFCA4;
    --lemon-volt:#FFF06B;
    --aqua-pulse:#4DE8E0;
    --violet-flare:#8B5CF6;
    --frosted-white:rgba(255,255,255,0.07);
    --warm-cream:#FFF8F0;
    --deep-plum:#1A0A2E;
    --district-accent:#FF3F8E;
}

html{scroll-behavior:smooth}

body{
    background:var(--deep-plum);
    color:var(--warm-cream);
    font-family:'Anybody','Space Grotesk',sans-serif;
    font-weight:300;
    font-variation-settings:'wdth' 90,'wght' 300;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.7;
    overflow-x:hidden;
}

/* Vignette */
.vignette{
    position:fixed;
    inset:0;
    z-index:10;
    pointer-events:none;
    background:radial-gradient(ellipse at center,transparent 60%,rgba(26,10,46,0.4) 100%);
}

/* Ripple */
.ripple-layer{
    position:fixed;
    inset:0;
    z-index:9;
    pointer-events:none;
}

.ripple{
    position:absolute;
    width:200px;height:200px;
    border-radius:50%;
    border:1px solid var(--district-accent);
    transform:translate(-50%,-50%) scale(0);
    opacity:0.6;
    animation:rippleExpand 0.8s ease-out forwards;
}

@keyframes rippleExpand{
    to{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* Sky background */
.sky-bg{
    position:fixed;
    inset:0;
    z-index:0;
    background:linear-gradient(180deg,var(--lavender-dusk),var(--peach-dawn));
    animation:skyShift 60s linear infinite;
}

@keyframes skyShift{
    0%,100%{filter:hue-rotate(0deg)}
    50%{filter:hue-rotate(15deg)}
}

/* City midground */
.city-midground{
    position:fixed;
    bottom:0;left:0;right:0;
    height:40vh;
    z-index:1;
    pointer-events:none;
    will-change:transform;
}

/* Particle layer */
.particle-layer{
    position:fixed;
    inset:0;
    z-index:2;
    pointer-events:none;
    overflow:hidden;
}

.candy-particle{
    position:absolute;
    border-radius:50%;
    animation:particleRise linear infinite;
}

@keyframes particleRise{
    0%{transform:translateY(0) translateX(0);opacity:0.15}
    25%{transform:translateY(-25vh) translateX(8px);opacity:0.25}
    50%{transform:translateY(-50vh) translateX(-6px);opacity:0.2}
    75%{transform:translateY(-75vh) translateX(10px);opacity:0.25}
    100%{transform:translateY(-100vh) translateX(0);opacity:0.15}
}

/* Content */
.content-layer{
    position:relative;
    z-index:3;
}

.district{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,8vh,100px) clamp(24px,4vw,80px);
}

/* Sign panels */
.sign-panel{
    position:absolute;
    background:var(--frosted-white);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid var(--district-accent);
    padding:clamp(20px,3vw,40px) clamp(24px,4vw,48px);
    border-radius:4px;
    max-width:500px;
    box-shadow:0 0 30px rgba(255,63,142,0.05);
}

.sign-hero{
    position:relative;
    max-width:none;
}

.sign-small{
    padding:clamp(12px,2vw,20px) clamp(16px,2vw,28px);
    max-width:250px;
}

.sign-final{
    position:relative;
    max-width:600px;
    text-align:center;
}

.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(5rem,14vw,12rem);
    letter-spacing:0.06em;
    line-height:1;
    color:var(--warm-cream);
    text-shadow:0 0 40px var(--district-accent);
}

.district-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:0.03em;
    text-transform:uppercase;
    line-height:1.2;
    margin-bottom:12px;
}

.ambient-text{
    font-family:'Anybody',sans-serif;
    font-variation-settings:'wdth' 90,'wght' 300;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.7;
    color:var(--warm-cream);
    opacity:0.8;
    transition:font-variation-settings 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

.ambient-text:hover{
    font-variation-settings:'wdth' 120,'wght' 500;
}

.ambient-text.wide{
    font-variation-settings:'wdth' 110,'wght' 300;
}

.ambient-text.wider{
    font-variation-settings:'wdth' 120,'wght' 350;
}

.ambient-text.narrow{
    font-variation-settings:'wdth' 78,'wght' 300;
    font-size:clamp(1.5rem,3vw,2.5rem);
}

.mono-label{
    position:absolute;
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.65rem,1.2vw,0.85rem);
    font-weight:400;
    color:var(--district-accent);
    opacity:0.6;
    letter-spacing:0.06em;
}

.station-label{
    position:absolute;
    bottom:clamp(20px,4vh,40px);
    left:50%;
    transform:translateX(-50%);
}

/* Isometric buildings */
.iso-building{
    position:absolute;
    width:clamp(40px,8vw,80px);
    height:clamp(60px,12vw,120px);
}

.iso-building.small{
    width:clamp(30px,5vw,50px);
    height:clamp(40px,8vw,70px);
}

.iso-building.medium{
    width:clamp(50px,8vw,90px);
    height:clamp(80px,14vw,140px);
}

.iso-building.tall{
    width:clamp(45px,7vw,70px);
    height:clamp(100px,18vw,180px);
}

.iso-building.reflected{
    transform:scaleY(-1);
}

.iso-top,.iso-left,.iso-right{
    position:absolute;
}

.iso-top{
    top:0;left:0;right:0;
    height:30%;
    background:var(--face);
    opacity:0.4;
    clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}

.iso-left{
    bottom:0;left:0;
    width:50%;height:70%;
    background:var(--face);
    opacity:1;
}

.iso-right{
    bottom:0;right:0;
    width:50%;height:70%;
    background:var(--face);
    opacity:0.7;
}

.window{
    position:absolute;
    width:4px;height:4px;
    background:var(--lemon-volt);
    animation:windowPulse 4s ease-in-out infinite alternate;
    z-index:1;
}

@keyframes windowPulse{
    0%{opacity:0.3}
    100%{opacity:0.9}
}

/* Reflection line */
.reflection-line{
    position:absolute;
    left:10%;right:10%;
    top:50%;
    height:1px;
    background:var(--aqua-pulse);
    opacity:0.2;
}

/* Terminal dot */
.terminal-dot{
    position:absolute;
    bottom:clamp(60px,10vh,100px);
    left:50%;
    transform:translateX(-50%);
    width:8px;height:8px;
    border-radius:50%;
    background:var(--warm-cream);
    box-shadow:0 0 20px var(--violet-flare),0 0 40px var(--violet-flare);
    animation:terminalGlow 3s ease-in-out infinite;
}

@keyframes terminalGlow{
    0%,100%{box-shadow:0 0 20px var(--violet-flare)}
    50%{box-shadow:0 0 40px var(--violet-flare),0 0 60px rgba(139,92,246,0.3)}
}

/* District 5 dimming */
.district-final{
    background:linear-gradient(180deg,transparent,rgba(26,10,46,0.6));
}

/* Compass */
.compass{
    position:fixed;
    bottom:24px;right:24px;
    z-index:11;
    background:rgba(26,10,46,0.6);
    border:1px solid rgba(255,248,240,0.2);
    border-radius:50%;
    width:48px;height:48px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:transform 0.3s;
}

.compass svg{
    transition:transform 0.5s ease;
}

.compass-menu{
    position:fixed;
    bottom:80px;right:24px;
    z-index:11;
    width:140px;height:140px;
    transform:scale(0);
    opacity:0;
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s;
}

.compass-menu.open{
    transform:scale(1);
    opacity:1;
}

.compass-link{
    position:absolute;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    color:var(--warm-cream);
    text-decoration:none;
    opacity:0.7;
    transition:opacity 0.3s,color 0.3s;
    left:50%;top:50%;
    transform:rotate(var(--angle)) translate(60px) rotate(calc(-1 * var(--angle)));
}

.compass-link:hover{opacity:1;color:var(--electric-strawberry)}

/* Grid texture */
.district::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(90deg,rgba(255,248,240,0.005) 0,rgba(255,248,240,0.005) 1px,transparent 1px,transparent 50px),
        repeating-linear-gradient(0deg,rgba(255,248,240,0.005) 0,rgba(255,248,240,0.005) 1px,transparent 1px,transparent 50px);
    pointer-events:none;
}

/* Reveal */
.sign-panel{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.sign-panel.visible{
    opacity:1;
    transform:translateY(0);
}

/* Responsive */
@media(max-width:768px){
    .hero-title{font-size:clamp(3rem,12vw,6rem)}
    .iso-building{opacity:0.5}
    .sign-panel{max-width:85vw}
}