/* The card-to-page move. Only transform and opacity run.
   The card's box is set once; the motion is a scale and a slide.

   These pages are separate documents. The click animation runs, then the
   browser loads the next URL. This tells the browser to keep the current
   page on screen until that next page is ready, so the gap between them
   is not a blank reload. The motion itself is still the CSS above. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  /* Cut across once the next page is ready. A fade here would fade
     into that page's first frame, which starts blank on purpose.
     About → Work is the exception just below. */
  animation-duration: 0s;
}
/* About → Work. The portrait resizes into its homepage spot while
   About fades out and the homepage fades in. Same short moment.
   The portrait is its own snapshot, so this fade does not hide it. */
html.is-face-home::view-transition-old(root) {
  animation-name: lw-vt-out !important;
  animation-duration: .45s !important;
  animation-timing-function: cubic-bezier(.65, 0, .2, 1) !important;
  animation-fill-mode: both !important;
}
html.is-face-home::view-transition-new(root) {
  animation-name: lw-vt-in !important;
  animation-duration: .45s !important;
  animation-timing-function: cubic-bezier(.65, 0, .2, 1) !important;
  animation-fill-mode: both !important;
}
@keyframes lw-vt-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes lw-vt-in { from { opacity: 0 } to { opacity: 1 } }
html.is-face-home .intro .face { view-transition-name: lw-face; }
html.is-face-home::view-transition-group(lw-face) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(.65, 0, .2, 1);
  border-radius: 999px;
  overflow: hidden;
}
html.is-face-home::view-transition-old(lw-face),
html.is-face-home::view-transition-new(lw-face) {
  animation: none;
  opacity: 1;
}
@media (min-width: 900px) {
  html.is-face-home .intro .logo { view-transition-name: lw-logo; }
}
@media (max-width: 899px) {
  html.is-face-home .topbar .logo { view-transition-name: lw-logo; }
}
html.is-face-home::view-transition-group(lw-logo) { animation: none; }
html.is-face-home::view-transition-old(lw-logo) { display: none; }
html.is-face-home::view-transition-new(lw-logo) {
  animation: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

html.is-opening,
html.is-returning{overflow:hidden}

html.is-opening .intro .face,
html.is-opening .intro h1,
html.is-opening .intro .lede{
  animation:lw-lift .6s var(--ease-move) both;
}
html.is-opening .intro h1{animation-delay:.05s}
html.is-opening .intro .lede{animation-delay:.1s}
@keyframes lw-lift{
  to{opacity:0;transform:translateY(-26px) scale(.94)}
}
html.is-opening .hnav,
html.is-nav-out .hnav{
  transform-origin:top center;
  animation:lw-nav-up .32s cubic-bezier(.5,0,.75,0) both,lw-fade .2s ease .12s both;
}
@keyframes lw-nav-up{to{transform:perspective(700px) rotateX(92deg)}}
@keyframes lw-fade{to{opacity:0}}

html.is-opening .rail > :not(.is-morph){
  animation:lw-drop .6s ease both;
}
@keyframes lw-drop{to{opacity:0;transform:translateY(80px)}}

html.is-opening .is-morph .quest-copy,
html.is-opening .is-morph .shipped-copy,
html.is-opening .is-morph .pills{
  animation:lw-copy .35s ease both;
}
/* The picture grows to fill the card, so it lands on the case-study hero. */
html.is-opening .is-morph .shipped-visual{
  bottom:0;
  transition:bottom .8s var(--ease-move);
}
@keyframes lw-copy{to{opacity:0;transform:translateY(14px)}}

/* Coming back: hold the card's place so the column doesn't jump,
   and keep the intro hidden until the card has shrunk home. */
html.is-returning[data-back="closet"] .rail::before{
  content:"";
  display:block;
  height:var(--hold,780px);
}
html.is-returning .intro .face,
html.is-returning .intro h1,
html.is-returning .intro .lede,
html.is-returning .hnav,
html.is-returning .rail > *,
html.is-returning .quest-copy,
html.is-returning .shipped-copy,
html.is-returning .pills{opacity:0}
html.is-returning[data-back="closet"] .card[data-case="closet"],
html.is-returning[data-back="attentive"] .card[data-case="attentive"],
html.is-returning[data-back="knotel"] .card[data-case="knotel"],
html.is-returning[data-back="atlassian"] .card[data-case="atlassian"],
html.is-returning[data-back="transactional"] .card[data-case="transactional"]{
  position:fixed;
  z-index:40;
  left:24px;
  top:82px;
  width:calc(100vw - 48px);
  height:clamp(420px,66vh,720px);
  margin:0;
  border-radius:28px 28px 0 0;
  opacity:1;
}
html.is-returning[data-back="attentive"] .card[data-case="attentive"] .shipped-visual,
html.is-returning[data-back="knotel"] .card[data-case="knotel"] .shipped-visual{bottom:0}
html.is-returning.is-back .intro .face{
  animation:lw-back .5s var(--ease-move) .1s both;
}
html.is-returning.is-back .intro h1{animation:lw-back .5s var(--ease-move) .18s both}
html.is-returning.is-back .intro .lede{animation:lw-back .5s var(--ease-move) .26s both}
html.is-returning.is-back .hnav{
  transform-origin:top center;
  animation:lw-nav-down .55s var(--ease-pop) .92s both;
}
html.is-returning.is-back .rail > *{
  animation:lw-rise .5s ease .2s both;
}
html.is-returning.is-back[data-back="closet"] .card[data-case="closet"],
html.is-returning.is-back[data-back="attentive"] .card[data-case="attentive"],
html.is-returning.is-back[data-back="knotel"] .card[data-case="knotel"],
html.is-returning.is-back[data-back="atlassian"] .card[data-case="atlassian"],
html.is-returning.is-back[data-back="transactional"] .card[data-case="transactional"]{animation:none}
html.is-returning.is-back[data-back="attentive"] .card[data-case="attentive"] .shipped-visual,
html.is-returning.is-back[data-back="knotel"] .card[data-case="knotel"] .shipped-visual{
  bottom:168px;
  transition:bottom .8s var(--ease-move);
}
@keyframes lw-back{
  from{opacity:0;transform:translateY(-26px) scale(.94)}
  to{opacity:1;transform:none}
}
@keyframes lw-nav-down{
  from{opacity:0;transform:perspective(700px) rotateX(92deg)}
  to{opacity:1;transform:none}
}
@keyframes lw-rise{
  from{opacity:0;transform:translateY(80px)}
  to{opacity:1;transform:none}
}
html.is-returning.is-back .quest-copy,
html.is-returning.is-back .shipped-copy,
html.is-returning.is-back .pills{
  animation:lw-copy-in .35s ease .5s both;
}
@keyframes lw-copy-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* Arrival on the case study: the bar and the headline finish the move. */
html.is-arriving .case-top{animation:lw-fade-in .35s ease both}
html.is-arriving .case-lead,
html.is-arriving .case-head{animation:lw-rise .5s ease .12s both}
@media (min-width:900px){
  html.is-arriving .tnav{
    transform-origin:top center;
    animation:lw-nav-down-case .55s var(--ease-pop) .2s both;
  }
}
@keyframes lw-nav-down-case{
  from{opacity:0;transform:perspective(700px) translateX(-50%) rotateX(-96deg)}
  to{opacity:1;transform:translateX(-50%)}
}

/* Scrolled-away close: the card fades back into its spot. No morph. */
html.is-fading-in .card.quest{animation:lw-card-in .5s ease .4s both}
html.is-fading-in .intro .face,
html.is-fading-in .intro h1,
html.is-fading-in .intro .lede,
html.is-fading-in .hnav,
html.is-fading-in .rail > :not(.card.quest){animation:lw-fade-in .4s ease .2s both}
@keyframes lw-card-in{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}
@keyframes lw-fade-in{from{opacity:0}to{opacity:1}}

html.is-leaving .case-card{animation:lw-case-out .27s ease both}
@keyframes lw-case-out{to{opacity:0;transform:scale(.98)}}

@media (max-width:899px){
  html.is-returning[data-back="closet"] .card[data-case="closet"],
  html.is-returning[data-back="attentive"] .card[data-case="attentive"],
  html.is-returning[data-back="knotel"] .card[data-case="knotel"],
  html.is-returning[data-back="atlassian"] .card[data-case="atlassian"],
  html.is-returning[data-back="transactional"] .card[data-case="transactional"]{left:16px;width:calc(100vw - 32px);top:82px;height:56vh}
}

/* About, from the homepage. The portrait flies to its spot on the about
   page while everything else fades from top to bottom. The wordmark stays. */
html.is-about-out{overflow:hidden}
html.is-about-out .intro h1,
html.is-about-out .intro .lede,
html.is-about-out .hnav,
html.is-about-out .topbar nav,
html.is-about-out .rail > *{
  animation:lw-fade .45s ease both;
}
html.is-about-out .intro .logo,
html.is-about-out .topbar .logo{opacity:1}
html.is-about-out .intro > .face{visibility:hidden}
.lw-face-ghost{
  box-sizing:border-box;
  border-radius:999px;
  padding:3px;
  background:var(--lilac-ring,#B8A6FF);
  pointer-events:none;
  z-index:80;
}
.lw-face-ghost .face-crop{
  display:block;
  width:100%;
  height:100%;
  border-radius:999px;
  overflow:hidden;
}
.lw-face-ghost img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 48%;
  transform:translateX(9.756%) scale(1.525);
  transform-origin:center 48%;
}

/* About page: the portrait is already in place. The rest fades in
   from the nav down to the footer. The wordmark does not fade. */
html.is-face-hold body.about-page .face:not(.lw-face-ghost){visibility:hidden}
html.is-arriving body.about-page .case-top,
html.is-arriving body.about-page main{animation:none}
html.is-arriving body.about-page .tnav{animation:lw-fade-in .4s ease both}
html.is-arriving body.about-page .about-hero h1{animation:lw-fade-in .4s ease .08s both}
html.is-arriving body.about-page .about-lead{animation:lw-fade-in .4s ease .14s both}
html.is-arriving body.about-page .about-aside{animation:lw-fade-in .4s ease .2s both}
html.is-arriving body.about-page .about-story > *{animation:lw-fade-in .4s ease both}
html.is-arriving body.about-page .about-story > *:nth-child(1){animation-delay:.28s}
html.is-arriving body.about-page .about-story > *:nth-child(2){animation-delay:.33s}
html.is-arriving body.about-page .about-story > *:nth-child(3){animation-delay:.38s}
html.is-arriving body.about-page .about-story > *:nth-child(4){animation-delay:.43s}
html.is-arriving body.about-page .about-story > *:nth-child(5){animation-delay:.48s}
html.is-arriving body.about-page .about-story > *:nth-child(6){animation-delay:.53s}
html.is-arriving body.about-page .about-story > *:nth-child(7){animation-delay:.58s}
html.is-arriving body.about-page .about-story > *:nth-child(8){animation-delay:.63s}
html.is-arriving body.about-page .about-story > *:nth-child(9){animation-delay:.68s}
html.is-arriving body.about-page .hello{animation:lw-fade-in .4s ease .76s both}

/* Work in the top nav folds up, then the homepage comes back in pieces. */
html.is-work-out .tnav{
  transform-origin:top center;
  animation:lw-nav-away .4s cubic-bezier(.45,0,.7,0) both;
}
@keyframes lw-nav-away{
  from{opacity:1;transform:perspective(700px) translateX(-50%) rotateX(0)}
  to{opacity:0;transform:perspective(700px) translateX(-50%) rotateX(-92deg)}
}
html.is-work-out .case-card,
html.is-work-out body.about-page main,
html.is-work-out body.about-page .hello{animation:lw-fade .28s ease .1s both}

html.is-home-in{overflow:hidden}
html.is-home-in .intro > *,
html.is-home-in .rail > *,
html.is-frozen .intro > *,
html.is-frozen .rail > *{opacity:0}
html.is-home-play .rail > *{animation:lw-rise .28s ease both}
html.is-home-play .rail > *:nth-child(1){animation-delay:.02s}
html.is-home-play .rail > *:nth-child(2){animation-delay:.1s}
html.is-home-play .rail > *:nth-child(3){animation-delay:.18s}
html.is-home-play .rail > *:nth-child(4){animation-delay:.26s}
html.is-home-play .rail > *:nth-child(5){animation-delay:.34s}
html.is-home-play .rail > *:nth-child(6){animation-delay:.42s}
html.is-home-play .intro .logo,
html.is-home-play .intro .face{animation:lw-back .32s var(--ease-move) .52s both}
html.is-home-play .intro h1{animation:lw-back .32s var(--ease-move) .62s both}
html.is-home-play .intro .lede{animation:lw-back .32s var(--ease-move) .72s both}
html.is-home-play .hnav{
  transform-origin:top center;
  animation:lw-line-in .42s var(--ease-pop) .86s both;
}

/* About back to Work. The wordmark stays. The portrait has already
   landed, so it stays too. Everything else fades in from the top. */
html.is-face-home.is-home-in .intro > .logo,
html.is-face-home.is-home-play .intro > .logo,
html.is-face-home.is-home-in .intro > .face,
html.is-face-home.is-home-play .intro > .face,
html.is-face-home .topbar .logo{
  opacity:1;
  visibility:visible;
  animation:none;
}
html.is-face-home.is-home-in .topbar nav{opacity:0}
html.is-face-home.is-home-play .intro h1,
html.is-face-home.is-home-play .intro .lede,
html.is-face-home.is-home-play .hnav,
html.is-face-home.is-home-play .topbar nav,
html.is-face-home.is-home-play .rail > *{
  animation:lw-fade-in .4s ease both;
}
html.is-about-home{overflow:hidden}
html.is-about-home .about-hero > .face{visibility:hidden}
html.is-about-home .tnav,
html.is-about-home .about-hero h1,
html.is-about-home .about-lead,
html.is-about-home .about-aside,
html.is-about-home .about-story > *,
html.is-about-home .hello{
  animation:lw-fade .45s ease both;
}
html.is-about-home .case-top .logo{opacity:1;animation:none}
@keyframes lw-line-in{
  from{opacity:0;transform:perspective(700px) rotateX(72deg)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  html.is-opening *,
  html.is-nav-out *,
  html.is-about-out *,
  html.is-work-out *,
  html.is-home-in *,
  html.is-arriving *,
  html.is-returning *,
  html.is-fading-in *{animation:none !important;transition:none !important}
}