/* ==========================================================================
   High-End Interactive & Ambient Visual Effects (Cloud & Harbor)
   Strictly preserves Hero / Carousel / Support bounding-box geometry.
   ========================================================================== */

/* 1. Cloud Hero: 3D Cyber Grid + Aurora Light Beams + Neural Canvas */
.hero {
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(96, 165, 250, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(96, 165, 250, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 25%, transparent 80%);
  animation: cyber-grid-drift 18s linear infinite;
}
.hero::after {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  top: -180px;
  left: -120px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, rgba(99, 102, 241, 0.16) 42%, transparent 70%);
  filter: blur(48px);
  animation: aurora-pulse 9s ease-in-out infinite alternate;
}
.hero-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

@keyframes cyber-grid-drift {
  0% { background-position: 0 0; }
  100% { background-position: 48px 48px; }
}
@keyframes aurora-pulse {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
  100% { transform: translate3d(80px, 40px, 0) scale(1.18); opacity: 1; }
}

/* 2. Hero Eyebrow Neon Pulse & Metallic Shimmer Headline */
.hero .eyebrow {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.25), inset 0 0 12px rgba(96, 165, 250, 0.15);
  backdrop-filter: blur(8px);
}
.hero .eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8, 0 0 20px #38bdf8;
  vertical-align: middle;
  animation: live-dot-pulse 2s ease-in-out infinite;
}
@keyframes live-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}

.hero h1 {
  background: linear-gradient(110deg, #ffffff 15%, #bae6fd 42%, #c7d2fe 58%, #ffffff 85%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-shimmer 7s linear infinite;
}
@keyframes title-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 220% center; }
}

/* 3. Shimmering Light-Beam CTA Buttons */
.hero-button,
.business-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-button::after,
.business-button::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 45%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.38),
    transparent
  );
  transform: rotate(25deg);
  animation: button-beam 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}
@keyframes button-beam {
  0%, 25% { left: -60%; opacity: 0; }
  35% { opacity: 1; }
  65%, 100% { left: 135%; opacity: 0; }
}

/* 4. Harbor Hero Ambient Aurora & Flow Node Pulse */
.business-hero {
  overflow: hidden;
}
.business-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(56, 189, 248, 0.14), transparent 42%),
    radial-gradient(circle at 78% 22%, rgba(99, 102, 241, 0.12), transparent 44%),
    radial-gradient(circle at 50% 65%, rgba(16, 185, 129, 0.09), transparent 50%);
  animation: harbor-ambient 10s ease-in-out infinite alternate;
}
@keyframes harbor-ambient {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.06); }
}
.business-hero h1 {
  background: linear-gradient(120deg, #0f172a 15%, #1d4ed8 50%, #0f172a 85%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-shimmer 8s linear infinite;
}
.business-flow-link::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1.5px solid var(--flow-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.business-flow-link:hover::after {
  opacity: 0.55;
  animation: flow-ring-pulse 1.8s ease-out infinite;
}
@keyframes flow-ring-pulse {
  0% { transform: scale(0.99); opacity: 0.65; }
  100% { transform: scale(1.03); opacity: 0; }
}

/* 5. Mouse-Tracking Radial Spotlight + 3D Micro-Tilt Cards */
[data-spotlight] {
  position: relative;
  isolation: isolate;
  --spot-x: 50%;
  --spot-y: 50%;
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
  will-change: transform;
}
[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    380px circle at var(--spot-x) var(--spot-y),
    rgba(59, 130, 246, 0.13),
    rgba(99, 102, 241, 0.05) 45%,
    transparent 75%
  );
}
[data-spotlight]:hover::before {
  opacity: 1;
}
.entry-tile[data-spotlight]:hover,
.advantage-grid article[data-spotlight]:hover,
.industry-grid article[data-spotlight]:hover,
.guarantee-grid > article[data-spotlight]:hover {
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow:
    0 22px 48px -12px rgba(37, 99, 235, 0.2),
    0 0 0 1px rgba(96, 165, 250, 0.25);
}

/* Guarantees Card Styling Upgrade */
.guarantee-grid > article {
  padding: 28px 20px;
  border-radius: 16px;
  background: linear-gradient(160deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(203, 213, 225, 0.75);
  box-shadow: 0 10px 26px -10px rgba(15, 23, 42, 0.06);
}
.guarantee-grid > article img {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}
.guarantee-grid > article:hover img {
  transform: translateY(-4px) scale(1.08);
  filter: drop-shadow(0 8px 16px rgba(37, 99, 235, 0.22));
}

/* Industry Image Zoom on Hover */
.industry-grid article {
  overflow: hidden;
}
.industry-grid article img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.industry-grid article:hover img {
  transform: scale(1.06);
}

/* 6. Scroll-Triggered Staggered Reveal (Below the Fold Only) */
.fx-reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hero h1,
  .business-hero::before,
  .business-hero h1,
  .hero-button::after,
  .business-button::after {
    animation: none !important;
  }
  .fx-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-spotlight] {
    transform: none !important;
  }
}