/* 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%; } }

/* Cinematic hero background treatment */
.hero-cinematic { background-color: #00243d; }
.hero-bg-img {
  filter: saturate(1.15) contrast(1.08) brightness(1.02);
  transform: scale(1.06);
  animation: heroKenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroKenBurns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-img { animation: none; transform: scale(1.02); }
}
.hero-tint {
  background:
    linear-gradient(100deg, rgba(0, 30, 51, 0.94) 0%, rgba(0, 56, 95, 0.72) 38%, rgba(0, 56, 95, 0.18) 66%, rgba(0, 56, 95, 0) 100%),
    linear-gradient(to top, rgba(0, 24, 41, 0.85) 0%, rgba(0, 24, 41, 0.1) 45%, rgba(0, 24, 41, 0.25) 100%);
}
.hero-glow {
  background: radial-gradient(60% 55% at 82% 22%, rgba(253, 195, 156, 0.38) 0%, rgba(128, 84, 53, 0.18) 40%, rgba(0, 0, 0, 0) 72%);
  mix-blend-mode: screen;
}
.hero-vignette {
  background: radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 12, 22, 0.55) 100%);
}
@media (max-width: 640px) {
  .hero-tint {
    background:
      linear-gradient(180deg, rgba(0, 24, 41, 0.7) 0%, rgba(0, 40, 68, 0.6) 40%, rgba(0, 24, 41, 0.9) 100%);
  }
}