/* JavaScript opts in after observers are ready. Without it, every element is visible. */
body[data-motion="on"] [data-reveal]{
  --reveal-x:0px;--reveal-y:34px;
  opacity:0;translate:var(--reveal-x) var(--reveal-y);
  transition:opacity .65s ease,translate .85s cubic-bezier(.16,1,.3,1),rotate .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay,0ms);
}
body[data-motion="on"] [data-reveal="title"]{--reveal-y:45px;transition-duration:.75s,1.1s,1s}
body[data-motion="on"] [data-reveal="fade"]{--reveal-y:0px}
body[data-motion="on"] [data-reveal="side"]{--reveal-y:10px}
body[data-motion="on"] [data-reveal="print"]{--reveal-y:42px;rotate:-.6deg}
body[data-motion="on"] [data-reveal].is-revealed,
body[data-motion="on"] [data-reveal]:focus-within{opacity:1;translate:0 0;rotate:0deg}
body[data-motion="on"] [data-reveal].is-entering{will-change:opacity,translate}
body[data-motion="on"] [data-reveal].motion-immediate{transition:none!important}
body[data-motion="on"] [data-drift]{translate:0 var(--drift-y,0px);rotate:var(--drift-turn,0deg)}
body[data-motion="on"] [data-drift].is-drifting{will-change:translate,rotate}
body[data-motion="on"] [data-drift][data-reveal="fade"]{transition-property:opacity;transition-duration:.8s}
body[data-motion="on"] .timeline-list:before{background:var(--rule)}
body[data-motion="on"] .timeline-list:after{
  content:'';position:absolute;left:4.5%;top:0;bottom:0;width:2px;
  background:var(--blue);transform:scaleY(var(--timeline-progress,0));transform-origin:top;
  pointer-events:none;
}
/* These titles already contain deliberate visual line breaks. */
.exp-collaborate h1 > [aria-hidden] > span,
.exp-blog h1 > [aria-hidden] > span{position:relative}
@media(max-width:760px){
  body[data-motion="on"] [data-reveal]{--reveal-y:22px}
  body[data-motion="on"] [data-reveal="title"]{--reveal-y:26px}
  body[data-motion="on"] [data-reveal="side"]{--reveal-x:0px!important;--reveal-y:22px}
  body[data-motion="on"] [data-reveal="fade"]{--reveal-y:0px}
  body[data-motion="on"] .timeline-list:after{left:0}
}
body[data-motion="off"] [data-reveal]{opacity:1;translate:none;rotate:none}
body[data-motion="off"] [data-drift]{translate:none;rotate:none;will-change:auto}
body[data-motion="off"] *,body[data-motion="off"] *:before,body[data-motion="off"] *:after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important;
}
body[data-motion="off"] :is(.message-envelope,.gallery-shot img,.team-photo img,.exp-photo-main img,.exp-photo-small img,.visual-corner,.blog-art strong,.filter-btn){translate:none!important;rotate:none!important;scale:none!important}
body[data-motion="off"] .project-card>a:hover .photo-visual img{transform:none!important}
@media(prefers-reduced-motion:reduce){
  body[data-motion] [data-reveal]{opacity:1;translate:none;rotate:none;transition:none!important}
  body[data-motion] [data-drift]{translate:none;rotate:none;will-change:auto}
  body[data-motion] .timeline-list:after{transform:none}
}
@media print{body[data-motion] [data-reveal]{opacity:1;translate:none;rotate:none}body[data-motion] [data-drift]{translate:none;rotate:none}}