/* VORACE / V20 animated product storytelling. Offline-first, no external libraries. */
:root{--v20-cream:#eee7d8;--v20-gold:#dbc391;--v20-ease:cubic-bezier(.18,.78,.17,1)}
html{scroll-behavior:smooth}
/* Motion layers on every major section. Design stays readable behind them. */
#hero,#projects,#interlude,#brand-story,#method,#testimonials,#contact{isolation:isolate}
.v20-scene{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;opacity:.72}
.v20-scene .v20-rings{position:absolute;top:50%;right:-6%;width:min(47vw,650px);aspect-ratio:1;border:1px solid rgba(224,199,152,.18);border-radius:50%;transform:translate(0,-50%) scale(.65) rotate(-30deg);opacity:0;transition:transform 1.65s var(--v20-ease),opacity 1s ease}
.v20-scene .v20-rings:before,.v20-scene .v20-rings:after{content:'';position:absolute;inset:12%;border:1px solid rgba(224,199,152,.13);border-radius:50%}
.v20-scene .v20-rings:after{inset:29%;border-style:dashed}
.v20-scene .v20-ray{position:absolute;right:-18%;top:50%;width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(222,191,136,.48),transparent);transform:translateY(-50%) rotate(-32deg) scaleX(.1);transform-origin:right center;opacity:0;transition:transform 1.45s var(--v20-ease) .1s,opacity .8s}
.v20-scene .v20-word{position:absolute;right:6%;bottom:-.3em;font:800 clamp(80px,21vw,370px)/1 var(--type);letter-spacing:-.13em;color:rgba(224,206,168,.042);white-space:nowrap;transform:translateY(24%) scale(1.16);opacity:0;transition:opacity .9s,transform 1.3s var(--v20-ease)}
.v20-scene .v20-dots{position:absolute;top:18%;right:18%;width:160px;height:160px;background-image:radial-gradient(circle,rgba(221,190,139,.29) 1.1px,transparent 1.3px);background-size:22px 22px;transform:translateY(24px);opacity:0;transition:transform 1s var(--v20-ease),opacity .8s}
.v20-section-visible>.v20-scene .v20-rings{transform:translate(0,-50%) scale(1) rotate(0);opacity:1}
.v20-section-visible>.v20-scene .v20-ray{transform:translateY(-50%) rotate(-32deg) scaleX(1);opacity:1}
.v20-section-visible>.v20-scene .v20-word{transform:translateY(0) scale(1);opacity:1}
.v20-section-visible>.v20-scene .v20-dots{transform:translateY(0);opacity:1}
#hero>.v20-scene,#projects>.v20-scene{opacity:.35}#interlude>.v20-scene{opacity:.35}#interlude .v20-rings{border-color:rgba(11,22,17,.16)}
#interlude .v20-word{color:rgba(9,22,12,.09)}
#testimonials>.v20-scene .v20-word{right:-2%;bottom:2%;font-family:var(--serif);font-weight:400;font-style:italic}
#contact>.v20-scene{opacity:.5}
#hero>.wrap,#projects>.wrap,#interlude>.wrap,#brand-story>.wrap,#method>.wrap,#testimonials>.wrap,#contact>.wrap{position:relative;z-index:1}
/* The user asked for motion graphic at the start of EVERY slide, integrated in the slide itself. */
.v20-motion-stage{position:relative;--motion-hue:#d9c08a;isolation:isolate;perspective:1400px}
.v20-motion-stage .slide-stage-content{position:relative;z-index:2;animation:v20ScreenBuild 1.52s var(--v20-ease) both!important;transform-origin:50% 52%;will-change:opacity,transform,filter}
.v20-motion-intro{position:absolute;inset:0;overflow:hidden;z-index:5;pointer-events:none;color:var(--motion-hue);isolation:isolate;animation:v20IntroDisappear 1.64s linear both;will-change:opacity,visibility}
.v20-motion-shade{position:absolute;inset:0;background:#080d14;transform-origin:center;will-change:transform}
.v20-motion-shade.shade-one{background:linear-gradient(125deg,#060911,#10151c 60%,#11181e);animation:v20ShadeSplitTop 1.6s var(--v20-ease) both}
.v20-motion-shade.shade-two{background:linear-gradient(0deg,#090c11,#1a2024);clip-path:inset(52% 0 0 0);animation:v20ShadeSplitBottom 1.6s var(--v20-ease) both}
.v20-motion-grid{position:absolute;inset:-30%;background-image:linear-gradient(rgba(255,255,255,.046) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.046) 1px,transparent 1px);background-size:43px 43px;transform:perspective(600px) rotateX(48deg) scale(1.2);opacity:.68;animation:v20GridOut 1.55s var(--v20-ease) both}
.v20-motion-orbit{position:absolute;left:50%;top:50%;width:clamp(220px,55%,490px);aspect-ratio:1;border-radius:50%;border:1px solid currentColor;box-shadow:0 0 0 40px color-mix(in srgb,currentColor 6%,transparent),0 0 0 90px color-mix(in srgb,currentColor 4%,transparent);opacity:.4;animation:v20OrbitSpin 1.55s var(--v20-ease) both}
.v20-motion-orbit.orbit-b{width:clamp(150px,34%,310px);border-style:dashed;animation-delay:.09s;animation-direction:normal;opacity:.16}
.v20-motion-beam{position:absolute;left:-40%;top:48%;width:180%;height:2px;background:linear-gradient(90deg,transparent,currentColor,white,currentColor,transparent);box-shadow:0 0 35px currentColor;transform:rotate(-21deg) scaleX(0);animation:v20Beam 1.33s var(--v20-ease) .10s both;opacity:.4}
.v20-motion-copy{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(24px,4.5vw,60px);overflow:hidden}
.v20-motion-index{font:800 10px/1.2 var(--type);letter-spacing:.23em;color:var(--motion-hue);opacity:0;animation:v20MicroIn .7s var(--v20-ease) .1s both}
.v20-motion-index b{font-weight:500;color:#98a4a5;letter-spacing:.13em}
.v20-motion-cue{display:block;max-width:100%;font:800 clamp(48px,9.2vw,144px)/.83 var(--type);letter-spacing:-.09em;white-space:nowrap;color:#f4f4ec;text-shadow:0 17px 40px #0009;transform-origin:top left;animation:v20CueSmash 1.43s var(--v20-ease) .05s both}
.v20-motion-name{display:inline-flex;align-items:center;gap:20px;margin-top:20px;padding:12px 0;border-top:1px solid currentColor;color:var(--motion-hue);font:700 clamp(14px,2vw,24px) var(--type);letter-spacing:-.04em;animation:v20MicroIn 1.1s var(--v20-ease) .32s both}
.v20-motion-name i{font-style:normal}
.v20-motion-logo{position:absolute;right:8%;bottom:8%;width:clamp(45px,12%,160px);aspect-ratio:1;border:1px solid rgba(255,255,255,.13);border-radius:50%;display:grid;place-items:center;animation:v20LogoBurst 1.55s var(--v20-ease) both}
.v20-motion-logo img{width:58%;height:58%;object-fit:contain;filter:drop-shadow(0 0 25px #fff4)}
.v20-motion-bits{position:absolute;inset:0}.v20-motion-bits span{position:absolute;width:4px;height:4px;background:var(--motion-hue);border-radius:50%;box-shadow:0 0 17px currentColor;animation:v20BitFly 1.45s var(--v20-ease) both}.v20-motion-bits span:nth-child(1){top:23%;left:67%;--tx:110px;--ty:-80px}.v20-motion-bits span:nth-child(2){top:71%;left:28%;--tx:-120px;--ty:75px}.v20-motion-bits span:nth-child(3){top:35%;left:91%;--tx:45px;--ty:90px}.v20-motion-bits span:nth-child(4){top:88%;left:68%;--tx:90px;--ty:65px}.v20-motion-bits span:nth-child(5){top:8%;left:15%;--tx:-55px;--ty:-90px}
.v20-motion-bottom{position:absolute;left:clamp(24px,4.5vw,60px);right:clamp(24px,4.5vw,60px);bottom:19px;display:flex;justify-content:space-between;color:#aeb0b3;font:700 9px var(--type);letter-spacing:.18em;animation:v20MicroIn 1s var(--v20-ease) .5s both}
.v20-motion-stage[data-motion-project=bukukku] .v20-motion-cue{color:#f2d9bd}.v20-motion-stage[data-motion-project=idx] .v20-motion-cue{color:#ddedff}.v20-motion-stage[data-motion-project=edge] .v20-motion-cue{color:#e7d9ff}.v20-motion-stage[data-motion-project=fittrack] .v20-motion-cue{color:#dee3ff}.v20-motion-stage[data-motion-project=swarm] .v20-motion-cue{color:#cbf7dc}
@keyframes v20ScreenBuild{0%,23%{opacity:0;transform:translate3d(0,42px,-200px) rotateX(11deg) scale(.92);filter:blur(18px) saturate(.7)}52%{opacity:.25;filter:blur(10px)}76%{opacity:1;transform:translate3d(0,0,0) rotateX(0) scale(1.015);filter:blur(2px)}100%{opacity:1;transform:none;filter:none}}
@keyframes v20IntroDisappear{0%,79%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes v20ShadeSplitTop{0%,36%{transform:translateY(0)}78%,100%{transform:translateY(-103%)}}
@keyframes v20ShadeSplitBottom{0%,36%{transform:translateY(0)}78%,100%{transform:translateY(103%)}}
@keyframes v20GridOut{0%{transform:perspective(600px) rotateX(48deg) scale(1.5);opacity:0}22%,47%{opacity:.7}100%{transform:perspective(600px) rotateX(48deg) scale(.8);opacity:0}}
@keyframes v20OrbitSpin{0%{transform:translate(-50%,-50%) rotate(-80deg) scale(.35);opacity:0}32%{opacity:.6}70%{transform:translate(-50%,-50%) rotate(18deg) scale(1.25);opacity:.35}100%{transform:translate(-50%,-50%) rotate(55deg) scale(1.6);opacity:0}}
@keyframes v20Beam{0%{transform:rotate(-21deg) scaleX(0);opacity:0}28%,45%{transform:rotate(-21deg) scaleX(1);opacity:1}85%,100%{transform:rotate(-21deg) scaleX(1.45);opacity:0}}
@keyframes v20CueSmash{0%{opacity:0;transform:translateX(-60px) translateY(45px) skew(-15deg) scale(1.6);filter:blur(20px)}25%{opacity:1;filter:blur(0)}39%,58%{opacity:1;transform:none;filter:blur(0)}78%,100%{opacity:0;transform:translateX(110px) translateY(-40px) skew(5deg) scale(.74);filter:blur(4px)}}
@keyframes v20MicroIn{0%{opacity:0;transform:translateY(14px)}28%,62%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}
@keyframes v20LogoBurst{0%{opacity:0;transform:scale(.25) rotate(-80deg)}34%,65%{opacity:.6;transform:scale(1) rotate(0deg)}100%{opacity:0;transform:scale(1.8) rotate(60deg)}}
@keyframes v20BitFly{0%{opacity:0;transform:translate(0,0) scale(.1)}40%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}}
.v20-replay{display:grid;place-items:center;flex-shrink:0;border:1px solid rgba(219,195,145,.5);border-radius:50%;width:42px;height:42px;background:rgba(219,195,145,.09);color:#f3dfb9;font-size:22px;cursor:pointer;transition:background .25s,transform .35s}.v20-replay:hover{background:rgba(219,195,145,.23);transform:rotate(-45deg)}
.demo-modal.quiet-update .v20-motion-intro{display:none!important}.demo-modal.quiet-update .v20-motion-stage .slide-stage-content{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
/* Testimonial navigation has its own motion graphic, not an announcement label. */
.testi-featured{min-height:560px;overflow:hidden}.testi-featured::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(112deg,transparent 0 38%,rgba(235,214,165,.08) 48%,transparent 57%);transform:translateX(-125%);opacity:0}.testi-transition .testi-featured::after{animation:v20TestiSweep 1s var(--v20-ease) both}
.testi-featured-copy{max-width:920px}.testi-featured .testi-symbol{animation:v20QuoteOrbit 1.1s var(--v20-ease) both}
#testi-quote{font:400 clamp(19px,2.1vw,30px)/1.43 var(--serif);min-height:0;max-width:850px;letter-spacing:-.01em;overflow-wrap:break-word}
.testi-transition #testi-quote{animation:v20QuoteIn .8s var(--v20-ease) .12s both}.testi-transition .testi-author{animation:v20QuoteIn .7s var(--v20-ease) .24s both}
.testi-transition #testi-count{animation:v20Count .6s var(--v20-ease) both}
@keyframes v20TestiSweep{0%{opacity:1;transform:translateX(-130%)}100%{opacity:0;transform:translateX(130%)}}
@keyframes v20QuoteIn{0%{opacity:0;transform:translateY(26px) rotateX(-18deg);filter:blur(9px)}100%{opacity:1;transform:none;filter:none}}
@keyframes v20QuoteOrbit{0%{opacity:0;transform:translateY(30px) rotate(-45deg) scale(.8)}100%{opacity:1;transform:none}}
@keyframes v20Count{0%{opacity:0;transform:translateX(18px)}100%{opacity:1;transform:none}}
.testi-tab{transition:background .25s,border-color .25s,transform .45s var(--v20-ease)}.testi-tab.active{transform:translateX(4px)}
/* Active spotlight: added depth while screenshot remains legible */
.ws-image-frame{transform-style:preserve-3d}.ws-stage:not(.ws-changing) .ws-image-frame{animation:v20SpotFloat 7s ease-in-out infinite alternate}
@keyframes v20SpotFloat{0%{filter:drop-shadow(0 20px 38px #0004)}100%{filter:drop-shadow(0 30px 48px #0007)}}
@media(max-width:900px){.v20-motion-cue{font-size:clamp(35px,10vw,82px)}.v20-motion-logo{right:6%;bottom:8%}.v20-scene .v20-rings{width:70vw;right:-35%}.v20-scene .v20-word{font-size:30vw}.testi-featured{min-height:350px}#testi-quote{font-size:clamp(18px,4vw,25px)}}
@media(max-width:480px){.v20-motion-copy{padding:23px}.v20-motion-cue{font-size:clamp(27px,10vw,48px)}.v20-motion-index{font-size:8px}.v20-motion-name{font-size:14px;max-width:80%}.v20-motion-bottom{font-size:7px;left:20px;right:20px}.v20-motion-logo{width:60px}.v20-replay{width:34px;height:34px;font-size:18px}.testi-featured{padding:22px}}
@media(prefers-reduced-motion:reduce){.v20-motion-intro{display:none!important}.v20-motion-stage .slide-stage-content{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}.v20-scene{display:none!important}.testi-transition #testi-quote,.testi-transition .testi-author,.testi-transition .testi-featured::after,.testi-featured .testi-symbol{animation:none!important}.ws-stage:not(.ws-changing) .ws-image-frame{animation:none!important}}