/* Hero data stream (25 Oct 2026): a vector loop living behind the wordmark and filling the gap to the atlas.
   Each object combines X, Y and spin loops of unrelated lengths, so the path keeps changing like video.
   Only transform, opacity and stroke-dashoffset animate. Static pose = the same artwork, fully visible. */
.hero-field{position:absolute;z-index:0;left:-6%;right:-6%;top:-34px;bottom:-26px;pointer-events:none}
.hero-field svg{display:block;width:100%;height:100%;overflow:visible}
.hero-heading>:is(.eyebrow,h1,.hero-description){position:relative;z-index:1}
.hero-heading>.atlas-scene{z-index:1}
.hf-band{opacity:.9}
.hf-comet,.hf-orbit-comet{opacity:0} /* comets only exist while moving; the still pose shows the calm stream */
.hf-obj *{transform-box:fill-box;transform-origin:center}

.motion-ready .hf-ribbon-low{animation:hf-sway 11s var(--motion-ambient) infinite alternate}
.motion-ready .hf-ribbon-high{animation:hf-sway 13s var(--motion-ambient) -6s infinite alternate-reverse}
.motion-ready .hf-dots{animation:hf-flow 7s linear infinite}
.motion-ready .hf-ribbon-high .hf-dots{animation-duration:9s}
.motion-ready .hf-comet-a{animation:hf-comet 5.6s cubic-bezier(.45,0,.25,1) infinite}
.motion-ready .hf-comet-b{animation:hf-comet 7.4s cubic-bezier(.45,0,.25,1) -3.1s infinite}

.motion-ready .hf-orbits{transform-box:fill-box;transform-origin:center;animation:hf-orbit-sway 16s var(--motion-ambient) infinite alternate}
.motion-ready .hf-orbit-a{animation:hf-orbit 15s linear infinite}
.motion-ready .hf-orbit-b{animation:hf-orbit 9.5s linear -4s infinite reverse}
.motion-ready .hf-packet-b .hf-x{animation:hf-packet-b-x 23s var(--motion-ambient) -8s infinite alternate}
.motion-ready .hf-packet-b .hf-y{animation:hf-float 4.7s var(--motion-ambient) infinite alternate}
.motion-ready .hf-packet-b .hf-spin{animation:hf-tilt 6.3s var(--motion-ambient) -3s infinite alternate-reverse}
.motion-ready .hf-packet .hf-x{animation:hf-packet-x 17s var(--motion-ambient) infinite alternate}
.motion-ready .hf-packet .hf-y{animation:hf-packet-y 7.3s var(--motion-ambient) infinite alternate}
.motion-ready .hf-packet .hf-spin{animation:hf-tilt 5.1s var(--motion-ambient) infinite alternate}
.motion-ready .hf-ball .hf-x{animation:hf-ball-x 11s var(--motion-ambient) -4s infinite alternate}
.motion-ready .hf-ball .hf-y{animation:hf-ball-y 2.7s infinite}
.motion-ready .hf-ball .hf-spin{animation:hf-roll 6s linear infinite}
.motion-ready .hf-cloud .hf-x{animation:hf-cloud-x 26s var(--motion-ambient) -9s infinite alternate}
.motion-ready .hf-cloud .hf-y{animation:hf-float 9s var(--motion-ambient) infinite alternate}
.motion-ready .hf-die .hf-x{animation:hf-die-x 19s var(--motion-ambient) -7s infinite alternate}
.motion-ready .hf-die .hf-y{animation:hf-die-y 8.6s var(--motion-ambient) infinite alternate}
.motion-ready .hf-die .hf-spin{animation:hf-tumble 14s var(--motion-ambient) infinite alternate}
.motion-ready .hf-code .hf-x{animation:hf-code-x 21s var(--motion-ambient) -12s infinite alternate}
.motion-ready .hf-code .hf-y{animation:hf-float 6.4s var(--motion-ambient) -2s infinite alternate}
.motion-ready .hf-code .hf-spin{animation:hf-tilt 8s var(--motion-ambient) infinite alternate-reverse}
.motion-ready .hf-spark .hf-x{animation:hf-spark-x 13s var(--motion-ambient) infinite alternate}
.motion-ready .hf-spark .hf-twinkle{animation:hf-twinkle 3.4s var(--motion-ambient) infinite}
.motion-ready .hf-spark-b .hf-x{animation-duration:17s;animation-direction:alternate-reverse}
.motion-ready .hf-spark-b .hf-twinkle{animation-delay:-1.7s}
.motion-ready .hf-mote .hf-x{animation:hf-mote-x 15s var(--motion-ambient) -5s infinite alternate}
.motion-ready .hf-mote .hf-y{animation:hf-float 5.2s var(--motion-ambient) infinite alternate-reverse}
/* The brand period answers the ball: a short hop once per eight-second phrase. */
.motion-ready .brand-hero h1>span.brand-period{display:inline-block;transform-origin:50% 100%;animation:hf-period 8s var(--motion-ease) 1.2s infinite}

.motion-ready .hero-field:not([data-active=true]) *{animation-play-state:paused!important}

@keyframes hf-orbit{from{stroke-dashoffset:1000;opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes hf-orbit-sway{from{transform:rotate(-2.5deg) translateY(-4px)}to{transform:rotate(2.5deg) translateY(6px)}}
@keyframes hf-packet-b-x{from{transform:translateX(-160px)}to{transform:translateX(230px)}}
@keyframes hf-sway{from{transform:translateY(-7px)}to{transform:translateY(9px)}}
@keyframes hf-flow{to{stroke-dashoffset:-160}}
@keyframes hf-comet{from{stroke-dashoffset:1000;opacity:0}12%{opacity:1}88%{opacity:1}to{stroke-dashoffset:0;opacity:0}}
@keyframes hf-packet-x{from{transform:translateX(-210px)}to{transform:translateX(250px)}}
@keyframes hf-packet-y{from{transform:translateY(-38px)}to{transform:translateY(46px)}}
@keyframes hf-tilt{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
@keyframes hf-ball-x{from{transform:translateX(-120px)}to{transform:translateX(105px)}}
@keyframes hf-ball-y{0%{transform:translateY(0) scale(1.12,.86);animation-timing-function:cubic-bezier(.2,.6,.35,1)}12%{transform:translateY(-14px) scale(.94,1.08)}50%{transform:translateY(-118px) scale(1);animation-timing-function:cubic-bezier(.65,0,.8,.4)}96%{transform:translateY(-4px) scale(.96,1.05)}to{transform:translateY(0) scale(1.12,.86)}}
@keyframes hf-roll{to{transform:rotate(360deg)}}
@keyframes hf-cloud-x{from{transform:translateX(-140px)}to{transform:translateX(190px)}}
@keyframes hf-float{from{transform:translateY(-12px)}to{transform:translateY(14px)}}
@keyframes hf-die-x{from{transform:translateX(-150px)}to{transform:translateX(70px)}}
@keyframes hf-die-y{from{transform:translateY(-58px)}to{transform:translateY(10px)}}
@keyframes hf-tumble{from{transform:rotate(-40deg)}to{transform:rotate(130deg)}}
@keyframes hf-code-x{from{transform:translateX(-90px)}to{transform:translateX(150px)}}
@keyframes hf-spark-x{from{transform:translateX(-50px)}to{transform:translateX(40px)}}
@keyframes hf-twinkle{0%,100%{transform:scale(.55) rotate(0);opacity:.35}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
@keyframes hf-mote-x{from{transform:translateX(-80px)}to{transform:translateX(60px)}}
@keyframes hf-period{0%,78%,100%{transform:none}84%{transform:translateY(-.22em) scale(.92,1.1)}90%{transform:translateY(0) scale(1.18,.82)}95%{transform:translateY(-.05em) scale(.97,1.03)}}

/* Tablet and phone: the stream stays, fewer travellers, so the wordmark stays the focus. */
@media(max-width:1100px){.hf-code,.hf-mote,.hf-packet-b{display:none}}
@media(max-width:760px){.hero-field{left:-16px;right:-16px;top:-20px;bottom:-10px;opacity:.7}.hf-cloud,.hf-spark-b,.hf-die,.hf-orbits ellipse+ellipse,.hf-orbit-b{display:none}}

/* Pillar order (25 Oct 2026): Hosting leads in navy, Game Studio follows in white, then Aplikasi. */
body[data-page=home] .pillar-hosting{background:var(--ink);border-color:var(--ink);color:#fff}
body[data-page=home] .pillar-hosting .pillar-icon{background:#ffffff10;border-color:#ffffff40;color:#99dbff}
body[data-page=home] .pillar-hosting .pillar-index{color:#a6d7f5}
body[data-page=home] .pillar-hosting :is(h2,.pillar-cta){color:#fff}
body[data-page=home] .pillar-hosting p{color:#c6dfef}
body[data-page=home] .pillar-hosting .pillar-art{color:#99dbff}
body[data-page=home] .pillar-hosting:focus-visible{outline-offset:5px;outline-color:var(--action)}
body[data-page=home] .pillar-game{background:#fff;border-color:#8cbdda;color:var(--ink)}
body[data-page=home] .pillar-game .pillar-icon{background:#e8f5ff;border-color:#c8deec;color:var(--action)}
body[data-page=home] .pillar-game .pillar-index,body[data-page=home] .pillar-game p{color:#456579}
body[data-page=home] .pillar-game :is(h2,.pillar-cta){color:var(--ink)}
body[data-page=home] .pillar-game .pillar-art{color:#075985}
body[data-page=home] .pillar:is(.pillar-hosting,.pillar-game):is(:hover,:focus-visible){border-color:var(--action)}
/* Online order leads; WhatsApp stays one tap away as a text link. */
.plan-actions .plan-whatsapp{align-self:center;display:inline-flex;align-items:center;gap:7px;min-height:34px;color:var(--action);font-size:13px}
.plan-actions .plan-whatsapp:hover{text-decoration:underline}
.plan-actions .plan-whatsapp .icon{width:15px;height:15px}