/* =====================================================
   MOTION DESIGN OVERHAUL — Premium Animations CSS
   Framer / Linear / Stripe level
   ===================================================== */

/* ── GPU hints ── */
.hero-ac-float,
.hero-ac-showcase,
.hero-float-stat,
.hero-float-energy,
.hero-doodle,
.hero-bg-shape,
.hero-cursor-glow,
.hero-ac-glow,
.hero-anim-bg,
.hero-stripe,
.glass-band,
.glow-orb,
.reflection,
.btn,
.nav-cta-btn {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ════════════════════════════════════════
   ANIMATED HERO BACKGROUND — Ventro-inspired
   Multi-layer: stripes → glass bands → glow → reflections
   ════════════════════════════════════════ */

/* ── Master container ── */
.hero-anim-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
}

/* ── LAYER 0: Soft base wash ── */
.hero-bg-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(22,129,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 80% 70%, rgba(22,129,255,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(200,220,255,0.05) 0%, transparent 70%);
  animation: washPulse 20s ease-in-out infinite;
}

@keyframes washPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* ════════════════════════════════════════
   LAYER 1: VERTICAL LIGHT STRIPES
   Soft translucent beams that drift horizontally
   ════════════════════════════════════════ */
.hero-stripes-wrap {
  position: absolute;
  inset: -20% -15%;
  transform: translateZ(0);
}

.hero-stripe {
  position: absolute;
  top: -10%;
  bottom: -10%;
  border-radius: 100px;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 12 stripes with varying widths, positions, opacities, and animation timings */
.hs-1 {
  left: 3%;  width: 40px;
  background: linear-gradient(180deg, transparent 0%, rgba(22,129,255,0.04) 20%, rgba(22,129,255,0.07) 50%, rgba(22,129,255,0.04) 80%, transparent 100%);
  animation: stripeDrift1 18s ease-in-out infinite;
  opacity: 0.7;
}
.hs-2 {
  left: 11%; width: 60px;
  background: linear-gradient(180deg, transparent 0%, rgba(200,220,255,0.05) 30%, rgba(22,129,255,0.06) 50%, rgba(200,220,255,0.05) 70%, transparent 100%);
  animation: stripeDrift2 22s ease-in-out infinite;
  opacity: 0.5;
}
.hs-3 {
  left: 20%; width: 35px;
  background: linear-gradient(180deg, transparent 0%, rgba(22,129,255,0.05) 25%, rgba(71,157,255,0.08) 50%, rgba(22,129,255,0.05) 75%, transparent 100%);
  animation: stripeDrift3 15s ease-in-out infinite;
  opacity: 0.8;
}
.hs-4 {
  left: 28%; width: 80px;
  background: linear-gradient(180deg, transparent 0%, rgba(22,129,255,0.03) 30%, rgba(22,129,255,0.055) 50%, rgba(22,129,255,0.03) 70%, transparent 100%);
  animation: stripeDrift1 25s ease-in-out infinite reverse;
  opacity: 0.4;
}
.hs-5 {
  left: 37%; width: 25px;
  background: linear-gradient(180deg, transparent 0%, rgba(71,157,255,0.06) 40%, rgba(22,129,255,0.09) 55%, rgba(71,157,255,0.06) 70%, transparent 100%);
  animation: stripeDrift2 16s ease-in-out infinite;
  opacity: 0.6;
}
.hs-6 {
  left: 48%; width: 55px;
  background: linear-gradient(180deg, transparent 0%, rgba(22,129,255,0.04) 20%, rgba(200,220,255,0.07) 50%, rgba(22,129,255,0.04) 80%, transparent 100%);
  animation: stripeDrift3 20s ease-in-out infinite reverse;
  opacity: 0.5;
}
.hs-7 {
  left: 56%; width: 30px;
  background: linear-gradient(180deg, transparent 0%, rgba(22,129,255,0.05) 30%, rgba(22,129,255,0.08) 50%, rgba(22,129,255,0.05) 70%, transparent 100%);
  animation: stripeDrift1 19s ease-in-out infinite;
  opacity: 0.7;
}
.hs-8 {
  left: 65%; width: 70px;
  background: linear-gradient(180deg, transparent 0%, rgba(200,220,255,0.04) 25%, rgba(22,129,255,0.06) 50%, rgba(200,220,255,0.04) 75%, transparent 100%);
  animation: stripeDrift2 24s ease-in-out infinite reverse;
  opacity: 0.45;
}
.hs-9 {
  left: 73%; width: 45px;
  background: linear-gradient(180deg, transparent 0%, rgba(71,157,255,0.05) 35%, rgba(22,129,255,0.08) 55%, rgba(71,157,255,0.05) 75%, transparent 100%);
  animation: stripeDrift3 17s ease-in-out infinite;
  opacity: 0.65;
}
.hs-10 {
  left: 82%; width: 35px;
  background: linear-gradient(180deg, transparent 0%, rgba(22,129,255,0.04) 20%, rgba(22,129,255,0.07) 50%, rgba(22,129,255,0.04) 80%, transparent 100%);
  animation: stripeDrift1 21s ease-in-out infinite reverse;
  opacity: 0.55;
}
.hs-11 {
  left: 90%; width: 50px;
  background: linear-gradient(180deg, transparent 0%, rgba(200,220,255,0.05) 30%, rgba(22,129,255,0.07) 50%, rgba(200,220,255,0.05) 70%, transparent 100%);
  animation: stripeDrift2 18s ease-in-out infinite;
  opacity: 0.5;
}
.hs-12 {
  left: 97%; width: 40px;
  background: linear-gradient(180deg, transparent 0%, rgba(22,129,255,0.03) 35%, rgba(71,157,255,0.06) 55%, rgba(22,129,255,0.03) 75%, transparent 100%);
  animation: stripeDrift3 23s ease-in-out infinite reverse;
  opacity: 0.4;
}

/* Staggered horizontal drift keyframes — smooth 3-point sway */
@keyframes stripeDrift1 {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.5; }
  33%      { transform: translate3d(25px, 0, 0); opacity: 0.8; }
  66%      { transform: translate3d(-15px, 0, 0); opacity: 0.6; }
}
@keyframes stripeDrift2 {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.4; }
  40%      { transform: translate3d(-30px, 0, 0); opacity: 0.7; }
  70%      { transform: translate3d(20px, 0, 0); opacity: 0.5; }
}
@keyframes stripeDrift3 {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.55; }
  25%      { transform: translate3d(18px, 0, 0); opacity: 0.75; }
  50%      { transform: translate3d(-22px, 0, 0); opacity: 0.45; }
  75%      { transform: translate3d(10px, 0, 0); opacity: 0.65; }
}

/* ════════════════════════════════════════
   LAYER 2: GLASS GRADIENT BANDS
   Wide translucent horizontal sweeps
   ════════════════════════════════════════ */
.hero-glass-bands {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
}

.glass-band {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  filter: blur(60px);
  transform: translateZ(0);
}

.gb-1 {
  width: 120%;
  height: 300px;
  top: 10%;
  left: -10%;
  background: linear-gradient(90deg, transparent 0%, rgba(22,129,255,0.04) 20%, rgba(200,220,255,0.06) 50%, rgba(22,129,255,0.04) 80%, transparent 100%);
  animation: bandSweep1 16s ease-in-out infinite;
}

.gb-2 {
  width: 100%;
  height: 250px;
  top: 45%;
  left: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(200,220,255,0.05) 30%, rgba(22,129,255,0.06) 55%, rgba(200,220,255,0.03) 80%, transparent 100%);
  animation: bandSweep2 20s ease-in-out infinite;
}

.gb-3 {
  width: 110%;
  height: 200px;
  bottom: 5%;
  left: -5%;
  background: linear-gradient(90deg, transparent 0%, rgba(22,129,255,0.03) 25%, rgba(71,157,255,0.05) 50%, rgba(22,129,255,0.03) 75%, transparent 100%);
  animation: bandSweep1 24s ease-in-out infinite reverse;
}

@keyframes bandSweep1 {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); opacity: 0.6; }
  50%      { transform: translate3d(40px, 10px, 0) scaleX(1.05); opacity: 0.9; }
}
@keyframes bandSweep2 {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); opacity: 0.5; }
  33%      { transform: translate3d(-30px, -8px, 0) scaleX(1.03); opacity: 0.75; }
  66%      { transform: translate3d(25px, 5px, 0) scaleX(0.98); opacity: 0.6; }
}

/* ════════════════════════════════════════
   LAYER 3: AMBIENT GLOW ORBS
   Soft pulsating color pools
   ════════════════════════════════════════ */
.hero-glow-orbs {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  filter: blur(80px);
  transform: translateZ(0);
}

.go-1 {
  width: 500px; height: 500px;
  top: -10%; right: -5%;
  background: radial-gradient(circle, rgba(22,129,255,0.08) 0%, rgba(22,129,255,0.03) 40%, transparent 70%);
  animation: orbFloat1 18s ease-in-out infinite;
}
.go-2 {
  width: 400px; height: 400px;
  bottom: 0; left: -5%;
  background: radial-gradient(circle, rgba(71,157,255,0.06) 0%, rgba(22,129,255,0.02) 50%, transparent 70%);
  animation: orbFloat2 22s ease-in-out infinite;
}
.go-3 {
  width: 350px; height: 350px;
  top: 35%; left: 40%;
  background: radial-gradient(circle, rgba(200,220,255,0.06) 0%, rgba(22,129,255,0.02) 45%, transparent 70%);
  animation: orbFloat3 15s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.6; }
  33%      { transform: translate3d(-30px, 20px, 0) scale(1.08); opacity: 0.85; }
  66%      { transform: translate3d(20px, -10px, 0) scale(0.95); opacity: 0.55; }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; }
  50%      { transform: translate3d(40px, -25px, 0) scale(1.1); opacity: 0.7; }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.45; }
  40%      { transform: translate3d(-20px, 30px, 0) scale(1.12); opacity: 0.7; }
  80%      { transform: translate3d(15px, -15px, 0) scale(0.92); opacity: 0.5; }
}

/* ════════════════════════════════════════
   LAYER 4: LIGHT REFLECTIONS
   Diagonal sweeping highlights
   ════════════════════════════════════════ */
.hero-reflections {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateZ(0);
}

.reflection {
  position: absolute;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.ref-1 {
  width: 200%;
  height: 80px;
  top: 25%;
  left: -100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 60%, transparent 100%);
  transform: rotate(-8deg) translateZ(0);
  animation: reflectionSweep1 12s ease-in-out infinite;
}

.ref-2 {
  width: 200%;
  height: 50px;
  bottom: 30%;
  left: -100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 55%, transparent 100%);
  transform: rotate(5deg) translateZ(0);
  animation: reflectionSweep2 18s ease-in-out infinite;
}

@keyframes reflectionSweep1 {
  0%, 100% { transform: rotate(-8deg) translate3d(-10%, 0, 0); opacity: 0; }
  10%      { opacity: 0.6; }
  50%      { transform: rotate(-8deg) translate3d(60%, 0, 0); opacity: 0.8; }
  90%      { opacity: 0.4; }
}
@keyframes reflectionSweep2 {
  0%, 100% { transform: rotate(5deg) translate3d(60%, 0, 0); opacity: 0; }
  15%      { opacity: 0.5; }
  50%      { transform: rotate(5deg) translate3d(-10%, 0, 0); opacity: 0.7; }
  85%      { opacity: 0.3; }
}

/* ════════════════════════════════════════
   AC GLOW BEHIND UNIT
   ════════════════════════════════════════ */
.hero-ac-glow {
  position: absolute;
  z-index: 2;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 300px;
  background: radial-gradient(ellipse at center, rgba(22, 129, 255, 0.12) 0%, rgba(71, 170, 255, 0.06) 40%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

/* ════════════════════════════════════════
   CURSOR GLOW
   ════════════════════════════════════════ */
.hero-cursor-glow {
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 129, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: blur(20px);
}

/* ════════════════════════════════════════
   DOODLE FADE IN
   ════════════════════════════════════════ */
@keyframes doodleFadeIn {
  from { opacity: 0; transform: scale(0.5) rotate(-20deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ════════════════════════════════════════
   GLASSMORPHISM FLOATING CARDS (enhanced)
   ════════════════════════════════════════ */
.hero-float-stat,
.hero-float-energy {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  cursor: default;
  transition: box-shadow 0.4s ease !important;
}

.hero-float-stat:hover,
.hero-float-energy:hover {
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(22, 129, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* ════════════════════════════════════════
   WORD REVEAL
   ════════════════════════════════════════ */
.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ════════════════════════════════════════
   BUTTON SHINE LAYER
   ════════════════════════════════════════ */
.btn-shine-layer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 40%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.25) 60%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
  transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-shine-layer.shine-active {
  left: 130%;
}

/* ════════════════════════════════════════
   ENHANCED BUTTONS — Spring + Scale
   ════════════════════════════════════════ */
.btn {
  transition: background var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease) !important;
}

.btn:hover {
  transform: none !important; /* magnetic handles transform */
}

.btn:active {
  scale: 0.96;
  transition: scale 0.1s ease !important;
}

/* ════════════════════════════════════════
   ENHANCED NAVBAR — Glassmorphism
   ════════════════════════════════════════ */
.navbar {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.3s ease !important;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 4px 24px rgba(0, 0, 0, 0.06) !important;
}

.navbar.nav-hidden {
  transform: translateY(-100%);
}

/* Active link indicator (animated underline) */
.nav-links a::after {
  transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ════════════════════════════════════════
   ENHANCED SCROLL REVEAL
   ════════════════════════════════════════ */
.anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.0, 0.0, 0.2, 1),
              transform 0.7s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
}

.anim.visible {
  opacity: 1;
  transform: translateY(0) !important;
}

/* ════════════════════════════════════════
   CARD 3D TILT (on hover from JS)
   ════════════════════════════════════════ */
.service-card,
.why-card,
.review-card,
.project-card {
  transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
}

/* ════════════════════════════════════════
   AC SHOWCASE — Simple, clean
   ════════════════════════════════════════ */
.hero-ac-showcase {
  will-change: auto;
}

.hero-ac-float {
  transition: none;
}

/* ════════════════════════════════════════
   PERFORMANCE: Reduce motion for preference
   ════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-anim-bg,
  .hero-doodle,
  .hero-cursor-glow,
  .hero-ac-glow,
  #airflowCanvas {
    display: none !important;
  }
}

/* ════════════════════════════════════════
   MOBILE: Lighter animations for performance
   ════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-cursor-glow,
  .hero-doodle,
  .hero-reflections,
  .hero-glass-bands {
    display: none !important;
  }
  .hero-ac-glow {
    width: 300px;
    height: 200px;
  }
  /* Keep only 4 stripes on mobile for perf */
  .hs-2, .hs-4, .hs-6, .hs-8, .hs-10, .hs-11, .hs-12 {
    display: none !important;
  }
  .hero-stripe {
    opacity: 0.4 !important;
  }
  .glow-orb {
    filter: blur(60px);
    opacity: 0.35 !important;
  }
  .go-3 {
    display: none !important;
  }
}