/* Individual transform properties keep the original artwork angles intact. */
@keyframes desk-arrive{0%{opacity:0;translate:0 42px;scale:.82}70%{opacity:1;translate:0 -5px;scale:1.045}100%{opacity:1;translate:0 0;scale:1}}
@keyframes desk-float{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -12px;rotate:2deg}}
@keyframes grid-breathe{50%{opacity:.5;scale:1.04}}
@keyframes modal-pop{from{opacity:0;translate:0 24px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
.hero-blue{animation:desk-arrive 1s cubic-bezier(.2,.8,.2,1) both}
.hero-grid,.contact-grid{animation:grid-breathe 12s ease-in-out infinite;pointer-events:none}
.intro nav{animation:desk-arrive .8s .1s both}
.desk-object{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;pointer-events:auto!important;translate:var(--drag-x,0px) var(--drag-y,0px);outline-offset:8px;animation:desk-arrive .85s var(--arrival,0s) cubic-bezier(.2,.8,.2,1) backwards;animation-play-state:paused;transition:filter .25s}
.desk-object img{-webkit-user-drag:none;user-select:none}
.desk-object:hover,.desk-object:focus-visible{filter:drop-shadow(0 10px 9px #101d4033)}
.desk-object:focus-visible{outline:2px dashed #ffb60d}
.desk-object.is-dragging{touch-action:none;cursor:grabbing;filter:drop-shadow(0 18px 12px #101d4055);animation:none}
.desk-object.was-moved{animation:none}
.desk-tools{position:absolute;z-index:30;top:55%;left:35%;display:flex;gap:12px;align-items:center;color:#395ab3;background:#f0f2f1ed;padding:8px 14px;border-radius:99px;font:12px/1.4 Poppins,Arial,sans-serif;box-shadow:0 6px 18px #101d401a;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.desk-tools button{border:1px solid #395ab340;color:#395ab3;background:white;padding:7px 14px;border-radius:99px;white-space:nowrap;font-weight:600;font-size:12px;transition:background .2s}
.desk-tools button:hover{background:#395ab3;color:white}
.desk-help{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.motion-enter{opacity:0;translate:0 32px;scale:.98;transition:opacity .75s ease,translate .8s cubic-bezier(.16,1,.3,1),scale .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--stagger,0ms)}
.motion-enter.is-visible{opacity:1;translate:0 0;scale:1}
.notebook .coffee,.play img,.contact-smile,.letter-o img{animation:desk-float 6s ease-in-out infinite}
.notebook .portrait{animation:desk-float 8s -3s ease-in-out infinite}
.letter-o img{animation-duration:4s}
.pill,.hello,.filters button,.gallery-item button,.project-preview,.approach li,.detail-grid li,footer a,.text-link{transition:translate .3s,rotate .3s,scale .3s,box-shadow .3s,background-color .3s}
.pill:hover,.hello:hover,.filters button:hover,footer a:hover,.text-link:hover{translate:0 -4px;rotate:-2deg}
.pill:active,.hello:active,.filters button:active{scale:.94}
.project-preview:hover,.gallery-item button:hover{translate:0 -7px;rotate:-1deg;box-shadow:0 22px 35px #22252c20}
.projects article:nth-child(even) .project-preview:hover,.gallery-item:nth-child(even) button:hover{rotate:1deg}
.approach li:hover,.detail-grid li:hover{translate:8px 0}
.project-open{transition:translate .3s}.project-preview:hover .project-open{translate:6px 0}
.video-play{inset:auto 10px 10px auto;font-size:11px;background:#152237b3;border-radius:30px;padding:6px 10px;pointer-events:none}
.video-play::after{content:'View film';margin-left:5px}
.gallery-item button video{transition:scale .5s}.gallery-item button:hover video{scale:1.04}
.gallery-item[hidden]{display:none}
dialog[open]{animation:modal-pop .4s cubic-bezier(.16,1,.3,1) both}
dialog[open]::backdrop{animation:modal-pop .3s ease both}
body.page-away{opacity:0;translate:0 -10px;transition:opacity .18s,translate .18s}
@media(max-width:700px){
  .desk-tools{top:auto;bottom:14px;left:4%;right:4%;max-width:none;font-size:11px;gap:8px;padding:8px 12px;justify-content:space-between;border-radius:18px}
  .desk-tools span{max-width:180px;font-size:10px;line-height:1.25}
  .desk-tools button{font-size:11px;padding:6px 12px}
  .desk-object{outline-offset:3px}
  .video-play{inset:auto 6px 6px auto;font-size:10px;padding:4px 8px}
  .video-play::after{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-enter{opacity:1;translate:0 0;scale:1}}

/* A visible entrance even when the device asks to reduce movement. */
@keyframes desk-fade-in{from{opacity:0}to{opacity:1}}
.intro.arrival-ready .desk-object{animation-play-state:running}
@media(prefers-reduced-motion:reduce){
  .intro .desk-object{animation:desk-fade-in .7s var(--arrival,0s) ease-out backwards!important;animation-play-state:paused!important}
  .intro.arrival-ready .desk-object{animation-play-state:running!important}
  .intro .desk-object.was-moved,.intro .desk-object.is-dragging{animation:none!important}
  .motion-enter{opacity:0;translate:none;scale:1;transition:opacity .65s ease-out!important}
  .motion-enter.is-visible{opacity:1}
}