/* ===== IRONITT Animations ===== */

/* View Transitions */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

/* Panel Animations */
@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: translateX(-100%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes panelSlideOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-100%) scale(0.95);
  }
}

/* Card Animations */
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Staggered children */
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 60ms; }
.stagger-children > *:nth-child(3) { animation-delay: 120ms; }
.stagger-children > *:nth-child(4) { animation-delay: 180ms; }
.stagger-children > *:nth-child(5) { animation-delay: 240ms; }
.stagger-children > *:nth-child(6) { animation-delay: 300ms; }
.stagger-children > *:nth-child(7) { animation-delay: 360ms; }
.stagger-children > *:nth-child(8) { animation-delay: 420ms; }

/* Pulse for notifications */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Spin for loading */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Scale in */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scale out */
@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* Overlay fade out */
@keyframes overlayOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Progress bar fill */
@keyframes progressFill {
  from { width: 0; }
}

/* Toast notification — pill expand/contract */
@keyframes toastPillIn {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.5); }
  50%  { opacity: 1; transform: translateX(-50%) scaleX(0.6) scaleY(1); }
  100% { opacity: 1; transform: translateX(-50%) scaleX(1) scaleY(1); }
}

@keyframes toastPillOut {
  0%   { opacity: 1; transform: translateX(-50%) scaleX(1) scaleY(1); }
  50%  { opacity: 0.7; transform: translateX(-50%) scaleX(0.6) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.5); }
}

/* Overlay fade */
@keyframes overlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Icon pop on action */
@keyframes iconPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Message appear */
@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utility classes */
.animate-fade-in {
  animation: fadeIn var(--transition-normal) forwards;
}

.animate-slide-up {
  animation: slideUp var(--transition-normal) forwards;
}

.animate-slide-down {
  animation: slideDown var(--transition-normal) forwards;
}

.animate-scale-in {
  animation: scaleIn var(--transition-normal) forwards;
}

.animate-card-enter {
  animation: cardEnter var(--transition-normal) forwards;
  opacity: 0;
}

.animate-message-in {
  animation: messageIn 200ms ease forwards;
}

.animate-icon-pop {
  animation: iconPop 300ms ease;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.loading-spin {
  animation: spin 1s linear infinite;
}

/* Text shine sweep */
@keyframes textShine {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Marching dashes for Quick Tiles */
@keyframes marchingDashes {
  to {
    stroke-dashoffset: -28;
  }
}

/* ===== Avatar Frame Styles ===== */

.avatar-frame-neon-ring {
  border: 2px solid var(--accent-color) !important;
  box-shadow: 0 0 8px var(--accent-light), 0 0 18px var(--accent-subtle);
}


.avatar-frame-circuit-board {
  border: 2px dashed #4ade80 !important;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.3);
}

.avatar-frame-flame-border {
  border: 2px solid #ff6b35 !important;
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.5), 0 0 24px rgba(255, 60, 20, 0.25);
}


.avatar-frame-galaxy-swirl {
  border: 2px solid #c084fc !important;
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.4), 0 0 18px rgba(96, 165, 250, 0.2), 0 0 28px rgba(52, 211, 153, 0.12);
}

.avatar-frame-pixel-art {
  border-radius: 8px !important;
  border: 3px solid #a78bfa !important;
  box-shadow: 3px 3px 0 rgba(167, 139, 250, 0.35);
}

.avatar-frame-nature-vine {
  border: 2px solid #4ade80 !important;
  outline: 2px solid rgba(74, 222, 128, 0.25);
  outline-offset: 2px;
}

.avatar-frame-skull-ring {
  border: 2px solid #dc2626 !important;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.45), 0 0 22px rgba(220, 38, 38, 0.15);
}

.avatar-frame-golden-crown {
  border: 2px solid #fbbf24 !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.45), 0 0 22px rgba(251, 191, 36, 0.2), inset 0 0 4px rgba(251, 191, 36, 0.1);
}

.avatar-frame-hologram {
  border: 2px solid #06b6d4 !important;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.3), 0 0 16px rgba(168, 85, 247, 0.15), 0 0 24px rgba(236, 72, 153, 0.1);
}

/* ===== Avatar Effect Animations ===== */

.avatar-effect-sparkle {
  animation: effectSparkle 2s ease-in-out infinite;
}
@keyframes effectSparkle {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  50% { filter: brightness(1.15) drop-shadow(0 0 5px rgba(255, 215, 0, 0.5)); }
}

.avatar-effect-shadow {
  position: relative;
}

.avatar-effect-pulse {
  animation: effectPulse 2s ease-in-out infinite;
}
@keyframes effectPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.avatar-effect-lightning {
  animation: effectLightning 3s ease-in-out infinite;
}
@keyframes effectLightning {
  0%, 100% { filter: brightness(1); }
  10% { filter: brightness(1.4) drop-shadow(0 0 6px rgba(100, 180, 255, 0.7)); }
  15% { filter: brightness(1); }
  60% { filter: brightness(1); }
  65% { filter: brightness(1.3) drop-shadow(0 0 4px rgba(100, 180, 255, 0.5)); }
  70% { filter: brightness(1); }
}

.avatar-effect-leaf {
  position: relative;
}

.avatar-effect-music {
  position: relative;
}

.avatar-effect-rain {
  position: relative;
}

.avatar-effect-cherry {
  animation: effectCherry 3s ease-in-out infinite;
}
@keyframes effectCherry {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  50% { filter: brightness(1.1) drop-shadow(0 0 6px rgba(249, 168, 212, 0.5)); }
}

.avatar-effect-confetti {
  position: relative;
}

.avatar-effect-cosmic {
  animation: effectCosmic 6s linear infinite;
}
@keyframes effectCosmic {
  0% { filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.4)) hue-rotate(0deg); }
  100% { filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.4)) hue-rotate(360deg); }
}

.avatar-effect-fire {
  animation: effectFire 1.5s ease-in-out infinite;
}
@keyframes effectFire {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 3px rgba(255, 107, 53, 0.3)); }
  30% { filter: brightness(1.12) drop-shadow(0 0 6px rgba(255, 107, 53, 0.6)); }
  60% { filter: brightness(1.05) drop-shadow(0 0 4px rgba(255, 60, 20, 0.4)); }
}

.avatar-effect-matrix {
  animation: effectMatrix 2s ease-in-out infinite;
}
@keyframes effectMatrix {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 3px rgba(0, 255, 65, 0.3)); }
  50% { filter: brightness(1.1) drop-shadow(0 0 8px rgba(0, 255, 65, 0.6)); }
}

/* ===== Particle Effect System ===== */

.effect-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

/* --- Confetti --- */
.effect-particles .confetti-p {
  position: absolute;
  top: -6px;
  width: 5px;
  height: 4px;
  border-radius: 1px;
  animation: confettiFall linear infinite;
}

@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg) scaleX(1); opacity: 1; }
  25%  { transform: translateY(25%) rotate(90deg) scaleX(0.6); }
  50%  { transform: translateY(50%) rotate(180deg) scaleX(1); opacity: 0.8; }
  75%  { transform: translateY(75%) rotate(270deg) scaleX(0.6); }
  100% { transform: translateY(120px) rotate(360deg) scaleX(1); opacity: 0; }
}

/* --- Rain --- */
.effect-particles .rain-p {
  position: absolute;
  top: -10px;
  width: 1.5px;
  height: 10px;
  background: rgba(100, 180, 255, 0.5);
  border-radius: 0 0 1px 1px;
  animation: rainFall linear infinite;
}

@keyframes rainFall {
  0%   { transform: translateY(0); opacity: 0.7; }
  80%  { opacity: 0.4; }
  100% { transform: translateY(120px); opacity: 0; }
}

/* --- Music Notes --- */
.effect-particles .music-p {
  position: absolute;
  top: -14px;
  font-size: 11px;
  line-height: 1;
  color: var(--accent-color);
  animation: musicFall ease-in infinite;
}

@keyframes musicFall {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.9; }
  30%  { transform: translateY(30%) translateX(5px) scale(0.95); }
  60%  { transform: translateY(60%) translateX(-4px) scale(0.9); opacity: 0.6; }
  100% { transform: translateY(120px) translateX(2px) scale(0.8); opacity: 0; }
}

/* --- Leaf Fall --- */
.effect-particles .leaf-p {
  position: absolute;
  top: -12px;
  font-size: 10px;
  line-height: 1;
  animation: leafFall ease-in-out infinite;
}

@keyframes leafFall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.85; }
  20%  { transform: translateY(20%) translateX(7px) rotate(36deg); }
  40%  { transform: translateY(40%) translateX(-4px) rotate(100deg); opacity: 0.7; }
  60%  { transform: translateY(60%) translateX(6px) rotate(180deg); }
  80%  { transform: translateY(80%) translateX(-3px) rotate(250deg); opacity: 0.4; }
  100% { transform: translateY(120px) translateX(1px) rotate(340deg); opacity: 0; }
}

/* --- Welcome Page --- */
@keyframes welcomeGlowDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -20px) scale(1.1); }
  100% { transform: translate(-20px, 15px) scale(0.95); }
}

@property --dl-btn-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes dlBtnSpin {
  from { --dl-btn-angle: 0deg; }
  to   { --dl-btn-angle: 360deg; }
}

/* ---- Welcome Landing Page animations ---- */

@keyframes catTailSway {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

@keyframes catBlink {
  0%, 90%, 100% { transform: scaleY(1); }
  94%, 96% { transform: scaleY(0.05); }
}

@keyframes catFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@keyframes voiceRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(67, 181, 129, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(67, 181, 129, 0); }
}

/* --- Shadow Smoke --- */
.effect-particles.shadow-smoke {
  background: none;
}

.effect-particles .smoke-p {
  position: absolute;
  width: 60%;
  height: 55%;
  border-radius: var(--radius-round);
  filter: blur(4px);
  animation: smokeDrift ease-in-out infinite;
}

.effect-particles .smoke-p:nth-child(odd) {
  background: radial-gradient(circle, rgba(90, 90, 90, 0.55) 0%, rgba(50, 50, 50, 0.3) 50%, transparent 75%);
}

.effect-particles .smoke-p:nth-child(even) {
  background: radial-gradient(circle, rgba(40, 40, 40, 0.6) 0%, rgba(20, 20, 20, 0.35) 50%, transparent 75%);
}

@keyframes smokeDrift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  20%  { transform: translate(15%, -20%) scale(1.15); opacity: 0.85; }
  40%  { transform: translate(-10%, 5%) scale(0.95); opacity: 0.6; }
  60%  { transform: translate(5%, -10%) scale(1.1); opacity: 0.8; }
  80%  { transform: translate(-15%, 15%) scale(1.05); opacity: 0.55; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
}

/* ===== Communication Reimagining Animations ===== */

/* Message bubbles slide in from sender direction */
@keyframes bubbleInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes bubbleInRight {
  from {
    opacity: 0;
    transform: translateX(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Channel flyout panel entrance/exit */
@keyframes flyoutSlideIn {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flyoutSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

/* Server diamond active glow pulse — subtle */
@keyframes diamondPulse {
  0%, 100% {
    box-shadow: 0 0 3px var(--accent-subtle);
  }
  50% {
    box-shadow: 0 0 6px var(--accent-subtle);
  }
}

/* FAB open/close rotation */
@keyframes fabRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(45deg); }
}

/* Heart bounce on like */
@keyframes heartBounce {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(0.9); }
  75% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Unread badge pulse */
@keyframes unreadPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Composer scale in from FAB */
@keyframes composerScaleIn {
  from {
    opacity: 0;
    transform: scale(0.3) translateY(20px);
    transform-origin: bottom right;
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    transform-origin: bottom right;
  }
}

@keyframes composerScaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.3) translateY(20px);
  }
}