/* Content stays readable without JavaScript. Every entrance finishes and settles. */
.site-animated-title .site-title-word{display:inline-block;color:inherit;transform-origin:0 100%}
.hero-tech-link{gap:9px}
.hero-tech-link svg{color:#ff4b4b}
.hero,.challenge-hero{isolation:isolate}
.hero-copy,.challenge-intro{position:relative}
.hero-copy::before,.challenge-intro::before{content:"";position:absolute;z-index:-1;inset:-26px -18px;pointer-events:none;opacity:.3;background-image:linear-gradient(#ff4b4b0b 1px,transparent 1px),linear-gradient(90deg,#ff4b4b0b 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(135deg,#000,transparent 65%)}
.portrait::after{content:"";position:absolute;inset:15px;pointer-events:none;opacity:.45;background:linear-gradient(#ffffffb0,#ffffffb0) top left/34px 1px no-repeat,linear-gradient(#ffffffb0,#ffffffb0) top left/1px 34px no-repeat,linear-gradient(#ffffffb0,#ffffffb0) bottom right/34px 1px no-repeat,linear-gradient(#ffffffb0,#ffffffb0) bottom right/1px 34px no-repeat}
.project,.tool-names span{transition:background-color .25s,border-color .25s,translate .25s}
.project:hover{background:#ff4b4b06;border-top-color:#a43c3c}
.tool-names span:hover{background:#ff4b4b10;border-color:#ff4b4b;translate:0 -3px}

@media(prefers-reduced-motion:no-preference){
  [data-motion=on] .site-animated-title.motion-visible .site-title-word{animation:fruitup-word .85s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--word-delay,0ms)}
  [data-motion=on] .motion-reveal:not(.motion-visible){opacity:.01;translate:0 16px}
  [data-motion=on] .motion-reveal.motion-visible{animation:fruitup-reveal .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--reveal-delay,0ms)}
  [data-motion=on] .hero-copy::before,[data-motion=on] .challenge-intro::before{animation:fruitup-grid 3s ease-out both}
  [data-motion=on] .portrait.motion-visible::after{animation:fruitup-frame 2s ease-out both}
  [data-motion=on] .small-line{animation:fruitup-line 1.2s ease-out both;transform-origin:left}
  [data-motion-active=false] .site-title-word,[data-motion-active=false] .motion-reveal,[data-motion-active=false] .hero-copy::before,[data-motion-active=false] .challenge-intro::before,[data-motion-active=false] .portrait::after,[data-motion-active=false] .small-line{animation-play-state:paused}
}

@keyframes fruitup-word{from{opacity:0;transform:translate3d(0,.65em,0) rotate(2deg)}to{opacity:1;transform:translate3d(0,0,0) rotate(0)}}
@keyframes fruitup-reveal{from{opacity:.01;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes fruitup-grid{from{opacity:0;transform:translate3d(-8px,5px,0)}to{opacity:.3;transform:translate3d(0,0,0)}}
@keyframes fruitup-frame{from{opacity:0;transform:scale(.97)}to{opacity:.45;transform:scale(1)}}
@keyframes fruitup-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:560px){.hero-copy::before,.challenge-intro::before{inset:-14px 0}}
@media(prefers-reduced-motion:reduce){.site-title-word,.motion-reveal{opacity:1!important;translate:none!important;transform:none!important;animation:none!important}.hero-copy::before,.challenge-intro::before,.portrait::after,.small-line{animation:none!important}.project,.tool-names span,.tool-names span:hover{transition:none;translate:none}}
[data-motion=off] .site-title-word,[data-motion=off] .motion-reveal{opacity:1!important;translate:none!important;transform:none!important;animation:none!important}
[data-motion=off] .project,[data-motion=off] .tool-names span{transition:none;translate:none}