/* Motion composes with the existing layout and responsive transforms. */
.has-motion .scroll-reveal:not(.is-visible){opacity:0}
.has-motion .horizon-aura{animation:horizon-breathe 8s ease-in-out infinite alternate}
.has-motion .horizon-edge{animation:horizon-glimmer 10s ease-in-out infinite alternate}
.has-motion .horizon-edge:after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid transparent;border-top-color:#ffcf9b;mask-image:linear-gradient(110deg,transparent 28%,#000 48%,transparent 68%);animation:arc-travel 12s ease-in-out infinite alternate;opacity:.65}
.has-motion .hero .eyebrow>span{animation:badge-glow 5s ease-in-out infinite alternate}
@keyframes horizon-breathe{0%{translate:-15px 7px;scale:.97;opacity:.6}100%{translate:18px -8px;scale:1.055;opacity:1}}
@keyframes horizon-glimmer{0%{opacity:.55;scale:.99}55%{opacity:1}100%{opacity:.75;scale:1.025}}
@keyframes arc-travel{from{rotate:-12deg;opacity:.25}to{rotate:15deg;opacity:.85}}
@keyframes badge-glow{from{opacity:.75;scale:.98}to{opacity:1;scale:1.07}}
.ribbon-loop .ribbon-stage{position:relative;left:0;width:100%;transform:rotate(-4deg);transform-origin:50% 50%}
.ribbon-loop .ribbon-track{left:0;transform:none;padding:10px 0;gap:18px;margin-left:-30px;will-change:transform}
.has-motion .ribbon-loop .ribbon-track{animation:ribbon-drift var(--ribbon-duration,55s) linear infinite}
.ribbon-group{display:flex;gap:18px;width:max-content;flex-shrink:0}
.ribbon-group>a{display:block;position:relative;flex:0 0 260px;width:260px;height:250px;overflow:hidden;border:1px solid #ffffff18;border-radius:18px;background:#151515;transition:transform .4s}
.ribbon-group>a:nth-child(even){transform:translateY(30px)}
.ribbon-group img{width:100%;height:100%;object-fit:cover}
.ribbon-group>a>span{position:absolute;inset:auto 0 0;padding:30px 18px 15px;background:linear-gradient(transparent,#000b);font-size:12px}
.ribbon-loop:hover .ribbon-track,.ribbon-loop:focus-within .ribbon-track{animation-play-state:paused}
@keyframes ribbon-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--ribbon-distance,1668px)),0,0)}}
.ribbon-keyboard{overflow-x:auto;perspective:none}
.ribbon-keyboard .ribbon-stage{left:0;width:max-content;transform:none}
.ribbon-keyboard .ribbon-track{animation:none!important;transform:none!important;margin-left:0}
.ribbon-keyboard .ribbon-clone{display:none}
.ribbon-keyboard .ribbon-group>a{transform:none!important}
.about-intro h2 .read-word{color:rgba(247,247,245,var(--read-opacity,1));transition:color .15s linear;display:inline}
.has-motion .panel-back{animation:design-float 7s ease-in-out infinite alternate}
.has-motion .panel-front{animation:design-float 6s 1s ease-in-out infinite alternate-reverse}
.has-motion .vector-shape{animation:vector-turn 10s ease-in-out infinite alternate}
.has-motion .vector-cursor{animation:cursor-drift 6s ease-in-out infinite alternate}
.has-motion .node{animation:node-glow 4s ease-in-out infinite alternate}
.has-motion .node:nth-of-type(even){animation-delay:1.5s}
.has-motion .meta-emblem{animation:design-float 6.5s ease-in-out infinite alternate}
.has-motion .service-cloud{animation:cloud-drift 13s ease-in-out infinite alternate}
.has-motion .ad-orbit{animation:orbit-turn 18s linear infinite}
.has-motion .ad-orbit:after{content:"";position:absolute;width:5px;height:5px;left:50%;top:-3px;background:#ffa575;border-radius:50%;box-shadow:0 0 8px #ff5c1a70}
.has-motion .ad-orbit.o2{animation-duration:12s;animation-direction:reverse}
.has-motion .ad-orbit.o3{animation-duration:8s}
.has-motion .cta-light{animation:cta-breathe 9s ease-in-out infinite alternate}
@keyframes design-float{from{translate:0 -5px}to{translate:0 7px}}
@keyframes vector-turn{from{rotate:-5deg;translate:0 3px}to{rotate:8deg;translate:0 -5px}}
@keyframes cursor-drift{from{translate:-5px 4px}to{translate:5px -7px}}
@keyframes node-glow{from{opacity:.5}to{opacity:1}}
@keyframes cloud-drift{from{translate:-9px 0}to{translate:9px -4px}}
@keyframes orbit-turn{to{rotate:360deg}}
@keyframes cta-breathe{from{opacity:.45;scale:.97}to{opacity:1;scale:1.035}}
.motion-control{position:fixed;right:18px;bottom:18px;width:36px;height:36px;border:1px solid #ffffff25;border-radius:50%;background:#181818c9;backdrop-filter:blur(12px);z-index:70;display:grid;place-items:center;box-shadow:0 2px 12px #0003;opacity:.6;transition:opacity .2s,background .2s;padding:0}
.motion-control:hover,.motion-control:focus-visible{opacity:1;background:#292929}
.motion-control[hidden]{display:none}
.motion-pause{height:11px;width:9px;border-left:2px solid #ddd;border-right:2px solid #ddd}
.motion-play{width:0;height:0;border-left:9px solid #ddd;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.motion-paused .about-intro h2 .read-word{color:inherit}
.motion-paused .scroll-reveal,.motion-reduced .scroll-reveal{opacity:1!important}
.motion-paused .ribbon-track,.motion-paused .horizon-aura,.motion-paused .horizon-edge,.motion-paused .horizon-edge:after,.motion-paused .hero .eyebrow>span,.motion-paused .tool-art *,.motion-paused .cta-light,.motion-hidden *,.ambient-offscreen .ribbon-track,.ambient-offscreen .horizon-aura,.ambient-offscreen .horizon-edge,.ambient-offscreen .horizon-edge:after,.hero.ambient-offscreen .eyebrow>span,.ambient-offscreen .tool-art *,.ambient-offscreen .cta-light{animation-play-state:paused!important}
@media(hover:hover) and (pointer:fine){
  .tool-card,.project-card{transition:transform .4s cubic-bezier(.2,.65,.25,1),border-color .3s,box-shadow .3s}
  .has-motion .is-tilting{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .16s ease-out,border-color .3s,box-shadow .3s}
  .tool-card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(440px circle at var(--spot-x,50%) var(--spot-y,50%),#ff8b4c12,transparent 60%);pointer-events:none;opacity:0;transition:opacity .4s}
  .tool-card:hover:after{opacity:1}
  .ribbon-group>a:hover{transform:translateY(-8px) scale(1.02)}
  .ribbon-group>a:nth-child(even):hover{transform:translateY(18px) scale(1.02)}
  .button{overflow:hidden}
  .button:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#fff2 48%,transparent 76%);transform:translateX(-140%);pointer-events:none}
  .button:hover:after{animation:button-shine .75s ease-out both}
  .motion-paused .is-tilting{transform:none}
}
@keyframes button-shine{to{transform:translateX(140%)}}
@media(max-width:800px){.ribbon-group{gap:12px}.ribbon-group>a{flex-basis:210px;width:210px;height:205px;border-radius:13px}}
@media(max-width:580px){.ribbon-group>a{flex-basis:165px;width:165px;height:170px;border-radius:12px}.ribbon-group>a:nth-child(even){transform:translateY(20px)}.ribbon-group>a>span{font-size:9px;padding:24px 12px 12px}.motion-control{right:12px;bottom:12px;width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){
  .scroll-reveal{opacity:1!important;transform:none!important;filter:none!important}
  .about-intro h2 .read-word{color:inherit!important}
  .ribbon-loop .ribbon-track{animation:none!important;transform:none!important}
  .ribbon-clone{display:none}
  .has-motion .is-tilting{transform:none!important}
}