/* === ANIMATIONS === */

/* Page transition */
.page-slide-enter-left {
  animation: slideInLeft var(--transition-normal) forwards;
}
.page-slide-enter-right {
  animation: slideInRight var(--transition-normal) forwards;
}
.page-slide-exit-left {
  animation: slideOutLeft var(--transition-normal) forwards;
}
.page-slide-exit-right {
  animation: slideOutRight var(--transition-normal) forwards;
}

@keyframes slideInLeft {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(30px);  opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideOutLeft {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-30px); opacity: 0; }
}
@keyframes slideOutRight {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(30px);  opacity: 0; }
}

/* Nav icon press */
.nav-tab .nav-icon-wrap {
  transition: transform var(--transition-spring);
  will-change: transform;
}

.nav-tab .nav-icon-wrap.pressing {
  animation: iconPress var(--transition-spring) forwards;
}

@keyframes iconPress {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.9); }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Ripple (already defined in components, referenced here) */
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* Shimmer (already in components) */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Sunbeam drift */
@keyframes sunbeamDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -15px) scale(1.1); }
  66%       { transform: translate(-10px, 10px) scale(0.95); }
}
@keyframes sunbeamDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-25px, 20px) scale(0.9); }
  66%       { transform: translate(15px, -10px) scale(1.05); }
}
@keyframes sunbeamDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(10px, 25px) scale(1.15); }
}

.sunbeam-1 { animation: sunbeamDrift1 8s ease-in-out infinite; }
.sunbeam-2 { animation: sunbeamDrift2 11s ease-in-out infinite; }
.sunbeam-3 { animation: sunbeamDrift3 14s ease-in-out infinite; }

/* Stagger helper classes (applied via JS) */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-item.appeared {
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  opacity: 1;
  transform: translateY(0);
}

/* Profile card entrance */
@keyframes profileCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.profile-card {
  animation: profileCardIn var(--transition-normal) both;
}

.profile-card:nth-child(2) { animation-delay: 60ms; }
.profile-card:nth-child(3) { animation-delay: 120ms; }
.profile-card:nth-child(4) { animation-delay: 180ms; }

/* Search icon color transition included in components */

/* Focus ring visible state */
:focus-visible {
  outline: 2px solid var(--color-orange-primary);
  outline-offset: 2px;
}

/* Theme switch ripple on radio */
@keyframes radioActivate {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.theme-radio.active {
  animation: radioActivate var(--transition-spring) forwards;
}