/* ==========================================================================
   FORCE FEST 2K26 · Technogenesis
   Parallax layer - subtle depth for hero, about, events, timeline,
   team and contact. Decorative only;text and cards never move.
   Loaded last so it can safely fine-tune earlier section rules.
   ========================================================================== */

[data-parallax] {
  transform: translate3d(0, 0, 0);
  will-change: transform;
} /* ---------- HERO - extra floating glow layers ---------- */
.ff-hero-glow-a,
.ff-hero-glow-b {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(6px);
}
.ff-hero-glow-a {
  top: 12%;
  left: 8%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.16), transparent 70%);
}
.ff-hero-glow-b {
  bottom: 10%;
  right: 10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(
    circle,
    rgba(155, 48, 255, 0.16),
    transparent 70%
  );
}
@media (max-width: 900px) {
  .ff-hero-glow-a {
    width: 160px;
    height: 160px;
  }
  .ff-hero-glow-b {
    width: 200px;
    height: 200px;
  }
} /* ---------- ABOUT - decorative circuit line + drifting dot, text untouched ---------- */
.tg-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.tg-deco-line {
  position: absolute;
  top: 14%;
  right: 6%;
  width: 1px;
  height: 46%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 229, 255, 0.35),
    transparent
  );
}
.tg-deco-line.d2 {
  top: 48%;
  right: 14%;
  height: 32%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(155, 48, 255, 0.3),
    transparent
  );
}
.tg-deco-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ff-cyan, #00e5ff);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
  top: 20%;
  left: 5%;
}
.tg-deco-dot.d2 {
  top: 68%;
  left: 9%;
  background: var(--ff-purple, #9b30ff);
  box-shadow: 0 0 10px rgba(155, 48, 255, 0.7);
} /* ---------- EVENTS - background grid + soft cyan lines, cards stay put ---------- */
.ff-events-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ff-events-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 30%,
    #000 30%,
    transparent 78%
  );
}
.ff-events-line {
  position: absolute;
  left: -5%;
  width: 110%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 229, 255, 0.28),
    transparent
  );
}
.ff-events-line.l1 {
  top: 22%;
}
.ff-events-line.l2 {
  top: 64%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(155, 48, 255, 0.22),
    transparent
  );
}
.ff-events-glow {
  position: absolute;
  top: 4%;
  right: -6%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.1), transparent 70%);
  filter: blur(10px);
}
#events {
  position: relative;
  overflow: hidden;
  isolation: isolate;
} /* ---------- TIMELINE - floating particles ---------- */
.ff-tl-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ff-cyan, #00e5ff);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
  z-index: 0;
  pointer-events: none;
}
.ff-tl-particle.p2 {
  background: var(--ff-purple, #9b30ff);
  box-shadow: 0 0 8px rgba(155, 48, 255, 0.7);
} /* ---------- Respect reduced motion: kill every JS-driven transform ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-parallax] {
    transform: none !important;
    will-change: auto;
  }
}

@media (max-width: 900px) {
  .ff-events-glow {
    width: 220px;
    height: 220px;
  }
  .tg-deco-line {
    display: none;
  }
}