/* =========================
   GLOBAL FONT SETUP
========================= */
:root {
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
}

html {
  font-family: var(--font-body);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: white;
}

.dark body {
  background-color: #020617;
}

/* =========================
   NAVBAR BRAND
========================= */
.elegant-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* =========================
   GLASSMORPHISM MENU
========================= */
.glass-menu {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.1);
}

.dark .glass-menu {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* =========================
   MOBILE FIXES
========================= */
@media (max-width: 768px) {
  .glass-menu {
    backdrop-filter: blur(20px);
  }
}

/* =========================
   PREVENT FLASH (ALPINE)
========================= */
[x-cloak] {
  display: none !important;
}


[x-cloak] {
 
display: none !important;
 
}
 
/* .elegant-title {
 
font-family: 'Playfair Display', serif;
 
font-size: 1.75rem;
 
font-weight: 600;
 
letter-spacing: 0.5px;
 
} */
 
.glass-menu {
 
backdrop-filter: blur(16px);
 
background: rgba(255, 255, 255, 0.55);
 
border: 1px solid rgba(255, 255, 255, 0.4);
 
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 
}
 
.dark .glass-menu {
 
background: rgba(255, 255, 255, 0.08);
 
border: 1px solid rgba(255, 255, 255, 0.05);
 
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05);
 
}
 
@keyframes updown {
 
0%, 100% { transform: translateY(0); }
 
50% { transform: translateY(-12px); }
 
}
 
.animate-updown {
 
animation: updown 3s ease-in-out infinite;
 
animation-delay: var(--delay);
 
transition: background 0.3s ease, box-shadow 0.3s ease;
 
color: white;
 
font-weight: 600;
 
padding: 0.75rem 1.5rem;
 
border-radius: 0.75rem;
 
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
 
border: none;
 
cursor: pointer;
 
background: linear-gradient(45deg, #3b82f6, #2563eb);
 
user-select: none;
 
z-index: 20;
 
position: absolute;
 
}
 
.btn-gradient:hover {
 
filter: brightness(1.1);
 
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.6);
 
transform: scale(1.05);
 
}
 
@keyframes floatVertical {
 
0%, 100% { transform: translateY(0); }
 
50% { transform: translateY(-20px); }
 
}
 
.glassmorph-fragment {
 
position: absolute;
 
border-radius: 1rem;
 
backdrop-filter: blur(14px);
 
-webkit-backdrop-filter: blur(14px);
 
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(147, 197, 253, 0.1), rgba(147, 197, 253, 0));
 
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
 
opacity: 0.9;
 
pointer-events: none;
 
animation: floatVertical 6s ease-in-out infinite;
 
z-index: 15;
 
}
 
/* Fragment positions */
 
.left-fragment { width: 150px; height: 80px; top: -10%; left: 10px; animation-delay: 0s; z-index: 0; }
 
.left-fragment-2 { width: 130px; height: 80px; top: 32%; left: 190px; animation-delay: 1s; z-index: 0; }
 
.left-fragment-3 { width: 100px; height: 80px; top: 85%; left: 70px; animation-delay: 1s; z-index: 0; }
 
.center-fragment { width: 130px; height: 80px; top: -5%; left: 35%; z-index: 30; animation-delay: 0s; }
 
.center-fragment-2 { width: 80px; height: 80px; top: 60%; left: 0%; z-index: 30; animation-delay: 0.5s; }
 
.center-fragment-3 { width: 100px; height: 70px; top: 85%; left: 80%; z-index: 30; animation-delay: 1s; }
 
.right-fragment { width: 100px; height: 80px; top: 10%; left: 40%; animation-delay: 0.7s; }
 
.right-fragment-2 { width: 120px; height: 60px; top: 60%; left: 80%; animation-delay: 1.3s; }
 
.left-fragment-introduce { width: 150px; height: 150px; top: 30%; left: 60px; animation-delay: 0s; z-index: 0; }
 
.left-fragment-introduce-2 { width: 100px; height: 100px; top: 60%; left: 130px; animation-delay: 0s; z-index: 0; }
 
.right-fragment-introduce { width: 150px; height: 150px; top: 30%; left: 85%; animation-delay: 0.7s; }
 
.right-fragment-introduce-2 { width: 120px; height: 80px; top: 60%; left: 80%; animation-delay: 1.3s; z-index: 0; }
 
/* Floating animation */
 
@keyframes float {
 
0%, 100% { transform: translateY(0); }
 
50% { transform: translateY(-20px); }
 
}
 
.animate-float {
 
animation: float 6s ease-in-out infinite;
 
}
 
.animate-float-delay-1 {
 
animation: float 8s ease-in-out infinite;
 
}
 
.animate-float-delay-2 {
 
animation: float 7s ease-in-out infinite;
 
}
 
.animate-float-delay-3 {
 
animation: float 9s ease-in-out infinite;
 
}
 
/* Font Defaults */
 
body {
 
font-family: 'Inter', sans-serif;
 
}
 
.title-font {
 
font-family: 'Playfair Display', serif;
 
}
 
/* Infinite Scroll */
 
@keyframes infinite-scroll {
 
0% { transform: translateX(0%); }
 
100% { transform: translateX(-50%); }
 
}
 
.animate-infinite-scroll {
 
animation: infinite-scroll 20s linear infinite;
 
}
 
/* Hide Scrollbar */
 
.scrollbar-hidden::-webkit-scrollbar { display: none; }
 
.scrollbar-hidden {
 
-ms-overflow-style: none;
 
scrollbar-width: none;
 
}
 
/* Font Custom */
 
.font-laravel { font-family: 'Montserrat', sans-serif; }
 
.font-tailwind { font-family: 'Fira Sans', sans-serif; }
 
.font-html { font-family: 'Inter', sans-serif; }
 
.font-css { font-family: 'Montserrat', sans-serif; }
 
.font-js { font-family: 'JetBrains Mono', monospace; }
 
.font-canva { font-family: 'Fira Sans', sans-serif; }
 
.font-figma { font-family: 'Pacifico', cursive; }
 
/* Project Fragment */
 
.center-fragment-project { width: 150px; height: 120px; top: 10%; left: 80%; z-index: 20; }
 
.center-fragment-project-2 { width: 80px; height: 80px; top: 55%; left: 28%; z-index: 5; animation-delay: 0.5s; }
 
.top-left-fragment-project { width: 70px; height: 70px; top: 15%; left: 20%; z-index: 10; }
 
.bottom-right-fragment-project { width: 100px; height: 100px; bottom: 5%; right: 5%; z-index: 30; }
 
.mid-right-fragment-project { width: 170px; height: 70px; top: 50%; right: 30%; z-index: 10; }
 
.low-left-fragment-project { width: 70px; height: 70px; bottom: 4%; left: 20%; z-index: 15; }
 
.high-right-fragment-project { width: 150px; height: 150px; top: 20%; left: 5%; z-index: 15; }
 
.blur-bg-circle-project { width: 200px; height: 200px; top: 65%; left: 40%; z-index: 5; }