@font-face{font-family:Outfit;src:url('./public/fonts/outfit-300.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:Outfit;src:url('./public/fonts/outfit-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Outfit;src:url('./public/fonts/outfit-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Outfit;src:url('./public/fonts/outfit-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('./public/fonts/space-grotesk-500.ttf') format('truetype');font-weight:500;font-display:swap}

:root{color-scheme:dark;background:#0e1117;font-family:Outfit,Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#0e1117}
body{margin:0;overflow-x:hidden;background:#0e1117;color:#ebedf5}
a{color:inherit;text-decoration:none}
.effect-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.viewport-stage{position:relative;width:100%;overflow:hidden}
.design-canvas{position:absolute;left:50%;top:0;transform-origin:top center}

.hero{height:56.25vw;min-height:0;background:#0e1117}
.hero-canvas{width:1920px;height:1080px;margin-left:-960px;background:#0e1117;overflow:hidden}
.header{position:fixed;z-index:100;left:0;top:0;width:100%;height:100px;padding:40px max(24px,5.8333vw);display:flex;justify-content:space-between;align-items:flex-start;font-size:24px;font-weight:500;line-height:19px;white-space:nowrap;pointer-events:none;isolation:isolate}
.header::before{content:"";position:absolute;z-index:-1;top:0;right:0;left:0;height:232px;background:linear-gradient(180deg,rgba(7,10,16,.98) 0%,rgba(7,10,16,.9) 34%,rgba(7,10,16,.58) 61%,rgba(7,10,16,.22) 82%,rgba(7,10,16,0) 100%);opacity:0;transition:opacity 320ms cubic-bezier(.22,1,.36,1);pointer-events:none}
.header.is-scroll-shaded::before{opacity:1}
.brand{width:280px}
.header nav{display:flex;gap:clamp(24px,5vw,96px);align-items:center}
.header a{pointer-events:auto;transition:opacity .2s ease}
.header a:hover{opacity:.62}
.header nav a{position:relative;z-index:0;color:#ebedf5;outline:none;transition:color 180ms ease,opacity 180ms ease,transform 140ms ease}
.header nav a::before{content:"";position:absolute;z-index:-1;inset:-8px -16px;background:#fff;opacity:0;transform:scale(.92);transition:opacity 180ms ease,transform 220ms cubic-bezier(.22,1,.36,1)}
.header nav a:hover,.header nav a:focus-visible,.header nav a.is-active{color:#0e1117;opacity:1}
.header nav a:hover::before,.header nav a:focus-visible::before,.header nav a.is-active::before{opacity:1;transform:scale(1)}
.header nav a:active{transform:scale(.97)}
.header nav a:active::before{background:#ebedf5;transform:scale(.96)}
.intro-row{position:absolute;z-index:6;left:112px;top:139px;width:1696px;height:124px;display:flex;align-items:flex-start}
.role{margin:0;width:125px;font-size:31px;font-weight:400;line-height:42px}
.manifesto{margin:0 0 0 480px;color:#b8bfd1;font-size:20px;font-weight:300;line-height:25px}
.introduction{margin:4.5px 0 0 auto;color:#b8bfd1;font-size:20px;font-weight:300;line-height:25px}

.grid-lines{position:absolute;inset:0;z-index:1;pointer-events:none}
.grid-lines i{position:absolute;display:block;background:rgba(77,82,89,.28)}
.grid-v{top:0;width:1px;height:1080px}.v1{left:88px}.v2{left:669px}.v3{left:1250px}.v4{left:1831px}
.grid-h{left:0;width:1920px;height:1px}.h1{top:339px}.h2{top:740px}
.crosses img{position:absolute;z-index:3;left:var(--x);top:var(--y);width:16px;height:16px}

.jelly-word{position:absolute;z-index:4;left:150px;top:30px;width:1620px;height:911px;overflow:hidden;pointer-events:none;mix-blend-mode:screen;animation:jelly-breathe 6s ease-in-out infinite}
.jelly-word img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.96) contrast(1.04);opacity:.96}
@keyframes jelly-breathe{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-5px,0) scale(1.008,.996)}}

.physics-layer,.physics-refraction-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.physics-layer{z-index:2}
.physics-refraction-layer{z-index:3;-webkit-backdrop-filter:blur(12px) saturate(.72) contrast(.92);backdrop-filter:blur(12px) saturate(.72) contrast(.92);-webkit-mask-image:url('./public/assets/portfolio-jelly.png');mask-image:url('./public/assets/portfolio-jelly.png');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:150px 30px;mask-position:150px 30px;-webkit-mask-size:1620px 911px;mask-size:1620px 911px}
.falling-sticker{position:absolute;left:0;top:0;display:block;width:var(--w);height:var(--h);object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.16));transform-origin:center;will-change:transform,opacity;opacity:0}
.physics-refraction-layer .falling-sticker{filter:url('#liquid-glass-filter') saturate(.8) brightness(.94);mix-blend-mode:normal}

h1{position:absolute;z-index:5;left:112px;top:696px;margin:0;color:#f0f2f7;font-size:80px;font-weight:700;line-height:88px;letter-spacing:-1.6px;white-space:nowrap}
.hero-footer{position:absolute;z-index:6;left:112px;bottom:48px;width:1696px;height:32px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;color:#b8bfd1;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:500;line-height:24px}
.hero-footer>span:nth-child(2){text-align:center}.globe{display:flex;justify-content:flex-end}.globe img{width:32px;height:32px}

.work-section{position:relative;min-height:1315px;padding:clamp(104px,8.333vw,160px) clamp(24px,8.073vw,155px) 140px;display:flex;flex-direction:column;align-items:center;gap:64px;overflow:hidden;background:#0e1117}
.work-texture{position:absolute;left:0;right:0;top:0;height:clamp(150px,17.708vw,340px);z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 52%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 52%,transparent 100%)}
.work-texture-lines{position:absolute;inset:0}
.work-texture-lines i{position:absolute;display:block;background:rgba(77,82,89,.28)}
.work-grid-v{left:var(--x);top:0;width:1px;height:100%}
.work-grid-v:nth-child(1){--x:4.5833%}.work-grid-v:nth-child(2){--x:34.8438%}.work-grid-v:nth-child(3){--x:65.1042%}.work-grid-v:nth-child(4){--x:95.3646%}
.work-grid-h{left:0;top:var(--y);width:100%;height:1px}
.work-texture-crosses img{position:absolute;left:var(--x);top:var(--y);width:min(.8333vw,16px);height:min(.8333vw,16px);opacity:.82}
.work-texture-crosses img:nth-child(1){--x:4.1927%}.work-texture-crosses img:nth-child(2){--x:34.4531%}.work-texture-crosses img:nth-child(3){--x:64.7135%}.work-texture-crosses img:nth-child(4){--x:94.974%}
.work-title{position:relative;z-index:1;margin:0;color:#fff;font-size:clamp(44px,4.167vw,80px);font-weight:500;line-height:1.2625;letter-spacing:0;text-align:center;text-transform:uppercase;white-space:nowrap}
.work-title span{display:inline}
.work-title-blue{color:#3ba8fd}.work-title-green{color:#9bfa3f}.work-title-pink{color:#fdb8df}
.work-orbit{position:relative;z-index:1;width:min(100%,1480px);aspect-ratio:1480/850;min-height:0;perspective:1200px;isolation:isolate}
.work-orbit-track{position:absolute;inset:0;transform-style:preserve-3d}
.motion-ready .work-title,.motion-ready .work-orbit{transition-property:opacity,transform;transition-timing-function:cubic-bezier(.22,1,.36,1)}
.motion-ready .work-title{opacity:0;transform:translate3d(0,44px,0);transition-duration:.9s}
.motion-ready .work-orbit{opacity:0;transform:translate3d(0,72px,0) scale(.975);transition-duration:1.1s;transition-delay:.14s}
.motion-ready .work-section.is-revealed .work-title,.motion-ready .work-section.is-revealed .work-orbit{opacity:1;transform:none}
.motion-ready .work-section:not(.is-revealed) .work-title,.motion-ready .work-section:not(.is-revealed) .work-orbit{will-change:opacity,transform}
.work-card{--card-scale:1;position:absolute;left:50%;top:50%;width:clamp(138px,11.46vw,220px);aspect-ratio:4/3;margin:0;padding:0;overflow:hidden;border:0;border-radius:12px;background:#171b23;box-shadow:0 18px 42px rgba(0,0,0,.36);color:inherit;text-decoration:none;cursor:pointer;transform-origin:center;will-change:transform,opacity,filter;transition:box-shadow .25s ease,outline-color .25s ease;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.work-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.work-card:hover{box-shadow:0 38px 88px rgba(0,0,0,.82),0 12px 30px rgba(0,0,0,.74);outline-color:rgba(255,255,255,.34)}
.work-card:focus-visible{box-shadow:0 26px 60px rgba(0,0,0,.52);outline-color:rgba(255,255,255,.4)}
.work-card:focus-visible{outline-width:2px;outline-offset:4px}

.capabilities-section{position:relative;min-height:1218px;padding:100px 0;background:#0e1117;overflow:hidden}
.capabilities-inner{width:min(calc(100% - 200px),1400px);margin:0 auto;display:flex;flex-direction:column;gap:88px}
.capabilities-header{min-height:202px;display:grid;grid-template-columns:minmax(0,691px) 422px;justify-content:space-between;align-items:start}
.capabilities-title{max-width:691px;margin:0;color:#fff;font-size:80px;font-weight:500;line-height:1.2625;letter-spacing:0;text-transform:uppercase}
.capabilities-title span{color:#ffa9da}
.capabilities-summary{width:422px;margin:0;padding:32px 0;color:#fff;font-size:20px;font-weight:300;line-height:24px;text-align:right}
.capabilities-grid{width:1398px;max-width:100%;aspect-ratio:1398/728;display:grid;grid-template-columns:360fr 360fr 294fr 360fr;grid-template-rows:1fr 1fr;gap:8px}
.capability-card{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:32px}
.capability-card-image{display:block;width:100%;height:100%;object-fit:fill}
.capability-card-surface{position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit}
.capability-creative{grid-column:1;grid-row:1;overflow:visible}
.capability-creative-surface{background:linear-gradient(180deg,#dc6bff 0%,#c4aeff 100%)}
.capability-creative-artwork{position:absolute;left:0;top:-11.389%;width:100%;height:111.389%;overflow:hidden;border-radius:32px;pointer-events:none}
.capability-creative-scene{position:absolute;left:0;top:-.499%;width:100%;height:101%;max-width:none;object-fit:fill}
.capability-creative-spark{position:absolute;left:36.39%;top:17.46%;width:9.44%;height:7.08%;max-width:none;object-fit:contain}
.capability-business{grid-column:2;grid-row:1}
.capability-ux{grid-column:3/5;grid-row:1}
.capability-operations{grid-column:1;grid-row:2}
.capability-aigc{grid-column:2/4;grid-row:2}
.capability-drawing{grid-column:4;grid-row:2;overflow:visible}
.capability-drawing-surface{background:linear-gradient(174.526deg,#ff97e8 4.3726%,#ffc5f9 96.465%)}
.capability-drawing-object{position:absolute;left:-12.778%;top:12.778%;width:153.035%;aspect-ratio:1;display:grid;place-items:center;clip-path:polygon(60% 0,100% 0,100% 100%,60% 100%);pointer-events:none}
.capability-drawing-object img{display:block;width:70.974%;height:70.974%;max-width:none;object-fit:contain;transform:rotate(-49.94deg)}

@media (min-width:721px) and (hover:hover) and (pointer:fine){
  .capability-card{isolation:isolate}

  /* 体验设计：重新覆盖手持手机区域，只让主体顺时针转动并轻微放大。 */
  .capability-ux-motion{opacity:1}
  .ux-motion-cover{position:absolute;right:-1%;top:-1%;width:88%;height:102%;background:linear-gradient(135deg,#c96cfa 0%,#ae63f2 48%,#8881f8 100%)}
  .ux-motion-hand{left:15.4%;top:0;width:84.6%;height:auto;transform-origin:64% 58%;transform:rotate(0deg) scale(1);transition:transform .62s cubic-bezier(.22,1,.36,1),filter .62s ease}
  .capability-ux:hover .ux-motion-hand{transform:translate(-1.5%,-2%) rotate(8deg) scale(1.075);filter:drop-shadow(0 18px 24px rgba(28,10,56,.22))}

  /* 业务拆解：由捏紧手势自然过渡为放松手指的状态。 */
  .capability-business-motion{opacity:0;transition:opacity .28s ease}
  .business-motion-bg{inset:0;width:100%;height:100%;object-fit:cover}
  .business-motion-hand{left:22%;top:-8%;width:78%;height:auto;transform-origin:70% 20%;transform:translateY(4%) scale(.985);transition:transform .58s cubic-bezier(.22,1,.36,1)}
  .capability-business:hover .capability-business-motion{opacity:1}
  .capability-business:hover .business-motion-hand{transform:translateY(0) scale(1)}

  /* 产品运营：橙色十字旋转，白色像素十字以不同节奏轻漂浮。 */
  .capability-operations-motion{opacity:1}
  .operations-cross-cover{position:absolute;left:39%;top:34%;width:23%;height:25%;border-radius:50%;background:#78c8ff}
  .operations-motion-cross{left:42.1%;top:37.5%;width:16.1%;height:auto;transform-origin:center;transition:transform .7s cubic-bezier(.22,1,.36,1)}
  .operations-motion-pixel{width:7%;height:auto;transition:transform .65s cubic-bezier(.22,1,.36,1),filter .5s ease}
  .operations-motion-pixel-1{left:13%;top:16%}
  .operations-motion-pixel-2{right:14%;top:19%}
  .operations-motion-pixel-3{right:11%;bottom:18%;width:5.5%}
  .capability-operations:hover .operations-motion-cross{transform:rotate(145deg)}
  .capability-operations:hover .operations-motion-pixel-1{transform:translateY(-8px);filter:drop-shadow(0 0 8px rgba(255,255,255,.8))}
  .capability-operations:hover .operations-motion-pixel-2{transform:translateY(7px)}
  .capability-operations:hover .operations-motion-pixel-3{transform:translateY(-5px)}

  /* AIGC：屏幕提亮，周围星芒依次闪动。 */
  .capability-aigc-motion{opacity:1}
  .aigc-screen-glow{position:absolute;right:7%;top:20%;width:34%;height:62%;border-radius:20%;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.7),rgba(148,218,255,.24) 38%,transparent 70%);mix-blend-mode:screen;opacity:0;transform:scale(.92);transition:opacity .5s ease,transform .65s cubic-bezier(.22,1,.36,1)}
  .aigc-star{position:absolute;width:13px;height:13px;opacity:.45;transform:scale(.72) rotate(0);transition:opacity .35s ease,transform .55s cubic-bezier(.22,1,.36,1),filter .35s ease}
  .aigc-star::before,.aigc-star::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:999px;transform:translate(-50%,-50%)}
  .aigc-star::before{width:100%;height:2px}.aigc-star::after{width:2px;height:100%}
  .aigc-star-1{left:10%;top:28%}.aigc-star-2{left:47%;top:17%;width:9px;height:9px}.aigc-star-3{right:8%;bottom:19%;width:17px;height:17px}
  .capability-aigc:hover .aigc-screen-glow{opacity:1;transform:scale(1.04)}
  .capability-aigc:hover .aigc-star{opacity:1;transform:scale(1.35) rotate(90deg);filter:drop-shadow(0 0 7px #fff)}
  .capability-aigc:hover .aigc-star-2{transition-delay:.08s}.capability-aigc:hover .aigc-star-3{transition-delay:.15s}

  /* 手绘：沿当前笔势滑动，不改变卡片最终构图。 */
  .capability-drawing-overflow>span{transition:transform .62s cubic-bezier(.22,1,.36,1)}
  .capability-drawing-overflow img{transition:left .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1)}
  .capability-drawing:hover .capability-drawing-overflow>span{transform:translate(4%,-3%) rotate(-43deg)}
  .capability-drawing:hover .capability-drawing-overflow img{left:-116%;transform:translateY(-2%)}
}

@media (prefers-reduced-motion:reduce){
  .capability-motion-layer *,
  .capability-drawing-overflow>span,
  .capability-drawing-overflow img{transition:none!important;animation:none!important}
}
.motion-ready .capabilities-title,.motion-ready .capabilities-summary,.motion-ready .capabilities-grid{opacity:0;transform:translate3d(0,48px,0);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.motion-ready .capabilities-summary{transition-delay:.08s}
.motion-ready .capabilities-grid{transform:translate3d(0,72px,0);transition-duration:1.1s;transition-delay:.16s}
.motion-ready .capabilities-section.is-revealed .capabilities-title,.motion-ready .capabilities-section.is-revealed .capabilities-summary,.motion-ready .capabilities-section.is-revealed .capabilities-grid{opacity:1;transform:none;will-change:auto}

.recent-section{position:relative;min-height:1286px;padding:100px 0 0;overflow:hidden;background-color:#0e1117;background-image:url('./public/assets/section4/background-wide.png');background-repeat:no-repeat;background-position:center top;background-size:3600px 1286px}
.recent-header{width:min(calc(100% - 200px),1400px);height:202px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between}
.recent-title{width:691px;margin:0;color:#fff;font-size:80px;font-weight:500;line-height:1.05;text-transform:uppercase}.recent-title span{display:block;color:#a5f939}
.recent-arrow{width:100px;height:100px;object-fit:contain}
.recent-folder-area{position:relative;isolation:isolate;min-height:984px;margin-top:0;overflow:hidden}
.recent-folder-scene{position:absolute;z-index:1;left:50%;top:422px;width:min(calc(100% - 200px),1400px);aspect-ratio:1400/437;container-type:inline-size;transform:translateX(-50%);isolation:isolate}
.recent-folder-piece{position:absolute;display:block;object-fit:fill;pointer-events:none;transform:translate3d(0,0,0) scaleY(1);transform-origin:bottom center;transition:transform 300ms cubic-bezier(.22,1,.36,1);will-change:transform}
.recent-folder-piece-pink{z-index:2;left:0;top:0;width:49.857%;height:66.819%}
.recent-folder-piece-blue{z-index:4;left:0;top:43.936%;width:45.571%;height:56.064%}
.recent-folder-piece-white{z-index:4;left:49.857%;top:0;width:50.143%;height:66.819%}
.recent-folder-piece-yellow{z-index:7;left:37.714%;top:42.105%;width:62.286%;height:57.895%}
.recent-folder-area[data-active-folder="b"] .recent-folder-piece-pink,.recent-folder-area[data-active-folder="c"] .recent-folder-piece-white,.recent-folder-area[data-active-folder="web"] .recent-folder-piece-blue,.recent-folder-area[data-active-folder="ops"] .recent-folder-piece-yellow{transform:translate3d(0,2px,0) scaleY(.992)}
.recent-folder{position:absolute;z-index:20;margin:0;padding:0;border:0;background:transparent;cursor:pointer}.recent-folder:focus-visible{outline:2px solid #fff;outline-offset:-5px}
.recent-folder-b{left:0;top:0;width:49.85%;height:66.8%}.recent-folder-c{left:49.85%;top:0;width:50.15%;height:66.8%}.recent-folder-web{left:0;top:43.9%;width:45.6%;height:56.1%}.recent-folder-ops{left:37.7%;top:42.1%;width:62.3%;height:57.9%}
.recent-project-stage{position:absolute;inset:0;z-index:1;overflow:visible;pointer-events:none}
.recent-folder-area[data-active-folder="web"] .recent-project-stage{z-index:3}
.recent-folder-area[data-active-folder="ops"] .recent-project-stage{z-index:5}
.recent-project-group{position:absolute;inset:0;pointer-events:none}
.project-preview{position:absolute;top:var(--top);left:var(--x);display:flex;width:21.4286%;aspect-ratio:300/320;box-sizing:border-box;flex-direction:column;align-items:flex-start;gap:min(1.143cqw,16px);padding:min(.857cqw,12px);overflow:hidden;border-radius:min(1.714cqw,24px);background:#fff;box-shadow:-20px 11px 28px rgba(0,0,0,.25);color:rgba(0,0,0,.85);text-decoration:none;transform:translate3d(calc(-50% + var(--closed-x-shift)),var(--closed-offset),0) rotate(var(--closed-rotate)) scale(.96) scale(var(--responsive-preview-scale,1));transform-origin:bottom center;opacity:0;visibility:hidden;pointer-events:none;transition-property:opacity,transform,box-shadow,visibility;transition-duration:480ms,560ms,280ms,0s;transition-timing-function:cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),linear;transition-delay:0ms,0ms,0ms,560ms;will-change:transform,opacity}
.recent-folder-area[data-active-folder="b"] .recent-project-group[data-folder="b"] .project-preview,.recent-folder-area[data-active-folder="c"] .recent-project-group[data-folder="c"] .project-preview,.recent-folder-area[data-active-folder="web"] .recent-project-group[data-folder="web"] .project-preview,.recent-folder-area[data-active-folder="ops"] .recent-project-group[data-folder="ops"] .project-preview{opacity:1;visibility:visible;transform:translate3d(-50%,0,0) rotate(var(--rotate)) scale(1) scale(var(--responsive-preview-scale,1));pointer-events:auto;transition-delay:400ms,400ms,0ms,400ms}
.recent-folder-area[data-active-folder="b"] .recent-project-group[data-folder="b"] .project-preview:hover,.recent-folder-area[data-active-folder="c"] .recent-project-group[data-folder="c"] .project-preview:hover,.recent-folder-area[data-active-folder="web"] .recent-project-group[data-folder="web"] .project-preview:hover,.recent-folder-area[data-active-folder="ops"] .recent-project-group[data-folder="ops"] .project-preview:hover,.project-preview.is-pointer-hovered{z-index:30;box-shadow:-24px 18px 42px rgba(0,0,0,.46),0 0 0 2px rgba(255,255,255,.72);transform:translate3d(-50%,-8px,0) rotate(var(--rotate)) scale(1.045) scale(var(--responsive-preview-scale,1));transition-delay:0ms,0ms,0ms,0ms}
.project-preview:focus-visible{z-index:31;outline:3px solid #a5f939;outline-offset:4px;box-shadow:-24px 18px 42px rgba(0,0,0,.46);transform:translate3d(-50%,-8px,0) rotate(var(--rotate)) scale(1.045) scale(var(--responsive-preview-scale,1))}
.project-preview-heading{display:flex;width:100%;min-height:1px;flex:1 0 0;align-items:center;padding:0 min(.571cqw,8px);box-sizing:border-box}.project-preview-title{width:100%;margin:0;font-family:"HarmonyOS Sans SC","PingFang SC",sans-serif;font-size:var(--title-size,min(2.286cqw,32px));font-weight:900;line-height:normal;text-align:var(--title-align,center);white-space:nowrap}.project-preview-cover{position:relative;display:block;width:100%;aspect-ratio:4/3;flex:0 0 auto;overflow:hidden;border-radius:min(1.143cqw,16px);background:#e8ebf0}.project-preview-cover img{display:block;width:100%;height:100%;object-fit:cover}
.recent-mobile-detail[hidden]{display:none}
.recent-mobile-detail{display:none}
.motion-ready .recent-header,.motion-ready .recent-folder-area{opacity:0;transform:translate3d(0,52px,0);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}.motion-ready .recent-folder-area{transition-delay:.12s}.motion-ready .recent-section.is-revealed .recent-header,.motion-ready .recent-section.is-revealed .recent-folder-area{opacity:1;transform:none;will-change:auto}


.contact-section{position:relative;height:888px;overflow:hidden;background-color:#0e1117;background-image:url('./public/assets/section5/background-wide.png');background-repeat:no-repeat;background-position:center top;background-size:3600px 888px}
.contact-inner{position:relative;width:min(100%,1920px);height:100%;margin:0 auto;display:grid;grid-template-columns:minmax(745px,1fr) minmax(0,1015px)}
.contact-copy{position:relative;z-index:2;padding:120px 0 0 clamp(100px,calc(100vw - 1660px),260px)}
.contact-title{margin:0;color:#fff;font-size:80px;font-weight:500;line-height:1.06;letter-spacing:0;text-transform:uppercase;white-space:nowrap}
.contact-title span{color:#3ba9fd}
.contact-details{display:flex;align-items:center;gap:72px;margin-top:120px}
.contact-qr{position:relative;width:256px;height:256px;flex:0 0 256px;overflow:hidden;border-radius:19px;background:#fff}
.contact-qr img{position:absolute;left:-12.71%;top:-38.02%;width:123.75%;height:162.93%;max-width:none;object-fit:cover}
.contact-methods{display:flex;flex-direction:column;gap:32px;color:#fff}
.contact-method{display:flex;flex-direction:column;gap:16px;white-space:nowrap}
.contact-method-label{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:500;line-height:1.2}
.contact-method-label img{display:block;width:32px;height:32px;object-fit:contain}
.contact-method>a{font-size:28px;font-weight:500;line-height:1.2;transition:opacity .2s ease}
.contact-method>a:hover{opacity:.66}
.contact-motion{position:relative;z-index:1;height:888px;overflow:hidden;padding-bottom:200px}
.contact-sticker-stage{position:relative;width:100%;height:100%;container-type:inline-size}
.contact-sticker-slot{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:var(--ratio);transform:translate(-50%,-50%);transform-origin:center;pointer-events:none;transition:transform 420ms cubic-bezier(.22,1,.36,1);will-change:transform}
.contact-sticker{display:block;width:100%;height:100%;object-fit:contain;opacity:0;filter:drop-shadow(0 12px 14px rgba(0,0,0,.18));transform:translate3d(0,-780px,0) rotate(var(--start-rotate)) scale(.94);transform-origin:center;will-change:transform,opacity}
.contact-section.is-sticker-active .contact-sticker{animation:contact-sticker-drop var(--duration,920ms) cubic-bezier(.22,.82,.3,1) var(--delay,0ms) both}
@keyframes contact-sticker-drop{0%{opacity:0;transform:translate3d(0,-780px,0) rotate(var(--start-rotate)) scale(.94)}12%{opacity:1}72%{opacity:1;transform:translate3d(0,11px,0) rotate(calc(var(--rotate) + 3deg)) scale(1)}86%{transform:translate3d(0,-4px,0) rotate(calc(var(--rotate) - 1deg)) scale(1)}100%{opacity:1;transform:translate3d(0,0,0) rotate(var(--rotate)) scale(1)}}
.contact-section.is-pile-settled .contact-motion:hover .contact-sticker-slot{animation:contact-sticker-hover-roll var(--hover-duration,1800ms) ease-in-out var(--hover-delay,0ms) infinite alternate}
@keyframes contact-sticker-hover-roll{0%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg)}100%{transform:translate(-50%,-50%) translate3d(var(--hover-x,4px),var(--hover-y,-3px),0) rotate(var(--hover-roll,3deg))}}
.motion-ready .contact-copy{opacity:0;transform:translate3d(0,48px,0);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.motion-ready .contact-section.is-revealed .contact-copy{opacity:1;transform:none;will-change:auto}

@media (max-width:1400px) and (min-width:1101px){.contact-details{gap:clamp(32px,4vw,72px)}.contact-qr{width:220px;height:220px;flex-basis:220px}.contact-title{font-size:clamp(62px,5.4vw,76px)}}
@media (max-width:1100px){.capabilities-section{min-height:auto;padding:88px 0}.capabilities-inner{width:calc(100% - 200px);gap:64px}.capabilities-header{min-height:auto;grid-template-columns:1fr 38%;gap:48px}.capabilities-title{font-size:clamp(54px,7vw,76px)}.capabilities-summary{width:auto}.capability-card{border-radius:clamp(18px,2.2vw,32px)}.recent-section{min-height:1060px;padding-top:88px}.recent-header{height:150px}.recent-title{font-size:clamp(54px,7vw,76px)}.recent-folder-area{min-height:822px}.recent-folder-scene{top:360px}.project-preview{--responsive-preview-scale:.8}.contact-section{height:auto;min-height:980px;background-size:auto 100%;background-position:center bottom}.contact-inner{grid-template-columns:47% 53%;min-height:980px}.contact-copy{padding:96px 0 0 100px}.contact-title{font-size:clamp(54px,7vw,72px)}.contact-details{align-items:flex-start;flex-direction:column;gap:36px;margin-top:80px}.contact-qr{width:210px;height:210px;flex-basis:210px}.contact-methods{gap:24px}.contact-method{gap:10px}.contact-method-label{font-size:21px}.contact-method>a{font-size:23px}.contact-motion{height:980px;padding-bottom:150px}}
@media (max-width:720px){.header{height:68px;padding:26px 20px;font-size:12px;line-height:12px}.header::before{height:168px}.brand{width:auto}.header nav{gap:14px}.header nav a::before{inset:-6px -9px}.hero{min-height:0}.work-section{min-height:auto;padding:96px 20px 88px;gap:40px}.work-title{font-size:clamp(34px,9.6vw,48px)}.work-orbit{width:100%;aspect-ratio:1/1.05}.work-card{width:clamp(112px,34vw,154px);border-radius:9px}.capabilities-section{padding:88px 20px}.capabilities-inner{width:100%;gap:48px}.capabilities-header{display:flex;flex-direction:column;gap:24px}.capabilities-title{font-size:clamp(44px,12vw,58px);line-height:1.08}.capabilities-summary{max-width:360px;padding:0;font-size:18px;line-height:24px;text-align:left}.capabilities-grid{width:100%;aspect-ratio:auto;grid-template-columns:1fr;grid-template-rows:none;gap:8px}.capability-card,.capability-wide{grid-column:1;grid-row:auto;width:100%;aspect-ratio:1}.capability-wide{aspect-ratio:662/360}.capability-creative{margin-top:32px}.recent-section{min-height:860px;padding:88px 20px 0}.recent-header{width:100%;height:auto;align-items:flex-end}.recent-title{width:auto;font-size:clamp(44px,12vw,58px);line-height:1.08}.recent-arrow{width:58px;height:58px}.recent-folder-area{min-height:680px;margin:48px -20px 0}.recent-folder-scene{top:306px;width:calc(100% - 24px)}.contact-section{min-height:970px;background-size:auto 970px}.contact-inner{display:flex;min-height:970px;flex-direction:column}.contact-copy{padding:80px 20px 0}.contact-title{font-size:clamp(44px,12vw,58px);line-height:1.08}.contact-details{flex-direction:row;align-items:center;gap:22px;margin-top:54px}.contact-qr{width:148px;height:148px;flex-basis:148px;border-radius:14px}.contact-methods{min-width:0;gap:20px}.contact-method{gap:7px}.contact-method-label{font-size:17px}.contact-method-label img{width:24px;height:24px}.contact-method>a{font-size:clamp(16px,4.5vw,20px)}.contact-motion{width:100%;height:auto;min-height:480px;margin-top:28px;padding-bottom:50px;overflow:hidden}.contact-sticker-stage{height:auto;aspect-ratio:1015/688}.contact-sticker{transform:translate3d(0,-500px,0) rotate(var(--start-rotate)) scale(.94)}@keyframes contact-sticker-drop{0%{opacity:0;transform:translate3d(0,-500px,0) rotate(var(--start-rotate)) scale(.94)}12%{opacity:1}72%{opacity:1;transform:translate3d(0,8px,0) rotate(calc(var(--rotate) + 3deg)) scale(1)}86%{transform:translate3d(0,-3px,0) rotate(calc(var(--rotate) - 1deg)) scale(1)}100%{opacity:1;transform:translate3d(0,0,0) rotate(var(--rotate)) scale(1)}}}

/* Section 4 mobile composition and category detail follow Figma 902:36470 / 902:36525. */
@media (max-width:720px){
  .recent-section{height:max(874px,calc(146.629vw + 228.6px));min-height:874px;padding:0;background-position:center top;background-size:auto 100%}
  .recent-header{position:absolute;z-index:8;top:80px;left:24px;width:calc(100% - 48px);height:88px;margin:0;align-items:flex-start}
  .recent-title{font-size:40px;line-height:1.04}
  .recent-arrow{width:64px;height:64px;margin-top:13px}
  .recent-folder-area{position:absolute;inset:0;min-height:0;margin:0;overflow:hidden}
  .recent-folder-scene{left:50%;top:268px;width:calc(100% - 48px);height:auto;aspect-ratio:356/522;transform:translateX(-50%);container-type:inline-size}
  .recent-project-stage{display:none}
  .recent-folder-piece{display:none}
  .recent-mobile-folders{position:absolute;inset:0;display:block;font-family:"HarmonyOS Sans SC","PingFang SC",sans-serif}
  .recent-mobile-folder-base{position:absolute;overflow:hidden;pointer-events:none}
  .recent-mobile-folder-base img{position:absolute;display:block;max-width:none;object-fit:contain}
  .recent-mobile-folder-base-pink{z-index:2;left:.562cqw;top:0;width:99.438cqw;height:52.809cqw}
  .recent-mobile-folder-base-pink img{left:-2.377%;top:-10.99%;width:104.9%;height:110.99%}
  .recent-mobile-folder-base-white{z-index:3;left:.281cqw;top:33.427cqw;width:100cqw;height:43.539cqw}
  .recent-mobile-folder-base-white img{left:-1.73%;top:-15.66%;width:103.35%;height:132.98%}
  .recent-mobile-folder-base-blue{z-index:4;left:.281cqw;top:65.169cqw;width:100cqw;height:47.472cqw}
  .recent-mobile-folder-base-blue img{left:-5.82%;top:-63.95%;width:112.75%;height:236.63%}
  .recent-mobile-folder-base-yellow{z-index:5;left:0;top:98.876cqw;width:100cqw;height:47.753cqw}
  .recent-mobile-folder-base-yellow img{left:-.5%;top:-4.21%;width:100.38%;height:127.11%}
  .recent-mobile-folder-label{position:absolute;z-index:7;display:flex;margin:0;align-items:baseline;color:#050505;line-height:1;white-space:nowrap;transform:none}
  .recent-mobile-folder-label strong{font-family:"Outfit","HarmonyOS Sans SC",sans-serif;font-size:6.18cqw;font-weight:600;line-height:1}
  .recent-mobile-folder-label span{font-size:5.618cqw;font-weight:700;line-height:1}
  .recent-mobile-folder-label-pink{left:3.09cqw;top:2.247cqw}
  .recent-mobile-folder-label-white{left:3.09cqw;top:35.674cqw}
  .recent-mobile-folder-label-blue{left:3.09cqw;top:67.416cqw}
  .recent-mobile-folder-label-blue span{font-family:"Outfit","HarmonyOS Sans SC",sans-serif;font-size:6.18cqw;font-weight:500}
  .recent-mobile-folder-label-yellow{left:2.809cqw;top:101.124cqw}
  .recent-mobile-folder-sticker{position:absolute;z-index:8;display:block;object-fit:contain;transform:none}
  .recent-mobile-folder-sticker-eyes{left:62.07cqw;top:12.632cqw;width:23.614cqw;height:23.614cqw}
  .recent-mobile-folder-sticker-flower{left:60.435cqw;top:43.301cqw;width:28.007cqw;height:28.007cqw}
  .recent-mobile-folder-sticker-clip{position:absolute;z-index:8;display:block;overflow:hidden;pointer-events:none}
  .recent-mobile-folder-sticker-clip img{position:absolute;display:block;object-fit:contain}
  .recent-mobile-folder-sticker-idea{left:62.135cqw;top:78.989cqw;width:22.921cqw;height:22.921cqw}
  .recent-mobile-folder-sticker-idea img{left:-1.785cqw;top:-1.148cqw;width:26.896cqw;height:26.896cqw;transform:rotate(12.97deg)}
  .recent-mobile-folder-sticker-pink{left:62.952cqw;top:112.957cqw;width:28.282cqw;height:28.443cqw}
  .recent-mobile-folder-sticker-pink img{left:2.555cqw;top:4.05cqw;width:20.362cqw;height:20.362cqw}
  .recent-folder{z-index:10}
  .recent-folder-b{left:.562cqw;top:0;width:99.438cqw;height:52.809cqw}
  .recent-folder-c{left:.281cqw;top:33.427cqw;width:100cqw;height:43.539cqw}
  .recent-folder-web{left:.281cqw;top:65.169cqw;width:100cqw;height:47.472cqw}
  .recent-folder-ops{left:0;top:98.876cqw;width:100cqw;height:47.753cqw}
  .recent-mobile-detail{position:fixed;z-index:950;inset:0;display:block;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:40px 0 32px;background:rgba(18,17,26,.9);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transform:translate3d(0,12px,0);transition:opacity 260ms ease,transform 360ms cubic-bezier(.22,1,.36,1)}
  .recent-mobile-detail.is-open{opacity:1;transform:none}
  .recent-mobile-detail-header{display:flex;width:calc(100% - 48px);margin:0 auto 16px;align-items:center;justify-content:space-between}
  .recent-mobile-detail-title{margin:0;font-family:"HarmonyOS Sans SC","PingFang SC",sans-serif;font-size:24px;font-weight:700;line-height:56px}
  .recent-mobile-detail-close{position:relative;width:56px;height:56px;padding:0;border:.5px solid rgba(255,255,255,.29);border-radius:50%;background:#262626;cursor:pointer}
  .recent-mobile-detail-close::before,.recent-mobile-detail-close::after{position:absolute;left:50%;top:50%;width:28px;height:2px;border-radius:2px;background:#fff;content:""}
  .recent-mobile-detail-close::before{transform:translate(-50%,-50%) rotate(45deg)}
  .recent-mobile-detail-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
  .recent-mobile-detail-list{display:flex;padding:0 24px;flex-direction:column;gap:16px}
  .recent-mobile-project{display:flex;flex-direction:column;gap:12px;color:#fff;text-decoration:none}
  .recent-mobile-project-cover{position:relative;display:block;width:100%;aspect-ratio:354/253.5;box-sizing:border-box;overflow:hidden;border:0;border-radius:16px;background:transparent;box-shadow:0 12px 28px rgba(0,0,0,.22)}
  .recent-mobile-project-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border:1px solid rgba(255,255,255,.1);border-radius:inherit}
  .recent-mobile-project-cover img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
  .recent-mobile-project-title{width:100%;margin:0 0 4px;font-family:"HarmonyOS Sans SC","PingFang SC",sans-serif;font-size:18px;font-weight:500;line-height:24px;text-align:left}
}
body.recent-mobile-detail-open{overflow:hidden}
@media (min-width:721px){.recent-mobile-folders{display:none}}
@media (max-width:420px){.header{padding-inline:12px;font-size:11px}.header nav{gap:9px}.header nav a::before{inset:-5px -6px}}

/* Contact mobile layout */
@media (max-width:720px){
  .contact-details{
    display:grid;
    grid-template-columns:clamp(132px,34vw,148px) minmax(0,1fr);
    column-gap:clamp(28px,7vw,40px);
    align-items:center;
  }
  .contact-qr{
    width:100%;
    height:auto;
    aspect-ratio:1;
    flex-basis:auto;
  }
  .contact-motion{
    min-height:440px;
    margin-top:34px;
    padding-bottom:0;
  }
  .contact-sticker-stage{
    left:calc(50% - 24px);
    width:132%;
    transform:translateX(-50%);
    transform-origin:top center;
  }
}
@media (max-width:390px){
  .contact-details{
    grid-template-columns:128px minmax(0,1fr);
    column-gap:24px;
  }
  .contact-method>a{font-size:15px}
  .contact-sticker-stage{left:calc(50% - 18px);width:136%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.header::before,.header nav a,.header nav a::before{transition:none}.jelly-word{animation:none}.physics-layer,.physics-refraction-layer{display:none}.motion-ready .work-title,.motion-ready .work-orbit,.motion-ready .capabilities-title,.motion-ready .capabilities-summary,.motion-ready .capabilities-grid,.motion-ready .recent-header,.motion-ready .recent-folder-area,.motion-ready .contact-copy{opacity:1;transform:none;transition:none;will-change:auto}.work-card{will-change:auto}.recent-folder-piece,.project-preview,.contact-sticker-slot{transition:none}.contact-section.is-pile-settled .contact-motion:hover .contact-sticker-slot{animation:none}.contact-sticker{opacity:1;animation:none!important;transform:rotate(var(--rotate)) scale(1)}}

body.project-modal-open{overflow:hidden}
.project-modal[hidden]{display:none}
.project-modal{position:fixed;z-index:1000;inset:0;color:#fff;font-family:Outfit,"PingFang SC",sans-serif}
.project-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.project-modal-scroll{position:absolute;z-index:1;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:80px 0}
.project-modal-content{display:flex;width:min(83.4375vw,1602px);min-height:1px;margin:0 auto;overflow:hidden;background:#f4f4f4;box-shadow:0 4px 42px rgba(255,255,255,.14);flex-direction:column}
.project-modal-media{display:block;width:calc(100% + 4px);max-width:none;height:auto;margin:0 0 0 -2px;border:0;background:#111}
.project-modal-media+.project-modal-media{margin-top:-3px}
.project-modal-composite+.project-modal-media{margin-top:-4px}
.project-modal-page-frame{width:100%;height:1000px;margin:0;background:#000;overflow:hidden}
video.project-modal-media{aspect-ratio:16/9;object-fit:cover}
.project-modal-composite{position:relative;overflow:hidden;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.project-modal-composite-layer{position:absolute;z-index:1;display:block;max-width:none;object-fit:cover;border:0;pointer-events:none}
.project-modal-composite-layer+img{z-index:2;object-fit:fill}
.project-modal-composite .path-text-layer{inset:0;width:100%;height:100%;overflow:visible}
.project-modal-composite .path-text-layer>path{fill:none;stroke:none}
.project-modal-placeholder{position:relative;display:grid;min-height:min(82vh,900px);padding:clamp(44px,7vw,110px);align-content:end;background:#f4f4f4 var(--cover) center/cover no-repeat;color:#fff;isolation:isolate}
.project-modal-placeholder::before{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 35%,rgba(0,0,0,.8));content:""}
.project-modal-placeholder h2{max-width:900px;margin:0;font-size:clamp(42px,6vw,92px);line-height:.95}
.project-modal-placeholder p{margin:22px 0 0;font-size:clamp(16px,1.5vw,24px);opacity:.78}
.project-modal-close{position:fixed;z-index:3;top:40px;right:40px;display:grid;width:64px;height:64px;padding:16px;border:.5px solid rgba(255,255,255,.29);border-radius:50%;background:#262626;place-items:center;cursor:pointer;transition:background-color .24s ease,transform .24s cubic-bezier(.22,1,.36,1)}
.project-modal-close:hover{background:#343434;transform:scale(1.05)}
.project-modal-close:focus-visible{outline:2px solid #3ba9fd;outline-offset:4px}
.project-modal-close img{position:absolute;top:50%;left:50%;display:block;width:32px;height:32px;transform:translate(-50%,-50%)}
@media(max-width:900px){.project-modal-scroll{padding:72px 0 32px}.project-modal-content{width:100vw;margin-right:0;margin-left:0}.project-modal-close{top:16px;right:16px;width:48px;height:48px;padding:12px}.project-modal-close img{width:24px;height:24px}}