/* ============================================
   YUKON HANDYMAN 2.0 — Animations System
   Copper & Champagne luxury animations
   Aurora-inspired moving gradients
   ============================================ */

/* --- Fade Animations --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Float Animations --- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-8px) rotate(1deg); }
  66%      { transform: translateY(4px) rotate(-1deg); }
}

.float-anim {
  animation: float 3s ease-in-out infinite;
}

.float-anim-slow {
  animation: float-slow 6s ease-in-out infinite;
}

/* --- Pulse Animations (Copper) --- */
@keyframes pulse-copper {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 115, 51, 0.4); }
  50%      { box-shadow: 0 0 0 15px rgba(184, 115, 51, 0); }
}

@keyframes pulse-champagne {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 201, 168, 0.3); }
  50%      { box-shadow: 0 0 0 15px rgba(229, 201, 168, 0); }
}

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

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

/* --- Aurora Shimmer --- */
@keyframes aurora-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.aurora {
  background: linear-gradient(
    135deg,
    rgba(184, 115, 51, 0.05) 0%,
    rgba(229, 201, 168, 0.08) 25%,
    rgba(184, 115, 51, 0.03) 50%,
    rgba(229, 201, 168, 0.06) 75%,
    rgba(184, 115, 51, 0.05) 100%
  );
  background-size: 400% 400%;
  animation: aurora-shimmer 8s ease-in-out infinite;
}

/* --- Shimmer Animations --- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

/* --- Slide Animations --- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

/* --- Spin Animation --- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

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

/* --- Bounce Animation --- */
@keyframes bounce-gentle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.bounce-gentle {
  animation: bounce-gentle 2s ease-in-out infinite;
}

/* --- Typewriter --- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--copper);
  margin-left: 2px;
  animation: blink 0.8s step-end infinite;
}

/* --- Card Tilt Container --- */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.tilt-card-inner {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.tilt-card:hover .tilt-card-inner {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

.tilt-card-content {
  transform: translateZ(30px);
}

/* --- Magnetic Button Core --- */
.magnetic-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Shake Animation --- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-3px); }
  30%, 70% { transform: translateX(3px); }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* --- Glow Line (Copper) --- */
@keyframes glow-line {
  0%   { transform: scaleX(0); opacity: 0; }
  50%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}

.glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  transform-origin: center;
  animation: glow-line 3s ease-in-out infinite;
}

/* --- Loading Dots (Copper) --- */
@keyframes dot-pulse {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.dot-pulse span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
  margin: 0 3px;
  animation: dot-pulse 1.4s ease-in-out infinite both;
}

.dot-pulse span:nth-child(1) { animation-delay: -0.32s; }
.dot-pulse span:nth-child(2) { animation-delay: -0.16s; }

/* --- Progress Bar --- */
@keyframes progress-fill {
  from { width: 0%; }
}

/* --- Count Up Animation --- */
.count-up {
  display: inline-block;
}

/* --- Notification Toast --- */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 2rem;
  background: rgba(11, 13, 16, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 201, 168, 0.1);
  border-radius: 16px;
  color: var(--frost-white);
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: slideInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.hiding {
  animation: slideOutDown 0.3s ease forwards;
}

/* --- Hover Glow (Copper) --- */
.hover-glow {
  transition: box-shadow var(--transition-fast);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(184, 115, 51, 0.3),
              0 0 40px rgba(184, 115, 51, 0.1);
}

/* --- Text Reveal Animation --- */
@keyframes text-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.text-reveal {
  animation: text-reveal 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* --- Parallax Tilt --- */
.parallax-tilt {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Border Glow (Champagne) --- */
@keyframes border-glow {
  0%, 100% { border-color: rgba(229, 201, 168, 0.2); }
  50%      { border-color: rgba(229, 201, 168, 0.5); }
}

.border-glow {
  animation: border-glow 2s ease-in-out infinite;
}

/* --- Metallic Reflection --- */
@keyframes metallic-shift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.metallic {
  background: linear-gradient(
    90deg,
    rgba(184, 115, 51, 0.1) 0%,
    rgba(229, 201, 168, 0.15) 30%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(229, 201, 168, 0.15) 70%,
    rgba(184, 115, 51, 0.1) 100%
  );
  background-size: 200% 100%;
  animation: metallic-shift 4s ease-in-out infinite;
}