/* kkaji.com -- surreal dreamscape pastel */

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

:root{
    --lavender:#C8B6E2;
    --mint:#A8E6CF;
    --blush:#F5C6D0;
    --sky:#B8D4E3;
    --dream:#F8F5FF;
    --charcoal:#2D2D3D;
    --plum:#6B6580;
    --wire:#D0C8E4;
}

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

body{
    background:var(--dream);
    color:var(--charcoal);
    font-family:'Outfit',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.15rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Scenes */
.scene{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,6vw,6rem);
    position:relative;
    overflow:hidden;
}

/* Departure */
.departure{
    background:var(--dream);
}

.hero-korean{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:clamp(4rem,10vw,10rem);
    color:var(--lavender);
    line-height:1.1;
    position:relative;
    z-index:2;
}

.hero-roman{
    font-family:'Unbounded',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--charcoal);
    letter-spacing:0.02em;
    margin-top:0.5rem;
}

.hero-meaning{
    font-family:'Outfit',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.5vw,1.3rem);
    color:var(--plum);
    margin-top:0.5rem;
    letter-spacing:0.04em;
}

/* Lens flare */
.lens-flare{
    position:absolute;
    width:clamp(200px,40vw,500px);
    height:clamp(200px,40vw,500px);
    border-radius:50%;
    pointer-events:none;
    z-index:1;
}

.flare-1{
    background:radial-gradient(circle,rgba(255,255,255,0.8) 0%,rgba(255,245,230,0.3) 40%,transparent 70%);
    top:20%;left:50%;
    transform:translate(-50%,-50%);
}

.flare-2{
    background:radial-gradient(circle,rgba(168,230,207,0.6) 0%,rgba(200,182,226,0.2) 50%,transparent 70%);
    top:30%;right:10%;
}

/* Passage */
.passage{
    background:linear-gradient(to bottom,var(--dream),#F0EDFF);
}

.float-block{
    max-width:480px;
    padding:clamp(1.5rem,3vw,2.5rem);
    background:rgba(255,255,255,0.6);
    backdrop-filter:blur(12px);
    border:1px solid rgba(200,182,226,0.3);
    border-radius:16px;
    margin-bottom:2rem;
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.float-block.revealed{opacity:1;transform:translateY(0)}

.float-left{align-self:flex-start}
.float-right{align-self:flex-end}
.float-center{align-self:center}

.block-heading{
    font-family:'Unbounded',sans-serif;
    font-weight:700;
    font-size:clamp(1.3rem,2.5vw,2rem);
    color:var(--charcoal);
    margin-bottom:0.75rem;
    line-height:1.2;
}

.block-text{
    color:var(--charcoal);
    line-height:1.75;
}

/* Tech motif SVG */
.tech-motif{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    pointer-events:none;
}

/* Threshold */
.threshold{
    background:linear-gradient(to bottom,#F0EDFF,#E8F8EE);
}

.threshold-text{
    max-width:500px;
    text-align:center;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

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

.fading-text{
    color:var(--plum);
    font-size:clamp(1rem,1.3vw,1.15rem);
    line-height:1.8;
}

/* Arrival */
.arrival{
    background:linear-gradient(to bottom,#E8F8EE,#FEF0F2);
}

.arrival-content{
    text-align:center;
    max-width:500px;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.arrival-content.revealed{opacity:1;transform:translateY(0)}

.arrival-heading{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,5rem);
    color:var(--blush);
    margin-bottom:0.5rem;
}

.arrival-meaning{
    font-family:'Outfit',sans-serif;
    font-weight:600;
    font-size:clamp(1.1rem,1.8vw,1.4rem);
    color:var(--charcoal);
    margin-bottom:1.5rem;
}

.arrival-text{
    color:var(--charcoal);
    line-height:1.75;
    margin-bottom:2rem;
}

.arrival-domain{
    font-family:'Unbounded',sans-serif;
    font-weight:700;
    font-size:clamp(1rem,2vw,1.5rem);
    color:var(--plum);
    letter-spacing:0.04em;
}

/* Responsive */
@media(max-width:768px){
    .float-left,.float-right{align-self:center}
    .lens-flare{width:200px;height:200px}
}

@media(prefers-reduced-motion:reduce){
    .float-block,.threshold-text,.arrival-content{opacity:1;transform:none;transition:none}
}