/* ============================================================
   UPAY — Premium Effects CSS
   ============================================================ */

/* ── SCROLL PROGRESS BAR ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00436d, #0089c2, #00b4d8);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 6px rgba(0,180,216,0.5);
}

/* ── PRELOADER ── */
#upay-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: all;
}
.pl-panel {
  position: absolute;
  inset: 0;
  background: #001E30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.pl-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,180,216,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,180,216,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.pl-panel::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,67,109,0.3) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.pl-logo {
  position: relative; z-index: 1;
  display: flex; align-items: baseline;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 6.5rem);
  letter-spacing: -0.04em;
  color: white;
}
.pl-letter {
  display: inline-block;
  color: #00b4d8;
  text-shadow: 0 0 40px rgba(0,180,216,0.5);
}
.pl-text {
  display: inline-block;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,0.6));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pl-tagline {
  position: relative; z-index: 1;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}
.pl-progress {
  position: relative; z-index: 1;
  width: min(280px, 60vw);
  display: flex; flex-direction: column;
  align-items: center; gap: 0.6rem;
}
.pl-bar {
  width: 100%; height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 100px; overflow: hidden;
}
.pl-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #00436d, #00b4d8);
  border-radius: 100px;
  box-shadow: 0 0 8px rgba(0,180,216,0.5);
}
.pl-count {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.22);
  font-variant-numeric: tabular-nums;
}

/* ── PAGE TRANSITION PANEL ── */
#page-transition {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  display: none;
}
.pt-inner {
  position: absolute;
  inset: 0;
  background: #001E30;
}


/* ── HERO CANVAS ── */
#hero-particles {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0; opacity: 0.7;
}

/* ── TEXT SCRAMBLE ── */
.scramble-char { color: #00b4d8; opacity: 0.75; display: inline-block; }

/* ══════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   Elements start invisible, .visible makes them show
══════════════════════════════════════════════ */

/* Base hidden state */
.fade-up,
.fade-in,
.slide-left,
.slide-right,
.bento-card,
.how-card,
.stat-item,
.testimonial-card,
.product-card,
.service-card,
.feature-card,
.team-card,
.press-card,
.tl-item,
.section-tag,
.section-header,
.download-content,
.invest-showcase,
.contact-info,
.contact-form-card,
.faq-item,
.office-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide variants */
.slide-left  { transform: translateX(-36px); }
.slide-right { transform: translateX(36px);  }
.fade-in     { transform: none; }

/* Visible state */
.fade-up.visible,
.fade-in.visible,
.slide-left.visible,
.slide-right.visible,
.bento-card.visible,
.how-card.visible,
.stat-item.visible,
.testimonial-card.visible,
.product-card.visible,
.service-card.visible,
.feature-card.visible,
.team-card.visible,
.press-card.visible,
.tl-item.visible,
.section-tag.visible,
.section-header.visible,
.download-content.visible,
.invest-showcase.visible,
.contact-info.visible,
.contact-form-card.visible,
.faq-item.visible,
.office-card.visible {
  opacity: 1;
  transform: none;
}

/* Services / products grids — observe grid, show children */
.services-grid,
.products-grid {
  opacity: 1 !important;
  transform: none !important;
}

/* ── MARQUEE CSS ANIMATION ── */
.marquee-track {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.marquee-track .partners-row {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 1rem;
  animation: marquee-run 28s linear infinite;
  /* Override any previous opacity/transform from reveal animations */
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.marquee-track .partners-row[aria-hidden="true"] {
  animation-delay: -14s;
}
@keyframes marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ── PERFORMANCE HINTS ── */
.bento-card, .how-card, .float-card, .btn-primary, .btn-outline, .btn-gold {
  will-change: transform;
}
.how-track-fill { animation: none !important; }


@media (max-width: 768px) {
  #hero-particles { opacity: 0.3; }
  .pl-logo { font-size: clamp(2.2rem, 11vw, 4.5rem); }
}