/* Hero Section Custom Styles */
:root {
  --dvh: 100dvh;
}

/* Hide scrollbar for a clean look */
html, body {
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Hero Video Container with Gradient Masks */
.home-hero-video {
  padding-left: 1px;
  transform: translateZ(0);
  overflow: hidden; 
  backface-visibility: hidden;
  
  -webkit-mask-image: linear-gradient(250deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;

  mask-image: linear-gradient(250deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  mask-size: cover;
}

.home-hero-video video {
  padding-right: 1px;
  transform: translateZ(0);
  overflow: hidden; 
  backface-visibility: hidden;
  
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;

  mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  mask-size: cover;
}

/* Safari-specific blend mode for color filter */
.safari .hero-video-filter-color {
  mix-blend-mode: multiply;
}

/* Hero Section Styling */
.section-home-hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
}

.home-hero-video-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.home-hero-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* Gradient overlays for enhanced visual effect */
.hero-video-filter-grad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%);
  z-index: 2;
  pointer-events: none;
}

.hero-video-filter-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 7, 18, 0.5);
  z-index: 3;
  pointer-events: none;
}

/* Ensure content is above the hero background */
.auth-page-bg {
  position: relative;
  z-index: 10;
  background: transparent !important;
}

/* Add slight backdrop blur to login form for better readability */
.auth-page-bg .bg-body {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Dark theme support */
[data-bs-theme="dark"] .auth-page-bg .bg-body {
  background: rgba(30, 30, 30, 0.95) !important;
}

/* Character animation styles for future use */
[data-element='anim-text-about'] .char {
  opacity: 0.4;
  transition: opacity 0.3s;
}

[data-element='anim-text-about'] .char.visible {
  opacity: 1;
}