/* Smooth scroll behavior with snap */
html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

body {
    scroll-snap-type: y mandatory;
}

/* Ensure black background before content loads */
html {
    background-color: #000000 !important;
}

body {
    background-color: transparent !important;
}

#loading-overlay {
    transition: opacity 0.3s ease-out;
}

/* Fixed video background */
#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure sections have proper z-index to appear above video */
section {
    position: relative;
    z-index: 1;
}

/* Add text shadow to header and footer for readability over video */
nav, footer {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Active navigation link styling - candlelight yellow */
.nav-link.active {
    color: #fef3c7; /* candlelight yellow */
    border-bottom: 2px solid #fef3c7;
}

/* Ensure sections account for sticky header and footer */
section {
    padding-top: 80px; /* Account for sticky header */
    padding-bottom: 80px; /* Account for sticky footer */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    section {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    
    section#contact {
        padding-bottom: 150px; /* Extra padding to account for fixed footer */
    }
    
    section#contact > div {
        max-height: calc(100vh - 200px); /* Account for larger mobile padding */
    }
}

/* Animation classes for section text - scroll-driven */
.fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

.blur-in {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
    transition: opacity 1s ease-out, filter 1s ease-out, transform 1s ease-out;
}

.blur-in.visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Staggered animation delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* Lights animation effect */
@keyframes lights {
  0% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
  30% { 
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  40% { 
    color: hsl(230, 100%, 95%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  
  70% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  100% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
}

/* Apply lights animation to title, servicesTitle, aboutTitle, contactTitle, and contactSuccess */
h1[data-i18n="content.title"],
h2[data-i18n="content.servicesTitle"],
h2[data-i18n="content.aboutTitle"],
h2[data-i18n="content.contactTitle"],
p[data-i18n="content.contactSuccess"] {
  animation: lights 5s 750ms linear infinite;
}

/* Allow line breaks in servicesTitle and aboutTitle */
h2[data-i18n="content.servicesTitle"],
h2[data-i18n="content.aboutTitle"] {
  white-space: pre-line;
}