/* ── Custom CSS for X2VPN — supplements Tailwind CDN ── */

/* Fonts */
body { font-family: 'Outfit', 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* ── Animations ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes pulse-slow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 0.8; transform: scale(1.05); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes ping-anim {
  75%, 100% { transform: scale(2); opacity: 0; }
}

.animate-float      { animation: float 6s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse-slow 8s ease-in-out infinite; }
.animate-slide-up   { animation: slide-up 0.6s cubic-bezier(0.4,0,0.2,1) forwards; }
.animate-reveal     { animation: reveal 1s cubic-bezier(0.4,0,0.2,1) forwards; }
.animate-ping       { animation: ping-anim 1s cubic-bezier(0,0,0.2,1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .animate-float, .animate-pulse-slow, .animate-slide-up, .animate-reveal, .animate-ping {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ── Glassmorphism ── */
.glass {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 32px rgba(31,38,135,0.1);
  transition: all 0.3s ease;
}

/* ── Mesh Gradients ── */
.mesh-gradient {
  background-color: #ffffff;
  background-image:
    radial-gradient(at 0% 0%,   hsla(210,100%,98%,1) 0, transparent 50%),
    radial-gradient(at 50% 0%,  hsla(206,100%,94%,1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(199,100%,96%,1) 0, transparent 50%);
}
.mesh-gradient-footer {
  background-color: #0f172a;
  background-image:
    radial-gradient(at 0% 0%,   hsla(221,45%,15%,1) 0, transparent 50%),
    radial-gradient(at 50% 0%,  hsla(217,33%,17%,1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(215,25%,20%,1) 0, transparent 50%);
}

/* ── Sticky Header Scroll Effect ── */
#site-header.scrolled {
  padding-top: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
#site-header.scrolled #site-nav {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 8px 32px rgba(31,38,135,0.08), 0 0 0 1px rgba(255,255,255,0.4);
}

/* ── Mobile Menu ── */
#mobile-menu { transition: opacity 0.4s ease, visibility 0.4s ease; }
#mobile-menu.menu-open {
  opacity: 1 !important;
  visibility: visible !important;
}
.mob-item { transition: opacity 0.4s ease, transform 0.4s ease; }
#mobile-menu.menu-open .mob-item { opacity: 1 !important; transform: translateY(0) !important; }

/* Hamburger animation */
.bar { display: block; transition: all 0.3s ease; transform-origin: center; }
#menu-btn.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#menu-btn.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
#menu-btn.open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Feature card bottom accent bar ── */
.feature-card { position: relative; overflow: hidden; }
.feature-card-bar {
  position: absolute; bottom: 0; left: 0;
  height: 4px; width: 0;
  background: linear-gradient(to right, #0284c7, #06b6d4);
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}
.feature-card:hover .feature-card-bar { width: 100%; }

/* ── Mobile language picker ── */
/* Grid trick: animate open/close without overflow-hidden (so scrollbar stays visible) */
.mob-lang-grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.mob-lang-grid.open {
  grid-template-rows: 1fr;
}
.mob-lang-grid-inner {
  min-height: 0;
  overflow: hidden;
  padding-bottom: 4px;
}
.mob-lang-scroll {
  height: 200px;
  overflow-y: scroll;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  scrollbar-width: auto;
  scrollbar-color: #94a3b8 #f1f5f9;
  -webkit-overflow-scrolling: touch;
}
.mob-lang-scroll::-webkit-scrollbar       { width: 8px; }
.mob-lang-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 9999px; }
.mob-lang-scroll::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 9999px; }
.mob-lang-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ── Custom Scrollbar ── */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb {
  background: #cbd5e1; border-radius: 9999px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; background-clip: content-box;
}