/* Motion — loaded last. Every effect is skipped for visitors who prefer reduced motion. */

/* Numbers band */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:60px 7%;border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14}
.stats-band div{display:flex;flex-direction:column;gap:10px}
.stats-band b{font-size:clamp(40px,5vw,64px);font-weight:600;letter-spacing:-2px;line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}
.stats-band span{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
@media(max-width:700px){
  .stats-band{grid-template-columns:1fr 1fr;gap:30px 20px;padding:45px 6%}
}

@media(prefers-reduced-motion:no-preference){
  /* Slimmer header after scrolling; the margin keeps the page from jumping */
  header{transition:height .3s ease,margin-bottom .3s ease,background-color .3s ease,box-shadow .3s ease}
  header .brand img{transition:transform .3s ease}
  body.is-scrolled header{height:calc(var(--header-h) - var(--header-shrink));margin-bottom:var(--header-shrink);background:#151714d9;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 10px 30px #0000004d}
  body.is-scrolled header .brand img{transform:scale(.86)}
  body.is-scrolled header nav{top:100%}

  /* Pop-ups and photo viewer */
  dialog[open]{animation:dialog-in .32s cubic-bezier(.2,.8,.2,1)}
  dialog[open]::backdrop{animation:backdrop-in .32s ease}
  dialog.is-closing{animation:dialog-out .2s ease forwards}
  dialog.is-closing::backdrop{animation:backdrop-out .2s ease forwards}

  /* Project cards appearing one after another */
  #project-grid .card-in{animation:card-in .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms)}

  /* FAQ */
  .faq summary span{transition:transform .3s ease}
}

@keyframes dialog-in{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes dialog-out{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes backdrop-in{from{opacity:0}}
@keyframes backdrop-out{to{opacity:0}}
@keyframes card-in{from{opacity:0;transform:translateY(22px)}}