/* A shared stage for arrival, navigation and the characters throughout the site. */
html[data-entry="intro"]{overflow:hidden}
html[data-entry="intro"]:not(.intro-revealing) #site-shell{visibility:hidden}
#site-shell>main:focus{outline:none}
.contact-page{overflow-x:clip}
.sprite[role="button"]{cursor:pointer;pointer-events:auto}
.sprite[role="button"]:focus-visible{outline:1px dashed var(--ink);outline-offset:8px;border-radius:30%}
.project-image{transition:transform .55s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .project-image:hover{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
}
.page-transition{position:fixed;inset:0;z-index:110;visibility:hidden;pointer-events:none;display:flex;overflow:clip}
.transition-panel{width:33.334%;height:100%;background:var(--ink);transform:translateY(101%);margin-right:-1px}
.page-transition.is-active,html[data-entry="transition"] .page-transition{visibility:visible;pointer-events:auto}
html[data-entry="transition"] .transition-panel{transform:translateY(0)}
.transition-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:30px;color:var(--paper);opacity:0;pointer-events:none}
html[data-entry="transition"] .transition-copy{opacity:1}
.transition-eyebrow{position:absolute;left:var(--gutter);top:38px;font-size:12px}
#transition-destination{font-size:clamp(55px,10vw,170px);letter-spacing:-.065em;line-height:1.1}
.transition-arrow{font-size:clamp(40px,7vw,110px)}
.is-departing>main{animation:page-away .62s var(--ease) both}
.site-ready .is-entering .page-heading h1,.site-ready .is-entering .case-heading h1,.is-entering .page-heading h1,.is-entering .case-heading h1{animation:title-arrive 1s .12s var(--ease) both}
.is-entering .page-heading .eyebrow,.is-entering .heading-bottom,.is-entering .case-heading>p{animation:copy-arrive .9s .25s var(--ease) both}
.work-dialog[open]{animation:dialog-arrive .4s var(--ease)}
.dialog-media>img{animation:copy-arrive .4s var(--ease)}
.play-stage:not(.is-free) .work-item{animation:tile-arrive .65s var(--ease) both}
.play-stage:not(.is-free) .work-item:nth-child(3n+2){animation-delay:.06s}
.play-stage:not(.is-free) .work-item:nth-child(3n){animation-delay:.12s}
.mascot-line img{transform-origin:50% 95%;animation:mascot-breathe 4.5s ease-in-out infinite;animation-play-state:paused}
.mascot-line.is-in-view img{animation-play-state:running}
.mascot-line img:nth-child(2){animation-delay:-1.5s}.mascot-line img:nth-child(3){animation-delay:-3s}
.site-loader{position:fixed;inset:0;z-index:120;background:var(--ink);color:var(--paper);display:grid;grid-template-rows:auto minmax(0,1fr) auto;visibility:hidden;pointer-events:none;overflow:clip;padding:0 var(--gutter);isolation:isolate}
html[data-entry="intro"] .site-loader{visibility:visible;pointer-events:auto}
.loader-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 0;font-size:12px;position:relative;z-index:3}
#skip-intro{border-bottom:1px solid #f5f2ea66;padding:9px 0;display:inline-flex;gap:14px;align-items:center}
.site-loader :focus-visible{outline-color:var(--paper)}
.loader-stage{position:relative;width:100%;max-width:1600px;min-height:0;margin:auto;height:100%;isolation:isolate}
.loader-name{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(76px,min(23vw,35svh),340px);line-height:.78;font-weight:1000;letter-spacing:-.075em}
.loader-name>div{white-space:nowrap;overflow:clip;padding:.12em .1em .18em}
.loader-name>div:first-child{font-size:1.15em;margin-bottom:-.15em}
.loader-name>div+div{margin-top:-.03em}
.loader-name span{display:inline-block}
.loader-orbits{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--paper);stroke-width:.7;opacity:.2;transform-origin:center;pointer-events:none}
.loader-orbits path{stroke-dasharray:3 15;opacity:.55}
.loader-creature{position:absolute;z-index:2;pointer-events:none}
.loader-a{width:23%;left:4%;top:9%}.loader-b{width:19%;right:3%;top:1%}
.loader-c{width:17%;left:9%;bottom:1%}.loader-d{width:19%;right:13%;bottom:0}
.loader-spark{position:absolute;font-size:clamp(30px,6vw,90px);font-weight:400;line-height:1;z-index:1}
.spark-a{top:9%;left:60%}.spark-b{bottom:5%;left:42%;font-size:clamp(20px,3vw,50px)}
.loader-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:24px 0 32px;position:relative;z-index:3}
.loader-bottom p{font-size:clamp(14px,1.7vw,24px);letter-spacing:-.02em}
.loader-counter{display:flex;gap:14px;align-items:baseline;font-size:clamp(34px,5vw,76px);line-height:1;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.loader-counter>span:last-child{font-size:12px;letter-spacing:0;color:#f5f2ea99}
.loader-track{position:absolute;left:0;bottom:0;width:100%;height:3px;background:#f5f2ea22;z-index:4}
.loader-track>span{display:block;width:100%;height:100%;background:var(--paper);transform:scaleX(0);transform-origin:left}
html[data-entry="intro"] .loader-name span{animation:letter-tumble .85s calc(.1s + var(--letter)*.075s) var(--ease) both}
html[data-entry="intro"] .loader-name>div+div span{animation-delay:calc(.36s + var(--letter)*.07s)}
html[data-entry="intro"] .loader-creature{animation:creature-hello .9s .42s var(--ease) both}
html[data-entry="intro"] .loader-b{animation-delay:.62s}html[data-entry="intro"] .loader-c{animation-delay:.82s}html[data-entry="intro"] .loader-d{animation-delay:1.02s}
html[data-entry="intro"] .loader-orbits{animation:orbit-arrive 3.3s var(--ease) both}
html[data-entry="intro"] .loader-spark{animation:spark-turn 2.5s .3s var(--ease) both}
html[data-entry="intro"] .spark-b{animation-delay:.65s}
html[data-entry="intro"] .loader-track>span{animation:loader-track 2.7s ease-in-out both}
/* At the last beat, completed entrances become ordinary settled elements. */
html[data-entry="intro"] .site-loader[data-phase="03"] .loader-name span,
html[data-entry="intro"] .site-loader[data-phase="03"] .loader-creature{animation:none}
html[data-motion-paused="true"] .mascot-line img{animation-play-state:paused}
html[data-motion-paused="true"] #site-shell *,html[data-motion-paused="true"] #site-shell *::before,html[data-motion-paused="true"] #site-shell *::after{animation:none!important;transition:none!important}
html[data-motion-paused="true"] .project-image{transform:none}
@keyframes letter-tumble{from{opacity:0;transform:translateY(130%) rotate(16deg) scale(.65,1.25)}65%{opacity:1;transform:translateY(-5%) rotate(-2deg) scale(1.03,.97)}to{opacity:1;transform:none}}
@keyframes creature-hello{from{opacity:0;transform:translateY(65px) rotate(-15deg) scale(.5)}72%{opacity:1;transform:translateY(-8px) rotate(3deg) scale(1.04)}to{opacity:1;transform:none}}
@keyframes orbit-arrive{from{opacity:0;transform:rotate(-70deg) scale(.55)}to{opacity:.2;transform:rotate(12deg) scale(1)}}
@keyframes spark-turn{0%{opacity:0;transform:rotate(-180deg) scale(0)}35%{opacity:1;transform:rotate(20deg) scale(1.2)}100%{opacity:1;transform:rotate(150deg) scale(1)}}
@keyframes loader-track{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes title-arrive{from{opacity:0;clip-path:inset(100% 0 0);transform:translateY(32px)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes copy-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes page-away{to{opacity:.35;transform:translateY(-12px)}}
@keyframes tile-arrive{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mascot-breathe{0%,100%{transform:rotate(-1deg) scaleY(1)}50%{transform:rotate(1.5deg) scaleY(1.025)}}
@media(max-width:760px){
  .loader-top{padding:20px 0;font-size:10px}.loader-top>span{max-width:140px}
  #skip-intro{gap:8px;font-size:10px}
  .loader-name{font-size:24vw}
  .loader-a{width:31%;left:-1%;top:15%}.loader-b{width:28%;right:-3%;top:10%}
  .loader-c{width:25%;left:1%;bottom:12%}.loader-d{width:27%;right:4%;bottom:12%}
  .loader-orbits{width:150%;left:-25%}.spark-a{top:12%;left:49%}.spark-b{bottom:13%}
  .loader-bottom{padding:20px 0 27px}.loader-counter{gap:10px}.loader-counter>span:last-child{font-size:10px}
  .transition-copy{gap:15px}.transition-eyebrow{top:28px}
}
@media(prefers-reduced-motion:reduce){
  .site-loader,.page-transition{display:none!important}
  .project-image{transform:none!important}
  .mascot-line img{animation:none}
}