/* ==========================================
UndefinedVerseOfficial
Lightweight Animation System
========================================== */

/* Standard transitions */

.transition {
transition:
color var(--duration-normal) var(--ease-standard),
background-color var(--duration-normal) var(--ease-standard),
border-color var(--duration-normal) var(--ease-standard),
opacity var(--duration-normal) var(--ease-standard),
transform var(--duration-normal) var(--ease-standard);
}

.transition-fast {
transition-duration: var(--duration-fast);
}

.transition-slow {
transition-duration: var(--duration-slow);
}

/* Interactive movement */

.hover-lift {
transition:
transform var(--duration-normal) var(--ease-standard),
border-color var(--duration-normal) var(--ease-standard);
}

@media (hover: hover) {
.hover-lift:hover {
transform: translateY(-3px);
border-color: var(--color-border-strong);
}

.hover-metal:hover {
background-color: var(--color-surface-raised);
border-color: var(--color-gunmetal);
}
}

/* Entry animations */

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

to {
opacity: 1;
}
}

@keyframes rise-in {
from {
opacity: 0;
transform: translateY(12px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes scale-in {
from {
opacity: 0;
transform: scale(0.97);
}

to {
opacity: 1;
transform: scale(1);
}
}

/* Animation utilities */

.animate-fade-in {
animation: fade-in 400ms var(--ease-standard) both;
}

.animate-rise-in {
animation: rise-in 450ms var(--ease-standard) both;
}

.animate-scale-in {
animation: scale-in 350ms var(--ease-standard) both;
}

/* Scroll reveal support */

[data-reveal] {
opacity: 0;
transform: translateY(12px);
transition:
opacity 450ms var(--ease-standard),
transform 450ms var(--ease-standard);
}

[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}

/* Loading indicator */

@keyframes loading-pulse {
0%,
100% {
opacity: 0.45;
}

50% {
opacity: 1;
}
}

.loading-pulse {
animation: loading-pulse 1.4s ease-in-out infinite;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}

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