/* Tandem AI shared motion layer. Everything here is gated on html.tm-on,
   which motion.js only sets when IntersectionObserver exists and the
   visitor has not asked for reduced motion. Without it nothing is hidden. */

/* Content stays readable even if an observer never fires. Animate only
   when a card arrives, never hide it while it waits below the fold. */
html.tm-on .tm-r.tm-enter{animation:tmRise .8s cubic-bezier(.22,.61,.36,1) var(--tm-d,0ms) both}

/* step connector draws itself in once */
html.tm-on .steps.tm-line:before{transform:scaleX(0);transform-origin:left center;transition:transform 1.6s cubic-bezier(.22,.61,.36,1) .25s}
html.tm-on .steps.tm-line.tm-in:before{transform:scaleX(1)}

/* timeline spine grows down */
html.tm-on .tl.tm-line:before{transform:scaleY(0);transform-origin:top center;transition:transform 1.8s cubic-bezier(.22,.61,.36,1) .1s}
html.tm-on .tl.tm-line.tm-in:before{transform:scaleY(1)}

/* ---------- small interactive refinements ---------- */
html.tm-on .btn{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
html.tm-on .btn:not(.bk-off):not(:disabled):not([aria-disabled="true"]):hover{transform:translateY(-1px);box-shadow:0 12px 24px -16px rgba(13,79,92,.55)}
html.tm-on .btn:not(.bk-off):not(:disabled):not([aria-disabled="true"]):active{transform:translateY(0);transition-duration:.08s}
html.tm-on .ic .po,html.tm-on .post .pim{overflow:hidden}
html.tm-on .ic .po img,html.tm-on .bt .im img,html.tm-on .post .pim img,html.tm-on .shot img{transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
html.tm-on .ic:hover .po img,html.tm-on .bt:hover .im img,html.tm-on .post:hover .pim img,html.tm-on .shot:hover img{transform:scale(1.03)}
html.tm-on .ic .go{display:inline-block;transition:transform .3s ease}
html.tm-on .ic:hover .go{transform:translateX(3px)}
html.tm-on .ic .b i{transform-origin:left center;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
html.tm-on .ic:hover .b i{transform:scaleX(1.5)}
html.tm-on .ag img,html.tm-on .agent img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
html.tm-on .ag:hover img,html.tm-on .agent:hover img{transform:scale(1.04)}
html.tm-on .ag,html.tm-on .agent,html.tm-on .bt,html.tm-on .sv,html.tm-on .post,html.tm-on .p,html.tm-on .pe,html.tm-on .wu-g>li,html.tm-on .yi-g li,html.tm-on .cap>div,html.tm-on details{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
html.tm-on .ag:hover,html.tm-on .agent:hover,html.tm-on .bt:hover,html.tm-on .sv:hover,html.tm-on .post:hover,html.tm-on .pe:hover{box-shadow:0 26px 50px -38px rgba(13,79,92,.5);border-color:#d3dfdb}
html.tm-on .wu-g>li:hover,html.tm-on .yi-g li:hover,html.tm-on .cap>div:hover{border-color:#cfdcd8;box-shadow:0 16px 30px -26px rgba(13,79,92,.45)}
html.tm-on .yi-g li i{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
html.tm-on .yi-g li:hover i{transform:rotate(-8deg) scale(1.06)}
html.tm-on details summary{transition:color .2s ease}
html.tm-on details summary:hover{color:var(--petrol)}
html.tm-on details[open] p{animation:tmOpen .4s ease-out both}
html.tm-on .tabs button{transition:background-color .25s ease,border-color .25s ease,color .25s ease}
html.tm-on .screen>img.on{animation:tmFade .45s ease-out both}
html.tm-on .gal img{transition:filter .6s ease}
html.tm-on .gal img:hover{filter:saturate(1.08) brightness(1.02)}

/* ---------- discreet ambient life (paused offscreen / hidden tab) ---------- */
html.tm-on .yi:before{animation:tmDrift 22s ease-in-out infinite alternate}
html.tm-on .hero:before{animation:tmDrift 26s ease-in-out infinite alternate}
html.tm-on section .kick:before{animation:tmBreath 4.8s ease-in-out infinite}
html.tm-on .tl .t.tm-in:before{animation:tmDot .9s cubic-bezier(.22,.61,.36,1) var(--tm-d,0ms) both}
html.tm-on .st .n{transition:box-shadow .6s ease}
html.tm-on .st.tm-in .n{animation:tmRing 1.4s ease-out calc(var(--tm-d,0ms) + .35s) both}

/* pause continuous loops when their section is offscreen or tab is hidden */
html.tm-on .tm-amb:not(.tm-live) .kick:before,
html.tm-on .tm-amb:not(.tm-live).yi:before,
html.tm-on .tm-amb:not(.tm-live) .yi:before,
html.tm-on .tm-amb:not(.tm-live).hero:before,
html.tm-on .tm-amb:not(.tm-live) .v-wave i,
html.tm-on .tm-amb:not(.tm-live) .pick i,
html.tm-on .tm-amb:not(.tm-live) .orb i,
html.tm-on.tm-hidden *,html.tm-on.tm-hidden *:before,html.tm-on.tm-hidden *:after{animation-play-state:paused!important}

@keyframes tmDrift{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-18px,14px,0) rotate(8deg)}}
@keyframes tmBreath{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes tmDot{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes tmRing{0%{box-shadow:0 0 0 0 rgba(59,169,180,.28)}100%{box-shadow:0 0 0 12px rgba(59,169,180,0)}}
@keyframes tmOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes tmFade{from{opacity:.25}to{opacity:1}}
@keyframes tmRise{from{opacity:.55;translate:0 10px}to{opacity:1;translate:0 0}}

@media (prefers-reduced-motion:reduce){
  .v-wave i,.pick i,.orb i{animation:none!important}
  html.tm-on .tm-r{opacity:1!important;translate:none!important;transition:none!important}
  html.tm-on .steps.tm-line:before,html.tm-on .tl.tm-line:before{transform:none!important;transition:none!important}
  html.tm-on *,html.tm-on *:before{animation:none!important}
  html.tm-on .btn:hover,html.tm-on .ic:hover .po img,html.tm-on .bt:hover .im img,html.tm-on .post:hover .pim img,html.tm-on .shot:hover img,html.tm-on .ag:hover img,html.tm-on .agent:hover img,html.tm-on .ic:hover .go,html.tm-on .ic:hover .b i,html.tm-on .yi-g li:hover i{transform:none}
}
@media print{html.tm-on .tm-r{opacity:1!important;translate:none!important}}