/* October 19 / Cloud Atlas, Play Lab. Homepage only. Static art is the default. */
body[data-page=home]{--motion-ease:cubic-bezier(.175,.885,.32,1.12);--motion-ambient:cubic-bezier(.37,0,.63,1);--motion-quick:120ms;--motion-standard:280ms;--motion-slow:560ms;--motion-step:70ms;--motion-distance:12px}
.brand-hero{padding-top:35px;background:#e7f4fd}
.hero-atmosphere{background:radial-gradient(ellipse at 80% 20%,#c7e9fc,transparent 58%)}
.hero-atmosphere:after{background-size:28px 28px;opacity:.6;mask-image:linear-gradient(90deg,transparent,#000)}
.hero-heading{padding-bottom:28px;min-height:335px}
.brand-hero .eyebrow{margin-bottom:20px}
.brand-hero h1{font-size:clamp(88px,8.3vw,120px);line-height:.88;white-space:normal;max-width:62%;letter-spacing:-.065em}
.brand-hero h1>span:first-child{display:block}
.brand-hero h1>span.brand-period{position:absolute;bottom:0;left:3.08em}
.brand-hero .hero-description{max-width:445px;font-size:18px;line-height:1.45;margin-top:22px}
.atlas-scene{position:absolute;right:0;top:-12px;width:44%;max-width:560px;pointer-events:none}
.atlas-scene svg{display:block;width:100%;height:auto;overflow:visible}
.pillar{min-height:190px;padding:25px 28px;animation:none;transition:transform 90ms var(--motion-ease)}
.pillar-copy{position:relative;z-index:1}.pillar h2{font-size:36px}.pillar p{max-width:410px}.pillar-cta{margin-top:16px}
.pillar-art{opacity:.24;right:18px;bottom:16px;rotate:0}.pillar-vector{width:110px;height:92px;display:block}
.pillar-game .pillar-art{color:#99dbff}.pillar-hosting .pillar-art{color:#075985;opacity:.19}
.pillar:is(:hover,:focus-visible){transform:translateY(-3px);box-shadow:0 5px 0 #bddff3}
.pillar:is(:hover,:focus-visible) .pillar-icon{transform:rotate(-6deg) scale(1.06)}
.pillar-hosting:is(:hover,:focus-visible) .pillar-icon{transform:rotate(0) scale(1.06)}
.pillar-icon,.pillar-cta .icon,.micro-ball{transition:transform var(--motion-standard) var(--motion-ease);transform-box:fill-box;transform-origin:center}
.micro-line{stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset var(--motion-standard) var(--motion-ease)}
.pillar:is(:hover,:focus-visible) .micro-line{stroke-dashoffset:200}
.pillar:is(:hover,:focus-visible) .micro-ball{transform:translateY(-8px) scale(1.08)}
.pillar-hosting:is(:hover,:focus-visible) .micro-ball{transform:translateX(16px)}
.pillar:active{transform:translateY(1px) scale(.985)}
.brand-hero .hero-bottom{margin-top:25px}
.brand-hero .motion-toggle{width:124px;flex-shrink:0;text-align:center}
body[data-page=home] .ticker span{width:710px;flex:0 0 710px;white-space:nowrap}
#games .section-top{position:relative;align-items:center;gap:24px}#games .section-top>p{max-width:255px}
.studio-lab{width:265px;flex:0 0 265px;align-self:center}.studio-lab svg{display:block;width:100%;height:auto}
.pricing-card{position:relative;overflow:hidden}.plan-vector{position:absolute;right:22px;top:20px;width:112px;height:75px;color:var(--action);pointer-events:none}.pricing-card.popular .plan-vector{top:69px;width:85px;opacity:.8}.plan-top{position:relative;z-index:1}
.contact-inner{position:relative}.contact-inner>div:first-child{padding-left:150px}.chat-vector{position:absolute;left:var(--space);top:0;width:125px;height:110px}
body[data-page=home] :is(.button,.service-row,.pricing-card,.gallery-button,.trailer-pill,.card-visual img){transition-property:transform,opacity;transition-duration:var(--motion-standard);transition-timing-function:var(--motion-ease)}
body[data-page=home] .reveal-item{transition:opacity var(--motion-slow) ease-out,transform var(--motion-slow) var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
html[data-motion=on] body[data-page=home] .reveal-pending{transform:translateY(var(--motion-distance))}
/* Each eight-second phrase has one focal action, then a resting beat. */
.motion-ready .loop{animation-duration:8s;animation-timing-function:var(--motion-ambient);animation-iteration-count:infinite;transform-box:fill-box;transform-origin:center}
.motion-ready .cloud-outline{stroke-dasharray:100;animation:cloud-draw 1.12s cubic-bezier(.2,0,0,1) both}
.motion-ready .cloud-drift{animation-name:cloud-drift;animation-duration:10s}
.motion-ready .data-packet{animation-name:data-flow}
.motion-ready .pinball-hop{animation-name:pinball-hop}
.motion-ready .controller-nudge{animation-name:controller-nudge}
.motion-ready .rack-lights{animation-name:rack-lights}
.motion-ready .lab-ball{animation-name:lab-ball}
.motion-ready .shield-tick{stroke-dasharray:100;animation-name:shield-tick}
.motion-ready .uptime-pulse{stroke-dasharray:100;animation-name:uptime-pulse}
.motion-ready .chat-bob{animation-name:chat-bob}.motion-ready .chat-dots{animation-name:chat-dots}
.motion-scene:not([data-active=true]) *,.motion-scene:not([data-active=true]){animation-play-state:paused!important}
body[data-page=home]:not(.motion-ready) *,body[data-page=home]:not(.motion-ready) *:before,body[data-page=home]:not(.motion-ready) *:after{animation:none!important}
body[data-page-visible=false] *,body[data-page-visible=false] *:before,body[data-page-visible=false] *:after{animation-play-state:paused!important}
@keyframes cloud-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes cloud-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes data-flow{0%,32%{stroke-dashoffset:100;opacity:0}34%{opacity:1}48%{stroke-dashoffset:0;opacity:1}50%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes pinball-hop{0%,14%,31%,100%{transform:translate(0,0)}19%{transform:translate(16px,-10px) scale(.97,1.03)}24%{transform:translate(30px,4px) scale(1.06,.94)}28%{transform:translate(10px,-3px)}}
@keyframes controller-nudge{0%,58%,65%,100%{transform:rotate(0)}60%{transform:rotate(-4deg)}63%{transform:rotate(2deg)}}
@keyframes rack-lights{0%,53%,68%,100%{opacity:1}58%{opacity:.3}63%{opacity:1}}
@keyframes lab-ball{0%,5%,46%,100%{transform:translate(0,0)}18%{transform:translate(24px,-8px)}29%{transform:translate(48px,8px)}38%{transform:translate(18px,-3px)}}
@keyframes shield-tick{0%,10%,58%,100%{stroke-dashoffset:0}22%{stroke-dashoffset:100}38%{stroke-dashoffset:0}}
@keyframes uptime-pulse{0%,50%,90%,100%{stroke-dashoffset:0;opacity:1}60%{stroke-dashoffset:100;opacity:.5}78%{stroke-dashoffset:0;opacity:1}}
@keyframes chat-bob{0%,8%,35%,100%{transform:translateY(0) rotate(0)}18%{transform:translateY(-6px) rotate(-2deg)}26%{transform:translateY(1px) rotate(1deg)}}
@keyframes chat-dots{0%,37%,63%,100%{transform:translateY(0);opacity:1}48%{transform:translateY(-3px);opacity:.45}}
@media(min-width:761px) and (max-width:1100px){.brand-hero{padding-top:28px}.hero-heading{min-height:305px}.brand-hero h1{font-size:92px}.atlas-scene{width:46%;top:0}.brand-hero .hero-description{font-size:16px;max-width:360px}.pillar h2{font-size:30px}.pillar{padding:23px;gap:15px;min-height:185px}.pillar p{font-size:12px}.studio-lab{width:210px;flex-basis:210px}#games .section-top>p{max-width:210px}.contact-inner>div:first-child{padding-left:115px}.chat-vector{width:95px}}
@media(min-width:761px) and (max-width:850px){.brand-hero h1{font-size:85px}.hero-heading{min-height:290px}.atlas-scene{width:45%;top:20px}.brand-hero .hero-description{max-width:310px}.pillar{padding:21px 18px}.pillar h2{font-size:27px}.pillar-icon{width:37px;height:37px}.pillar p{max-width:240px}.pillar-art{right:6px;opacity:.14}.studio-lab{display:none}.contact-inner>div:first-child{padding-left:0}.chat-vector{position:static;width:100px;margin-bottom:20px}}
@media(max-width:760px){.brand-hero{padding:25px 0 17px}.hero-heading{min-height:0;padding-bottom:21px}.brand-hero .eyebrow{font-size:7px;letter-spacing:.025em;margin-bottom:22px}.brand-hero h1{font-size:clamp(62px,16.3vw,104px);max-width:75%;line-height:.9}.brand-hero h1>span.brand-period{left:3.08em}.atlas-scene{width:43%;right:-9px;top:48px}.brand-hero .hero-description{font-size:14px;max-width:290px;margin-top:23px;line-height:1.45}.pillar{min-height:128px;padding:17px 16px;gap:13px;border-radius:15px}.pillar h2{font-size:27px}.pillar p{font-size:12px;max-width:245px}.pillar-cta{font-size:11px;margin-top:11px}.pillar-vector{width:80px;height:70px}.pillar-art{right:7px;bottom:10px;opacity:.19}.pillar-hosting .pillar-art{opacity:.12}.brand-hero .hero-bottom{margin-top:22px}.studio-lab{display:block;width:190px;margin-block:12px 5px}#games .section-top>p{max-width:300px;margin-top:7px}.plan-vector{width:110px}.pricing-card.popular .plan-vector{top:73px}.contact-inner>div:first-child{padding-left:0}.chat-vector{position:static;width:105px;height:90px;margin-bottom:19px}.motion-ready .cloud-drift{animation:none}}
@media(max-width:380px){.brand-hero{padding-top:23px}.brand-hero h1{font-size:62px}.atlas-scene{width:42%;right:-9px;top:48px}.brand-hero .hero-description{font-size:13px;max-width:270px;margin-top:20px}.pillar{min-height:123px;padding:15px;gap:11px}.pillar h2{font-size:25px}.pillar p{font-size:11px}.pillar-cta{margin-top:9px}.brand-hero .hero-bottom{margin-top:20px}}
@media(max-width:760px){.brand-hero .motion-toggle{width:112px}}
@media(max-width:760px) and (max-height:740px){.brand-hero{padding-top:20px}.brand-hero .eyebrow{margin-bottom:18px}.brand-hero h1{font-size:62px}.hero-heading{padding-bottom:18px}.brand-hero .hero-description{margin-top:18px}.pillar{min-height:121px}.brand-hero .hero-bottom{margin-top:19px}}
html[data-motion=off] body[data-page=home] *,html[data-motion=off] body[data-page=home] *:before,html[data-motion=off] body[data-page=home] *:after{animation:none!important;transition:none!important}
html[data-motion=off] .pillar:is(:hover,:focus-visible),html[data-motion=off] .pillar:is(:hover,:focus-visible) :is(.pillar-icon,.micro-ball){transform:none}
@media(prefers-reduced-motion:reduce){body[data-page=home] *,body[data-page=home] *:before,body[data-page=home] *:after{animation:none!important;transition:none!important}.pillar:is(:hover,:focus-visible),.pillar:is(:hover,:focus-visible) :is(.pillar-icon,.micro-ball){transform:none}.cloud-outline{stroke-dashoffset:0}.reveal-pending{opacity:1!important;transform:none!important}}

/* 22 Oct: three equally weighted pillars. Warm Kopi Hub paper joins the blue atlas. */
body[data-page=home] .pillar-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body[data-page=home] .pillar{min-height:230px;padding:24px 22px;gap:16px;transition-property:transform}
body[data-page=home] .pillar-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}
body[data-page=home] .pillar h2{font-size:32px}
body[data-page=home] .pillar p{font-size:13px;line-height:1.5;margin-bottom:16px}
body[data-page=home] .pillar-cta{margin-top:auto;font-size:12px}
body[data-page=home] .pillar-art{opacity:.12}
body[data-page=home] .pillar-apps{background:var(--surface);border-color:var(--line);color:var(--ink)}
.pillar-apps .pillar-icon{background:var(--soft);border-color:var(--line)}
.pillar-apps .pillar-icon img{width:30px;height:30px}
.pillar-apps .pillar-index,.pillar-apps p{color:var(--muted)}
.pillar-apps .pillar-cta{border-color:#3f90c8}
.pillar-apps .pillar-art{right:12px;bottom:10px}
.pillar-apps .kopihub-vector{height:105px;width:105px}
.pillar-apps .pillar-icon{transition:transform var(--motion-standard) var(--motion-ease)}
.kopi-bands path,.kopi-tick{stroke-dasharray:100;stroke-dashoffset:0}
.motion-ready .kopi-bands{animation-name:kopi-connect}
.motion-ready .kopi-tick{animation-name:kopi-confirm}
/* Only the bands move at 66-76%, then the receipt tick at 77-85%. */
@keyframes kopi-connect{0%,65%,77%,100%{opacity:1;transform:translateY(0)}66%{opacity:.35;transform:translateY(3px)}76%{opacity:1;transform:translateY(0)}}
.motion-ready .kopi-bands path{animation:kopi-draw 8s var(--motion-ambient) infinite}
@keyframes kopi-draw{0%,65%,77%,100%{stroke-dashoffset:0}66%{stroke-dashoffset:100}76%{stroke-dashoffset:0}}
@keyframes kopi-confirm{0%,76%,86%,100%{stroke-dashoffset:0}77%{stroke-dashoffset:100}85%{stroke-dashoffset:0}}
/* The three pricing scenes take turns rather than blinking in unison. */
[data-plan=basic] .rack-lights{animation-name:basic-lights}
[data-plan=basic] .uptime-pulse{animation-name:basic-uptime}
[data-plan=standard] .rack-lights{animation-name:standard-lights}
[data-plan=standard] .uptime-pulse{animation-name:standard-uptime}
@keyframes basic-lights{0%,32%,42%,100%{opacity:1}37%{opacity:.35}}
@keyframes basic-uptime{0%,43%,52%,100%{stroke-dashoffset:0;opacity:1}47%{stroke-dashoffset:100;opacity:.5}}
@keyframes standard-lights{0%,53%,63%,100%{opacity:1}58%{opacity:.35}}
@keyframes standard-uptime{0%,64%,73%,100%{stroke-dashoffset:0;opacity:1}68%{stroke-dashoffset:100;opacity:.5}}
.motion-ready .shield-tick{animation-name:enterprise-check}
@keyframes enterprise-check{0%,74%,87%,100%{stroke-dashoffset:0}78%{stroke-dashoffset:100}86%{stroke-dashoffset:0}}
/* Solid completed artwork in the absence of JS, or either static mode. */
body[data-page=home]:not(.motion-ready) .kopi-bands,html[data-motion=off] .kopi-bands{transform:none;opacity:1}
@media(min-width:761px) and (max-width:1100px){
 body[data-page=home] .pillar{flex-direction:column;min-height:270px;padding:21px 18px;gap:13px}
 body[data-page=home] .pillar-copy{flex:1}
 body[data-page=home] .pillar h2{font-size:29px}
 body[data-page=home] .pillar p{font-size:12px}
 body[data-page=home] .pillar-cta{font-size:11px;gap:8px}
}
@media(max-width:760px){
 body[data-page=home] .pillar-grid{grid-template-columns:1fr;gap:14px}
 body[data-page=home] .pillar{min-height:176px;padding:18px 16px;gap:14px}
 body[data-page=home] .pillar-copy{flex:1}
 body[data-page=home] .pillar h2{font-size:27px}
 body[data-page=home] .pillar p{font-size:12px;max-width:260px;margin-bottom:11px}
 body[data-page=home] .pillar-cta{font-size:11px}
 body[data-page=home] .pillar-art{opacity:.1}
 .pillar-apps .kopihub-vector{width:85px;height:85px}
}
@media(max-width:380px){
 body[data-page=home] .pillar{min-height:176px;padding:16px 15px;gap:11px}
 body[data-page=home] .pillar h2{font-size:25px}
 body[data-page=home] .pillar p{font-size:11px}
}

/* Let the short pillar settling finish before the cloud outline becomes a focus. */
.motion-ready .cloud-outline{animation-delay:350ms}

/* Narrow hero text clearance */
@media(max-width:480px){
 .brand-hero h1{max-width:100%;font-size:clamp(54px,17vw,64px)}
 .brand-hero .hero-description{max-width:100%}
 .atlas-scene{position:relative;top:auto;right:auto;width:180px;max-width:68%;margin:18px auto 0}
}