:root {
  --motion-fast: 160ms;
  --motion-medium: 260ms;
  --motion-slow: 420ms;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-gentle: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes siteMotionPageEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.figma-home,
.about-reference,
.works-reference,
.contact-page,
.reference-project {
  animation: siteMotionPageEnter var(--motion-slow) var(--ease-gentle) both;
}

a,
button,
[role="button"],
.calendar-tile,
.tile-image,
.contact-nav-link,
.contact-nav-icon-hit,
.works-top-link,
.about-side-nav-link,
.works-side-nav-link,
.project-side-nav-link,
.contact-side-nav-link {
  transition-duration: var(--motion-medium);
  transition-property: opacity, filter, text-shadow, background-color, color, transform;
  transition-timing-function: var(--ease-soft);
}

a:hover,
button:hover,
[role="button"]:hover {
  opacity: 0.88;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 1px solid rgba(73, 3, 3, 0.36);
  outline-offset: 4px;
}

button:active,
[role="button"]:active {
  opacity: 0.74;
}

.site-header a:hover,
.work-header a:hover,
.contact-header a:hover,
.contact-nav-icon-hit:hover,
.works-top-link:hover {
  opacity: 0.92;
  filter: drop-shadow(0 2px 3px rgba(73, 3, 3, 0.12));
}

.about-side-icon,
.works-side-icon,
.project-side-icon,
.contact-side-icon,
.contact-nav-icon-hit {
  transition: opacity var(--motion-fast) var(--ease-soft), transform var(--motion-fast) var(--ease-soft), filter var(--motion-fast) var(--ease-soft);
}

.about-side-icon:hover,
.works-side-icon:hover,
.project-side-icon:hover,
.contact-side-icon:hover,
.contact-nav-icon-hit:hover {
  transform: translate3d(0, -2px, 0);
  opacity: 0.86;
}

.about-side-icon:active,
.works-side-icon:active,
.project-side-icon:active,
.contact-side-icon:active,
.contact-nav-icon-hit:active {
  transform: translate3d(0, 0, 0);
  opacity: 0.7;
}

.calendar-tile:hover .tile-image,
.contact-links a:hover,
.contact-copy-link:hover {
  filter: saturate(1.04) contrast(1.02);
}

.about-portrait img,
.project-board img,
.contact-side-nav-image,
.about-side-nav-image,
.works-side-nav-image,
.project-side-nav-image {
  transition: filter var(--motion-medium) var(--ease-soft), opacity var(--motion-medium) var(--ease-soft);
}

.about-portrait:hover img,
.project-board img:hover {
  filter: saturate(1.035) contrast(1.015);
}

.about-side-nav-panel,
.works-side-nav-panel,
.project-side-nav-panel,
.contact-side-nav-panel {
  transition: opacity var(--motion-medium) var(--ease-soft), visibility var(--motion-medium) var(--ease-soft), transform var(--motion-medium) var(--ease-soft) !important;
}

.about-side-nav-panel:not(.is-visible),
.works-side-nav-panel:not(.is-visible),
.project-side-nav-panel:not(.is-visible),
.contact-side-nav-panel:not(.is-visible) {
  transform: translate3d(-6px, 0, 0) !important;
}

.about-side-nav-panel.is-visible,
.works-side-nav-panel.is-visible,
.project-side-nav-panel.is-visible,
.contact-side-nav-panel.is-visible {
  transform: translate3d(0, 0, 0) !important;
}

.project1-web-stack img,
.dad-image-track,
.dad-hammer,
.works-disc {
  will-change: transform;
}

.project1-web-stack img,
.dad-image-track,
.dad-hammer,
.works-disc,
.about-floating-img,
.about-floating-img img,
.work-card {
  transition-timing-function: var(--ease-soft);
}

@media (hover: hover) {
  .work-card:hover img,
  .project1-web-stack img:hover,
  .dad-image-track img:hover,
  .air-book-strip img:hover {
    filter: saturate(1.04) contrast(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}