/* jungchi.boo -- Inflated 3D politics single-column */

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

:root{
    --sunset:#E8713A;
    --sienna:#C0603A;
    --amber:#D4A03C;
    --night:#0E0D12;
    --card-bg:#1C1A20;
    --cream:#F5E6D0;
    --ivory:#EDE4D8;
    --dusk:#8A7E74;
    --neon:#FFB347;
    --wire:#2A2630;
}

html{scroll-behavior:smooth;font-size:16px}

body{
    background:var(--night);
    color:var(--ivory);
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,0.95rem + 0.3vw,1.1rem);
    line-height:1.7;
    overflow-x:hidden;
}

/* Progress bar */
.progress-bar{
    position:fixed;
    top:0;left:0;
    height:3px;
    background:linear-gradient(to right,var(--sunset),var(--neon));
    width:0%;
    z-index:100;
    transition:width 0.1s linear;
}

/* Grid underlay */
.grid-underlay{
    position:fixed;
    inset:0;
    background:
        repeating-linear-gradient(0deg,var(--wire) 0px,var(--wire) 1px,transparent 1px,transparent 80px),
        repeating-linear-gradient(90deg,var(--wire) 0px,var(--wire) 1px,transparent 1px,transparent 80px);
    pointer-events:none;
    z-index:0;
    opacity:0.5;
}

/* Balloon column */
.balloon-column{
    max-width:680px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:120px;
    padding:80px 24px;
    position:relative;
    z-index:1;
}

.section{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* Inflation (hero) */
.inflated-title{
    text-align:center;
}

.korean-inflate{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:clamp(4rem,3rem + 5vw,8rem);
    color:var(--cream);
    display:inline-block;
    background:linear-gradient(145deg,var(--sunset) 0%,var(--sienna) 60%,#8B4513 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    filter:drop-shadow(0 8px 24px rgba(232,113,58,0.4));
    border-radius:20px;
    padding:0.1em 0.2em;
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    cursor:default;
}

.korean-inflate:hover{
    transform:scale(1.05);
    filter:drop-shadow(0 12px 35px rgba(255,179,71,0.5));
}

.domain-label{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--dusk);
    margin-top:1.5rem;
    text-align:center;
    letter-spacing:0.02em;
}

/* Inflate cards */
.inflate-card{
    background:linear-gradient(145deg,var(--sunset) 0%,var(--sienna) 60%,#8B4513 100%);
    border-radius:24px;
    padding:clamp(2rem,4vw,3rem);
    position:relative;
    overflow:hidden;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.3),
        0 0 20px rgba(255,179,71,0.15);
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
               box-shadow 0.4s ease;
    width:100%;
    margin-bottom:2rem;
}

.inflate-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 12px 32px rgba(0,0,0,0.5),
        0 0 35px rgba(255,179,71,0.25);
}

.card-sienna{
    background:linear-gradient(145deg,var(--sienna) 0%,#9A4A2A 60%,#6B3020 100%);
}

.card-amber{
    background:linear-gradient(145deg,var(--amber) 0%,#B88A30 60%,#8A6A20 100%);
}

.card-shine{
    position:absolute;
    top:15%;left:10%;
    width:40%;height:30%;
    background:radial-gradient(ellipse,rgba(255,255,255,0.1),transparent 70%);
    pointer-events:none;
    border-radius:50%;
}

.card-heading{
    font-family:'DM Sans',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,2vw,2.2rem);
    color:var(--cream);
    margin-bottom:1rem;
}

.card-text{
    color:rgba(245,230,208,0.9);
    line-height:1.7;
}

/* Pulse section */
.pulse{
    position:relative;
}

.pulse-sphere{
    width:clamp(160px,30vw,240px);
    height:clamp(160px,30vw,240px);
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%,var(--sunset),var(--sienna) 60%,#5A2A1A 100%);
    box-shadow:
        0 0 40px rgba(232,113,58,0.3),
        0 0 80px rgba(255,179,71,0.15),
        inset 0 -20px 40px rgba(0,0,0,0.3);
    animation:spherePulse 4s ease-in-out infinite;
    position:relative;
}

.sphere-inner{
    position:absolute;
    top:15%;left:20%;
    width:30%;height:25%;
    background:radial-gradient(ellipse,rgba(255,255,255,0.15),transparent 70%);
    border-radius:50%;
}

@keyframes spherePulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.03)}
}

.orbit-labels{
    position:absolute;
    top:50%;left:50%;
    width:0;height:0;
}

.orbit-label{
    position:absolute;
    font-family:'Space Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.06em;
    color:var(--neon);
    white-space:nowrap;
    transform:
        rotate(var(--angle))
        translateY(calc(-1 * var(--dist)))
        rotate(calc(-1 * var(--angle)));
    transition:transform 0.3s ease,color 0.3s;
    cursor:default;
}

.orbit-label:hover{
    color:var(--cream);
    transform:
        rotate(var(--angle))
        translateY(calc(-1 * var(--dist)))
        rotate(calc(-1 * var(--angle)))
        scale(1.15);
}

/* Deflation */
.deflation{
    text-align:center;
}

.deflation-text{
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.3vw,1.2rem);
    color:var(--ivory);
    max-width:38ch;
    margin:0 auto 2rem;
    line-height:1.75;
}

.deflation-domain{
    font-family:'Noto Sans KR','DM Sans',sans-serif;
    font-weight:700;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--dusk);
    letter-spacing:0.04em;
}

/* Responsive */
@media(max-width:768px){
    .balloon-column{gap:80px;padding:60px 16px}
    .orbit-labels{display:none}
}

@media(prefers-reduced-motion:reduce){
    .korean-inflate:hover{transform:none}
    .inflate-card:hover{transform:none}
    .spherePulse{animation:none}
    .orbit-label:hover{transform:rotate(var(--angle)) translateY(calc(-1 * var(--dist))) rotate(calc(-1 * var(--angle)))}
}