/* =========================================================
  UTILITIES — small helpers only
  - No layout systems, no component styling
  - Pure helpers / micro-utilities / small hooks
========================================================= */

/* ---------------------------------------------------------
  🖼️ Lazy image base
--------------------------------------------------------- */
.lazy-image{
  display:block;
  width:100%;
  height:auto;
  opacity:0;
  transition:opacity .4s ease;
}
.lazy-image.is-loaded{ opacity:1; }

/* ---------------------------------------------------------
  🌗 Light / Dark mode image swap
  (Use: <img class="light-mode-img"> + <img class="dark-mode-img">)
--------------------------------------------------------- */

/* ✅ Theme logo swap — correct visibility logic
   - Dark theme should SHOW the light logo (for dark backgrounds)
   - Light theme should SHOW the dark logo (for light backgrounds)
*/
/* Dark theme: hide dark logo, show light logo */
[data-bs-theme="dark"] .dark-mode-img { display: none !important; }
[data-bs-theme="dark"] .light-mode-img { display: inline-block !important; }

/* Light theme: hide light logo, show dark logo */
[data-bs-theme="light"] .light-mode-img { display: none !important; }
[data-bs-theme="light"] .dark-mode-img { display: inline-block !important; }

/* ---------------------------------------------------------
  🎬 One animation hook (IntersectionObserver adds .is-visible)
--------------------------------------------------------- */
[data-animate="fadeInUp"]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity, transform;
}
[data-animate="fadeInUp"].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------------------------------------------------------
  🔤 Font Lab floating dock
--------------------------------------------------------- */
.font-lab-float{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:1050;
}

.font-lab-float .font-lab-control{
  background:linear-gradient(180deg, rgba(20,22,30,.88), rgba(12,14,20,.92));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:.65rem .75rem;
  box-shadow:0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  min-width:220px;
  /* Fallback if --ease isn't defined elsewhere */
  transition:transform 160ms var(--ease, ease), box-shadow 160ms var(--ease, ease);
}

.font-lab-float:hover .font-lab-control{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}

.font-lab-float .font-lab-label{
  font-size:.65rem;
  opacity:.55;
}

/* Hide on small screens */
@media (max-width:575.98px){
  .font-lab-float{ display:none !important; }
}

/* ---------------------------------------------------------
  ⬆️ Scroll-to-top button
  NOTE: Your HTML uses an <i> icon. Keep ::after OFF or it will
  cover the icon and look like a blank dot.
--------------------------------------------------------- */
#scrollTopBtn{
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translateX(-50%) translateY(100px);
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--bg-page, rgba(10,12,18,.92));
  border:2px solid var(--accent-lavender, rgba(157,150,239,.9));
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  z-index:2000;
  transition:transform var(--transition-base, .25s ease), opacity var(--transition-base, .25s ease);
  -webkit-tap-highlight-color:transparent;
}

#scrollTopBtn i{
  font-size:1.75rem;
  line-height:1;
  color:var(--ink, rgba(255,255,255,.92));
  position:relative;
  z-index:1;
}

#scrollTopBtn.visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

/* Optional: subtle hover lift (desktop only) */
@media (hover:hover){
  #scrollTopBtn:hover{
    transform:translateX(-50%) translateY(-4px);
  }
}

/* ---------------------------------------------------------
  🔤 Text helpers you asked for
--------------------------------------------------------- */
.capitalise{
  text-transform:uppercase;
  letter-spacing:.14em;
}

.padding-bottom-10{
  padding-bottom:10px !important;
}

/* ---------------------------------------------------------
  🌈 Gradient text helpers
--------------------------------------------------------- */
.pit-multiblugren{
  background:linear-gradient(90deg,#8A7EB1 0%,#2c4eff 25%,#4facfe 50%,#56f0c1 75%,#00ff88 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  display:inline-block;
  filter:drop-shadow(0 2px 10px rgba(86,240,193,.2));
}

.pit-multipakegreblu{
  background:linear-gradient(90deg,#4facfe 0%,#56f0c1 45%,#00ff88 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  display:inline-block;
  filter:drop-shadow(0 4px 12px rgba(0,255,136,.25));
}

.pit-multishdeelec{
  background:linear-gradient(90deg,#D1E9FF 0%,#A3D2FF 30%,#4facfe 65%,#2c4eff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  display:inline-block;
  filter:drop-shadow(0 2px 8px rgba(163,210,255,.3));
}

.pit-multipubleg{
  background:linear-gradient(270deg,#D1E9FF 0%,#A3D2FF 30%,#4facfe 65%,#2c4eff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  display:inline-block;
  filter:drop-shadow(0 2px 8px rgba(44,78,255,.25));
}

.pit-multiglubale{
  background:linear-gradient(90deg,#4facfe 0%,#48ffc9 35%,#56f0c1 65%,#00ff88 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  display:inline-block;
  filter:drop-shadow(0 2px 12px rgba(0,255,136,.25));
}

/* ---------------------------------------------------------
  🔠 Typography Overrides
--------------------------------------------------------- */
.fs-18px{
  font-size:var(--fs-lg, 18px) !important;
}