:root {
  --motion-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-duration-xs: 160ms;
  --motion-duration-sm: 240ms;
  --motion-duration-md: 420ms;
  --motion-duration-lg: 720ms;
  --motion-stagger-step: 70ms;
  --motion-translate-sm: 12px;
  --motion-translate-md: 20px;
  --motion-translate-lg: 32px;
}

body {
  --motion-ready: 0;
}

body.motion-booted {
  --motion-ready: 1;
}

.motion-reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-translate-md), 0);
  transition:
    opacity var(--motion-duration-md) var(--motion-ease-standard),
    transform var(--motion-duration-md) var(--motion-ease-standard),
    filter var(--motion-duration-md) var(--motion-ease-standard);
  transition-delay: var(--motion-delay, 0ms);
  will-change: transform, opacity;
}

.motion-reveal[data-reveal="hero"] {
  transform: translate3d(0, var(--motion-translate-lg), 0);
  transition-duration: var(--motion-duration-lg);
}

.motion-reveal[data-reveal="header"] {
  transform: translate3d(0, -10px, 0);
}

.motion-reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-stagger > * {
  opacity: 0;
  transform: translate3d(0, var(--motion-translate-sm), 0);
  transition:
    opacity var(--motion-duration-sm) var(--motion-ease-standard),
    transform var(--motion-duration-sm) var(--motion-ease-standard);
  transition-delay: calc(var(--motion-delay, 0ms) + (var(--motion-stagger-step) * var(--i, 0)));
  will-change: transform, opacity;
}

.motion-stagger.is-in > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-motion-interactive] {
  transition:
    transform var(--motion-duration-xs) var(--motion-ease-emphasized),
    color var(--motion-duration-sm) var(--motion-ease-standard),
    border-color var(--motion-duration-sm) var(--motion-ease-standard),
    background-color var(--motion-duration-sm) var(--motion-ease-standard),
    opacity var(--motion-duration-sm) var(--motion-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  [data-motion-interactive]:hover {
    transform: translate3d(0, -1px, 0);
  }
}

[data-motion-interactive]:active {
  transform: translate3d(0, 0, 0) scale(0.995);
}

nav a[href$=".html"] {
  position: relative;
}

nav a[href$=".html"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.22rem;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition:
    transform var(--motion-duration-sm) var(--motion-ease-emphasized),
    opacity var(--motion-duration-sm) var(--motion-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  nav a[href$=".html"]:hover::after {
    transform: scaleX(1);
    opacity: 1;
  }
}

nav a[href$=".html"][class*="border-b-2"]::after {
  transform: scaleX(1);
  opacity: 1;
}

[data-lang-option] {
  min-width: 1.8rem;
  text-align: center;
  transition:
    color var(--motion-duration-sm) var(--motion-ease-standard),
    opacity var(--motion-duration-sm) var(--motion-ease-standard),
    transform var(--motion-duration-sm) var(--motion-ease-emphasized);
}

[data-lang-option]:hover {
  opacity: 1;
  transform: translate3d(0, -1px, 0);
}

[data-lang-option]:active {
  transform: translate3d(0, 0, 0) scale(0.98);
}

.project-card,
.tech-card {
  transition:
    transform var(--motion-duration-sm) var(--motion-ease-emphasized),
    border-color var(--motion-duration-sm) var(--motion-ease-standard),
    background-color var(--motion-duration-sm) var(--motion-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .project-card:hover,
  .tech-card:hover {
    transform: translate3d(0, -4px, 0);
  }
}

[data-mobile-menu] a {
  transform: translate3d(-8px, 0, 0);
  opacity: 0.6;
}

[data-mobile-menu].is-open a {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

[data-mobile-menu].is-open a:nth-child(1) {
  transition-delay: 40ms;
}
[data-mobile-menu].is-open a:nth-child(2) {
  transition-delay: 80ms;
}
[data-mobile-menu].is-open a:nth-child(3) {
  transition-delay: 120ms;
}
[data-mobile-menu].is-open a:nth-child(4) {
  transition-delay: 160ms;
}

.motion-depth {
  transform: translate3d(0, var(--depth-y, 0px), 0);
  transition: transform var(--motion-duration-sm) linear;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .motion-stagger > *,
  .project-card,
  .tech-card,
  [data-motion-interactive],
  [data-mobile-menu] a,
  .motion-depth,
  nav a[href$=".html"]::after,
  [data-lang-option] {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .motion-reveal,
  .motion-stagger > * {
    opacity: 1 !important;
  }
}