/* Metallic Gradient Utilities for Matt Seames Portfolio */

/* Metallic Gold Gradient for Headers */
h1, h2, h3 {
  background: linear-gradient(135deg, 
    #ffd700 0%,
    #ffed4e 20%,
    #d4af37 40%,
    #ffd700 60%,
    #c5a028 80%,
    #ffd700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gold-shimmer 3s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8))
          drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
  position: relative;
  padding: 0.2em 0.1em;
  overflow: visible;
}

@keyframes gold-shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Metallic Silver for Sub-headers */
h4, h5, h6, .subheader {
  background: linear-gradient(135deg,
    #E8E8E8 0%,
    #FFFFFF 20%,
    #C0C0C0 40%,
    #E8E8E8 60%,
    #A8A8A8 80%,
    #E8E8E8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: silver-shimmer 3s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8))
          drop-shadow(0 0 20px rgba(192, 192, 192, 0.3));
  position: relative;
}

@keyframes silver-shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Metallic Gold Gradient for CTA Buttons */
.btn-cta {
  background: linear-gradient(135deg,
    #ffd700 0%,
    #ffed4e 15%,
    #d4af37 30%,
    #ffd700 50%,
    #c5a028 70%,
    #ffed4e 85%,
    #ffd700 100%);
  background-size: 200% 200%;
  animation: gold-shimmer 3s ease-in-out infinite;
  box-shadow: 
    0 0 30px rgba(255, 215, 0, 0.6),
    0 0 60px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 215, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.btn-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent);
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

.btn-cta:hover {
  background: linear-gradient(135deg,
    #ffed4e 0%,
    #ffd700 25%,
    #ffed4e 50%,
    #d4af37 75%,
    #ffd700 100%);
  box-shadow: 
    0 0 40px rgba(255, 215, 0, 0.8),
    0 0 80px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* Metallic Silver for Secondary Buttons with Cyan Text */
.btn-secondary {
  background: linear-gradient(135deg,
    #E8E8E8 0%,
    #FFFFFF 15%,
    #C0C0C0 30%,
    #E8E8E8 50%,
    #A8A8A8 70%,
    #FFFFFF 85%,
    #E8E8E8 100%);
  background-size: 200% 200%;
  animation: silver-shimmer 3s ease-in-out infinite;
  border: 2px solid rgba(192, 192, 192, 0.4);
  box-shadow: 
    0 0 30px rgba(192, 192, 192, 0.5),
    0 0 60px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  color: transparent;
}

.btn-secondary span {
  background: linear-gradient(135deg,
    #0ea5e9 0%,
    #22d3ee 20%,
    #06b6d4 40%,
    #0ea5e9 60%,
    #0891b2 80%,
    #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: cyan-shimmer 3s ease-in-out infinite;
}

@keyframes cyan-shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.btn-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent);
  animation: shine 2s infinite;
}

.btn-secondary:hover {
  border-color: rgba(192, 192, 192, 0.6);
  box-shadow: 
    0 0 30px rgba(0, 0, 0, 1),
    0 0 60px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
  text-shadow: 
    0 0 15px rgba(255, 255, 255, 0.7),
    0 2px 4px rgba(0, 0, 0, 1);
}

/* Silver metallic link styling */
.silver-link {
  background: linear-gradient(135deg,
    #E8E8E8 0%,
    #FFFFFF 20%,
    #C0C0C0 40%,
    #E8E8E8 60%,
    #A8A8A8 80%,
    #E8E8E8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: silver-shimmer 3s ease-in-out infinite;
  font-weight: 500;
  transition: all 0.3s ease;
}

.silver-link:hover {
  filter: brightness(1.3) drop-shadow(0 0 10px rgba(192, 192, 192, 0.5));
}

/* Brighter card text */
.card-text {
  color: #F3F4F6;
}

/* Metallic Blue Gradient for Navigation */
.gradient-blue-metallic {
  background: linear-gradient(135deg,
    #0ea5e9 0%,
    #38bdf8 20%,
    #0284c7 40%,
    #0ea5e9 60%,
    #0369a1 80%,
    #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: blue-shimmer 3s ease-in-out infinite;
  font-weight: 900;
  filter: drop-shadow(0 2px 6px rgba(14, 165, 233, 0.4));
  transition: all 0.3s ease;
}

.gradient-blue-metallic:hover {
  filter: brightness(1.3) drop-shadow(0 0 15px rgba(14, 165, 233, 0.6));
}

@keyframes blue-shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Twinkling Star Separator for Hero Subtitle */
.star-separator {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 12px;
  background: radial-gradient(circle, #0ea5e9 0%, #38bdf8 50%, #0284c7 100%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.8), 0 0 4px rgba(56, 189, 248, 0.6);
  animation: twinkle 3s ease-in-out infinite;
  vertical-align: middle;
}

.star-separator:nth-of-type(2) {
  animation-delay: 0.5s;
}

.star-separator:nth-of-type(3) {
  animation-delay: 1s;
}

/* Gold Metallic Text for Top Contributors and Support Icons */
.text-gold-metallic {
  background: linear-gradient(135deg,
    #ffd700 0%,
    #ffed4e 20%,
    #d4af37 40%,
    #ffd700 60%,
    #c5a028 80%,
    #ffd700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gold-shimmer 3s ease-in-out infinite;
  font-weight: 700;
}

/* Gold Icons for Support My Work */
.icon-gold {
  color: #ffd700;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
  transition: all 0.3s ease;
}

.icon-gold:hover {
  color: #ffed4e;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
  transform: scale(1.1);
}

/* Metallic Silver Text */
.text-silver-metallic {
  background: linear-gradient(135deg,
    #E8E8E8 0%,
    #FFFFFF 20%,
    #C0C0C0 40%,
    #E8E8E8 60%,
    #A8A8A8 80%,
    #E8E8E8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: silver-shimmer 3s ease-in-out infinite;
  font-weight: 500;
}

/* === SHARED UTILITIES === */

/* Body Font */
body {
  font-family: 'Inter', sans-serif;
}

/* Focus Ring */
.focus-ring:focus {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* Card Hover Effect */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  border-color: rgba(14, 165, 233, 0.3);
  box-shadow: 0 0 30px rgba(14, 165, 233, 0.1);
}

/* Text Shadow for Gray Text */
.text-gray-300, .text-gray-400 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* === 4-LAYER SEQUENTIAL BACKGROUND SYSTEM === */

.background-layers {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.layer-black {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  z-index: 1;
}

.layer-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  animation: fadeIn 2s ease-in 0.5s forwards;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
}

.star.twinkle {
  animation: twinkle 3s ease-in-out infinite;
}

.star.twinkle-slow {
  animation: twinkle 5s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

.layer-shooting-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0;
  animation: fadeIn 2s ease-in 1.5s forwards;
}

.shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.9);
  animation: shoot 3s ease-out;
  opacity: 0;
}

@keyframes shoot {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(300px) translateY(300px);
    opacity: 0;
  }
}

.layer-aurora {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  opacity: 0;
  animation: fadeIn 2s ease-in 2s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes aurora-dance {
  0% {
    transform: translateX(-20%) translateY(0) skewX(-5deg);
    opacity: 0.4;
  }
  25% {
    transform: translateX(-10%) translateY(-40px) skewX(3deg);
    opacity: 0.5;
  }
  50% {
    transform: translateX(0) translateY(-20px) skewX(-2deg);
    opacity: 0.6;
  }
  75% {
    transform: translateX(10%) translateY(-50px) skewX(4deg);
    opacity: 0.5;
  }
  100% {
    transform: translateX(-20%) translateY(0) skewX(-5deg);
    opacity: 0.4;
  }
}

@keyframes aurora-pulse {
  0%, 100% {
    filter: brightness(0.8) blur(40px);
  }
  50% {
    filter: brightness(1.1) blur(35px);
  }
}

.aurora-wave {
  position: absolute;
  width: 150%;
  height: 300px;
  left: -25%;
  animation: aurora-dance 12s ease-in-out infinite, aurora-pulse 6s ease-in-out infinite;
  will-change: transform, opacity, filter;
  mix-blend-mode: screen;
}

.aurora-wave:nth-child(1) {
  top: 10%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(14, 165, 233, 0.4) 20%,
    rgba(34, 211, 238, 0.6) 40%,
    rgba(6, 182, 212, 0.5) 60%,
    rgba(14, 165, 233, 0.35) 80%,
    transparent 100%);
  animation-duration: 15s, 7s;
  animation-delay: 0s, 0s;
}

.aurora-wave:nth-child(2) {
  top: 30%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(34, 211, 238, 0.35) 15%,
    rgba(14, 165, 233, 0.55) 35%,
    rgba(34, 211, 238, 0.6) 55%,
    rgba(6, 182, 212, 0.4) 75%,
    transparent 100%);
  animation-duration: 18s, 8s;
  animation-delay: 3s, 1.5s;
}

.aurora-wave:nth-child(3) {
  top: 50%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(6, 182, 212, 0.3) 25%,
    rgba(34, 211, 238, 0.5) 45%,
    rgba(14, 165, 233, 0.45) 65%,
    rgba(34, 211, 238, 0.35) 85%,
    transparent 100%);
  animation-duration: 16s, 7.5s;
  animation-delay: 6s, 3s;
}

body > *:not(.background-layers) {
  position: relative;
  z-index: 1;
}