/* haru.club - Luxurious Cyberpunk Forest */

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

:root{
    --midnight-forest:#0a1f14;
    --dark-canopy:#122a1e;
    --thaw-green:#1a3a2a;
    --neon-spring:#00ff88;
    --phosphor-teal:#00d4aa;
    --jade-mist:#b8d4c4;
    --frost-white:#e8f5ee;
    --brass-patina:#8b7355;
    --amber-filament:#d4a447;
}

html{scroll-behavior:smooth}

body{
    background:var(--midnight-forest);
    color:var(--jade-mist);
    font-family:'Outfit',sans-serif;
    font-weight:300;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.7;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

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

/* HUD Navigation */
.hud-nav{
    position:fixed;
    left:0;top:0;
    width:32px;
    height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    z-index:50;
}

.hud-diamond{
    width:8px;height:8px;
    background:var(--thaw-green);
    transform:rotate(45deg);
    display:block;
    transition:background 0.4s,box-shadow 0.4s;
}

.hud-diamond.active{
    background:var(--neon-spring);
    box-shadow:0 0 8px var(--neon-spring);
}

/* Frames */
.frame{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,6vh,80px) clamp(56px,6vw,120px);
    overflow:hidden;
}

.frame-cold{background:var(--midnight-forest)}
.frame-mid{background:var(--dark-canopy)}
.frame-warm{background:var(--thaw-green)}

/* Frame divider */
.frame-divider{
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg,transparent,var(--neon-spring),transparent);
    opacity:0.6;
}

/* Content positioning */
.frame-content{max-width:420px}

.right-aligned{
    position:absolute;
    right:clamp(40px,12vw,200px);
}

.right-text{
    position:absolute;
    right:clamp(40px,8vw,120px);
    max-width:360px;
}

.bottom-left{
    position:absolute;
    bottom:clamp(40px,8vh,80px);
    left:clamp(56px,8vw,120px);
}

/* Hero title */
.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.06em;
    line-height:1.05;
    color:var(--frost-white);
    text-shadow:0 0 30px rgba(0,255,136,0.3);
}

.neon-dot{color:var(--neon-spring)}

.body-text{
    color:var(--jade-mist);
    margin-top:12px;
}

.body-text.medium{font-weight:500}

/* Frame number */
.frame-number{
    position:absolute;
    top:24px;right:24px;
    font-family:'Space Mono',monospace;
    font-size:0.8rem;
    color:var(--brass-patina);
    letter-spacing:0.08em;
}

/* SVG styling */
.frame-svg{
    position:absolute;
    pointer-events:none;
    filter:drop-shadow(0 0 6px rgba(0,255,136,0.3)) drop-shadow(0 0 20px rgba(0,255,136,0.1));
}

.left-svg{
    left:clamp(40px,8vw,120px);
    width:clamp(200px,30vw,400px);
    height:auto;
}

.mandala-svg{
    left:clamp(40px,10vw,150px);
    width:clamp(200px,35vw,350px);
}

.pulse-ring{
    animation:pulseRing 4s ease-in-out infinite;
}

@keyframes pulseRing{
    0%,100%{opacity:0.5;r:20}
    50%{opacity:1;r:24}
}

/* Terrain */
.terrain-overlay{
    width:100%;
    height:100%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.terrain-svg{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    filter:drop-shadow(0 0 4px rgba(0,255,136,0.2));
}

.terrain-text{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,6vw,5rem);
    color:var(--frost-white);
    mix-blend-mode:difference;
    text-transform:uppercase;
    letter-spacing:0.03em;
    position:relative;
    z-index:1;
}

/* Key */
.key-svg{
    width:clamp(120px,15vw,200px);
    filter:drop-shadow(0 0 6px rgba(0,255,136,0.3));
}

.frame-tagline{
    position:absolute;
    bottom:clamp(30px,6vh,60px);
    left:50%;
    transform:translateX(-50%);
    font-family:'Space Mono',monospace;
    font-size:0.8rem;
    color:var(--jade-mist);
    letter-spacing:0.08em;
    text-transform:uppercase;
}

/* Vintage motifs */
.fleuron{
    position:absolute;
    top:24px;left:clamp(56px,8vw,100px);
    font-size:18px;
    color:var(--brass-patina);
    text-shadow:0 0 8px rgba(212,164,71,0.2);
    opacity:0.6;
}

.manicule{
    position:absolute;
    left:clamp(40px,6vw,80px);
    bottom:clamp(60px,10vh,100px);
    font-size:20px;
    color:var(--brass-patina);
    text-shadow:0 0 8px rgba(212,164,71,0.2);
    opacity:0.6;
}

/* Network */
.network-svg{
    width:clamp(250px,40vw,400px);
    filter:drop-shadow(0 0 6px rgba(0,212,170,0.3));
}

.data-flow{
    stroke-dasharray:8 12;
    animation:flowData 3s linear infinite;
}

@keyframes flowData{
    to{stroke-dashoffset:-40}
}

/* Kanji */
.kanji-container{
    position:relative;
    width:clamp(200px,30vw,400px);
    height:clamp(200px,30vw,400px);
    display:flex;
    align-items:center;
    justify-content:center;
}

.kanji-radical{
    position:absolute;
    font-family:'Noto Sans KR',serif;
    font-weight:700;
    font-size:clamp(3rem,6vw,5rem);
    color:var(--neon-spring);
    opacity:0.4;
    transition:transform 1.2s cubic-bezier(0.34,1.56,0.64,1),opacity 1.2s ease;
    filter:drop-shadow(0 0 10px rgba(0,255,136,0.3));
}

#rad-1{transform:translate(-60px,-40px)}
#rad-2{transform:translate(50px,-20px)}
#rad-3{transform:translate(0,50px)}

.kanji-radical.assembled{
    opacity:0;
    transform:translate(0,0) scale(0.5);
}

.kanji-assembled{
    font-size:clamp(6rem,14vw,12rem);
    color:var(--frost-white);
    opacity:0;
    transform:scale(0.8);
    transition:opacity 1s ease 0.8s,transform 1s cubic-bezier(0.34,1.56,0.64,1) 0.8s;
    text-shadow:0 0 40px rgba(0,255,136,0.4);
}

.kanji-assembled.visible{
    opacity:1;
    transform:scale(1);
}

/* Vintage border frame */
.vintage-border{
    border:2px solid var(--brass-patina);
    padding:clamp(40px,6vw,80px);
    position:relative;
    max-width:600px;
    text-align:center;
}

.vintage-border::before,.vintage-border::after{
    content:'';
    position:absolute;
    width:20px;height:20px;
    border:1px solid var(--brass-patina);
}

.vintage-border::before{top:-10px;left:-10px;border-right:none;border-bottom:none}
.vintage-border::after{bottom:-10px;right:-10px;border-left:none;border-top:none}

.hex-grid{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    margin-bottom:24px;
}

.hex{
    width:24px;height:28px;
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    background:var(--neon-spring);
    opacity:0.15;
    animation:hexRotate 12s linear infinite;
}

@keyframes hexRotate{
    0%{opacity:0.1}
    50%{opacity:0.25}
    100%{opacity:0.1}
}

.closing-statement{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--frost-white);
    letter-spacing:0.02em;
}

/* Frame 8: Wave */
.final-title{
    position:absolute;
    top:clamp(60px,12vh,120px);
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--frost-white);
    letter-spacing:0.06em;
}

.wave-svg{
    width:100%;
    height:100px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    filter:drop-shadow(0 0 8px rgba(0,255,136,0.4));
}

.wave-path{
    animation:waveTravel 4s ease-in-out infinite;
}

@keyframes waveTravel{
    0%,100%{d:path('M0,50 Q75,20 150,50 Q225,80 300,50 Q375,20 450,50 Q525,80 600,50 Q675,20 750,50 Q825,80 900,50 Q975,20 1050,50 Q1125,80 1200,50')}
    50%{d:path('M0,50 Q75,80 150,50 Q225,20 300,50 Q375,80 450,50 Q525,20 600,50 Q675,80 750,50 Q825,20 900,50 Q975,80 1050,50 Q1125,20 1200,50')}
}

/* Reveal animation */
.frame-content,.frame-svg,.vintage-border,.kanji-container{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s cubic-bezier(0.22,0.61,0.36,1),
               transform 0.8s cubic-bezier(0.34,1.56,0.64,1);
}

.revealed .frame-content,.revealed .frame-svg,.revealed .vintage-border,.revealed .kanji-container{
    opacity:1;
    transform:translateY(0);
}

/* Responsive */
@media(max-width:768px){
    .hud-nav{
        bottom:0;top:auto;left:0;right:0;
        width:100%;height:32px;
        flex-direction:row;
        justify-content:center;
    }
    .right-aligned,.right-text{
        position:relative;
        right:auto;
        padding:0 clamp(16px,4vw,40px);
    }
    .bottom-left{
        position:relative;
        bottom:auto;left:auto;
        padding:0 clamp(16px,4vw,40px);
    }
    .frame{padding:clamp(40px,6vh,80px) clamp(24px,4vw,40px)}
    body::after{background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,136,0.015) 2px,rgba(0,255,136,0.015) 4px)}
}