/* Custom styles for Mariscos Seafood */

/* Smooth scroll offset for fixed nav */
html {
  scroll-padding-top: 80px;
}

/* Selection color */
::selection {
  background: #FF6B4A;
  color: white;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
  background: #FF6B4A;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #e55a3a;
}

/* Geometric pattern overlay for sections */
.geo-pattern {
  background-image: 
    linear-gradient(45deg, rgba(255,107,74,0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,107,74,0.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,107,74,0.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,107,74,0.03) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}

/* Animated gradient border for cards on hover */
.menu-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, #FF6B4A, transparent, #FF6B4A);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.menu-card:hover::after {
  opacity: 1;
}

/* Floating animation for decorative elements */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes float-reverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(20px) rotate(-5deg); }
}

.geo-float-1 { animation: float 6s ease-in-out infinite; }
.geo-float-2 { animation: float-reverse 7s ease-in-out infinite; }
.geo-float-3 { animation: float 8s ease-in-out infinite; }

/* Pulse animation for CTA buttons */
@keyframes pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255,107,74,0.4); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255,107,74,0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255,107,74,0); }
}

.btn-coral:focus {
  animation: pulse-ring 1.5s ease-out infinite;
}

/* Image placeholder gradient */
.img-placeholder {
  background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Noise texture overlay */
.noise-overlay {
  position: relative;
}
.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* Responsive typography adjustments */
@media (max-width: 640px) {
  .font-display {
    letter-spacing: 0.02em;
  }
}

/* Print styles */
@media print {
  nav, .mobile-menu, #hamburger { display: none; }
  body { color: #000; background: #fff; }
  .hero-bg { background: #1a1a1a !important; }
  .menu-card { break-inside: avoid; }
}