/* mujun.studio - Neomorphic Contradiction Studio */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#E8ECF1;color:#5A5A6E;font-family:'Inter',sans-serif;font-size:15px;line-height:1.65;overflow-x:hidden;min-height:100vh}

/* Hero */
#hero{height:90vh;display:flex;align-items:center;justify-content:center}
#hero-inner{text-align:center}
#hero-title{font-family:'DM Serif Display',serif;font-weight:400;font-size:64px;color:#2C2C2C;letter-spacing:-0.01em;opacity:0;filter:blur(8px);transition:opacity 0.8s ease,filter 0.8s ease;cursor:default}
#hero-title.visible{opacity:1;filter:blur(0)}
#hero-title:hover{transform:scale(1.02)}
#hero-subtitle{font-family:'Inter',sans-serif;font-weight:300;font-size:24px;color:#8E8EA0;margin-top:8px;opacity:0;transition:opacity 0.6s ease 0.3s}
#hero-subtitle.visible{opacity:1}

/* Bento Grid */
#bento-section{padding:0 48px 80px}
#bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:20px;max-width:1100px;margin:0 auto}
.bento-cell{background:#E8ECF1;border-radius:12px;box-shadow:8px 8px 16px #d1d9e6,-8px -8px 16px #ffffff;overflow:hidden;cursor:pointer;opacity:0;transition:opacity 0.4s ease,box-shadow 0.2s ease,transform 0.6s cubic-bezier(0.25,0.1,0.25,1)}
.bento-cell.visible{opacity:1}
.bento-cell:hover{box-shadow:12px 12px 24px #d1d9e6,-12px -12px 24px #ffffff}
.cell-wide{grid-column:span 2}
.cell-tall{grid-row:span 2}
.cell-small{grid-column:span 1}

/* Cell Content */
.cell-content{padding:24px;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.cell-title{font-family:'DM Serif Display',serif;font-weight:400;font-size:20px;color:#2C2C2C;margin-top:12px}
.cell-desc{font-size:13px;color:#5A5A6E;margin-top:4px}
.cell-label{font-family:'Noto Sans JP',sans-serif;font-weight:300;font-size:14px;color:#8E8EA0;display:block;margin-top:8px}
.cell-icon{display:block;margin-bottom:4px;transition:fill 0.2s ease}
.bento-cell:hover .cell-icon line,
.bento-cell:hover .cell-icon polygon,
.bento-cell:hover .cell-icon circle,
.bento-cell:hover .cell-icon rect,
.bento-cell:hover .cell-icon path{stroke:#D4A373}

/* Yin-Yang Split */
.yin-yang-split{display:flex;align-items:center;gap:8px;flex:1}
.yin-yang-split.vertical{flex-direction:column}
.yin-half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.light-half{background:rgba(245,240,235,0.4);border-radius:8px;padding:12px}
.dark-half{background:rgba(44,44,44,0.04);border-radius:8px;padding:12px}
.split-curve{width:10px;flex-shrink:0;height:80px;opacity:0.5}

/* Project Overlay */
#project-overlay{position:fixed;inset:0;background:#E8ECF1;z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.4s ease}
#project-overlay.active{opacity:1;pointer-events:auto}
#project-overlay.hidden{display:none}
#overlay-close{position:absolute;top:24px;right:24px;background:none;border:none;font-size:32px;color:#8E8EA0;cursor:pointer;font-family:'Inter',sans-serif;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:4px 4px 8px #d1d9e6,-4px -4px 8px #ffffff;transition:box-shadow 0.2s ease}
#overlay-close:hover{box-shadow:inset 4px 4px 8px #d1d9e6,inset -4px -4px 8px #ffffff}
#overlay-content{text-align:center;padding:48px;max-width:600px}
#overlay-title{font-family:'DM Serif Display',serif;font-weight:400;font-size:42px;color:#2C2C2C;margin-bottom:16px}
#overlay-desc{font-size:16px;color:#5A5A6E;line-height:1.7}

/* Radial Navigation */
#radial-nav{position:fixed;bottom:32px;right:32px;z-index:100}
#radial-trigger{width:48px;height:48px;border-radius:50%;border:none;background:#E8ECF1;box-shadow:6px 6px 12px #d1d9e6,-6px -6px 12px #ffffff;cursor:pointer;position:relative;animation:pulseAttention 2s ease-in-out infinite}
#radial-trigger::after{content:'';width:12px;height:12px;border-radius:50%;background:#D4A373;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
@keyframes pulseAttention{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:0.7}}
#radial-menu{position:absolute;bottom:60px;right:0;display:flex;flex-direction:column;gap:8px}
#radial-menu.hidden{display:none}
.radial-item{text-decoration:none;font-family:'Inter',sans-serif;font-size:14px;color:#5A5A6E;padding:10px 20px;border-radius:24px;background:#E8ECF1;box-shadow:4px 4px 8px #d1d9e6,-4px -4px 8px #ffffff;white-space:nowrap;transition:box-shadow 0.2s ease,color 0.2s ease}
.radial-item:hover{color:#D4A373;box-shadow:inset 3px 3px 6px #d1d9e6,inset -3px -3px 6px #ffffff}

/* Responsive */
@media(max-width:768px){
    #hero-title{font-size:48px}
    #bento-section{padding:0 20px 60px}
    #bento-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px;gap:12px}
    .cell-wide{grid-column:span 2}
    .cell-tall{grid-row:span 2}
    .cell-title{font-size:16px}
    #radial-nav{bottom:20px;right:20px}
}