:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { min-height:100%; margin:0; }
body.folder-page { overflow:hidden; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.modal-open { overflow:hidden; }
.folder-scene { position:relative; min-height:100svh; overflow:hidden; background:radial-gradient(ellipse 88% 60% at 50% 112%, #3b83f6 0%, #214ba3 39%, transparent 72%), linear-gradient(180deg,#071126 0%,#102452 58%,#1e499a 100%); }
.home-link { position:absolute; z-index:20; top:22px; left:22px; display:grid; place-items:center; width:34px; height:34px; color:#457aa9; text-decoration:none; border:1px solid rgba(91,144,186,.2); border-radius:50%; background:rgba(255,255,255,.45); opacity:0; transition:opacity .25s ease; }
.folder-scene:hover .home-link, .home-link:focus-visible { opacity:1; }
.project-folder { position:absolute; z-index:10; top:50%; isolation:isolate; width:240px; height:190px; padding:0; border:0; background:none; transform:translate(-50%,-50%); cursor:pointer; will-change:transform,opacity,left,top; transition:left .36s cubic-bezier(.22,1,.36,1),top .36s cubic-bezier(.22,1,.36,1),transform .36s cubic-bezier(.22,1,.36,1),opacity .2s ease; }
.project-folder--left { left:28%; }.project-folder--right { left:72%; }
.project-folder:focus-visible { outline:3px solid rgba(113,181,255,.72); outline-offset:10px; border-radius:24px; }
.project-folder::after { content:""; position:absolute; z-index:-1; inset:-18px -18px -24px; border:1px solid rgba(174,211,255,.32); border-radius:18px; background:rgba(148,192,247,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); opacity:0; transform:scale(.94); transition:opacity .22s ease,transform .32s cubic-bezier(.16,1,.3,1); }
.folder-scene:not(.is-open) .project-folder:hover { transform:translate(-50%,-50%) translateY(-6px) scale(1.02); }.folder-scene:not(.is-open) .project-folder:hover::after,.folder-scene:not(.is-open) .project-folder:focus-visible::after { opacity:1; transform:scale(1); }.project-folder:active { transform:translate(-50%,-50%) translateY(-2px) scale(.98); }
.folder-back { position:absolute; left:5px; bottom:21px; width:221px; height:143px; border-radius:18px 18px 22px 22px; background:linear-gradient(160deg,#2f91f5,#2367ad); box-shadow:0 16px 28px rgba(60,127,181,.18); }
.folder-back::before { content:""; position:absolute; top:-17px; left:0; width:90px; height:28px; border-radius:18px 18px 0 0; background:linear-gradient(160deg,#328ff1,#2e7aca); }
.folder-front { position:absolute; z-index:3; left:0; bottom:0; width:240px; height:134px; border-radius:18px 18px 24px 24px; background:linear-gradient(165deg,#a9d3ff 0%,#469af6 97%); box-shadow:0 14px 23px rgba(56,130,202,.16), inset 0 2px 1px rgba(255,255,255,.35); }
.folder-peek { position:absolute; z-index:2; left:74px; bottom:113px; display:flex; align-items:end; width:106px; height:58px; }
.folder-peek img { position:absolute; bottom:0; width:56px; height:40px; border:3px solid white; border-radius:8px; object-fit:cover; box-shadow:0 5px 9px rgba(20,55,90,.18); transition:left .28s cubic-bezier(.16,1,.3,1),bottom .28s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1),box-shadow .28s ease; }
.folder-peek img:nth-child(1) { left:7px; transform:rotate(-10deg); }.folder-peek img:nth-child(2) { left:39px; bottom:8px; width:60px; height:43px; transform:rotate(4deg); }.folder-peek img:nth-child(3) { left:59px; transform:rotate(10deg); }
.folder-scene:not(.is-open) .project-folder:hover .folder-peek img { box-shadow:0 10px 16px rgba(20,55,90,.25); }
.folder-scene:not(.is-open) .project-folder:hover .folder-peek img:nth-child(1) { left:1px; bottom:8px; transform:rotate(-14deg) scale(1.05); }
.folder-scene:not(.is-open) .project-folder:hover .folder-peek img:nth-child(2) { left:43px; bottom:17px; transform:rotate(7deg) scale(1.08); }
.folder-scene:not(.is-open) .project-folder:hover .folder-peek img:nth-child(3) { left:65px; bottom:7px; transform:rotate(14deg) scale(1.05); }
.folder-label { position:absolute; z-index:4; top:198px; left:0; width:100%; color:rgba(239,248,255,.88); font-size:18px; font-weight:600; letter-spacing:.08em; text-align:center; white-space:nowrap; text-shadow:0 2px 12px rgba(0,17,61,.42); }
.folder-scene.is-open .folder-label { opacity:0; }
.folder-open-label { position:absolute; z-index:5; top:198px; left:0; width:100%; color:#edf6ff; font-size:26px; font-weight:650; letter-spacing:-.03em; text-align:center; opacity:0; text-shadow:0 2px 14px rgba(0,20,70,.42); transition:opacity .16s ease; }
.folder-hint { display:none; }
.folder-scene.is-open .folder-hint { opacity:0; pointer-events:none; }.folder-scene.is-open .project-folder { transform:translate(-50%,-50%) scale(.84); opacity:.62; }.folder-scene.is-open .project-folder[aria-expanded="true"] { opacity:1; transform:translate(-50%,-50%) scale(.96); }
.media-windows { position:absolute; inset:0; pointer-events:none; transition:opacity .28s ease,transform .42s cubic-bezier(.22,.8,.24,1); }
.window { --w:220px; --h:260px; --drag-x:0px; --drag-y:0px; position:absolute; z-index:1; left:50%; top:50%; width:var(--w); height:var(--h); overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 14px 28px rgba(49,102,148,.19); opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.45) rotate(0deg); will-change:transform,opacity; transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .16s ease; }
.window header { display:flex; align-items:center; gap:14px; height:48px; padding:0 15px; color:#555; background:rgba(255,255,255,.96); font-size:15px; white-space:nowrap; }.window header strong { overflow:hidden; text-overflow:ellipsis; font-weight:600; }.dots { display:inline-block; width:54px; height:16px; flex:0 0 auto; background:radial-gradient(circle at 8px 8px,#ff625c 0 7px,transparent 7.5px),radial-gradient(circle at 27px 8px,#ffbd2e 0 7px,transparent 7.5px),radial-gradient(circle at 46px 8px,#28c840 0 7px,transparent 7.5px); }
.window > img { display:block; width:100%; height:calc(100% - 48px); object-fit:cover; }.folder-scene[data-active-folder="personal"] .window[data-group="personal"],.folder-scene[data-active-folder="work"] .window[data-group="work"] { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r,0deg)); }
.card-like { position:absolute; z-index:4; right:10px; bottom:10px; display:grid; grid-auto-flow:column; align-items:center; gap:4px; min-width:36px; height:32px; padding:0 9px; border:1px solid rgba(20,56,104,.12); border-radius:999px; color:#26456f; background:rgba(255,255,255,.9); box-shadow:0 4px 12px rgba(15,46,90,.15); font:600 13px/1 Inter,ui-sans-serif,system-ui,sans-serif; cursor:pointer; backdrop-filter:blur(8px); transition:transform .18s cubic-bezier(.16,1,.3,1),color .18s ease,background .18s ease; }.card-like:hover { transform:scale(1.08); }.card-like[aria-pressed="true"] { color:#fff; background:#ff4d73; border-color:#ff4d73; }
.window:hover { z-index:12; }.folder-scene[data-active-folder] .window:hover { transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1.035) rotate(var(--r,0deg)); }
.work-art, .beach-art, .slider-art, .motion-art { height:calc(100% - 48px); }.work-art { display:grid; place-items:center; background:#050505; }.work-art i { width:110px; aspect-ratio:1; border-radius:40% 60% 55% 45%; background:radial-gradient(circle at 50% 35%,#fff3a4 0 8%,#ff4e18 22%,#ff2700 40%,#5728ff 54%,transparent 66%); filter:drop-shadow(0 0 15px #8450ff); transform:rotate(22deg); }.beach-art { background:radial-gradient(ellipse at 25% 82%,rgba(32,31,27,.8),transparent 29%),linear-gradient(150deg,#d3c6a7 0 55%,#e4dac4 56%); }.slider-art { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:-3px; overflow:hidden; background:#f8f8f8; }.slider-art b { display:block; width:70%; height:46px; margin-top:-21px; border-radius:5px; background:linear-gradient(135deg,#3b234f,#2a5c82); }.slider-art b:nth-child(2){background:#24323d}.slider-art b:nth-child(3){background:#be2d31}.slider-art b:nth-child(4){background:#f3d819}.slider-art b:nth-child(5){background:#3d1720}.motion-art { background:radial-gradient(circle at 25% 18%,#ffd9f5,transparent 25%),radial-gradient(circle at 77% 72%,#f6509a,transparent 33%),linear-gradient(135deg,#f5e5f7,#c47ab3); }
.player { display:grid; grid-template-columns:70px 35px 1fr auto; grid-template-rows:1fr 18px; column-gap:10px; align-items:center; height:calc(100% - 48px); padding:10px 14px; }.player img { grid-row:1 / 3; width:67px; height:50px; object-fit:cover; filter:grayscale(1); }.player button { width:28px; height:28px; border:0; border-radius:50%; color:#7a7a7a; background:#e5e5e5; font-size:10px; }.player b { font-size:14px; color:#575757; }.player span { font-size:11px; color:#9a9a9a; }.player em { grid-column:2 / 5; height:4px; border-radius:9px; background:linear-gradient(90deg,#777 0 9%,#ddd 9%); }
.second-dock { position:absolute; z-index:13; left:50%; bottom:clamp(34px,7vh,72px); display:flex; gap:16px; padding:12px 20px; transform:translateX(-50%); border:1px solid rgba(12,37,100,.68); border-radius:30px; background:linear-gradient(145deg,rgba(103,168,255,.7),rgba(23,73,166,.76)); box-shadow:inset 0 1px 1px rgba(255,255,255,.32),0 15px 40px rgba(0,17,61,.28); backdrop-filter:blur(18px); }.second-dock a { width:72px; aspect-ratio:1; border-radius:22%; transition:transform .25s cubic-bezier(.2,.8,.2,1); }.second-dock a:hover,.second-dock a:focus-visible { transform:translateY(-12px) scale(1.14); outline:0; }.second-dock img { width:100%; height:100%; display:block; border-radius:inherit; }
.project-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:clamp(16px,4vw,56px); background:rgba(3,13,34,.56); backdrop-filter:blur(14px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease,visibility 0s linear .25s; }.project-modal.is-open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s ease; }.project-modal__window { display:flex; flex-direction:column; width:min(1080px,100%); height:min(780px,calc(100svh - 32px)); overflow:hidden; border:1px solid rgba(255,255,255,.46); border-radius:20px; color:#142139; background:#f3f7ff; box-shadow:0 34px 100px rgba(0,0,0,.45); transform:translateY(20px) scale(.97); transition:transform .34s cubic-bezier(.16,1,.3,1); }.project-modal.is-open .project-modal__window { transform:translateY(0) scale(1); }.project-modal__bar { display:grid; grid-template-columns:70px 1fr 70px; align-items:center; flex:0 0 52px; padding:0 16px; border-bottom:1px solid #d5deed; color:#4a5a70; background:linear-gradient(#fcfdff,#eaf0f9); }.project-modal__bar strong { overflow:hidden; font-size:14px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }.modal-dots { width:54px; height:16px; background:radial-gradient(circle at 8px 8px,#ff625c 0 7px,transparent 7.5px),radial-gradient(circle at 27px 8px,#ffbd2e 0 7px,transparent 7.5px),radial-gradient(circle at 46px 8px,#28c840 0 7px,transparent 7.5px); }.project-modal__close { justify-self:end; display:grid; place-items:center; width:29px; height:29px; border:0; border-radius:50%; color:#66758b; background:#dfe7f3; font:400 24px/1 system-ui,sans-serif; cursor:pointer; transition:background .18s ease,color .18s ease; }.project-modal__close:hover { color:#fff; background:#ff625c; }.project-modal__content { overflow:auto; flex:1; scrollbar-color:#b9c7dc transparent; }.modal-case { --case-accent:#4a91ee; min-height:100%; padding:clamp(28px,5vw,68px); background:radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--case-accent) 22%,transparent),transparent 32%),#f3f7ff; }.modal-case__hero { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; min-height:330px; border-radius:22px; color:#fff; background:linear-gradient(145deg,var(--case-accent),#132c58); }.modal-case__copy { display:flex; flex-direction:column; justify-content:end; padding:clamp(28px,4vw,52px); }.modal-case__eyebrow { margin:0 0 12px; font-size:11px; font-weight:800; letter-spacing:.14em; opacity:.72; }.modal-case h2 { margin:0; font-size:clamp(34px,5vw,62px); line-height:.98; letter-spacing:-.07em; }.modal-case__copy p:last-child { max-width:370px; margin:20px 0 0; color:rgba(255,255,255,.78); line-height:1.65; }.modal-case__cover { width:100%; height:100%; min-height:280px; object-fit:cover; }.modal-case__section { margin-top:clamp(42px,7vw,74px); }.modal-case__section h3 { margin:0 0 20px; color:#172944; font-size:24px; letter-spacing:-.04em; }.modal-case__meta,.modal-case__process { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; border:1px solid #d9e3f2; border-radius:16px; background:rgba(255,255,255,.72); }.modal-case__meta div,.modal-case__process article { padding:22px; border-right:1px solid #d9e3f2; }.modal-case__meta div:last-child,.modal-case__process article:last-child { border:0; }.modal-case__meta span { display:block; color:#73839b; font-size:11px; font-weight:800; letter-spacing:.1em; }.modal-case__meta strong { display:block; margin-top:10px; color:#253853; font-size:16px; }.modal-case__process h4 { margin:28px 0 9px; color:#233650; font-size:18px; }.modal-case__process p { margin:0; color:#667891; font-size:14px; line-height:1.65; }.modal-case__number { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#fff; background:var(--case-accent); font-size:12px; font-weight:800; }.modal-case__image { display:block; width:100%; max-height:520px; margin-top:20px; border-radius:20px; object-fit:cover; }
@media (max-width:900px) { .window { transform:translate(-50%,-50%) scale(.3); }.folder-scene[data-active-folder="personal"] .window[data-group="personal"],.folder-scene[data-active-folder="work"] .window[data-group="work"] { transform:translate(-50%,-50%) translate(calc(var(--x) * .62),calc(var(--y) * .68)) scale(.64); }.folder-scene[data-active-folder] .window:hover { transform:translate(-50%,-50%) translate(calc(var(--x) * .62),calc(var(--y) * .68)) scale(.68); }.window.audio,.window.motion,.window.glass { display:none; } }
@media (max-width:700px) { .project-folder--left { left:27%; }.project-folder--right { left:73%; }.project-folder { transform:translate(-50%,-50%) scale(.68); }.folder-scene.is-open .project-folder { transform:translate(-50%,-50%) scale(.58); }.second-dock { gap:8px; padding:8px 12px; }.second-dock a { width:50px; } }
@media (max-width:700px) { .project-modal { padding:10px; }.project-modal__window { height:calc(100svh - 20px); border-radius:15px; }.project-modal__bar { grid-template-columns:60px 1fr 45px; padding:0 12px; }.modal-case { padding:22px; }.modal-case__hero,.modal-case__meta,.modal-case__process { grid-template-columns:1fr; }.modal-case__cover { min-height:230px; }.modal-case__meta div,.modal-case__process article { border-right:0; border-bottom:1px solid #d9e3f2; }.modal-case__meta div:last-child,.modal-case__process article:last-child { border-bottom:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; } }

/* Open state: one clear focus, then a predictable project grid. */
.folder-scene.is-open .project-folder { top:50%; left:50%; opacity:0; pointer-events:none; transition:left .34s cubic-bezier(.22,1,.36,1),top .34s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1),opacity .18s ease; }
.folder-scene.is-open .project-folder[aria-expanded="true"] { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(.48); }
.folder-scene.is-open .media-windows,.folder-scene.is-closing .media-windows { display:grid; grid-template-columns:repeat(3,minmax(180px,280px)); grid-template-rows:repeat(2,minmax(150px,1fr)); gap:18px; align-content:center; justify-content:center; padding:18vh 6vw 17vh; pointer-events:auto; }
.folder-scene[data-active-folder] .window { display:none; }
.folder-scene[data-active-folder="personal"] .window[data-group="personal"],.folder-scene[data-active-folder="work"] .window[data-group="work"] { position:relative; left:auto; top:auto; display:block; width:auto; height:clamp(160px,22vh,220px); min-width:0; opacity:1; pointer-events:auto; transform:none; transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease; }
.folder-scene[data-active-folder] .window.project-cover { height:clamp(170px,22vh,230px); }
.folder-scene[data-active-folder] .window:hover { transform:translateY(-7px); box-shadow:0 20px 35px rgba(13,54,121,.3); }
.folder-scene[data-active-folder] .window > img { object-position:center; }
.folder-scene.is-closing .media-windows { opacity:0; transform:scale(.975); pointer-events:none; transition:opacity .28s ease,transform .42s cubic-bezier(.22,.8,.24,1); }
@media (max-width:900px) { .folder-scene.is-open .media-windows { grid-template-columns:repeat(2,minmax(140px,230px)); grid-template-rows:repeat(3,minmax(130px,1fr)); gap:12px; padding:17vh 4vw 16vh; }.folder-scene[data-active-folder] .window[data-group] { height:clamp(130px,19vh,170px); }.folder-scene.is-open .project-folder[aria-expanded="true"] { transform:translate(-50%,-50%) scale(.42); } }

/* Selected folder travels to the center; its cards burst out only after it arrives. */
.folder-scene.is-open .project-folder { top:50%; left:50%; opacity:0; pointer-events:none; }
.folder-scene.is-open .project-folder[aria-expanded="true"] { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(.9); }
.folder-scene.is-open .media-windows,.folder-scene.is-closing .media-windows { display:block; padding:0; opacity:1; transform:none; }
.folder-scene.is-open[data-active-folder="personal"] .window[data-group="personal"],.folder-scene.is-open[data-active-folder="work"] .window[data-group="work"] { position:absolute; left:50%; top:50%; display:block; width:var(--w); height:var(--h); opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.16); transition:transform .46s cubic-bezier(.16,1,.3,1),opacity .24s ease; }
.folder-scene.is-exploded[data-active-folder="personal"] .window[data-group="personal"],.folder-scene.is-exploded[data-active-folder="work"] .window[data-group="work"] { opacity:1; pointer-events:auto; touch-action:none; cursor:grab; transform:translate(-50%,-50%) translate(var(--x),var(--y)) translate(var(--drag-x),var(--drag-y)) scale(.64) rotate(var(--r,0deg)); animation:project-arrive .5s cubic-bezier(.16,1,.3,1) var(--burst-delay,0ms) both; }
.folder-scene.is-exploded .project-folder[aria-expanded="true"] { animation:folder-settle .54s cubic-bezier(.16,1,.3,1) both; }
.folder-scene.is-exploded .project-folder[aria-expanded="true"] .folder-open-label { opacity:1; transition:opacity .16s ease .16s; }
.folder-scene.is-exploded .window:hover { transform:translate(-50%,-50%) translate(var(--x),var(--y)) translate(var(--drag-x),var(--drag-y)) scale(.69) rotate(var(--r,0deg)); }
.folder-scene.is-exploded .window.is-dragging { z-index:12; cursor:grabbing; transition:none; animation:none; transform:translate(-50%,-50%) translate(var(--x),var(--y)) translate(var(--drag-x),var(--drag-y)) scale(.64) rotate(var(--r,0deg)); }
.folder-scene.is-closing[data-active-folder="personal"] .window[data-group="personal"],.folder-scene.is-closing[data-active-folder="work"] .window[data-group="work"] { opacity:1; pointer-events:none; transform:translate(-50%,-50%) scale(.16); }
.folder-scene.is-closing .project-folder[aria-expanded="true"] { transform:translate(-50%,-50%) scale(.67); }
@media (max-width:900px) { .folder-scene.is-open[data-active-folder] .window[data-group] { width:var(--w); height:var(--h); }.folder-scene.is-exploded[data-active-folder] .window[data-group] { transform:translate(-50%,-50%) translate(calc(var(--x) * .72),calc(var(--y) * .72)) translate(var(--drag-x),var(--drag-y)) scale(.52); }.folder-scene.is-exploded .window:hover { transform:translate(-50%,-50%) translate(calc(var(--x) * .72),calc(var(--y) * .72)) translate(var(--drag-x),var(--drag-y)) scale(.56); } }

@keyframes folder-settle {
  0% { transform:translate(-50%,-50%) scale(.9); }
  58% { transform:translate(-50%,-50%) scale(.79); }
  80% { transform:translate(-50%,-50%) scale(.815); }
  100% { transform:translate(-50%,-50%) scale(.8); }
}

@keyframes project-arrive {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.16) rotate(0deg); }
  72% { opacity:1; transform:translate(-50%,-50%) translate(var(--x),var(--y)) translate(var(--drag-x),var(--drag-y)) scale(.67) rotate(var(--r,0deg)); }
  100% { opacity:1; transform:translate(-50%,-50%) translate(var(--x),var(--y)) translate(var(--drag-x),var(--drag-y)) scale(.64) rotate(var(--r,0deg)); }
}

/* Full-length GouGou case pages, shown in filename order inside the Mac modal. */
.modal-case--gallery { min-height:100%; padding:clamp(16px,3vw,38px); background:linear-gradient(180deg,#dffaff,#f8fcff); }
.modal-gallery__intro { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:16px 8px 26px; color:#144e8e; }.modal-gallery__intro p { margin:0; font-size:12px; font-weight:800; letter-spacing:.12em; }.modal-gallery__intro h2 { max-width:650px; color:#144e8e; font-size:clamp(32px,5vw,60px); }.modal-gallery__pages { display:grid; gap:0; }.modal-gallery__page { overflow:hidden; margin:0; border-radius:0; background:#fff; box-shadow:none; }.modal-gallery__page img { display:block; width:100%; height:auto; }
.modal-gallery__page:first-child { border-top-left-radius:clamp(12px,2vw,24px); border-top-right-radius:clamp(12px,2vw,24px); }
.modal-gallery__page:last-child { border-bottom-left-radius:clamp(12px,2vw,24px); border-bottom-right-radius:clamp(12px,2vw,24px); }
@media (max-width:700px) { .modal-case--gallery { padding:12px; }.modal-gallery__intro { display:block; padding:12px 8px 20px; }.modal-gallery__intro p { margin-top:9px; } }