/**
 * Copyright (c) 2025 Anthony Mugendi
 * 
 * This software is released under the MIT License.
 * https://opensource.org/licenses/MIT
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
:root {
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Inter', sans-serif;
  --gold: #fbbf24;
}
.font-serif {
  font-family: var(--font-serif);
}
.font-sans {
  font-family: var(--font-sans);
}

strong{
  font-weight: 900;
}



header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
}



/* Mobile-specific fixes */
@media (max-width: 768px) {
  header {
    position: fixed !important;
    top: 0 !important;
  }
 
}
/* Hero Section Background Animation */
@keyframes gradient-bg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.animate-gradient-bg {
  background: linear-gradient(
    -45deg,
    #1a202c,
    #0f141e,
    #1a202c,
    #0f141e
  ); /* Deep Navy/Charcoal with subtle variations */
  background-size: 400% 400%;
  animation: gradient-bg 15s ease infinite;
}

/* Hero Text Fade-in/Rise-up Animation */
@keyframes hero-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-hero-fade-in-up {
  animation: hero-fade-in-up 1s ease-out forwards;
}

/* Generic Fade-in on Scroll */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Fade-up for How It Works cards */
@keyframes fadeInUpStagger {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.stagger-fade-up {
  opacity: 0;
  transform: translateY(20px);
  /* Ensure initial state is correctly set, animation will override transition */
  transition: none;
}
.stagger-fade-up.is-visible {
  animation: fadeInUpStagger 0.7s ease-out forwards;
}
.stagger-fade-up:nth-child(1).is-visible {
  animation-delay: 0s;
}
.stagger-fade-up:nth-child(2).is-visible {
  animation-delay: 0.2s;
}
.stagger-fade-up:nth-child(3).is-visible {
  animation-delay: 0.4s;
}
/* Add for a potential 4th staggered item like a video card if it's placed there */
.stagger-fade-up:nth-child(4).is-visible {
  animation-delay: 0.6s;
}

/* Slide-in animations for Eves & Vectors */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: none;
}
.slide-in-left.is-visible {
  animation: slideInLeft 0.8s ease-out forwards;
}
.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: none;
}
.slide-in-right.is-visible {
  animation: slideInRight 0.8s ease-out forwards;
}

/* Generic Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
/* Specific styles for video modal content to maintain aspect ratio */
.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 1040px; /* Max width for the video */
  height: auto; /* Adjust height based on aspect ratio */
  padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width * 100%) */
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
/* Generic modal content styles for forms etc. */
.modal-content {
  /* General content container */
  position: relative;
  background-color: #0f141e; /* Dark background for modal content */
  padding: 2rem;
  border-radius: 8px;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  max-width: 95%;
  max-height: 90%; /* Prevent modals from being too tall on small screens */
  overflow-y: auto; /* Allow scrolling for content that exceeds height */
}
/* Overriding scale for all open modals */
.modal-overlay.open .modal-content,
.modal-overlay.open .video-modal-content {
  transform: scale(1);
}
.video-modal-content #video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal-close {
  /* Generic close button (renamed from video-modal-close) */
  position: absolute;
  top: -30px; /* Position above the modal content */
  right: 0px; /* Adjust as needed */
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 1001; /* Ensure close button is above video */
  transform: translate(20px, -20px); /* Move out from corner slightly */
}
@media (min-width: 768px) {
  .modal-close {
    top: -40px;
    right: -40px;
  }
}

/* Portfolio item transitions for filtering */
.portfolio-item {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  aspect-ratio: 16 / 9; /* Maintain aspect ratio for portfolio items */
}