/* Custom styles for Pet Selfies — premium dark luxury theme */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0d0a0c;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d4a843, #9a213a);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #e8c060, #bc2a48);
}

/* Selection color */
::selection {
  background: rgba(212, 168, 67, 0.3);
  color: #fceee8;
}

/* Focus styles */
*:focus-visible {
  outline: 2px solid #d4a843;
  outline-offset: 2px;
}

/* Image frame hover */
.image-frame img {
  transition: transform 0.6s ease;
}
.image-frame:hover img {
  transform: scale(1.05);
}

/* Gold shimmer animation for hero text */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.text-gold-gradient {
  background: linear-gradient(90deg, #f5d78e, #e8c060, #d4a843, #e8c060, #f5d78e);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* Pulse animation for CTA */
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(212, 168, 67, 0); }
}

.btn-primary:hover {
  animation: pulse-gold 1.5s ease infinite;
}

/* Subtle floating animation for decorative elements */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Parallax-like subtle movement */
.image-frame {
  will-change: transform;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .text-gold-gradient { animation: none; }
  .btn-primary:hover { animation: none; }
  .image-frame img { transition: none; }
  .image-frame:hover img { transform: none; }
}