/* Metallic chrome accents for Outlet Season Corp */

.chrome-text {
  background: linear-gradient(180deg, #f2f5f6 0%, #dfe6e8 35%, #879a9f 55%, #b9c6ca 70%, #f2f5f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.chrome-heading {
  background: linear-gradient(180deg, #ffffff 0%, #dfe6e8 30%, #7fd3f0 55%, #879a9f 75%, #e6f7fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.metal-panel {
  background:
    linear-gradient(145deg, rgba(223, 230, 232, 0.06) 0%, rgba(15, 21, 24, 0.6) 40%, rgba(10, 14, 16, 0.9) 100%);
  border: 1px solid rgba(135, 154, 159, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(242, 245, 246, 0.08),
    0 10px 30px rgba(0, 0, 0, 0.45);
}

.metal-panel:hover {
  border-color: rgba(20, 157, 204, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(242, 245, 246, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 0 25px rgba(20, 157, 204, 0.15);
}

.teal-glow {
  box-shadow: 0 0 60px rgba(20, 157, 204, 0.25);
}

.hero-grid {
  background-image:
    linear-gradient(rgba(20, 157, 204, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 157, 204, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

.hero-float {
  animation: hero-float 7s ease-in-out infinite;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-float { animation: none; }
}

.chrome-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(135, 154, 159, 0.6), rgba(20, 157, 204, 0.8), rgba(135, 154, 159, 0.6), transparent);
}