/* ============================================================
 * Tyler Digital Co — Shared hero effects
 * Starfield canvas + nebula parallax blobs + cursor glow
 * Green/cyan/teal palette on dark background
 * Adapted from cosmic-encounter aesthetic
 * ============================================================ */

.fx-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.fx-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

.fx-nebula.a {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.35) 0%, transparent 70%);
  top: -15%;
  left: -10%;
}

.fx-nebula.b {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.25) 0%, transparent 70%);
  bottom: -10%;
  right: -8%;
}

.fx-nebula.c {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.18) 0%, transparent 70%);
  bottom: 20%;
  left: 35%;
}

/* Subtle variant — smaller, fewer, more muted. For content-dense pages. */
.fx-nebula-subtle.a {
  width: 380px;
  height: 380px;
  filter: blur(90px);
  opacity: 0.22;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.25) 0%, transparent 70%);
  top: -20%;
  right: -10%;
  left: auto;
}

.fx-nebula-subtle.b {
  width: 300px;
  height: 300px;
  filter: blur(80px);
  opacity: 0.15;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.18) 0%, transparent 70%);
  bottom: -15%;
  left: -8%;
  top: auto;
  right: auto;
}

/* Cursor glow — follows mouse sitewide */
.fx-cursor-glow {
  position: fixed;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: left 0.15s ease-out, top 0.15s ease-out, opacity 0.3s ease-out;
  opacity: 0;
  mix-blend-mode: screen;
}

.fx-cursor-glow.active {
  opacity: 1;
}

/* Containers that wrap effects — need positioning + overflow control */
.hero-wrapper,
.hero,
.page-header,
.article,
.article-wrap {
  position: relative;
  overflow: hidden;
}

/* Ensure direct content inside hero sections layers above effects */
.hero-inner,
.hero > *:not(.fx-stars):not(.fx-nebula):not(.fx-cursor-glow),
.page-header > *:not(.fx-stars):not(.fx-nebula):not(.fx-cursor-glow),
.article > *:not(.fx-nebula),
.article-wrap > *:not(.fx-nebula) {
  position: relative;
  z-index: 2;
}

/* ============================================================
 * Scroll-triggered fade-up animations
 * Elements with .fade-up start hidden + translated down
 * and fade into position when they enter the viewport.
 * Driven by animations.js using IntersectionObserver.
 * ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Side-slide variants — opt in by adding .fade-left or .fade-right alongside .fade-up */
.fade-up.fade-left {
  transform: translate(-40px, 0);
}
.fade-up.fade-left.visible {
  transform: translate(0, 0);
}
.fade-up.fade-right {
  transform: translate(40px, 0);
}
.fade-up.fade-right.visible {
  transform: translate(0, 0);
}

/* Stagger children inside a .stagger-children container */
.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-children.stagger-active > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.stagger-children.stagger-active > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.stagger-children.stagger-active > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.stagger-children.stagger-active > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.stagger-children.stagger-active > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.stagger-children.stagger-active > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.stagger-children.stagger-active > *:nth-child(n+7) { transition-delay: 480ms; opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-up.fade-left, .fade-up.fade-right,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Respect reduced motion — disable everything moving */
@media (prefers-reduced-motion: reduce) {
  .fx-nebula,
  .fx-cursor-glow {
    transition: none;
  }
  .fx-stars {
    opacity: 0.5;
  }
}

/* Hide cursor glow on touch devices */
@media (hover: none) {
  .fx-cursor-glow {
    display: none;
  }
}