/**
 * Custom CSS for Desa Penjalin Profile Website
 * Integrates with Tailwind CSS and adds premium animations,
 * scroll-driven layouts, and custom glassmorphism.
 */


/* Reset and Base Styles */
html {
  scroll-behavior: smooth;
  scrollbar-color: #10b981 #f3f4f6;
  scrollbar-width: thin;
  font-family: 'Roboto', sans-serif;
}

/* Custom Scrollbar (WebKit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f3f4f6;
}
::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #059669;
}

/* Glassmorphism Classes */
.glass-nav {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.glass-card {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Sticky Header Scroll-Driven Animation (Progressive Enhancement) */
@keyframes shrinkHeader {
  to {
    height: 64px; /* 4rem equivalent to h-16 */
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(12px);
    border-color: rgba(229, 231, 235, 0.6);
  }
}

@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  header.sticky-header {
    animation: shrinkHeader auto linear both;
    animation-timeline: scroll(block root);
    animation-range: 0px 120px;
  }
}

/* Fallback class injected by JS if scroll-driven animation isn't supported */
header.sticky-header.header-scrolled {
  height: 64px !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  border-color: rgba(229, 231, 235, 0.6) !important;
}

/* Hamburger Icon Animation */
#menu-toggle .hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  position: absolute;
  left: 0;
  border-radius: 9999px;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, top 0.3s ease-in-out, bottom 0.3s ease-in-out;
}

#menu-toggle .top-line {
  top: 4px;
}

#menu-toggle .middle-line {
  top: 10px;
}

#menu-toggle .bottom-line {
  bottom: 4px;
}

#menu-toggle.open .top-line {
  top: 10px;
  transform: rotate(45deg);
}

#menu-toggle.open .middle-line {
  opacity: 0;
  transform: scaleX(0);
}

#menu-toggle.open .bottom-line {
  bottom: 10px;
  transform: rotate(-45deg);
}

/* Animation utilities for JS observer reveals */
.animate-on-load {
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hero overlay gradient */
.hero-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.6) 100%);
}

/* Custom cards styling */
.premium-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.premium-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Gallery Hover Styles */
.gallery-item img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover img {
  transform: scale(1.08);
}

/* Smooth active state for navigation */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #10b981;
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.text-primary-600::after {
  width: 100%;
}