/* =====================
   JJ Portfolio — Custom Styles
   EDIT: Colors, spacing, fonts if you want
====================== */

:root {
  --sky-blue: #87CEFA;
  --ocean-blue: #1E3A8A;
  --light-gray: #f3f6fa;
  --dark-text: #1a1a1a;
  --soft-white: #ffffff;
}
:root {
  /* Light theme */
  --jj-bg: #f3f6fa;
  --jj-text: #1a1a1a;
  --jj-primary: #4353ff;
  --jj-muted: #64748b;
}
[data-bs-theme="dark"] {
  /* Dark theme */
  --jj-bg: rgb(0, 18, 53);
  --jj-text: #e2e8f0;
  --jj-primary: #7c8cff;
  --jj-muted: #94a3b8;
}





/* ============================
   NAVBAR + PROGRESS BAR
   ============================ */
.custom-navbar {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1500;
  border-radius: 16px;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(11, 26, 51, 0.9);
  box-shadow: 0 8px 30px rgba(2,6,23,0.45);
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.custom-navbar .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
}
.custom-navbar .progress-wrap {
  width: 100%;
  padding: 0 14px 8px;
  min-height: 6px;
  box-sizing: border-box;
}
#nav-progress {
  height: 6px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sky-blue), #0ea5e9, var(--ocean-blue));
  box-shadow: 0 4px 12px rgba(14,165,233,0.12);
  transition: width 80ms linear;
}




/* ============================
   FLOATING CTA BUTTONS
   ============================ */
.floating-ctas a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.25s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.floating-ctas #whatsapp-btn {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
}
.floating-ctas #whatsapp-btn:hover {
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 5px 14px rgba(37,211,102,0.35);
}
.floating-ctas #call-btn {
  background: linear-gradient(135deg, var(--ocean-blue), #0ea5e9);
  color: #fff;
}
.floating-ctas #call-btn:hover {
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 5px 14px rgba(14,165,233,0.35);
}
.floating-ctas #mail-btn {
  background: #f1f5f9;
  color: var(--ocean-blue);
}
.floating-ctas #mail-btn:hover {
  background: #e2e8f0;
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 5px 14px rgba(30,58,138,0.25);
}




body {
  background: var(--jj-bg);
  color: var(--jj-text);
}

section {
  margin-top: calc(72px + 28px); 
}

/* =====================
   Preloader
====================== */
.preloader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--jj-bg);
  z-index: 2000;
  transition: opacity .3s ease, visibility .3s ease;
}
.preloader.hide { opacity: 0; visibility: hidden; }
.preloader img { animation: pulse 1.2s infinite; }
@keyframes pulse {
  0% { transform: scale(1); opacity: .6 }
  50% { transform: scale(1.08); opacity: 1 }
  100% { transform: scale(1); opacity: .6 }
}

/* =====================
   Hero
====================== */
.bg-gradient {
  background: radial-gradient(1000px 400px at -10% -10%, rgba(67,83,255,.15), transparent),
              radial-gradient(800px 300px at 110% 10%, rgba(67,83,255,.12), transparent);
}
.gradient-blobs::before,
.gradient-blobs::after {
  content: "";
  position: absolute; inset: -20% -10% auto auto;
  width: 40vmax; height: 40vmax; border-radius: 50%;
  filter: blur(60px); opacity: .25; z-index: 0;
  background: conic-gradient(from 180deg at 50% 50%, rgba(67,83,255,.35), transparent, rgba(99,102,241,.35));
}
.hero-profile { position: relative; z-index: 1; }

/* =====================
   Service cards
====================== */
.service-card .stretched-link { font-weight: 600; }

/* =====================
   Floating CTAs
====================== */
.floating-cta {
  position: fixed;
  right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 1500;
}
.floating-cta .cta-btn {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--jj-primary); color: #fff;
  text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* =====================
   Footer
====================== */
footer a { color: inherit; opacity: .9 }
footer a:hover { opacity: 1 }

/* =====================
   Swiper pagination
====================== */
.swiper { padding-bottom: 40px; }

/* =====================
   Bulb Toggle (Dark/Light Mode)
====================== */
#bulb-toggle {
  position: fixed;
  top: 20px;
  right: 20px; /* top-right corner */
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  z-index: 1600;
}

/* Rope above bulb */
#bulb-toggle .rope {
  width: 2px;
  height: 70px;
  background: #555;
}

/* Bulb icon (hanging upside down) */
#bulb-toggle i {
  font-size: 32px;
  color: #111;   /* default dark bulb */
  opacity: 0.9;
  transform: rotate(180deg); /* only bulb is flipped */
  transition: color 0.3s, transform 0.3s;
  margin-top: -4px; /* overlap slightly with rope */
}

/* Light mode bulb (off) */
body.light-mode #bulb-toggle i {
  color: #111;
}

/* Dark mode bulb (on / glowing) */
[data-bs-theme="dark"] #bulb-toggle i {
  color: #ffd700;
  text-shadow: 0 0 8px #ffec8b, 0 0 16px #ffd700;
}



/* Hover swing */
#bulb-toggle:hover i {
  transform: rotate(180deg) rotate(-10deg);
}


#bulb-toggle {
  z-index: 99999;       /* always on top */
  pointer-events: auto; /* ensure it can be tapped */
}

.preloader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* so it never blocks touches */
}




/* ============================
   TYPED.JS FIXES
   ============================ */
    #greeting {
      display: inline-block;
      margin-bottom: 8px;
    }

    #subtyped {
      display: block;
      min-height: 2.4em;       /* space for 2 lines */
      line-height: 1.6;
      white-space: normal !important; 
      overflow: visible !important;
    }

    .typed-cursor {
      display: inline-block;
      margin-left: 3px;
      font-weight: 700;
      opacity: 1;
      animation: typed-blink 0.9s steps(2, start) infinite;
    }

    @keyframes typed-blink {
      50% { opacity: 0; }
    }