/* =========================================
   1. COLOR VARIABLES & THEME SETUP
   ========================================= */
:root {
  /* Default Light Mode Values */
  --bg-color: #fff;
  --text-color: #000;
  --video-bg: #f1f1f1;
  --logo-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Mode Values */
    --bg-color: #000;
    --text-color: #fff;
    --video-bg: #1a1a1a;
    /* This inverts the black logo/icons to white */
    --logo-filter: invert(1);
  }
}

/* =========================================
   2. BASE STYLES
   ========================================= */
body { 
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-color); 
  color: var(--text-color);
  overflow-x: hidden;
  margin: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a { 
  text-decoration: none; 
  color: var(--text-color); 
}

/* PRELOADER */
#preloader {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: var(--bg-color); /* Updated to use variable */
  z-index: 99999;
  opacity: 1; transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.reveal-element {
  opacity: 0; transform: translateY(0);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

body.loaded #preloader { opacity: 0; visibility: hidden; pointer-events: none; }
body.loaded .reveal-element { opacity: 1; transform: translateY(0); }

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.5s; }

/* LAYOUT UTILITIES */
.main-hero-container {
  padding: 16px !important; box-sizing: border-box; width: 100%;
}

.min-h-svh {
  min-height: 100vh; min-height: 100svh;
}

/* =========================================
   3. SWIPER STYLES
   ========================================= */
.swiper {
  width: calc(100% + 32px); margin-left: -16px; margin-right: -16px;
  padding: 0; position: relative; overflow: hidden; 
}

.swiper-wrapper { 
  z-index: 5; transition-timing-function: linear !important; 
}

.swiper-slide {
  height: auto; background: transparent; width: calc(100% - 32px); 
}

@media (min-width: 768px) {
  .swiper-slide { width: auto; }
}

.video-container {
  width: 100%; aspect-ratio: 1080 / 1350; 
  overflow: hidden; 
  background-color: var(--video-bg); /* Updated to use variable */
}

.video-container video {
  width: 100%; object-fit: cover; display: block;
  aspect-ratio: 4 / 5; border-radius: 8px;
  transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
}

.video-container img {
  width: 100%; object-fit: cover; display: block;
  aspect-ratio: 4 / 5; border-radius: 8px!important;
  transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
}

/* =========================================
   4. STICKY LOGO BAR
   ========================================= */
.sticky-logo-bar {
  position: -webkit-sticky; 
  position: sticky; 
  top: -1px; 
  z-index: 100;
  
  background-color: var(--bg-color); /* Updated to use variable */
  padding-top: 16px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-bottom: 16px !important;
  transition: background-color 0.3s ease;
}

/* INVERT LOGO IN DARK MODE
   This targets the image inside the logo bar and applies the invert filter
   when dark mode is active.
*/
.sticky-logo-bar img {
  filter: var(--logo-filter);
  transition: filter 0.3s ease;
}

.fs-15 {
  font-size: 15px !important;
}
.fs-17 {
  font-size: 17px !important;
}