@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-1.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slide-left {
  from { opacity: 0; transform: translateX(1.5rem); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-right {
  from { opacity: 0; transform: translateX(-1.5rem); }
  to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in { animation: fade-in var(--transition-slow) both; }
.animate-fade-up { animation: fade-up var(--transition-slow) both; }
.animate-fade-down { animation: fade-down var(--transition-slow) both; }
.animate-scale-in { animation: scale-in var(--transition-slow) both; }
.animate-slide-left { animation: slide-left var(--transition-slow) both; }
.animate-slide-right { animation: slide-right var(--transition-slow) both; }

.hover-lift,
.hover-glow {
  transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-0.25rem);
}

.hover-glow:hover {
  border-color: rgba(107, 224, 193, 0.35);
  box-shadow: 0 1.25rem 3.5rem rgba(51, 203, 163, 0.12);
}

[data-reveal] {
  opacity: 1;
  transform: none;
}

.has-reveal [data-reveal]:not(.is-revealed) {
  opacity: 0;
}

.has-reveal [data-reveal="up"]:not(.is-revealed) { transform: translateY(1.25rem); }
.has-reveal [data-reveal="down"]:not(.is-revealed) { transform: translateY(-1.25rem); }
.has-reveal [data-reveal="left"]:not(.is-revealed) { transform: translateX(1.5rem); }
.has-reveal [data-reveal="right"]:not(.is-revealed) { transform: translateX(-1.5rem); }
.has-reveal [data-reveal="scale"]:not(.is-revealed) { transform: scale(0.96); }

.has-reveal [data-reveal] {
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}

body {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-page) var(--ease-standard), transform var(--duration-page) var(--ease-standard);
}

body.is-page-entering {
  opacity: 0;
  transform: translateY(0.375rem);
}

body.is-page-leaving {
  opacity: 0;
  transform: translateY(-0.375rem);
}

.modal-surface {
  opacity: 0;
  transform: translateY(0.75rem) scale(0.98);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.modal-surface.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

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

  body,
  body.is-page-entering,
  body.is-page-leaving,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}