/* ==========================================================================
   FX LAYER — aurora, dot grid, animated cursor, reveals, tilt, marquee.
   Everything here is progressive enhancement: without fx.js the page keeps
   the previous (static, readable) look.
   ========================================================================== */

/* ---------- Background: aurora + reactive dot grid ---------- */
.fx-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --px: 0;
  --py: 0;
}
.fx-aurora {
  position: absolute;
  inset: -10%;
  transform: translate3d(calc(var(--px) * 24px), calc(var(--py) * 24px), 0);
  will-change: transform;
}
.fx-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.9;
  will-change: transform;
}
.fx-blob-1 {
  width: 46vmax; height: 46vmax; left: -8%; top: -12%;
  background: radial-gradient(circle at 40% 40%, rgba(37, 99, 235, 0.28), rgba(37, 99, 235, 0) 68%);
  animation: fx-drift-a 22s ease-in-out infinite alternate;
}
.fx-blob-2 {
  width: 40vmax; height: 40vmax; right: -10%; top: 4%;
  background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.26), rgba(34, 211, 238, 0) 68%);
  animation: fx-drift-b 26s ease-in-out infinite alternate;
}
.fx-blob-3 {
  width: 38vmax; height: 38vmax; left: 22%; bottom: -18%;
  background: radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.24), rgba(129, 140, 248, 0) 68%);
  animation: fx-drift-c 30s ease-in-out infinite alternate;
}
.fx-blob-4 {
  width: 30vmax; height: 30vmax; right: 8%; bottom: 2%;
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.2), rgba(56, 189, 248, 0) 68%);
  animation: fx-drift-a 34s ease-in-out infinite alternate-reverse;
}
@keyframes fx-drift-a { to { transform: translate3d(14vw, 10vh, 0) scale(1.18) rotate(18deg); } }
@keyframes fx-drift-b { to { transform: translate3d(-12vw, 14vh, 0) scale(0.9) rotate(-16deg); } }
@keyframes fx-drift-c { to { transform: translate3d(10vw, -12vh, 0) scale(1.22) rotate(10deg); } }

.fx-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fx-bg::after {
  /* soft white veil so text always stays highly legible */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0.55) 100%);
}

/* the samples band used a solid grey; let the aurora breathe through it */
.samples-section { background: rgba(240, 243, 247, 0.62) !important; backdrop-filter: blur(2px); }

/* ---------- Scroll progress ---------- */
.fx-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 300;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #2563eb, #22d3ee, #818cf8);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.5);
  pointer-events: none;
}

/* ---------- Hero ---------- */
.fx-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.fx-word > span {
  display: inline-block;
  transform: translateY(115%) rotate(4deg);
  animation: fx-word-in 0.9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 150ms);
}
@keyframes fx-word-in { to { transform: none; } }
.hero-title .gradient-text {
  display: inline-block;
  animation: fx-word-fade 1s cubic-bezier(.16,1,.3,1) 0.55s both, fx-shimmer 6s linear 1.5s infinite;
}
@keyframes fx-word-fade { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fx-shimmer { to { background-position: 200% center; } }
.gradient-text { animation: fx-shimmer 6s linear infinite; }

.hero-photo-wrapper { animation: fx-float 7s ease-in-out infinite; }
@keyframes fx-float { 50% { transform: translateY(-12px); } }
.hero-photo { object-fit: cover; object-position: 55% 45%; }
.hero-photo-wrapper::after { animation: fx-pulse-ring 4s ease-in-out infinite; }
@keyframes fx-pulse-ring { 50% { opacity: 0.45; } }

.fx-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.fx-stat strong {
  display: block;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.9rem;
  line-height: 1;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.fx-stat span { font-size: 0.78rem; color: #64748b; letter-spacing: 0.02em; }

/* ---------- Tech marquee ---------- */
.fx-marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  border-block: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.fx-marquee-track { display: flex; width: max-content; animation: fx-marquee 38s linear infinite; }
.fx-marquee:hover .fx-marquee-track { animation-play-state: paused; }
.fx-marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: #475569;
  white-space: nowrap;
}
.fx-marquee-track i { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #22d3ee); }
@keyframes fx-marquee { to { transform: translateX(-50%); } }

/* ---------- Scroll reveal ---------- */
.fx-ready .fx-reveal {
  transition: opacity 0.9s cubic-bezier(.16,1,.3,1), translate 0.9s cubic-bezier(.16,1,.3,1),
    transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
  transition-delay: var(--d, 0ms), var(--d, 0ms), 0s, 0s, 0s, 0s;
}
.fx-ready .fx-reveal:not(.fx-in) { opacity: 0; translate: 0 38px; }
.fx-ready .fx-reveal.fx-in { opacity: 1; translate: 0 0; }

/* ---------- Tilt + spotlight on cards ---------- */
.fx-tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.fx-tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) !important; }
.fx-spot-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(37, 99, 235, 0.14), rgba(34, 211, 238, 0.06) 40%, transparent 70%);
  transition: opacity 0.35s ease;
}
.fx-spot:hover > .fx-spot-glow { opacity: 1; }

/* ---------- Magnetic buttons ---------- */
.fx-magnetic { transition: transform 0.35s cubic-bezier(.16,1,.3,1), background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: fx-sheen 4.5s ease-in-out 1.5s infinite;
  pointer-events: none;
}
@keyframes fx-sheen { 0%, 60% { left: -60%; } 100% { left: 140%; } }

/* ---------- Misc polish ---------- */
.section-title .gradient-text { display: inline-block; }
.navbar-links a.active { color: #2563eb; }
::selection { background: rgba(37, 99, 235, 0.2); }
html { scroll-behavior: smooth; }

@media (max-width: 900px) {
  .fx-blob { filter: blur(50px); }
  .fx-stats { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-ready .fx-reveal:not(.fx-in) { opacity: 1; translate: none; }
  .fx-word > span, .hero-title .gradient-text { transform: none; opacity: 1; filter: none; }
  .fx-marquee-track { animation: none; }
  .fx-blob, .fx-aurora { animation: none; transform: none; }
}

.hero-title { text-wrap: balance; }
@media (min-width: 901px) { .hero-title { font-size: clamp(2.6rem, 3.75vw, 3.4rem); } }