/**
 * ADVENTURIVA // MATEUSZ OSTROWSKI - STYLES
 * Czysty, modularny plik stylów CSS bez preprocesorów
 */

/* ==========================================================================
   1. Konfiguracja bazowa i Google Material Symbols
   ========================================================================== */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Płynne przewijanie do kotwic z uwzględnieniem przyklejonego nagłówka */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

/* ==========================================================================
   2. Efekty świetlne i tła (Hydro-Alpine Theme)
   ========================================================================== */
.rescue-glow {
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.2);
}

.rescue-glow:hover {
  box-shadow: 0 0 32px rgba(249, 115, 22, 0.35);
}

.hydro-glow {
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.28);
}

.hydro-glow:hover {
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.45);
}

.water-glint {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(15, 43, 72, 0) 100%);
}

/* Subtelny branding logo */
.brand-logo-badge {
  filter: drop-shadow(0 2px 8px rgba(6, 182, 212, 0.25));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.group:hover .brand-logo-badge {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 12px rgba(6, 182, 212, 0.45));
}

/* ==========================================================================
   3. Dedykowany, ciemny pasek przewijania (Custom Scrollbar)
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0b1326;
}

::-webkit-scrollbar-thumb {
  background: #222a3d;
  border-radius: 4px;
  border: 1px solid #3d494c;
}

::-webkit-scrollbar-thumb:hover {
  background: #06b6d4;
}

/* ==========================================================================
   4. Animacje Fade-In (sterowane przez IntersectionObserver w main.js)
   ========================================================================== */
.fade-in-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   5. Responsywne menu mobilne (Hamburger Dropdown Overlay)
   ========================================================================== */
#mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#mobile-menu.menu-closed {
  display: none !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

#mobile-menu.menu-open {
  display: block !important;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Ikona hamburgera z animacją przejścia w X */
.hamburger-line {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.is-active .line-top {
  transform: translateY(6px) rotate(45deg);
}

.is-active .line-middle {
  opacity: 0;
}

.is-active .line-bottom {
  transform: translateY(-6px) rotate(-45deg);
}