/* Motion polish: small, purposeful feedback layered over the existing layout. */
:root {
  --motion-press-duration: 120ms;
  --motion-ease-out: cubic-bezier(.25, .46, .45, .94);
  --motion-ease-in-out: cubic-bezier(.645, .045, .355, 1);
}

/* Keep the grain on the surface itself so it never changes text contrast. */
.section--work,
.section--finish,
.section--founder,
.site-footer {
  position: relative;
  isolation: isolate;
}

.section--work::before,
.section--finish::before,
.section--founder::before,
.site-footer::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .065;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 140px 140px;
}

.section--work > *,
.section--finish > *,
.section--founder > *,
.site-footer > * {
  position: relative;
  z-index: 1;
}

/* Fast, quiet confirmation for frequent actions. */
.btn,
.menu-toggle,
.accordion__trigger,
.carousel__btn,
.carousel__dot,
.project-dialog__close,
[data-marquee-toggle] {
  transition: transform var(--motion-press-duration) var(--motion-ease-out),
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.btn:active,
.menu-toggle:active,
.accordion__trigger:active,
.carousel__btn:active,
.carousel__dot:active,
.project-dialog__close:active,
[data-marquee-toggle]:active {
  transform: scale(.985);
}

/* Move the crop parent, leaving the existing image transform!important untouched. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .work-tile .media-crop {
    transition: transform 240ms var(--motion-ease-in-out), filter 600ms ease;
    transform-origin: center;
  }

  .work-tile:hover .media-crop,
  .work-tile:focus-visible .media-crop {
    transform: scale(1.012);
  }
}

/* A slow material drift on the still image crop, never on the adjacent copy. */
@media (prefers-reduced-motion: no-preference) {
  .hero__panel--media .media-crop--hero {
    animation: hero-material-drift 18s var(--motion-ease-in-out) infinite alternate;
    will-change: transform;
  }

  @keyframes hero-material-drift {
    from { transform: translate3d(-.35%, -.25%, 0) scale(1.015); }
    to { transform: translate3d(.35%, .25%, 0) scale(1.035); }
  }
}

.motion-toggle {
  position: absolute;
  z-index: 2;
  right: 1rem;
  top: 1rem;
  min-height: 44px;
  padding: .55rem .8rem;
  border: 1px solid rgba(237, 236, 229, .6);
  background: rgba(23, 25, 23, .72);
  color: #edece5;
  font: inherit;
  font-size: .7rem;
  letter-spacing: .08em;
  cursor: pointer;
}

.hero__panel--media {
  position: relative;
}

.no-js .hero__panel--media .media-crop--hero {
  animation: none;
}

.motion-toggle:hover,
.motion-toggle:focus-visible {
  background: rgba(23, 25, 23, .9);
}

.motion-paused *,
.motion-paused *::before,
.motion-paused *::after,
.motion-tab-hidden *,
.motion-tab-hidden *::before,
.motion-tab-hidden *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .menu-toggle,
  .accordion__trigger,
  .carousel__btn,
  .carousel__dot,
  .project-dialog__close,
  [data-marquee-toggle] {
    transition: none;
  }
}