/* Independent scenic layers. Percentages use the artwork canvas, not text height. */
.digital-site .motion-stage{position:absolute;bottom:0;left:0;width:100%;aspect-ratio:2;z-index:-1;overflow:hidden;pointer-events:none;container-type:inline-size}
.motion-backdrop{display:block;position:absolute;inset:0}
.motion-backdrop img{width:100%;height:100%;object-fit:cover;display:block}
.motion-cat{position:absolute;z-index:4;transform-origin:50% 95%;will-change:transform}
.motion-cat img{width:100%;height:auto;display:block}
.breathing-cat{width:32%;left:49%;bottom:9%;--hop-x:-15px;--hop-y:-48px}
.touch-ball{position:absolute;width:12%;aspect-ratio:1;left:43%;top:10%;z-index:5;filter:drop-shadow(0 0 14px #ffda90)}
.touch-ball .yarn-orb{inset:0;box-shadow:inset -14px -9px 20px #183047b0,0 0 30px #ffe0aabb}
.ball-spark{position:absolute;right:-20%;top:15%;font-size:28px;color:#fff5ce}
.arch-clouds{position:absolute;left:59%;top:4%;width:25%;height:44%;border-radius:48% 48% 0 0;overflow:hidden;opacity:.78;z-index:1;mask-image:linear-gradient(transparent,#000 15%,#000 80%,transparent)}
.scene-collaboration .arch-clouds{left:57%;width:29%;top:0;height:48%}
.cloud-stream{position:absolute;inset:0;display:flex;width:200%;animation:cloud-drift 36s linear infinite}
.cloud-stream i{display:block;flex:0 0 25%;height:100%;background:radial-gradient(ellipse at 40% 44%,#fffbed 0 15%,transparent 35%),radial-gradient(ellipse at 67% 48%,#fffced 0 18%,transparent 39%),radial-gradient(ellipse at 34% 68%,#fff9e6 0 20%,transparent 44%);filter:blur(6px)}
@keyframes cloud-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.breathing-cat{animation:bei-breathe 4.8s ease-in-out infinite}
@keyframes bei-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.013,1.021)}}
.touch-ball{animation:ball-shimmer 3s ease-in-out infinite}
@keyframes ball-shimmer{50%{filter:drop-shadow(0 0 24px #fff1bc);transform:scale(1.035)}}
.scene-curiosity.is-entering .breathing-cat{animation:bei-touch 1100ms ease-in-out both}
.scene-curiosity.is-entering .touch-ball{animation:ball-touch 1100ms ease-out both}
@keyframes bei-touch{0%{transform:translate(0,0) scale(1)}18%{transform:translateY(3px) scale(1.035,.975)}53%,62%{transform:translate(var(--hop-x),var(--hop-y)) rotate(-3deg)}100%{transform:translate(0,0)}}
@keyframes ball-touch{0%,43%{filter:drop-shadow(0 0 14px #ffda90)}55%{transform:scale(1.18);filter:drop-shadow(0 0 45px #fff5c9)}100%{transform:scale(1);filter:drop-shadow(0 0 14px #ffda90)}}
.digital-site .entry-welcome{display:flex;align-items:center;gap:15px;color:var(--ink);margin-bottom:8px}
.digital-site .entry-welcome .entry-mark{margin:0;width:62px;height:62px}
.digital-site .entry-welcome span{font-size:23px;font-weight:500;letter-spacing:.02em}
.space-viewport{position:absolute;inset:0;overflow:hidden;background:#102236}
.space-track{display:flex;width:200%;height:100%;animation:windows-left 85s linear infinite}
.space-track .motion-backdrop{position:relative;width:50%;flex:0 0 50%;height:100%;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
@keyframes windows-left{to{transform:translateX(-50%)}}
.floating-cat{width:39%;left:52%;top:15%;animation:space-float 5.8s ease-in-out infinite}
@keyframes space-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-13px) rotate(1deg)}}
.digital-site .scene-nav-link{background:#fff7e8;color:#172c40;border:1px solid #f7e6c8;box-shadow:0 5px 20px #07172438;font-weight:650}
.digital-site .scene-nav-link:nth-child(2){background:#e4c48d;border-color:#f9e6bc}
.digital-site .scene-nav-link:nth-child(3){background:#cbdde6;border-color:#e6f1f5}
.digital-site .scene-nav-link:hover{background:#fff;color:#14293b;transform:translateY(-2px)}
.digital-site .scene-collaboration .scene-copy{background:#fff8eceb;border:1px solid #fff9ef;border-radius:20px;padding:24px;box-shadow:0 12px 50px #56472e0a}
.digital-site .scene-collaboration .scene-description{color:#172c40;font-weight:600;text-shadow:none}
.suited-cat{width:28%;left:63%;bottom:9%}
.browse-device{position:absolute;z-index:2;border:5px solid #263d54;background:#f5efdf;border-radius:12px;box-shadow:10px 16px 24px #21374c30;overflow:hidden;transform:perspective(900px) rotateY(-12deg) rotateZ(-5deg)}
.device-desktop{left:42%;top:12%;width:23%;height:45%}
.device-phone{left:39%;top:39%;width:7.5%;height:39%;z-index:3;border-radius:18px;transform:rotate(-8deg)}
.device-tablet{left:54%;top:49%;width:18%;height:32%;z-index:3;transform:rotate(5deg)}
.device-bar{height:8%;min-height:8px;background:#233b52;display:flex;gap:4px;align-items:center;padding-left:7px}
.device-bar i{width:3px;height:3px;background:#e9cc91;border-radius:50%}
.device-viewport{height:92%;overflow:hidden;position:relative}
.browse-content{padding:8%;animation:browse-scroll 10s ease-in-out infinite;will-change:transform;color:#263e53}
.device-phone .browse-content{animation-delay:-3s;animation-duration:12s}
.device-tablet .browse-content{animation-delay:-5s;animation-duration:14s}
.browse-content strong{font:600 18px Georgia,serif;display:block;margin:10% 0}
.browse-hero{height:70px;background:url('/assets/scenes/ivory-world.webp') center/cover;border-radius:4px}
.browse-lines{height:45px;margin:10% 0;background:repeating-linear-gradient(transparent 0 6px,#63778b55 6px 8px,transparent 8px 12px)}
.browse-grid{display:flex;gap:7%;height:55px}.browse-grid i{flex:1;background:linear-gradient(130deg,#a2b8c7,#edd3a2);border-radius:4px}
.browse-chart{display:flex;gap:12%;align-items:flex-end;height:90px;padding:15px;background:#233b52}.browse-chart i{width:15%;height:80%;background:#dbb978}.browse-chart i:nth-child(2){height:40%}.browse-chart i:nth-child(3){height:65%}
@keyframes browse-scroll{0%,15%,100%{transform:translateY(0)}45%,65%{transform:translateY(-42%)}}
.motion-stage *{animation-play-state:paused!important}
body[data-motion=on] [data-visible=true] .motion-stage *{animation-play-state:running!important}
@media(max-width:700px){
 .digital-site .motion-stage{position:relative;bottom:auto;order:3;aspect-ratio:4/5;z-index:0}
 .breathing-cat{width:60%;left:32%;bottom:12%}
 .touch-ball{width:23%;left:22%;top:22%}
 .arch-clouds{left:49%;top:5%;width:39%;height:43%}
 .floating-cat{width:65%;left:28%;top:29%}
 .scene-collaboration .arch-clouds{left:52%;top:4%;width:40%;height:36%}
 .suited-cat{width:47%;left:47%;bottom:12%}
 .device-desktop{left:9%;top:20%;width:52%;height:30%}
 .device-phone{left:8%;top:43%;width:18%;height:28%}
 .device-tablet{left:27%;top:46%;width:33%;height:22%}
 .digital-site .scene-collaboration .scene-copy{padding:0;border:0;box-shadow:none;background:transparent}
 .digital-site .entry-welcome span{font-size:20px}
 .digital-site .entry-welcome .entry-mark{width:52px;height:52px}
 .digital-site .scene-nav-link{font-size:14px}
 .browse-hero{height:50px}.browse-lines{height:35px}.browse-grid{height:35px}.browse-chart{height:60px}
}
@media(prefers-reduced-motion:reduce){.motion-stage *{animation:none!important;transition:none!important}}
/* Illustrated services scene. */
.digital-site .scene-content{padding-top:0;background:#f7f0e5}
.digital-site .scene-content::before{display:none}
.digital-site .illustrated-section{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,5vw,80px) 0 60px!important}
.illustrated-section .section-art{position:absolute;inset:0 0 auto;width:100%;height:auto;z-index:-2}
.digital-site .illustrated-section .section-heading{display:block;min-height:260px;padding-top:20px;max-width:49%;text-shadow:0 2px 15px #fff7e9}
.digital-site .illustrated-section .section-heading h2{margin-top:22px;font-size:clamp(38px,3.4vw,52px);line-height:1.4}
.digital-site .illustrated-section .section-heading .eyebrow{color:#3d5263}
.digital-site .illustrated-section .service-grid{position:relative;margin-top:80px;gap:20px}
.digital-site .illustrated-section .service-card{background:#fffaf1f5;border:1px solid #dfceb4;box-shadow:0 8px 30px #3b302110;backdrop-filter:blur(8px)}
@media(max-width:700px){
 .digital-site .illustrated-section{padding-top:0!important;display:flex;flex-direction:column}
 .illustrated-section .section-art{position:static;z-index:0;width:100%;aspect-ratio:2;object-fit:cover}
 .digital-site .illustrated-section .section-heading{min-height:0;max-width:none;padding-top:28px}
 .digital-site .illustrated-section .section-heading h2{font-size:32px}
 .digital-site .illustrated-section .service-grid{margin-top:28px}
}
.touch-ball>img{display:block;width:100%;height:100%;object-fit:contain}
@media(min-width:701px){
 .digital-site .illustrated-services .service-grid{margin-top:clamp(160px,20vw,320px)}
}
/* Local changes requested for the three cats and heading legibility. */
.digital-site .scene-imagination .scene-kicker{color:#ffe4a3;text-shadow:0 2px 5px #071422,0 0 18px #071422;font-weight:700}
.digital-site .scene-imagination .scene-title{color:#fffaf0;text-shadow:0 2px 5px #071422,0 0 20px #071422;font-weight:700}
.digital-site .scene-imagination .scene-copy{background:linear-gradient(90deg,#0b1c2ee8,#0b1c2edb 82%,#0b1c2e90);border-radius:18px;padding:24px}
.digital-site .illustrated-section .section-heading h2{font-size:clamp(44px,4vw,60px);font-weight:700}
.digital-site .illustrated-section .section-heading .eyebrow{font-size:clamp(20px,1.8vw,26px);font-weight:650;line-height:1.5}
.section-stage{position:absolute;inset:0 0 auto;width:100%;aspect-ratio:2;overflow:hidden;z-index:-2;pointer-events:none}
.illustrated-section .section-stage .section-art{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.art-cat{position:absolute;aspect-ratio:1;transform-origin:50% 90%;z-index:1}
.art-cat img,.art-cat canvas{display:block;width:100%;height:100%;position:absolute;inset:0}
.art-cat.is-rigged img{visibility:hidden}
.studio-cat{width:29%;left:62%;top:19%}
@media(max-width:700px){
 .section-stage{position:relative;inset:auto;flex:none;z-index:0}
 .digital-site .illustrated-section .section-heading h2{font-size:38px;line-height:1.4}
 .digital-site .illustrated-section .section-heading .eyebrow{font-size:20px}
 .digital-site .scene-imagination .scene-copy{padding:0;background:#0b1c2e}
}
.suited-cat.art-cat{aspect-ratio:1166/1349}
html:lang(zh-Hant) .digital-site .illustrated-section .section-heading h2{font-size:clamp(42px,3.6vw,50px)}
@media(max-width:700px){html:lang(zh-Hant) .digital-site .illustrated-section .section-heading h2{font-size:36px}}
/* Quieter secondary motion and a single acceleration / landing arc. */
.breathing-cat.art-cat{aspect-ratio:1247/1261}
.breathing-cat.is-rigged{animation:none}
@keyframes bei-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.004,1.006)}}
.cloud-stream{animation-duration:48s}
.space-track{animation-duration:120s}
.floating-cat{animation:space-float 8s cubic-bezier(.37,0,.63,1) infinite}
@keyframes space-float{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--float-rise,-7px))}}
.touch-ball{animation:ball-shimmer 4.5s ease-in-out infinite}
@keyframes ball-shimmer{50%{filter:drop-shadow(0 0 19px #fff1bc);transform:scale(1.018)}}
.scene-curiosity.is-entering .breathing-cat{animation:bei-touch 1500ms linear both}
.scene-curiosity.is-entering .touch-ball{animation:ball-touch 1500ms ease-out both}
@keyframes bei-touch{
 0%{transform:translate(0,0);animation-timing-function:cubic-bezier(.4,0,.6,1)}
 18%{transform:translate(0,2px);animation-timing-function:cubic-bezier(.16,.72,.34,1)}
 46%{transform:translate(var(--hop-x),var(--hop-y));animation-timing-function:cubic-bezier(.42,0,.85,.32)}
 80%{transform:translate(0,0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
 88%{transform:translate(0,1px)}
 100%{transform:translate(0,0)}
}
@keyframes ball-touch{0%,39%{filter:drop-shadow(0 0 14px #ffda90);transform:scale(1)}49%{transform:scale(1.065);filter:drop-shadow(0 0 28px #fff1bc)}67%{transform:scale(1.012)}100%{transform:scale(1);filter:drop-shadow(0 0 14px #ffda90)}}
.browse-content{animation-duration:15s}
.device-phone .browse-content{animation-duration:18s;animation-delay:-4s}
.device-tablet .browse-content{animation-duration:20s;animation-delay:-8s}
@keyframes browse-scroll{0%,12%{transform:translateY(0);animation-timing-function:cubic-bezier(.4,0,.2,1)}38%,49%{transform:translateY(-22%);animation-timing-function:cubic-bezier(.4,0,.2,1)}68%,80%{transform:translateY(-42%);animation-timing-function:cubic-bezier(.45,0,.35,1)}100%{transform:translateY(0)}}
.floating-cat img{animation:float-turn 11s cubic-bezier(.37,0,.63,1) infinite;transform-origin:50% 60%}
@keyframes float-turn{0%,100%{transform:rotate(-.35deg)}50%{transform:rotate(.35deg)}}
@media(max-width:700px){.floating-cat{--float-rise:-5px}}
@media(prefers-reduced-motion:reduce){.breathing-cat.is-rigged{animation:none!important}}