/* Custom tweaks on top of Tailwind */
:root {
  color-scheme: dark;
}

html,
body {
  height: 100%;
}

/* Smooth fade-in for hero media */
video,
img {
  transition: opacity 600ms ease;
}

/* Better focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.8);
  outline-offset: 2px;
}

/* iOS safe height */
.min-h-\[90svh\] {
  min-height: 90svh;
}

/* Glass cards */
.glass {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Gradient buttons */
.btn-gradient {
  background-image: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  color: #fff;
}
.btn-gradient:hover {
  filter: brightness(1.05);
}

/* Hover elevation */
.elevate {
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}
.elevate:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Masonry layout */
.masonry {
  column-gap: 12px;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 12px;
}
@media (min-width: 640px) {
  .masonry {
    column-count: 2;
  }
}
@media (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}
@media (min-width: 1024px) {
  .masonry {
    column-count: 4;
  }
}

/* Hero scroll indicator */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 28px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
}
.scroll-indicator::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  transform: translateX(-50%);
  animation: scrollDot 1.4s infinite ease-in-out;
}
@keyframes scrollDot {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}

/* Image loading shimmer */
.shimmer {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  transform: translateX(-100%);
  animation: shimmerMove 1.6s infinite;
}
.shimmer.loaded::before {
  display: none;
}
@keyframes shimmerMove {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Header solid on scroll */
#siteHeader.scrolled {
  background-color: rgba(11, 18, 32, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}