/* hwaglyul.com -- crystalline glassmorphism */
/* Palette: #0A0A12, #B8450A, #8B2252, #E8EDF5, #2E8B8B, #C9A84C, #F0F4FA, #7B8494 */

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

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

body{
    background:#0A0A12;
    color:#F0F4FA;
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.15rem);
    line-height:1.72;
    letter-spacing:0.01em;
    overflow-x:hidden;
    perspective:800px;
}

/* Deep molten layer */
.deep-layer{
    position:fixed;
    inset:0;
    background:radial-gradient(ellipse at 30% 60%,rgba(184,69,10,0.25),transparent 60%),
               radial-gradient(ellipse at 70% 40%,rgba(139,34,82,0.2),transparent 50%);
    animation:moltenPulse 20s ease-in-out infinite;
    z-index:0;
    pointer-events:none;
}

@keyframes moltenPulse{
    0%,100%{opacity:0.6;filter:hue-rotate(0deg)}
    50%{opacity:0.8;filter:hue-rotate(5deg)}
}

/* Frost lattice layer */
.frost-layer{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
}

.lattice-svg{
    width:100%;
    height:100%;
}

/* Hex navigation */
.hex-nav{
    position:fixed;
    top:1.5rem;
    left:1.5rem;
    width:3rem;
    height:3rem;
    background:rgba(10,10,18,0.6);
    backdrop-filter:blur(8px);
    border:1px solid rgba(46,139,139,0.3);
    border-radius:0;
    cursor:pointer;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:border-color 0.3s ease;
}

.hex-nav:hover{
    border-color:rgba(46,139,139,0.8);
}

.hex-icon{
    width:20px;
    height:20px;
}

/* Crystal sections */
.crystal-section{
    position:relative;
    z-index:5;
    min-height:80svh;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:clamp(2rem,4vw,4rem);
    padding:clamp(3rem,6vw,8rem) clamp(2rem,4vw,4rem);
}

.section-hero{
    min-height:100svh;
}

/* Crystal panels (frost glass) */
.crystal-panel{
    background:rgba(232,237,245,0.04);
    backdrop-filter:blur(12px) saturate(1.4);
    border:1px solid rgba(255,255,255,0.15);
    padding:clamp(2rem,4vw,4rem);
    max-width:600px;
    width:100%;
    position:relative;
    opacity:0;
    transform:scale(0.94) rotate(0deg);
    transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1);
}

.crystal-panel.revealed{
    opacity:1;
    transform:scale(1) rotate(0deg);
}

.panel-offset-left{
    transform:scale(0.94) rotate(-1.5deg);
}

.panel-offset-left.revealed{
    transform:scale(1) rotate(-1.5deg);
}

.panel-offset-right{
    transform:scale(0.94) rotate(1.5deg);
}

.panel-offset-right.revealed{
    transform:scale(1) rotate(1.5deg);
}

.panel-wide{
    max-width:800px;
}

.panel-hero{
    text-align:center;
    max-width:800px;
    transform:scale(0.94);
}

.panel-hero.revealed{
    transform:scale(1);
}

/* Hero */
.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:clamp(3rem,10vw,9rem);
    letter-spacing:0.12em;
    line-height:1.05;
    color:#F0F4FA;
}

.dot{
    color:#2E8B8B;
}

.hero-korean{
    font-family:'Noto Serif KR',serif;
    font-weight:300;
    font-size:clamp(1.5rem,4vw,3rem);
    color:#C9A84C;
    margin-top:1rem;
    opacity:0.7;
}

.hero-sub{
    font-family:'DM Sans',sans-serif;
    font-size:clamp(1rem,1.5vw,1.25rem);
    color:#7B8494;
    margin-top:1.5rem;
    max-width:40ch;
    margin-left:auto;
    margin-right:auto;
}

/* Section headings */
.section-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(1.6rem,3.5vw,3.2rem);
    letter-spacing:0.06em;
    line-height:1.05;
    color:#F0F4FA;
    margin-bottom:1.5rem;
}

.body-text{
    margin-bottom:1.2rem;
    max-width:50ch;
}

.caption-text{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:clamp(0.75rem,1vw,0.85rem);
    color:#7B8494;
    letter-spacing:0.04em;
    margin-top:1.5rem;
}

/* Fracture lines */
.fracture-line{
    position:relative;
    z-index:5;
    height:40px;
    overflow:hidden;
}

.fracture-svg{
    width:100%;
    height:100%;
}

.fracture-path{
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
    opacity:0.25;
    filter:drop-shadow(0 0 6px rgba(255,255,255,0.3));
    transition:stroke-dashoffset 0.8s cubic-bezier(0.22,1,0.36,1);
}

.fracture-line.drawn .fracture-path{
    stroke-dashoffset:0;
}

/* Responsive */
@media(max-width:768px){
    .crystal-section{
        flex-direction:column;
    }
    .panel-offset-left,.panel-offset-left.revealed,
    .panel-offset-right,.panel-offset-right.revealed{
        transform:scale(1) rotate(0deg);
    }
    .frost-layer{display:none}
}

@media(prefers-reduced-motion:reduce){
    .crystal-panel{opacity:1;transform:none;transition:none}
    .deep-layer{animation:none}
    .fracture-path{stroke-dashoffset:0;transition:none}
}