/* ==========================================================================
   INTERACTIVE HERO
   Floating text elements with physics-based cursor repulsion
   ========================================================================== */

/* -------------------------------------------------------------------------
   INTERACTIVE BACKGROUND CONTAINER
   ------------------------------------------------------------------------- */

.hero__interactive-bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   FLOATING WORDS
   ------------------------------------------------------------------------- */

.floating-word {
  position: absolute;
  font-family: var(--font-display);
  font-weight: var(--font-normal);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  user-select: none;
  will-change: transform;
  transition: opacity var(--duration-normal) var(--ease-out);
}

/* Depth-based styling for parallax feel */
/* Note: Removed filter:blur for Chrome performance - using opacity instead */
.floating-word[data-depth="1"] {
  font-size: clamp(1.5rem, 4vw, 3rem);
  opacity: 0.04;
}

.floating-word[data-depth="2"] {
  font-size: clamp(2rem, 5vw, 4rem);
  opacity: 0.06;
}

.floating-word[data-depth="3"] {
  font-size: clamp(2.5rem, 6vw, 5rem);
  opacity: 0.08;
}

/* -------------------------------------------------------------------------
   ACTIVE STATE (when cursor is near)
   ------------------------------------------------------------------------- */

.floating-word.is-active {
  opacity: 0.12 !important;
}

/* -------------------------------------------------------------------------
   MOBILE / TOUCH FALLBACK
   On mobile, words float gently without interaction
   ------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
  .floating-word {
    animation: floatGently 6s ease-in-out infinite;
  }

  .floating-word:nth-child(odd) {
    animation-direction: alternate-reverse;
  }

  .floating-word:nth-child(1) { animation-delay: 0s; }
  .floating-word:nth-child(2) { animation-delay: 0.5s; }
  .floating-word:nth-child(3) { animation-delay: 1s; }
  .floating-word:nth-child(4) { animation-delay: 1.5s; }
  .floating-word:nth-child(5) { animation-delay: 2s; }
  .floating-word:nth-child(6) { animation-delay: 2.5s; }
  .floating-word:nth-child(7) { animation-delay: 3s; }
  .floating-word:nth-child(8) { animation-delay: 3.5s; }
  .floating-word:nth-child(9) { animation-delay: 4s; }
  .floating-word:nth-child(10) { animation-delay: 4.5s; }
}

@keyframes floatGently {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(10px, -15px);
  }
}

/* -------------------------------------------------------------------------
   REDUCED MOTION
   Disable physics animation for users who prefer reduced motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .floating-word {
    animation: none !important;
  }
}