/* ============================================================
   AURORA — Motion System
   Refined animations, scroll reveals, micro-interactions
   ============================================================ */

/* ---- KEYFRAMES ---- */

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

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes scale-up {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes blur-in {
  from { opacity: 0; filter: blur(12px); }
  to   { opacity: 1; filter: blur(0); }
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes word-reveal {
  from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes ring-expand {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ---- SCROLL REVEAL ---- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-decelerate),
    transform var(--duration-slow) var(--ease-decelerate),
    filter var(--duration-slow) var(--ease-decelerate);
  filter: blur(4px);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal--up    { transform: translateY(40px); }
.reveal--down  { transform: translateY(-40px); }
.reveal--left  { transform: translateX(40px); }
.reveal--right { transform: translateX(-40px); }
.reveal--scale { transform: scale(0.92); }

.reveal--up.is-visible    { transform: translateY(0); }
.reveal--down.is-visible  { transform: translateY(0); }
.reveal--left.is-visible  { transform: translateX(0); }
.reveal--right.is-visible { transform: translateX(0); }
.reveal--scale.is-visible { transform: scale(1); }

.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
.reveal--delay-4 { transition-delay: 320ms; }
.reveal--delay-5 { transition-delay: 400ms; }
.reveal--delay-6 { transition-delay: 480ms; }

/* ---- TEXT ANIMATIONS ---- */

.text-reveal { display: inline-block; overflow: hidden; }

.text-reveal__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
  animation: word-reveal var(--duration-slow) var(--ease-decelerate) forwards;
}

/* Gradient text — blue to cyan */
.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-teal));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 6s var(--ease-standard) infinite;
}

.text-gradient-static {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- PAGE TRANSITIONS ---- */

.page-enter {
  animation: fade-in-up var(--duration-page) var(--ease-decelerate);
}

.section-enter {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--duration-slower) var(--ease-decelerate),
    transform var(--duration-slower) var(--ease-decelerate);
}

.section-enter.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- MICRO-INTERACTIONS ---- */

.card--interactive {
  transition:
    box-shadow var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    background var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-emphasized);
}

.btn:active {
  transform: scale(0.97);
  transition: transform var(--duration-instant) var(--ease-standard);
}

.link-underline { position: relative; }
.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--duration-normal) var(--ease-standard);
}
.link-underline:hover::after { width: 100%; }

/* ---- SKELETON ---- */

.skeleton {
  background: linear-gradient(90deg, var(--bg-surface) 0%, var(--bg-surface-soft) 50%, var(--bg-surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite var(--ease-standard);
  border-radius: var(--radius-md);
}

/* ---- HOVER POLISH ---- */

.image-zoom { overflow: hidden; border-radius: var(--radius-lg); }
.image-zoom img { transition: transform var(--duration-slow) var(--ease-emphasized); }
.image-zoom:hover img { transform: scale(1.05); }

.glow-hover { transition: box-shadow var(--duration-normal) var(--ease-standard); }
.glow-hover:hover { box-shadow: 0 0 24px rgba(0, 102, 255, 0.15); }