/* Rotech motion layer: loaded after style.css and experience.css */

/* --- smooth page-to-page transitions (modern browsers; others just navigate) --- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.28s ease both vt-out}
::view-transition-new(root){animation:.42s cubic-bezier(.2,.7,.2,1) both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

/* --- fixes --- */
.solution-dock{transition:opacity .3s,transform .3s}
.solution-dock.dock-hidden{opacity:0;transform:translateY(20px);pointer-events:none}
@media (max-width:640px){.solution-dock{display:none!important}}

/* --- hero headline: lines rise in once on load --- */
.line-mask{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.line-mask>span{display:block;transform:translateY(105%);animation:line-up .9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes line-up{to{transform:none}}

/* --- buttons: label rolls up on hover --- */
.roll{display:inline-block;overflow:hidden;height:1.2em;line-height:1.2em;vertical-align:-.15em}
.roll-in{display:block;transition:transform .38s cubic-bezier(.65,0,.25,1)}
.roll-in::after{content:attr(data-t);display:block}
.btn:hover .roll-in,.btn:focus-visible .roll-in{transform:translateY(-1.2em)}

/* --- images unveil as they enter (never fully hidden, so nothing can get stuck) --- */
.unveil{clip-path:inset(8% 5% 8% 5% round 14px);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1)}
.unveil img{transform:scale(1.1);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.unveil.shown{clip-path:inset(0 0 0 0 round 0px)}
.unveil.shown img{transform:none}

/* --- scroll-linked text band --- */
.word-band{background:var(--grid);color:var(--on-grid);overflow:hidden;padding:clamp(1.4rem,3vw,2.2rem) 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.word-band .track{display:flex;width:max-content;gap:2.4rem;will-change:transform}
.word-band span{font-family:var(--head);font-weight:700;font-size:clamp(2.6rem,7vw,6rem);line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:2.4rem}
.word-band span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--on-grid-muted)}
.word-band i{display:inline-block;width:.5em;height:.5em;background:var(--live);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center/contain no-repeat}

/* --- big closing call to action (replaces the yellow band) --- */
.mega-cta{background:var(--grid);color:var(--on-grid);padding:clamp(4rem,10vw,8rem) 0 clamp(3rem,7vw,5rem);position:relative;overflow:hidden}
.mega-cta .eyebrow{color:var(--live);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;margin-bottom:1.2rem}
.mega-link{display:block;text-decoration:none;font-family:var(--head);font-weight:700;font-size:clamp(2.8rem,8.4vw,7.4rem);line-height:.95;letter-spacing:-.01em;max-width:14ch}
.mega-link .ul{background:linear-gradient(var(--live),var(--live)) 0 100%/0 .08em no-repeat;transition:background-size .6s cubic-bezier(.16,1,.3,1)}
.mega-link:hover .ul,.mega-link:focus-visible .ul{background-size:100% .08em}
.mega-link .arrow{display:inline-block;width:.7em;height:.7em;vertical-align:-.02em;margin-left:.15em;transition:transform .4s cubic-bezier(.16,1,.3,1);color:var(--live)}
.mega-link:hover .arrow{transform:translate(.08em,-.08em) rotate(0)}
.mega-row{display:flex;align-items:center;gap:clamp(1.2rem,4vw,3rem);flex-wrap:wrap;margin-top:clamp(2rem,5vw,3.4rem);padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14)}
.mega-row a{color:var(--on-grid);text-decoration:none;font-weight:500}
.mega-row a:hover{color:var(--live)}
.magnet{display:inline-grid;place-items:center;width:clamp(120px,14vw,170px);aspect-ratio:1;border-radius:50%;background:var(--live);color:var(--live-ink)!important;font-family:var(--head);font-weight:700;font-size:1.15rem;text-align:center;line-height:1.1;padding:1rem;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s;will-change:transform}
.magnet:hover{background:var(--live-2)}
.mega-cta .glow{position:absolute;width:60vw;height:60vw;right:-20vw;top:-30vw;background:radial-gradient(closest-side,rgba(242,183,5,.16),transparent);pointer-events:none}

/* --- cursor bubble + floating project preview (desktop pointers only) --- */
.cursor-bubble{position:fixed;left:0;top:0;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;background:var(--live);color:var(--live-ink);display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:1rem;pointer-events:none;z-index:130;transform:scale(0);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.cursor-bubble.on{transform:scale(1)}
.hover-preview{position:fixed;left:0;top:0;width:340px;aspect-ratio:4/3;margin:-128px 0 0 40px;border-radius:12px;overflow:hidden;pointer-events:none;z-index:125;opacity:0;transform:scale(.85) rotate(-3deg);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);background:var(--grid-2)}
.hover-preview.on{opacity:1;transform:none}
.hover-preview img{width:100%;height:100%;object-fit:cover}

/* project list as a big index on desktop: names first, photo follows the cursor */
.fine #projgrid[data-view=list] .pcard{padding-left:0;min-height:0;padding-top:1.5rem;padding-bottom:1.5rem;transition:padding .35s cubic-bezier(.16,1,.3,1),background .2s;position:relative}
.fine #projgrid[data-view=list] .pcard img{opacity:0}
.fine #projgrid[data-view=list] .pcard.noimg::before{display:none}
.fine #projgrid[data-view=list] .pcard .cap strong{font-size:clamp(2rem,4vw,3.2rem);transition:color .2s}
.fine #projgrid[data-view=list] .pcard::before{content:"";position:absolute;left:0;top:50%;width:0;height:3px;background:var(--live);transition:width .35s cubic-bezier(.16,1,.3,1)}
.fine #projgrid[data-view=list] .pcard:hover{padding-left:3.2rem}
.fine #projgrid[data-view=list] .pcard:hover::before{width:2.2rem}




@media (prefers-reduced-motion:reduce){
  .line-mask>span{transform:none;animation:none}
  .unveil,.unveil img{clip-path:none;transform:none;transition:none}
  .roll-in{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* video captions: direct YouTube link */
.vcap .yt-out{display:inline-block;margin-left:.4rem;font-size:.85rem;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:1.5px solid var(--live)}
.vcap .yt-out:hover{color:var(--ink)}