/* ==========================================================================
   LumiNova LED Display — Premium Animations & Effects
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Global easing tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ultra-smooth premium easing curves */
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast:   250ms var(--ease-out-expo);
  --transition-base:   500ms var(--ease-out-expo);
  --transition-slow:   800ms var(--ease-out-expo);
  --transition-spring: 600ms var(--ease-spring);
}

/* --------------------------------------------------------------------------
   1. Silky smooth scrolling (momentum-based)
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   2. Cursor glow (desktop only)
   -------------------------------------------------------------------------- */
#lumi-cursor {
  position: fixed;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, rgba(112,0,255,.9) 0%, rgba(255,113,140,.7) 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width .25s var(--ease-out-expo),
              height .25s var(--ease-out-expo),
              opacity .25s ease;
  mix-blend-mode: screen;
  will-change: transform;
}

#lumi-cursor-ring {
  position: fixed;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(112,0,255,.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  transition: width .4s var(--ease-out-expo),
              height .4s var(--ease-out-expo),
              border-color .3s ease,
              opacity .3s ease;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   3. CTA Button — magnetic shimmer + depth lift
   -------------------------------------------------------------------------- */
.cta-pill {
  position: relative;
  transition: transform var(--transition-spring),
              filter var(--transition-base);
}

.cta-primary:hover,
.cta-secondary:hover {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.08);
}

.cta-primary:active,
.cta-secondary:active {
  transform: translateY(1px) scale(0.98);
  transition-duration: 100ms;
}

/* Shimmer sweep across primary button */
.cta-primary .cta-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.25) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  transition: left .6s var(--ease-out-expo);
  pointer-events: none;
  border-radius: 40px;
}

.cta-primary:hover .cta-text::after {
  left: 140%;
}

/* --------------------------------------------------------------------------
   4. Choose cards — glow hover (JS owns the transform/3D tilt)
   -------------------------------------------------------------------------- */
.choose-grid {
  perspective: 1200px;
}

.choose-card {
  /* JS sets inline transform on mousemove/mouseleave — no CSS transform here */
  transition: box-shadow var(--transition-base);
}

.choose-card:hover {
  /* No transform — JS handles 3D tilt */
  box-shadow:
    0 24px 64px rgba(112,0,255,.35),
    0 8px 24px rgba(255,113,140,.15),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Glowing inner highlight on hover */
.choose-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: radial-gradient(ellipse at 50% 0%, rgba(112,0,255,.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.choose-card:hover::after {
  opacity: 1;
}

/* Icon bob on card hover */
.choose-card:hover .choose-icon {
  animation: iconBob .5s var(--ease-spring) forwards;
}

@keyframes iconBob {
  0%   { transform: translateY(0) rotate(0deg); }
  40%  { transform: translateY(-8px) rotate(-6deg); }
  70%  { transform: translateY(-4px) rotate(3deg); }
  100% { transform: translateY(-6px) rotate(0deg); }
}

/* --------------------------------------------------------------------------
   5. Product cards — glow hover (JS owns the transform/3D tilt)
   -------------------------------------------------------------------------- */
.products-grid {
  perspective: 1400px;
}

.product-card {
  /* JS sets inline transform on mousemove/mouseleave */
  transition: box-shadow var(--transition-base);
}

.product-card:hover {
  /* No transform — JS handles 3D tilt */
  box-shadow:
    0 32px 80px rgba(112,0,255,.4),
    0 12px 32px rgba(255,113,140,.2);
}

/* Product image 3D lift */
.product-img {
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-spring);
}

.product-card:hover .product-img {
  transform: scale(1.08) translateZ(20px);
}

/* --------------------------------------------------------------------------
   6. How-we-work cards — glow hover (JS owns the transform)
   -------------------------------------------------------------------------- */
.how-card {
  transition: box-shadow var(--transition-base),
              background var(--transition-base);
}

.how-card:hover {
  /* No transform — JS handles tilt */
  background: #150e2a;
  box-shadow:
    0 20px 60px rgba(112,0,255,.3),
    -4px 0 24px rgba(112,0,255,.2);
}

.how-icon {
  transition: filter var(--transition-base), transform var(--transition-spring);
}

.how-card:hover .how-icon {
  filter: drop-shadow(0 0 8px rgba(112,0,255,.8));
  transform: scale(1.2) rotate(-5deg);
}

/* --------------------------------------------------------------------------
   7. Project cards — glow hover (JS owns the transform)
   -------------------------------------------------------------------------- */
.project-show-card {
  transition: box-shadow var(--transition-base);
}

.project-show-card:hover {
  /* No transform — JS handles tilt */
  box-shadow:
    0 32px 80px rgba(112,0,255,.3),
    0 8px 32px rgba(0,0,0,.4);
}

.project-show-img {
  transition: transform .7s var(--ease-out-expo);
}

.project-show-card:hover .project-show-img {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   8. Blog cards — glow hover (JS owns the transform)
   -------------------------------------------------------------------------- */
.blog-card {
  transition: box-shadow var(--transition-base);
}

.blog-card:hover {
  /* No transform — JS handles tilt */
  box-shadow:
    0 28px 72px rgba(112,0,255,.3),
    0 8px 24px rgba(255,113,140,.1);
}

/* --------------------------------------------------------------------------
   9. Stat boxes — pulse glow
   -------------------------------------------------------------------------- */
.stat-box {
  transition: transform var(--transition-spring),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
  position: relative;
  overflow: hidden;
}

.stat-box:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow:
    0 24px 64px rgba(112,0,255,.45),
    0 4px 16px rgba(255,113,140,.2);
  border-color: rgba(255,113,140,.4) !important;
}

/* Animated gradient shimmer on stat-num */
.stat-num {
  background-size: 200% auto;
  animation: gradientShift 3s linear infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* --------------------------------------------------------------------------
   10. Navbar links — no extra underline (gradient text on hover/active
       is already handled in style.css via .lumi-nav .nav-link:hover)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   11. About images — floating parallax
   -------------------------------------------------------------------------- */
.about-img-wrap {
  /* Ultra-smooth transition for hover states */
  transition: transform 800ms cubic-bezier(0.175, 0.885, 0.32, 1.1),
              box-shadow 800ms cubic-bezier(0.19, 1, 0.22, 1) !important;
  will-change: transform, translate, rotate;
}

.about-img-wrap:hover {
  /* Lift and scale — transitions smoothly because float uses translate/rotate */
  transform: scale(1.05) translateY(-12px) !important;
  box-shadow: 0 32px 80px rgba(112,0,255,.5) !important;
  z-index: 5;
}

/* Floating animation — isolated to translate/rotate properties */
.about-images .about-img-wrap:first-child {
  animation: floatA 6s ease-in-out infinite;
}

.about-images .about-img-wrap:last-child {
  animation: floatB 6s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes floatA {
  0%, 100% { translate: 0 30px; rotate: -2deg; }
  50%      { translate: 0 16px; rotate: -2deg; }
}

@keyframes floatB {
  0%, 100% { translate: 0 30px; rotate: 2deg; }
  50%      { translate: 0 16px; rotate: 2deg; }
}

/* --------------------------------------------------------------------------
   12. FAQ accordion — smooth expand + glow
   -------------------------------------------------------------------------- */
.faq-item {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.faq-item:has(.accordion-button:not(.collapsed)) {
  transform: scale(1.01);
  box-shadow: 0 8px 40px rgba(112,0,255,.2);
}

/* --------------------------------------------------------------------------
   13. Contact form inputs — focus glow
   -------------------------------------------------------------------------- */
.custom-input {
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.custom-input:focus {
  border-bottom-color: #FF718C !important;
  box-shadow: 0 4px 16px rgba(112,0,255,.2) !important;
}

/* --------------------------------------------------------------------------
   14. Footer links — slide-right on hover
   -------------------------------------------------------------------------- */
.footer-links a {
  display: inline-block;
  transition: transform var(--transition-base);
}

.footer-links a:hover {
  transform: translateX(6px);
}

/* --------------------------------------------------------------------------
   15. WhatsApp float — stronger bounce hover
   -------------------------------------------------------------------------- */
.whatsapp-float {
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
}

.whatsapp-float:hover {
  transform: scale(1.18) translateY(-4px);
  box-shadow: 0 16px 56px rgba(37,211,102,.65);
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   16. Banner image — subtle depth zoom
   -------------------------------------------------------------------------- */
.banner-img {
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  border-radius: 30px;
  will-change: transform;
}

.banner-img:hover {
  transform: scale(1.015);
  box-shadow:
    0 40px 100px rgba(112,0,255,.25),
    0 12px 40px rgba(0,0,0,.3);
}

/* --------------------------------------------------------------------------
   17. Floating ambient particles (JS-powered, CSS-animated)
   -------------------------------------------------------------------------- */
.lumi-particle {
  position: fixed;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: particleDrift var(--drift-dur, 8s) ease-in-out infinite;
  animation-delay: var(--drift-delay, 0s);
  background: var(--p-color, rgba(112,0,255,.6));
}

@keyframes particleDrift {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  15%  { opacity: .6; }
  80%  { opacity: .3; }
  100% { transform: translateY(-80vh) translateX(var(--drift-x, 40px)) scale(0.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   18. Client logos — scale + glow hover
   -------------------------------------------------------------------------- */
.client-slide img {
  opacity: .75;
  transition: transform var(--transition-spring),
              filter var(--transition-base),
              opacity var(--transition-base);
}

.client-slide img:hover {
  transform: scale(1.15) translateY(-4px);
  filter: brightness(1.3) drop-shadow(0 4px 16px rgba(112,0,255,.5));
  opacity: 1;
}

/* --------------------------------------------------------------------------
   19. Nav logo — entrance animation
   -------------------------------------------------------------------------- */
.nav-logo {
  animation: logoEntrance .8s var(--ease-spring) both;
}

@keyframes logoEntrance {
  from { transform: scale(.85) translateY(-8px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* --------------------------------------------------------------------------
   20. Scroll progress bar glow
   -------------------------------------------------------------------------- */
#scroll-progress {
  box-shadow: 0 0 10px rgba(112,0,255,.6), 0 0 20px rgba(255,113,140,.3);
}

/* --------------------------------------------------------------------------
   21. Scroll-reveal utility class (JS-driven)
   Once is-visible is applied the transition is reset so CSS :hover rules
   on each specific card take full control without being overridden.
   -------------------------------------------------------------------------- */
.lumi-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease-out-expo),
              transform .65s var(--ease-out-expo);
}

.lumi-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  /* Let the individual card's transition rules take over from here */
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              background var(--transition-base),
              border-color var(--transition-base),
              filter var(--transition-base);
}

/* --------------------------------------------------------------------------
   12. Hero Loading Effects — Cinematic Blur Reveal
   -------------------------------------------------------------------------- */
.hero-section .hero-heading {
  opacity: 0; /* Starts invisible */
  animation: heroBlurFocus 1.6s cubic-bezier(0.175, 0.885, 0.32, 1.1) 0.4s forwards;
  will-change: transform, opacity, filter;
}

@keyframes heroBlurFocus {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(50px) scale(0.95);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   22. Reduced-motion overrides
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .about-images .about-img-wrap:first-child,
  .about-images .about-img-wrap:last-child {
    animation: none;
  }
}