/* Motion layer: page entrances, scroll reveals and micro-interactions.
   To revert, remove the motion.css link and motion.js script from each page.
   Everything here is skipped when the visitor prefers reduced motion. */
:root{--m-ease:cubic-bezier(.22,1,.36,1);--m-spring:cubic-bezier(.34,1.56,.64,1)}

@media (prefers-reduced-motion:no-preference){
  /* Soft cross-fade between pages (supporting browsers only). */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:var(--m-ease)}

  @keyframes m-rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
  @keyframes m-fade{from{opacity:0}to{opacity:1}}
  @keyframes m-pop{0%{opacity:0;scale:.55;rotate:-14deg}65%{opacity:1;scale:1.08}100%{opacity:1;scale:1;rotate:0deg}}
  @keyframes m-wiggle{0%,100%{rotate:0deg}25%{rotate:-9deg}50%{rotate:7deg}75%{rotate:-3deg}}
  @keyframes m-hop{0%,100%{translate:0 0}40%{translate:0 -6px}70%{translate:0 1px}}

  /* Page intros: content rises in, one line after another. */
  :is(.clear-intro,.case-hero)>*,.profile-heading,.page-title,.writing-intro,.section-heading:has(.page-title)>p,.contact-bottom{animation:m-rise .8s var(--m-ease) both}
  :is(.clear-intro,.case-hero)>:nth-child(2){animation-delay:.07s}
  :is(.clear-intro,.case-hero)>:nth-child(3){animation-delay:.14s}
  :is(.clear-intro,.case-hero)>:nth-child(4){animation-delay:.21s}
  :is(.clear-intro,.case-hero)>:nth-child(5){animation-delay:.28s}
  :is(.clear-intro,.case-hero)>:nth-child(n+6){animation-delay:.35s}
  :is(.writing-intro,.contact-bottom),.section-heading:has(.page-title)>p{animation-delay:.12s}
  /* Interest stickers pop in after the headline. */
  .hero-interest{animation:m-pop .65s var(--m-spring) both}
  .hero-interest:nth-child(1){animation-delay:.35s}
  .hero-interest:nth-child(2){animation-delay:.43s}
  .hero-interest:nth-child(3){animation-delay:.51s}
  .hero-interest:nth-child(4){animation-delay:.59s}

  /* Scroll reveals (classes added by motion.js). */
  .m-reveal:not(.m-in){opacity:0}
  .m-reveal.m-in{animation:m-rise .75s var(--m-ease) var(--m-delay,0ms) both}
  .m-img-wait{opacity:0}
  .m-img-in{animation:m-fade .6s var(--m-ease) both}

  /* Arrows lean in the direction they point. */
  .ph-arrow-up-right,.ph-arrow-left,.ph-arrow-up{transition:translate .3s var(--m-ease)}
  :is(a,button):is(:hover,:focus-visible) .ph-arrow-up-right{translate:2px -2px}
  .blog-entry:is(:hover,:focus-visible) .blog-arrow .ph-arrow-up-right{translate:0 0}
  :is(a,button):is(:hover,:focus-visible) .ph-arrow-left{translate:-3px 0}
  :is(a,button):is(:hover,:focus-visible) .ph-arrow-up{translate:0 -2px}
  .back-top:is(:hover,:focus-visible) svg{animation:m-hop .5s var(--m-spring)}

  /* A small press on buttons and calls to action. */
  :is(.about-learn,.story-button,.nav-contact,.hero-socials a,.contact-socials a,.back-top,.theme-toggle,.menu-toggle,.album-navigation button,.album-close,.journey-controls button,.bf-play,.bf-primary):active{scale:.96}

  /* Playful details: stickers, pins and icons wiggle when their row is hovered. */
  .hero-interest:hover .interest-sticker,
  .journey-list li:hover .journey-sticker,
  .highlight-card:hover .highlight-icon,
  .now-entry:hover .now-marker,
  .memo-note:hover .memo-pin{animation:m-wiggle .55s ease-in-out}
  .wordmark .brand-period{display:inline-block}
  .wordmark:is(:hover,:focus-visible) .brand-period{animation:m-hop .5s var(--m-spring)}

  /* Blog thumbnails tilt like a photo being picked up. */
  .blog-thumbnail{transition:rotate .4s var(--m-spring),translate .4s var(--m-ease),box-shadow .4s}
  .blog-entry:is(:hover,:focus-visible) .blog-thumbnail{rotate:-1.5deg;translate:0 -3px;box-shadow:0 8px 18px #0000001a}

  /* Case-study contents: the active chapter slides in slightly. */
  .contents a{transition:color .25s,translate .3s var(--m-ease)}
  @media(min-width:761px){.contents a.active{translate:4px 0}}
}

/* Theme switch: the new theme grows out of the toggle as a circle (triggered in app.js). */
@keyframes m-theme-reveal{from{clip-path:circle(0 at var(--theme-x) var(--theme-y))}to{clip-path:circle(var(--theme-r) at var(--theme-x) var(--theme-y))}}
html.theme-switching::view-transition-old(root){animation:none}
html.theme-switching::view-transition-new(root){animation:m-theme-reveal .65s cubic-bezier(.65,0,.35,1) both}

@media print{.m-reveal,.m-img-wait{opacity:1!important;animation:none!important}}