/* ============================================================
   MOBILE DRAWER & MICRO-ANIMATIONS
   Gramaton.pro — Premium Mobile Navigation
   ============================================================
   - Drawer (85% width, cubic-bezier 350ms)
   - Parallax content (scale 0.96, blur 8px)
   - Stagger effect (30ms cascade)
   - Burger → Cross animation (350ms)
   - Swipe-to-close inertia
   - GPU acceleration via translate3d
   - Adaptive blur (energy saving)
   ============================================================ */

/* ---------- MOBILE DRAWER (sm: < 768px) ---------- */
#mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 85%;
  max-width: 360px;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height for mobile browsers */
  z-index: 1000;

  /* Gramaton glassmorphism background */
  background: var(--gram-bg-surface, rgba(13, 21, 41, 0.95));
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-right: 1px solid var(--gram-border, rgba(28, 43, 74, 0.4));

  /* GPU-accelerated transform (default: hidden left) */
  transform: translate3d(-100%, 0, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
  will-change: transform;

  /* Custom cubic-bezier: soft start + gentle dampener */
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1) 0s;

  /* Inner flex layout */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;

  /* Scrollbar styling for Webkit */
  scrollbar-width: thin;
  scrollbar-color: var(--gram-border, rgba(28, 43, 74, 0.3)) transparent;
}

#mobile-drawer::-webkit-scrollbar {
  width: 3px;
}

#mobile-drawer::-webkit-scrollbar-track {
  background: transparent;
}

#mobile-drawer::-webkit-scrollbar-thumb {
  background: var(--gram-border, rgba(28, 43, 74, 0.3));
  border-radius: 3px;
}

/* Drawer open state */
#mobile-drawer.open {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/* Drawer overlay (dark veil behind drawer) */
#drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  z-index: 999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms cubic-bezier(0.22, 1, 0.36, 1) 0s;
}

#drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- PARALLAX CONTENT (scale + shift) ---------- */
#main-content.parallax-open {
  transform: translate3d(85%, 0, 0) scale(0.96);
  -webkit-transform: translate3d(85%, 0, 0) scale(0.96);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1) 0s;
  transform-origin: top left;
  -webkit-transform-origin: top left;
}

/* ---------- STAGGER EFFECT (cascade menu items) ---------- */
.drawer-menu-item {
  opacity: 0;
  transform: translate3d(-20px, 0, 0);
  -webkit-transform: translate3d(-20px, 0, 0);
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

#mobile-drawer.open .drawer-menu-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/* Stagger delays are set via JS inline style --item-index */
#mobile-drawer.open .drawer-menu-item:nth-child(1) { transition-delay: 30ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(2) { transition-delay: 60ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(3) { transition-delay: 90ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(4) { transition-delay: 120ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(5) { transition-delay: 150ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(6) { transition-delay: 180ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(7) { transition-delay: 210ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(8) { transition-delay: 240ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(9) { transition-delay: 270ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(10) { transition-delay: 300ms; }

/* ---------- BURGER → CROSS ANIMATION ---------- */
.burger-icon {
  width: 28px;
  height: 20px;
  position: relative;
  cursor: pointer;
  z-index: 1001;
}

.burger-icon .burger-line {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #e0d5c1; /* Old Money ivory */
  border-radius: 2px;
  transition: all 350ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.burger-icon .burger-line:nth-child(1) { top: 0; }
.burger-icon .burger-line:nth-child(2) { top: 9px; }
.burger-icon .burger-line:nth-child(3) { bottom: 0; }

/* Cross state */
.burger-icon.active .burger-line:nth-child(1) {
  transform: translate3d(0, 9px, 0) rotate(45deg);
  -webkit-transform: translate3d(0, 9px, 0) rotate(45deg);
}

.burger-icon.active .burger-line:nth-child(2) {
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  opacity: 0;
}

.burger-icon.active .burger-line:nth-child(3) {
  transform: translate3d(0, -9px, 0) rotate(-45deg);
  -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg);
}

/* ---------- GRAMATON THEME OVERRIDES ---------- */
[data-theme="gramaton"] #mobile-drawer,
[data-theme="gramaton-dark"] #mobile-drawer {
  background: var(--gram-bg-surface, rgba(13, 21, 41, 0.95));
  border-right: 1px solid rgba(0, 212, 255, 0.15);
}

[data-theme="gramaton"] .burger-icon .burger-line {
  background: var(--gram-text-primary, #E8EEF8);
}

[data-theme="gramaton"] .nav-item:hover {
  background: rgba(0, 212, 255, 0.08);
  color: var(--gram-primary, #00D4FF);
}

[data-theme="gramaton"] .nav-item.active {
  color: var(--gram-primary, #00D4FF);
  background: rgba(0, 212, 255, 0.10);
  border-left: 2px solid var(--gram-primary, #00D4FF);
}

/* ---------- ADAPTIVE BLUR (energy saving / low perf) ---------- */
#mobile-drawer.eco-mode {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#drawer-overlay.eco-mode {
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* ---------- TABLET VARIANT (override) ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  #mobile-drawer {
    width: 64px;
    max-width: 64px;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  #mobile-drawer .drawer-menu-item span {
    display: none;
  }

  #mobile-drawer .drawer-menu-item {
    justify-content: center;
    padding: 16px 0;
  }

  #drawer-overlay,
  #main-content.parallax-open {
    display: none;
  }

  .burger-icon {
    display: none;
  }
}

/* ---------- DESKTOP (hide drawer entirely) ---------- */
@media (min-width: 1025px) {
  #mobile-drawer,
  #drawer-overlay {
    display: none;
  }
}