/* 
 * Custom styles that extend Tailwind 
 * Most styling is now handled by Tailwind utility classes
 */

/* Any browser resets or basic styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #333;
  overflow-x: hidden;
}

/* Logo specific styling */
.logo-container {
  max-width: 100%;
  overflow: visible;
}

.logo {
  max-width: 550px;
  height: auto;
}

/* Hero section enhancements */
section:first-of-type {
  transition: height 0.3s ease;
}

section:first-of-type h1 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media (max-height: 700px) {
  section.min-h-\[90vh\] {
    min-height: 100vh; /* Ensure full coverage on smaller screens */
  }
}

/* Custom opacity class */
.opacity-64 {
  opacity: 0.64;
}

/* Video background styling */
video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0;
  object-fit: cover;
}

/* Alternative video positioning method for better browser support */
@supports not (object-fit: cover) {
  video {
    width: 100%;
    height: 100%;
  }
}

/* Fix for Safari video positioning */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  video {
    width: 100%;
    height: 100%;
    object-position: center;
  }
}

@media (max-width: 768px) {
  video {
    height: 100%;
  }
}

/* Scroll animations initial state */
.scroll-section {
  position: relative;
  overflow: hidden;
}

.animate-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-out, transform 0.6s ease-out;
}

/* Active animation classes added by GSAP */
.animate-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Custom animation for hover effects */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}

button:hover {
  animation: float 2s ease-in-out infinite;
}

/* Focus styles for better accessibility */
:focus {
  outline: 3px solid rgba(20, 57, 95, 0.3);
  outline-offset: 2px;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
  height: 100%;
}

/* Media queries for responsive adjustments */
@media (max-width: 640px) {
  .logo {
    max-width: 90%;
  }
}