/* Keep the opening effect readable: one complete project image, softly revealed. */
.case-entry-fragment{width:min(72vw,980px)!important;height:min(64vh,590px)!important;aspect-ratio:auto!important;clip-path:none!important;border-radius:16px!important;background:#101725;display:grid;place-items:center;animation:clearCaseReveal 2.65s cubic-bezier(.16,.82,.22,1) forwards!important}.case-entry-fragment img{display:block;width:100%!important;height:100%!important;max-width:100%;max-height:100%;object-fit:contain!important;object-position:center!important;animation:clearCaseImage 2.65s cubic-bezier(.16,.82,.22,1) forwards!important;filter:none!important}.case-entry--01 .case-entry-fragment,.case-entry--02 .case-entry-fragment,.case-entry--03 .case-entry-fragment,.case-entry--04 .case-entry-fragment,.case-entry--05 .case-entry-fragment,.case-entry--06 .case-entry-fragment{clip-path:none!important;border-radius:16px!important;animation:clearCaseReveal 2.65s cubic-bezier(.16,.82,.22,1) forwards!important}.case-entry--01 .case-entry-fragment img,.case-entry--02 .case-entry-fragment img,.case-entry--03 .case-entry-fragment img,.case-entry--04 .case-entry-fragment img,.case-entry--05 .case-entry-fragment img,.case-entry--06 .case-entry-fragment img{animation:clearCaseImage 2.65s cubic-bezier(.16,.82,.22,1) forwards!important;object-fit:contain!important;filter:none!important}@keyframes clearCaseReveal{0%{opacity:0;transform:scale(.78) translateY(22px)}22%{opacity:1;transform:scale(.98) translateY(0)}76%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(1.02) translateY(-8px)}}@keyframes clearCaseImage{0%{opacity:0}20%,78%{opacity:1}100%{opacity:1}}

/* Small, dark-light matched character that quietly peeks out from the laptop side. */
.hero-character{position:absolute;z-index:4;right:clamp(24px,9vw,160px);top:clamp(275px,39vh,410px);width:clamp(126px,14vw,184px);height:clamp(150px,20vw,230px);pointer-events:none;filter:drop-shadow(0 12px 20px rgba(0,0,0,.48))}.character-window{position:relative;width:100%;height:100%;overflow:hidden;border:1px solid rgba(214,255,84,.62);border-radius:14px 14px 22px 22px;background:rgba(7,10,18,.52);box-shadow:0 0 0 5px rgba(84,228,255,.08),inset 0 0 24px rgba(84,228,255,.13);animation:characterPeekHide 8.8s cubic-bezier(.2,.75,.2,1) infinite}.character-window:before{content:"";position:absolute;z-index:3;inset:8px;border:1px dashed rgba(255,255,255,.25);border-radius:9px 9px 17px 17px}.character-window:after{content:"";position:absolute;z-index:4;right:10px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink)}.character-crop{position:absolute;inset:8px 7px 23px;overflow:hidden;mix-blend-mode:screen}.character-crop img{position:absolute;left:-336px;top:-58px;width:1000px;max-width:none;height:auto;filter:brightness(.78) saturate(1.08) contrast(1.05)}.character-window>span{position:absolute;z-index:4;left:10px;bottom:7px;color:var(--lime);font:8px "DM Mono",monospace;letter-spacing:.08em}@keyframes characterPeekHide{0%,100%{transform:translateX(200%) rotate(7deg)}11%{transform:translateX(200%) rotate(7deg)}25%{transform:translateX(14%) rotate(-2deg)}43%{transform:translateX(7%) rotate(-3deg)}56%{transform:translateX(12%) rotate(-1deg)}72%{transform:translateX(200%) rotate(7deg)}}

/* Replace ambiguous detail controls with visibly labelled project navigation. */
.story-nav>span{font-size:10px}.story-nav div{gap:7px}.story-nav button{width:auto!important;min-width:58px!important;height:34px!important;padding:4px 8px!important;display:flex;align-items:center;gap:6px;cursor:pointer}.story-nav button b{font:11px "DM Mono",monospace;color:var(--lime)}.story-nav button small{font-size:10px;color:#cdd3e4;white-space:nowrap}.story-nav button:hover,.story-nav button:focus-visible{background:var(--lime);color:#090b13;border-color:var(--lime)}.story-nav button:hover b,.story-nav button:hover small,.story-nav button:focus-visible b,.story-nav button:focus-visible small{color:#090b13}.back-top{padding:10px 14px!important}.back-top:hover{background:var(--lime);color:#090b13}
@media(max-width:700px){.case-entry-fragment{width:88vw!important;height:58vh!important}.hero-character{right:10px;top:33%;width:112px;height:140px}.character-crop{inset:6px 5px 18px}.character-crop img{left:-268px;top:-46px;width:800px}.character-window>span{font-size:7px;left:7px;bottom:5px}.story-nav button{min-width:42px!important;padding:4px 7px!important}.story-nav button small{display:none}.story-nav button b{font-size:10px}}
@media(prefers-reduced-motion:reduce){.case-entry-fragment,.case-entry-fragment img,.character-window{animation:none!important}.hero-character{transform:translateX(7%) rotate(-2deg)}}

/* The frame and its project image share one timeline and only start after the image is ready. */
.case-entry{--case-reveal-duration:2.8s;animation:caseRevealFade var(--case-reveal-duration) ease forwards paused!important}
.case-entry.is-playing{animation-play-state:running!important}
.case-entry--01:before,.case-entry--02:before,.case-entry--03:before,.case-entry--04:before,.case-entry--05:before,.case-entry--06:before{animation:caseRevealOrbit var(--case-reveal-duration) cubic-bezier(.18,.8,.2,1) forwards paused!important}
.case-entry--01:after,.case-entry--02:after,.case-entry--03:after,.case-entry--04:after,.case-entry--05:after,.case-entry--06:after{animation:caseRevealSweep var(--case-reveal-duration) ease forwards paused!important}
.case-entry--01 .case-entry-fragment,.case-entry--02 .case-entry-fragment,.case-entry--03 .case-entry-fragment,.case-entry--04 .case-entry-fragment,.case-entry--05 .case-entry-fragment,.case-entry--06 .case-entry-fragment{animation:caseRevealFrame var(--case-reveal-duration) cubic-bezier(.16,.82,.22,1) forwards paused!important}
.case-entry--01 .case-entry-fragment img,.case-entry--02 .case-entry-fragment img,.case-entry--03 .case-entry-fragment img,.case-entry--04 .case-entry-fragment img,.case-entry--05 .case-entry-fragment img,.case-entry--06 .case-entry-fragment img{animation:caseRevealImage var(--case-reveal-duration) cubic-bezier(.16,.82,.22,1) forwards paused!important;opacity:0!important}
.case-entry.is-playing:before,.case-entry.is-playing:after,.case-entry.is-playing .case-entry-fragment,.case-entry.is-playing .case-entry-fragment img{animation-play-state:running!important}
.case-entry i{animation-duration:var(--case-reveal-duration)!important}
@keyframes caseRevealFade{0%,82%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes caseRevealOrbit{0%{opacity:0;transform:scale(.1)}28%{opacity:.86;transform:scale(.82)}82%{opacity:.28;transform:scale(1.08)}100%{opacity:0;transform:scale(1.2)}}
@keyframes caseRevealSweep{0%{opacity:0;transform:translateX(-75%)}25%{opacity:1}82%{opacity:.16;transform:translateX(55%)}100%{opacity:0;transform:translateX(75%)}}
@keyframes caseRevealFrame{0%{opacity:0;transform:scale(.12) rotate(-14deg)}24%{opacity:1;transform:scale(1.02) rotate(2deg)}82%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(1.04) rotate(3deg);filter:blur(5px)}}
@keyframes caseRevealImage{0%{opacity:0;transform:scale(1.04)}24%{opacity:1;transform:scale(1)}82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.03)}}

/* The IP is a real transparent character cutout, not a framed card. */
.hero-character{right:clamp(24px,9vw,160px)!important;top:clamp(300px,43vh,445px)!important;width:clamp(86px,9vw,128px)!important;height:auto!important;overflow:visible!important;filter:none!important}.hero-character-sprite{display:block;width:100%;height:auto;filter:brightness(.76) saturate(.9) contrast(1.04) drop-shadow(0 9px 12px rgba(0,0,0,.52));transform-origin:75% 90%;animation:heroSpritePeek 8.8s cubic-bezier(.2,.75,.2,1) infinite}.hero-character-sprite:after{content:""}@keyframes heroSpritePeek{0%,100%{opacity:0;transform:translate3d(320%,72px,0) scale(.68) rotate(8deg)}11%{opacity:0;transform:translate3d(320%,72px,0) scale(.68) rotate(8deg)}26%{opacity:1;transform:translate3d(24%,20px,0) scale(.78) rotate(-3deg)}42%{opacity:1;transform:translate3d(0,0,0) scale(.84) rotate(-4deg)}53%{opacity:1;transform:translate3d(12%,4px,0) scale(.81) rotate(-2deg)}65%{opacity:.72;transform:translate3d(112%,48px,0) scale(.62) rotate(9deg)}73%{opacity:0;transform:translate3d(320%,92px,0) scale(.46) rotate(14deg)}}
@media(max-width:700px){.hero-character{right:8px!important;top:34%!important;width:96px!important}.hero-character-sprite{animation-duration:8.8s}}
@media(prefers-reduced-motion:reduce){.hero-character-sprite{animation:none;opacity:1;transform:translate3d(0,0,0) scale(.82)}}

/* Keep the extracted IP still when motion is cancelled. */
.hero-character-sprite{animation:none!important;opacity:1!important;transform:none!important}

@media(min-width:761px){.about{align-items:center!important}}

.about-copy{margin:0 0 20px!important}
.about-copy h3{margin:0 0 clamp(26px,3vw,42px)!important;font-size:clamp(26px,2.2vw,38px)!important;line-height:1.45!important;letter-spacing:.01em!important;font-weight:500!important;color:#f6f7ff!important}
.about-copy p{margin:0!important;font-size:clamp(18px,1.55vw,27px)!important;line-height:1.7!important;letter-spacing:.02em!important;font-weight:400!important;color:#9da9bf!important}
@media(max-width:760px){.about-copy{margin:42px 0 0!important}.about-copy h3{font-size:clamp(24px,6.8vw,32px)!important;margin-bottom:26px!important}.about-copy p{font-size:clamp(17px,4.8vw,21px)!important;line-height:1.75!important}}

/* Mobile layout pass: keep every major section inside the viewport. */
@media(max-width:700px){
  html,body{width:100%;overflow-x:hidden}
  .nav{height:64px!important;padding:0 16px!important}
  .logo{font-size:13px!important}
  .palette-toggle{width:34px;height:34px;padding:0!important;justify-content:center}
  .palette-toggle i{margin:0}
  .hero{min-height:calc(100svh - 64px)!important;padding:148px 20px 58px!important;background-position:60% center!important}
  .hero .hero-badge{top:28px!important;left:20px!important;font-size:10px!important}
  .hero-slogan{top:78px!important;left:20px!important;width:auto!important;max-width:calc(100% - 40px)!important;font-size:18px!important;line-height:1.5!important;white-space:normal!important}
  .hero h1{width:100%!important;max-width:100%!important;font-size:clamp(74px,21vw,114px)!important;letter-spacing:-.08em!important}
  .hero-title-main{letter-spacing:.08em!important}
  .hero-title-cut{letter-spacing:-.11em!important}
  .ticker{padding:11px 0!important;font-size:10px!important}
  .works{padding:64px 18px!important}
  .section-intro h2{font-size:clamp(42px,13vw,62px)!important}
  .section-intro p{max-width:100%!important;margin:18px 0 0!important;font-size:13px!important}
  .category-pills{margin:26px 0 20px!important;gap:7px!important}
  .pill{padding:9px 10px!important;font-size:12px!important}
  .work-grid{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}
  .work-card,.work-card:nth-child(2),.work-card:nth-child(5){grid-column:auto!important;width:100%!important;min-height:340px!important;aspect-ratio:1.08!important;margin:0!important}
  .card-media{height:66%!important}
  .card-info{height:34%!important;padding:13px!important}
  .card-info h3{font-size:clamp(20px,6vw,27px)!important}
  .card-info p{font-size:11px!important}
  .about{display:block!important;min-height:0!important;padding:74px 20px 84px!important}
  .about>div:nth-child(2){margin:0!important}
  .about h2{font-size:clamp(50px,15vw,72px)!important}
  .about-copy{margin:48px 0 0!important}
  .about-copy h3{font-size:clamp(24px,6.8vw,32px)!important;line-height:1.45!important}
  .about-copy p{font-size:clamp(17px,4.8vw,21px)!important;line-height:1.75!important}
  .orbit-text{display:none!important}
  .case-dialog{width:calc(100% - 12px)!important;height:calc(100svh - 12px)!important;max-height:none!important;margin:6px!important;border-radius:14px!important}
  .case-dialog .dialog-close{top:12px!important;right:12px!important;width:40px!important;height:40px!important}
  .project-story{padding-bottom:44px!important}
  .story-head{padding:78px 16px 26px!important}
  .story-head h2{font-size:clamp(38px,12vw,54px)!important;letter-spacing:-.08em!important}
  .story-head p{font-size:10px!important;line-height:1.5!important}
  .story-intro{padding:0 16px!important;margin-bottom:36px!important}
  .story-intro>p{font-size:16px!important;line-height:1.75!important}
  .story-intro>div{grid-template-columns:1fr!important;gap:14px!important}
  .story-facts{grid-template-columns:1fr!important}
  .story-nav{display:block!important;padding:10px 12px!important}
  .story-nav>span{display:block;margin-bottom:8px}
  .story-nav div{gap:6px;padding-bottom:2px}
  .story-nav button{min-width:44px!important;min-height:34px!important}
  .story-nav button small{display:none!important}
  .story-pages{padding:0 12px!important;gap:22px!important}
  .story-page img{width:100%!important;height:auto!important}
  .page-kicker{font-size:9px!important}
  .story-end{padding:0 12px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important}
}

/* Keep the project artwork legible during the opening transition. */
.case-entry{background:radial-gradient(circle at 50% 47%,rgba(7,10,18,.08),rgba(5,8,16,.38) 72%)!important}
.case-entry-fragment{background:#131a2a!important}
.case-entry-fragment img{display:block;opacity:1!important;filter:brightness(1.45) contrast(1.12) saturate(1.16)!important}
.audio-credit{opacity:.5;font-size:9px}
audio#bgm{display:none}
@media(max-width:700px){footer{font-size:9px!important}.audio-credit{font-size:8px!important}}



/* Every case now uses the Didi tour's red-orange-cyan reveal language. */
.case-entry--01,.case-entry--02,.case-entry--03,.case-entry--04,.case-entry--05,.case-entry--06{--entry-a:#ff555e!important;--entry-b:#ffb13d!important;--entry-c:#5ce5ff!important}.case-entry--01:before,.case-entry--02:before,.case-entry--03:before,.case-entry--04:before,.case-entry--05:before,.case-entry--06:before{border-radius:50%!important;transform:none!important;animation:orbitPulse 2.7s cubic-bezier(.18,.8,.2,1) forwards!important}.case-entry--01:after,.case-entry--02:after,.case-entry--03:after,.case-entry--04:after,.case-entry--05:after,.case-entry--06:after{inset:0!important;background:linear-gradient(105deg,transparent 38%,color-mix(in srgb,var(--entry-a) 82%,transparent) 49%,transparent 60%)!important;mask-image:none!important;animation:laserSweep 2.5s ease forwards!important}.case-entry--01 .case-entry-fragment,.case-entry--02 .case-entry-fragment,.case-entry--03 .case-entry-fragment,.case-entry--04 .case-entry-fragment,.case-entry--05 .case-entry-fragment,.case-entry--06 .case-entry-fragment{clip-path:none!important;animation:unifiedDiamondBlast 2.65s cubic-bezier(.16,.82,.22,1) forwards!important}.case-entry--01 .case-entry-fragment img,.case-entry--02 .case-entry-fragment img,.case-entry--03 .case-entry-fragment img,.case-entry--04 .case-entry-fragment img,.case-entry--05 .case-entry-fragment img,.case-entry--06 .case-entry-fragment img{animation:unifiedDiamondImage 2.65s cubic-bezier(.16,.82,.22,1) forwards!important;object-fit:contain!important;filter:none!important}@keyframes unifiedDiamondBlast{0%{opacity:0;transform:scale(.12) rotate(-14deg)}30%{opacity:1;transform:scale(1.02) rotate(2deg)}76%{opacity:1;transform:scale(.99) rotate(-1deg)}100%{opacity:0;transform:scale(1.05) rotate(3deg)}}@keyframes unifiedDiamondImage{0%{opacity:0;transform:scale(1.02)}18%,82%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}