/* Kano Sports custom styles shared across pages */
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #191c1d; background: #f8f9fa; }
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(0, 56, 95, 0.05);
}
.navy-gradient,
.bg-gradient-navy,
.gradient-primary {
  background: linear-gradient(135deg, #00385f 0%, #1e4f7a 100%);
}
.copper-gradient,
.bg-gradient-copper,
.gradient-secondary {
  background: linear-gradient(135deg, #805435 0%, #fdc39c 100%);
}
.soft-shadow {
  box-shadow: 0 10px 30px -5px rgba(0, 56, 95, 0.08);
}
.hover-lift { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hover-lift:hover { transform: translateY(-8px); }
.text-copper { color: #805435; }
.bg-copper { background-color: #805435; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.accordion-active .accordion-content { max-height: 500px; }
.accordion-active .accordion-icon { transform: rotate(180deg); }
.reveal-on-scroll { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .display-lg { font-size: 32px; line-height: 40px; }
  .section-gap { padding-top: 60px; padding-bottom: 60px; }
}
/* Portfolio cards: reveal overlay only on hover / keyboard focus */
.masonry-item .project-overlay {
  opacity: 0;
  background: linear-gradient(to top, rgba(30, 79, 122, 0.92), rgba(30, 79, 122, 0.35), transparent);
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.masonry-item:hover .project-overlay,
.masonry-item:focus-within .project-overlay,
.masonry-item:focus-visible .project-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Portfolio carousel */
.portfolio-carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.portfolio-carousel::-webkit-scrollbar { display: none; }
.portfolio-carousel > * { scroll-snap-align: start; flex: 0 0 85%; }
@media (min-width: 768px) { .portfolio-carousel > * { flex: 0 0 40%; } }