.threeui-background{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;isolation:isolate;background:#ece7dc}.landing-page-frame{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.shader-frame{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;overflow:hidden}.project-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#2b2721bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.project-modal{position:relative;max-width:720px;width:100%;max-height:90vh;background:#fffdf9;border-radius:12px;box-shadow:0 20px 60px #2b27214d;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-close{position:absolute;top:16px;right:16px;z-index:10;width:40px;height:40px;background:#fffdf9e6;border:1px solid rgba(43,39,33,.12);border-radius:50%;font-size:28px;line-height:1;color:#2b2721;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-close:hover{background:#fff;border-color:#9a6a3e;transform:scale(1.08)}.modal-hero{width:100%;height:280px;overflow:hidden;background:#f5f1e8}.modal-hero img{width:100%;height:100%;object-fit:cover}.modal-content{padding:32px;max-height:calc(90vh - 280px);overflow-y:auto}.modal-header{margin-bottom:24px;border-bottom:1px solid rgba(43,39,33,.12);padding-bottom:16px}.modal-header h2{font-family:"Instrument Serif",Georgia,serif;font-size:32px;font-weight:400;margin:0 0 8px;color:#2b2721}.modal-tagline{font-family:Newsreader,Georgia,serif;font-size:16px;font-weight:300;color:#2b2721a6;margin:0;font-style:italic}.modal-body{font-family:Newsreader,Georgia,serif;color:#2b2721}.modal-description{font-size:18px;line-height:1.7;margin:0 0 28px;color:#2b2721d9}.modal-section{margin-bottom:24px}.modal-section h3{font-family:"Instrument Serif",Georgia,serif;font-size:18px;font-weight:500;margin:0 0 12px;color:#2b2721;letter-spacing:.01em}.tech-stack{display:flex;flex-wrap:wrap;gap:8px}.tech-badge{display:inline-block;padding:6px 14px;background:#9a6a3e14;border:1px solid rgba(154,106,62,.2);border-radius:999px;font-size:14px;font-weight:500;color:#2b2721;transition:all .2s ease}.tech-badge:hover{background:#9a6a3e1f;border-color:#9a6a3e59}.modal-links{display:flex;gap:12px;padding-top:8px;border-top:1px solid rgba(43,39,33,.08)}.modal-link{display:inline-flex;align-items:center;padding:10px 20px;background:#2b2721;color:#fffdf9;font-size:15px;font-weight:500;border-radius:6px;text-decoration:none;transition:all .2s ease}.modal-link:hover{background:#9a6a3e;transform:translateY(-1px);box-shadow:0 4px 12px #2b272126}@media(max-width:640px){.project-modal{max-height:95vh;border-radius:8px}.modal-hero{height:200px}.modal-content{padding:24px 20px;max-height:calc(95vh - 200px)}.modal-header h2{font-size:26px}.modal-description{font-size:16px}.modal-links{flex-direction:column}.modal-link{justify-content:center}}@keyframes particle-burst{0%{transform:translate(0) scale(1);opacity:1}50%{opacity:1}to{transform:translate(calc(var(--tx) * 1px),calc(var(--ty) * 1px)) scale(.3);opacity:0}}@keyframes mask-reveal{0%{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(100% at 50% 50%)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 60px #fff6,0 0 120px #fff3}50%{box-shadow:0 0 80px #fff9,0 0 150px #ffffff4d}}@keyframes title-fade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes details-fade{0%{opacity:0}to{opacity:1}}@keyframes bg-zoom{0%{transform:scale(1.2);opacity:.3}to{transform:scale(1);opacity:1}}.entrance-reveal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#000;pointer-events:auto;isolation:isolate}.entrance-reveal.is-done{opacity:0;transition:opacity .5s ease;pointer-events:none}.particle-burst{position:absolute;top:50%;left:50%;width:100px;height:100px;transform:translate(-50%,-50%);pointer-events:none;z-index:10}.particle{position:absolute;top:50%;left:50%;width:8px;height:8px;background:radial-gradient(circle,#fff,#fff6);border-radius:50%;opacity:0;--angle: calc(var(--i) * 30deg);--tx: calc(cos(var(--angle))*150) ;--ty: calc(sin(var(--angle))*150) }.entrance-reveal.is-active .particle{animation:particle-burst .6s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:calc(var(--i) * .03s)}.reveal-mask{position:absolute;top:0;right:0;bottom:0;left:0;clip-path:circle(0% at 50% 50%);overflow:hidden}.entrance-reveal.is-active .reveal-mask{animation:mask-reveal 1.2s cubic-bezier(.76,0,.24,1) .6s forwards,glow-pulse 1.5s ease-in-out .6s}.reveal-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0}.entrance-reveal.is-active .reveal-bg{animation:bg-zoom 1.5s cubic-bezier(.76,0,.24,1) 1.8s forwards}.reveal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;z-index:2;opacity:0}.entrance-reveal.is-active .reveal-content{animation:title-fade .8s cubic-bezier(.76,0,.24,1) 1.2s forwards}.reveal-title{font-family:system-ui,-apple-system,sans-serif;font-size:clamp(48px,8vw,80px);font-weight:600;line-height:1.1;margin:0 0 40px;letter-spacing:-.02em}.reveal-title em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;opacity:.9}.reveal-details{opacity:0}.entrance-reveal.is-active .reveal-details{animation:details-fade .6s ease 2.2s forwards}.reveal-details p{font-size:clamp(14px,2vw,18px);margin:8px 0;font-weight:300;letter-spacing:.02em}.reveal-tags{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}.reveal-tags span{font-size:12px;padding:6px 14px;border:1px solid rgba(255,255,255,.3);border-radius:20px;letter-spacing:.05em;text-transform:uppercase;font-weight:500}.reveal-mask:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:100px 100px;pointer-events:none;z-index:1}@media(max-width:640px){.reveal-title{font-size:clamp(36px,12vw,60px)}.particle-burst{width:60px;height:60px}.particle{width:6px;height:6px;--tx: calc(cos(var(--angle))*80) ;--ty: calc(sin(var(--angle))*80) }}@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:block;src:url(/chin-portfolio/instrument-serif.woff2) format("woff2")}
