/* getinweb motion layer — only active when html.mo is set by motion.js (JS on + no reduced motion) */
:root{--ease:cubic-bezier(.22,.8,.24,1)}
/* 1 headline word reveal */
.mo .sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.mo .sw>span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--ease);transition-delay:calc(var(--i)*45ms)}
.mo .in .sw>span,.mo .in.sw>span{transform:none}
/* 2 staggered fade-up */
.mo .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.mo .rv.in{opacity:1;transform:none}
/* 3 smart header */
header{transition:transform .35s var(--ease)}
header::before{content:"";position:absolute;inset:0;background:rgba(24,61,53,.94);box-shadow:0 6px 24px rgba(0,0,0,.18);opacity:0;transition:opacity .3s}
header.stuck{position:fixed;top:0}header.stuck::before{opacity:1}header.stuck nav.top{padding-block:12px}
header.hid{transform:translateY(-100%)}header:focus-within{transform:none}
nav.top{position:relative;transition:padding .3s var(--ease)}
/* 4 capability ticker */
.tick{background:var(--cr);border-bottom:1px solid var(--line);overflow:hidden;position:relative;display:flex;align-items:center}
.tick .tr{display:flex;width:max-content;padding:18px 0}
.tick ul{display:flex;gap:14px;list-style:none;margin:0;padding:0 14px 0 0}
.tick li{font:500 14px var(--mono);color:var(--g);border:1px solid #d9d4c8;border-radius:999px;padding:8px 16px;white-space:nowrap;background:#fff}
.tick li:nth-child(3n+2){color:#41705c}.tick li:nth-child(3n) {border-color:rgba(201,108,75,.45)}
.tick li::before{content:"</ ";color:var(--te-t,#9a4a2e)}
.mo .tick .tr{animation:tk 48s linear infinite}.tick.paused .tr,.tick:hover .tr{animation-play-state:paused}
.tick .tp{position:absolute;right:10px;z-index:1;background:var(--cr);border:1px solid #d9d4c8;border-radius:6px;font:500 12px var(--mono);color:var(--g);min-width:36px;min-height:32px;cursor:pointer}
.tick:not(.live) .tp,.tick:not(.live) ul[aria-hidden]{display:none}.tick:not(.live) .tr{flex-wrap:wrap;width:auto;padding-inline:clamp(20px,5vw,48px)}.tick:not(.live) ul{flex-wrap:wrap;gap:10px}
@keyframes tk{to{transform:translateX(-50%)}}
/* 5 project cards: image drift + follower pill */
.pc .im img{transition:transform .9s var(--ease)}.pc:hover .im img,.pc:focus-visible .im img{transform:scale(1.045)}
.pc .lk::after{display:inline-block;transition:transform .3s var(--ease)}.pc:hover .lk::after,.pc:focus-visible .lk::after{transform:translateX(5px)}
.pc .im{position:relative}
.fol{position:absolute;left:0;top:0;pointer-events:none;background:#183D35;color:#F7F5F0;font:600 13px var(--mono);padding:9px 14px;border-radius:999px;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .2s,transform .25s var(--ease);white-space:nowrap;z-index:2}
.fol.on{opacity:1}
@media (prefers-reduced-motion:reduce){.tick .tr{animation:none!important}.pc .im img,.pc .lk::after,header,header::before{transition:none}.fol{display:none}}
/* 6 contact background: generated hands-on-laptop clip + network overlay */
#kontakt{position:relative;overflow:hidden;background:#0c201b url(assets/contact-poster.jpg) right center/cover}
#kontakt>.cbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}#kontakt.has-video>.cbg{display:block}
#kontakt>.net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#kontakt::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(8,22,18,.92) 0%,rgba(8,22,18,.86) 45%,rgba(8,22,18,.62) 100%)}
#kontakt>.net{z-index:0}#kontakt>.wrap{position:relative;z-index:1}
@media(max-width:767px){#kontakt::before{background:rgba(8,22,18,.88)}}
/* contact: direct email/phone instead of form */
.cbox{align-self:center;background:rgba(8,22,18,.72);border:1px solid rgba(157,194,176,.28);border-radius:14px;padding:clamp(24px,3vw,40px);display:grid;gap:14px}
.cbox .ck{margin:0;font:500 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9DC2B0}
.cbig{font:600 clamp(20px,2.2vw,28px)/1.3 var(--mono);color:#F7F5F0;text-decoration:none;word-break:break-word}.cbig:hover{text-decoration:underline;text-underline-offset:4px}
.cbox .cta{margin-top:10px}.cbox a:focus-visible{outline:3px solid #C96C4B;outline-offset:3px}