/* Motion port: source Kinetic, Hero Lab/WarpedGrid, CustomCursor and MagneticButton.
   The full upstream MIT notice is distributed in LICENSE.txt. */
.hero h1>.title-line{display:block}
.hero h1>.title-line:first-of-type{color:var(--ink)}
.hero h1>.title-line.alive{color:var(--purple)}
.title-glyph{display:inline-block;transform-origin:50% 55%}
.motion-enabled .title-glyph{transform:translate3d(var(--glyph-x,0px),var(--glyph-y,0px),0) rotate(var(--glyph-r,0deg)) scale(var(--glyph-s,1))}
.warp-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:none}
.pointer-motion .warp-grid{display:block}
.pointer-motion .hero-copy{background-image:none}
.hero-copy>:not(.warp-grid){position:relative;z-index:1}
.motion-enabled .hero-copy>.eyebrow{animation:kinetic-intro .55s cubic-bezier(.16,1,.3,1) both}
.motion-enabled .hero h1{animation:kinetic-hero .9s cubic-bezier(.16,1,.3,1) both}
.motion-enabled .hero-bottom{animation:kinetic-intro .75s .15s cubic-bezier(.16,1,.3,1) both}
.motion-enabled .orbit{animation:kinetic-orbit 18s linear infinite;translate:var(--ring-x,0px) var(--ring-y,0px);will-change:transform}
.orbit:before{content:"";position:absolute;width:28px;height:28px;top:-24px;left:50%;border:5px solid var(--ink);background:var(--paper);border-radius:50%}
.motion-enabled .title-star{animation:kinetic-star 20s linear infinite}
.art-card-main{--base-r:-7deg}.art-photo{--base-r:9deg}.art-sticker{--base-r:-8deg}
.motion-enabled :is(.art-card-main,.art-photo,.art-sticker){transform:translate3d(var(--layer-x,0px),calc(var(--layer-y,0px) + var(--scroll-y,0px)),0) rotate(calc(var(--base-r) + var(--layer-r,0deg)));transition:box-shadow .4s ease;will-change:transform}
/* Quiet Hero Lab collage drift remains independent of pointer interaction.
   Individual translate composes with the existing pointer/scroll transform.
   CSS owns idle movement, so no perpetual canvas or JS animation loop is added. */
.motion-enabled .art-photo{animation:hero-photo-drift 7s ease-in-out infinite}
.motion-enabled .art-sticker{animation:hero-sticker-drift 9s ease-in-out infinite}
.motion-paused :is(.art-photo,.art-sticker),.motion-offscreen :is(.art-photo,.art-sticker){animation-play-state:paused!important}
@keyframes hero-photo-drift{0%,100%{translate:0 0}50%{translate:4px -9px}}
@keyframes hero-sticker-drift{0%,100%{translate:0 0}50%{translate:-3px 7px}}
.motion-enabled [data-reveal]{transition:opacity .65s ease,transform .75s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.motion-enabled [data-reveal].reveal-pending{opacity:0;transform:translateY(42px)}
.motion-enabled [data-reveal="left"].reveal-pending{transform:translateX(-42px)}
.motion-enabled [data-reveal]:is(:target,:focus-within){opacity:1;transform:none;transition-delay:0ms}
.signal-strip.has-ticker{display:block;overflow:hidden;padding-inline:0;position:relative}
.signal-track{display:flex;width:max-content;transform:skewX(var(--ticker-skew,0deg));will-change:transform}
.signal-travel{display:flex;width:max-content}
.motion-enabled .signal-travel{animation:kinetic-ticker 28s linear infinite}
.signal-group{display:flex;gap:clamp(25px,4vw,65px);align-items:center;justify-content:space-around;min-width:100vw;flex-shrink:0;padding-right:clamp(25px,4vw,65px);white-space:nowrap}
.signal-strip .signal-group b:last-of-type{display:inline-block}
.signal-strip .signal-extra{display:inline;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.motion-enabled .project{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.motion-enabled .project-art:after{content:"";position:absolute;z-index:4;top:-20%;bottom:-20%;left:-55%;width:32%;background:#ffffff40;transform:translateX(-120%) rotate(-12deg);transition:transform .75s cubic-bezier(.16,1,.3,1);pointer-events:none}
.motion-enabled .project-name{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.motion-enabled .process-list li{transition:transform .25s ease,background-color .25s ease}
.motion-enabled .brand img{transition:transform .35s cubic-bezier(.16,1,.3,1),filter .35s ease}
.motion-enabled .service-symbol{transform:rotate(var(--studio-spin,0deg));will-change:transform}
.motion-enabled dialog[open]{animation:kinetic-dialog .36s cubic-bezier(.16,1,.3,1) both}
.pointer-motion [data-magnetic]{translate:var(--magnet-x,0px) var(--magnet-y,0px);transition:translate .35s cubic-bezier(.16,1,.3,1),transform .2s ease,box-shadow .2s ease}
.cursor-follower{position:fixed;top:0;left:0;width:0;height:0;z-index:50;pointer-events:none;mix-blend-mode:normal;opacity:0;transition:opacity .18s;will-change:transform;display:none}
.cursor-follower:after{content:"";display:block;position:absolute;top:-5px;left:-5px;width:10px;height:10px;border:1.5px solid var(--blue);border-radius:50%;background:transparent;transition:width .2s,height .2s,top .2s,left .2s}
.pointer-motion .cursor-follower{display:block}
.cursor-follower.is-visible{opacity:1}
.cursor-follower.is-hovering:after{width:26px;height:26px;top:-13px;left:-13px}
.motion-toggle{position:fixed;right:15px;bottom:15px;z-index:40;display:flex;align-items:center;gap:8px;min-height:36px;border:1px solid var(--ink);background:var(--paper);padding:9px 12px;box-shadow:3px 3px 0 var(--purple);font-size:9px;line-height:1;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.motion-toggle[hidden]{display:none}.motion-toggle[disabled]{color:#645a74;cursor:default}
.motion-paused :is(.signal-travel,.orbit,.title-star){animation-play-state:paused!important}
.motion-offscreen .orbit,.motion-offscreen .title-star{animation-play-state:paused!important}
@keyframes kinetic-intro{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes kinetic-hero{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:translateY(0)}}
@keyframes kinetic-orbit{from{transform:translate(-50%,-50%) rotate(var(--orbit-scroll,0deg))}to{transform:translate(-50%,-50%) rotate(calc(360deg + var(--orbit-scroll,0deg)))}}
@keyframes kinetic-star{to{rotate:360deg}}
@keyframes kinetic-ticker{to{transform:translateX(-50%)}}
@keyframes kinetic-dialog{from{opacity:0;transform:translateY(28px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(hover:hover) and (pointer:fine){
 .motion-enabled .project-open:hover .project-art:after{transform:translateX(620%) rotate(-12deg)}
 .motion-enabled .project-open:hover .project-name{transform:translateY(-7px)}
 .motion-enabled .process-list li:hover{transform:translateY(-7px);background:#f3f3f3}
 .motion-enabled .brand:hover img{transform:scale(1.035);filter:drop-shadow(3px 3px 0 #0aafff8c)}
 .signal-strip:hover .signal-travel{animation-play-state:paused}
}
@media(max-width:760px){.motion-toggle{right:10px;bottom:10px;min-height:34px;font-size:8px;padding:9px}.orbit:before{width:23px;height:23px;top:-22px;border-width:4px}.signal-group{gap:25px;padding-right:25px}.signal-strip.has-ticker{padding-block:16px}}
@media(prefers-reduced-motion:reduce){
 .warp-grid,.cursor-follower{display:none!important}
 .art-photo,.art-sticker{animation:none!important;translate:none!important}
 .title-glyph,.service-symbol{transform:none!important}
 [data-reveal].reveal-pending{opacity:1!important;transform:none!important}
 :is(.signal-travel,.orbit,.title-star){animation:none!important}
 [data-magnetic]{translate:none!important}
}

/* Actionable work shares the hero's material language at a quieter amplitude. */
.pointer-motion .project:not(.reveal-pending),.pointer-motion .craft-project{transform:translateY(var(--card-lift,0px)) perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s cubic-bezier(.16,1,.3,1);transform-origin:50% 50%}
.pointer-motion :is(.project,.craft-project).is-tilting{--card-lift:-5px;transition:transform .16s ease-out}
.pointer-motion .craft-project .craft-cover{translate:var(--art-x,0px) var(--art-y,0px);transition:translate .25s ease-out}
.motion-enabled :is(.project-meta,.craft-meta,.button,.text-link,.contact-email)>.arrow-icon{transition:translate .3s cubic-bezier(.16,1,.3,1),rotate .3s}
@media(hover:hover) and (pointer:fine){
 .motion-enabled :is(.project-open,.craft-open):hover .arrow-icon,.motion-enabled :is(.button,.text-link,.contact-email):hover>.arrow-icon{translate:4px -4px}
 .pointer-motion .hero .button-dark:hover{background:var(--purple);box-shadow:7px 7px 0 var(--blue);transform:translate(-2px,-2px)}
}
@media(prefers-reduced-motion:reduce){:is(.project,.craft-project){transform:none!important}:is(.craft-cover,.arrow-icon,.title-line){translate:none!important;transform:none!important}}