body.js-ready [data-reveal] {
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(0, 24px, 0) scale(0.985);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.72s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

body.js-ready [data-reveal].is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.surface-card,
.project-card,
.project-card__visual,
.button,
.site-header,
.site-header::before,
.site-brand__mark,
.site-nav a:not(.site-nav__cta),
.site-header__toggle,
.site-header__toggle span {
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s ease,
    border-color 0.28s ease,
    background-color 0.28s ease,
    color 0.24s ease,
    opacity 0.24s ease;
}

.surface-card:hover:not(.project-card):not(.hero__float-card):not(.detail-stage__media):not(.contact-map):not(.detail-cta),
.surface-card:focus-within:not(.project-card):not(.hero__float-card):not(.detail-stage__media):not(.contact-map):not(.detail-cta) {
  border-color: rgba(32, 27, 23, 0.16);
  box-shadow: 0 18px 38px rgba(24, 19, 15, 0.08);
  transform: translate3d(0, -2px, 0);
}

.hero__float-card {
  animation: drift 8s ease-in-out infinite;
}

.hero__visual-frame,
.services-hero__visual-frame,
.about-hero__visual-frame,
.detail-stage__media,
.contact-map__visual {
  transform: translate3d(0, var(--motion-offset, 0px), 0);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
  will-change: transform;
}

.site-header.is-scrolled .site-brand__mark {
  transform: scale(0.96);
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -6px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.js-ready [data-reveal] {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .surface-card,
  .project-card,
  .project-card__visual,
  .button,
  .site-header,
  .site-header::before,
  .site-brand__mark,
  .site-nav a:not(.site-nav__cta),
  .site-header__toggle,
  .site-header__toggle span,
  .hero__float-card,
  .hero__visual-frame,
  .services-hero__visual-frame,
  .about-hero__visual-frame,
  .detail-stage__media,
  .contact-map__visual {
    transition: none;
    animation: none;
    transform: none;
    will-change: auto;
  }
}