/* 가능성.com - Luxury frost pavilion */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
    --bg:#0E1420;--frost:rgba(200,218,240,0.08);
    --ice:#C8DAF0;--steel:#A8B8C8;
    --lilac:#B8A0D4;--rose:#D4A0B8;--mint:#A0D4C8;
    --border:rgba(255,255,255,0.12);--glow:rgba(200,218,240,0.15);
}
body{font-family:'Noto Sans KR',sans-serif;font-weight:300;font-size:clamp(0.95rem,1.1vw,1.15rem);line-height:1.75;color:var(--ice);background:var(--bg);overflow-x:hidden;word-break:keep-all;}

/* Sidebar */
.sidebar{position:fixed;left:0;top:0;width:280px;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;z-index:100;}
.sidebar-frost{position:absolute;inset:0;backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);background:rgba(220,232,245,0.12);border-right:1px solid rgba(255,255,255,0.15);}
.sidebar-item{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--steel);transition:color 400ms ease;}
.sidebar-item.active{color:var(--ice);}
.sidebar-item:hover{color:var(--lilac);}
.sidebar-icon{width:36px;height:36px;transition:transform 300ms ease;}
.sidebar-icon polygon,.sidebar-icon circle,.sidebar-icon rect,.sidebar-icon line{transition:stroke 400ms ease,stroke-opacity 400ms ease;}
.sidebar-item:hover .sidebar-icon polygon,.sidebar-item:hover .sidebar-icon circle,.sidebar-item:hover .sidebar-icon rect{stroke:var(--lilac);}
.sidebar-item.active .sidebar-icon polygon,.sidebar-item.active .sidebar-icon circle,.sidebar-item.active .sidebar-icon rect{stroke:var(--ice);fill:rgba(200,218,240,0.06);}
.sidebar-label{font-family:'Outfit',sans-serif;font-weight:400;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;}

/* Chambers */
.chambers{margin-left:280px;}
.chamber{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:clamp(40px,6vw,80px);}
.chamber-content{position:relative;z-index:2;width:100%;max-width:800px;}

/* Zoom-focus entrance */
.chamber[data-anim]{opacity:0;transform:scale(0.94);transition:opacity 600ms cubic-bezier(0.16,1,0.3,1),transform 600ms cubic-bezier(0.16,1,0.3,1);}
.chamber[data-anim].visible{opacity:1;transform:scale(1);}

/* Possibility Ring */
.possibility-ring{position:absolute;border-radius:50%;border:1px dashed;opacity:0.12;animation:ringRotate 120s linear infinite;pointer-events:none;}
.ring-lilac{width:320px;height:320px;border-color:var(--lilac);top:50%;left:50%;transform:translate(-50%,-50%);}
.ring-mint{width:260px;height:260px;border-color:var(--mint);}
.ring-left{left:10%;top:30%;transform:none;animation-direction:reverse;}
.ring-right{right:10%;top:40%;left:auto;transform:none;}
@keyframes ringRotate{to{transform:rotate(360deg);}}

/* Drift Triangle */
.drift-triangle{position:absolute;width:0;height:0;border-left:40px solid transparent;border-right:40px solid transparent;border-bottom:70px solid;opacity:0.12;pointer-events:none;animation:drift 30s linear infinite;}
.tri-mint{border-bottom-color:var(--mint);top:20%;right:15%;}
.tri-rose{border-bottom-color:var(--rose);top:30%;left:10%;}
.tri-mint-full{border-bottom-color:var(--mint);opacity:0.3;bottom:20%;right:20%;}
@keyframes drift{0%{transform:translate(0,0);}25%{transform:translate(30px,-20px);}50%{transform:translate(60px,10px);}75%{transform:translate(20px,30px);}100%{transform:translate(0,0);}}

/* Chamber 1: Threshold */
.title-main{font-family:'Anybody',sans-serif;font-size:clamp(2.5rem,7vw,6rem);font-variation-settings:'wdth' 150,'wght' 100;color:var(--ice);opacity:0.4;letter-spacing:0.04em;line-height:1.12;text-align:center;animation:crystallize 2s ease-out 2s forwards;}
@keyframes crystallize{to{font-variation-settings:'wdth' 85,'wght' 500;opacity:1;}}
.title-sub{font-family:'Noto Sans KR',sans-serif;font-weight:300;font-size:clamp(0.95rem,1.2vw,1.15rem);color:var(--steel);text-align:center;margin-top:1.5rem;opacity:0;animation:zoomIn 500ms cubic-bezier(0.16,1,0.3,1) 2.4s forwards;}
@keyframes zoomIn{from{opacity:0;transform:scale(0.96);}to{opacity:1;transform:scale(1);}}

/* Chamber 2: Geometry */
.chamber-geometry{display:flex;flex-direction:column;gap:clamp(32px,4vw,56px);}
.geo-item{display:flex;gap:clamp(20px,3vw,40px);align-items:flex-start;opacity:0;transform:scale(0.9);transition:opacity 500ms cubic-bezier(0.16,1,0.3,1),transform 500ms cubic-bezier(0.16,1,0.3,1);}
.geo-item.stagger-visible{opacity:1;transform:scale(1);}
.geo-icon{width:120px;min-width:80px;height:auto;flex-shrink:0;}
.geo-text h2{font-family:'Anybody',sans-serif;font-size:clamp(1.3rem,2.5vw,2rem);font-variation-settings:'wdth' 110,'wght' 400;letter-spacing:0.02em;line-height:1.2;margin-bottom:0.5rem;color:var(--ice);}
.geo-text p{color:var(--steel);font-size:clamp(0.9rem,1vw,1.05rem);}

/* Chamber 3: Frost Garden */
.crystal-scatter{position:absolute;inset:0;pointer-events:none;}
.fragment{position:absolute;display:block;background:var(--ice);animation:twinkle 4s ease-in-out infinite;}
.f1{width:4px;height:4px;top:15%;left:20%;animation-delay:0s;opacity:0.08;}
.f2{width:6px;height:3px;top:25%;left:60%;animation-delay:0.5s;opacity:0.1;transform:rotate(45deg);}
.f3{width:3px;height:3px;top:40%;left:30%;animation-delay:1s;opacity:0.06;background:var(--lilac);}
.f4{width:5px;height:5px;top:55%;left:75%;animation-delay:1.5s;opacity:0.12;background:var(--mint);}
.f5{width:4px;height:4px;top:65%;left:15%;animation-delay:2s;opacity:0.07;}
.f6{width:3px;height:6px;top:20%;left:80%;animation-delay:0.3s;opacity:0.09;background:var(--rose);}
.f7{width:5px;height:3px;top:75%;left:45%;animation-delay:1.2s;opacity:0.1;}
.f8{width:4px;height:4px;top:35%;left:50%;animation-delay:0.8s;opacity:0.08;background:var(--lilac);}
.f9{width:3px;height:5px;top:80%;left:70%;animation-delay:1.8s;opacity:0.06;}
.f10{width:6px;height:4px;top:10%;left:40%;animation-delay:2.2s;opacity:0.11;background:var(--mint);}
.f11{width:4px;height:3px;top:50%;left:85%;animation-delay:0.7s;opacity:0.07;background:var(--rose);}
.f12{width:3px;height:3px;top:85%;left:25%;animation-delay:1.6s;opacity:0.09;}
@keyframes twinkle{0%,100%{opacity:0.05;}50%{opacity:0.15;}}

.chamber-garden{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,48px);justify-content:center;align-items:center;}
.garden-node{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:scale(0.95);transition:opacity 500ms cubic-bezier(0.16,1,0.3,1),transform 500ms cubic-bezier(0.16,1,0.3,1);}
.garden-node.stagger-visible{opacity:1;transform:scale(1);}
.garden-icon{width:64px;height:64px;}
.garden-label{font-family:'Outfit',sans-serif;font-weight:600;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--steel);}

/* Chamber 4: Reflection */
.chamber-reflection{display:flex;align-items:center;justify-content:center;}
.frost-panel{max-width:60%;background:rgba(200,218,240,0.06);backdrop-filter:blur(32px) saturate(1.2);-webkit-backdrop-filter:blur(32px) saturate(1.2);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:clamp(28px,4vw,48px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 8px 32px rgba(0,0,0,0.2);}
.frost-panel p{color:var(--steel);margin-bottom:1rem;}
.frost-panel p:last-child{margin-bottom:0;}

/* Chamber 5: Constellation */
.chamber-constellation{position:relative;width:100%;max-width:600px;height:400px;}
.constellation-map{width:100%;height:100%;}
.constellation-map circle{animation:pulse 3s ease-in-out infinite;animation-delay:var(--d,0s);}
.constellation-map circle:nth-child(1){--d:0s;}
.constellation-map circle:nth-child(2){--d:0.5s;}
.constellation-map circle:nth-child(3){--d:1s;}
.constellation-map circle:nth-child(4){--d:1.5s;}
.constellation-map circle:nth-child(5){--d:2s;}
.constellation-map circle:nth-child(6){--d:2.5s;}
@keyframes pulse{0%,100%{opacity:0.6;}50%{opacity:1;}}
.constellation-labels{position:absolute;inset:0;}
.c-label{position:absolute;font-family:'Outfit',sans-serif;font-weight:400;font-size:0.75rem;letter-spacing:0.08em;color:var(--steel);text-transform:uppercase;}

/* Chamber 6: Open Door */
.chamber-door{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,48px);}
.door-left{flex-shrink:0;}
.door-icon{width:120px;height:120px;}
.door-divider{width:1px;height:clamp(120px,20vh,200px);background:var(--ice);opacity:0.3;}
.door-right{text-align:left;}
.door-text{font-family:'Anybody',sans-serif;font-size:clamp(1.6rem,4vw,3rem);font-variation-settings:'wdth' 100,'wght' 300;line-height:1.3;letter-spacing:0.04em;color:var(--ice);}

/* Footer */
.site-footer{text-align:center;padding:clamp(40px,6vw,60px);margin-left:280px;}
.site-footer p{font-family:'Outfit',sans-serif;font-weight:400;font-size:0.8rem;letter-spacing:0.08em;color:var(--steel);opacity:0.5;}

/* Frosted glass hover for interactive elements */
@media(hover:hover){
    .frost-panel:hover{backdrop-filter:blur(28px) saturate(1.3);-webkit-backdrop-filter:blur(28px) saturate(1.3);border-color:rgba(255,255,255,0.2);}
    .sidebar-item:hover .sidebar-icon{transform:scale(1.1);}
}

/* Tablet */
@media(max-width:900px){
    .sidebar{width:200px;}
    .chambers{margin-left:200px;}
    .site-footer{margin-left:200px;}
    .frost-panel{max-width:80%;}
}

/* Mobile */
@media(max-width:600px){
    .sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:60px;flex-direction:row;justify-content:space-around;gap:0;z-index:200;}
    .sidebar-frost{border-right:none;border-top:1px solid rgba(255,255,255,0.15);}
    .sidebar-label{display:none;}
    .sidebar-icon{width:28px;height:28px;}
    .chambers{margin-left:0;padding-bottom:60px;}
    .site-footer{margin-left:0;padding-bottom:80px;}
    .frost-panel{max-width:95%;}
    .geo-item{flex-direction:column;align-items:center;text-align:center;}
    .geo-icon{width:80px;}
    .chamber-door{flex-direction:column;}
    .door-divider{width:clamp(80px,50%,160px);height:1px;}
    .chamber-constellation{height:300px;}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
    .title-main{animation:none;font-variation-settings:'wdth' 85,'wght' 500;opacity:1;}
    .title-sub{animation:none;opacity:1;}
    .possibility-ring{animation:none;}
    .drift-triangle{animation:none;}
    .fragment{animation:none;}
    .constellation-map circle{animation:none;opacity:0.8;}
    .chamber[data-anim]{transition:none;opacity:1;transform:none;}
}