/**
 * styles.css
 * Global custom styles, fixes, and complex animations for the public website.
 * Note: Primary layout is handled by Tailwind CSS classes.
 *
 * Primary Brand Color: #B17A3A
 */

/* ====================================
   1. GLOBAL & SCROLL FIXES 
   ==================================== */
html {
  /* Ensures the sticky header doesn't hide content when jumping to an anchor */
  scroll-padding-top: 80px;
}

/* Custom Scrollbar (Optional, for aesthetic only) */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  /* Brand Accent Color for visibility */
  background: #b17a3a;
  border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #0a0a0a;
}

/* ====================================
   2. HERO SLIDER & SECTION STYLES 
   ==================================== */

/* Hero Slider Fade Transition */
.slide-active {
  opacity: 1 !important;
  z-index: 10;
}
.slide-inactive {
  opacity: 0 !important;
  z-index: 0;
}

/* Hero Slider Background Zoom (Subtle animation) */
.news-image {
  transition: transform 0.5s ease-out;
}
.news-image:hover {
  transform: scale(1.03);
}

/* Project Content Text Transition */
.news-text {
  /* Ensures text is hidden cleanly when inactive */
  transition: opacity 0.4s ease-in-out;
}

/* ====================================
   3. LOGIN & FORM STYLES
   ==================================== */

/* Floating Label Transition Fix (for login pages) */
.floating-input:focus ~ label,
.floating-input:not(:placeholder-shown) ~ label {
  /* Overrides Tailwind to use custom positioning */
  transform: translateY(-1.5rem) scale(0.85);
  background-color: transparent; /* Ensures no white block */
  padding: 0 0.5rem;
  left: 1rem;
}

/* PIN Input (for security gate) */
.pin-input {
  font-family: monospace;
  text-align: center;
  letter-spacing: 0.5em;
}

/* Smooth Form Field Animations */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation-name: fadeInUp;
  animation-fill-mode: both;
}