/* ===== Crystal FX (drop-in) ===== */
:root{
  --fx-glass-bg: rgba(255,255,255,.06);
  --fx-glass-brd: rgba(255,255,255,.15);
  --fx-neon-1: #6ac8ff;
  --fx-neon-2: #8a6bff;
  --fx-neon-3: #3fe3b2;
}

/* subtle “glass” polish for any card/section you want boosted */
.fx-glass {
  background: linear-gradient(180deg,var(--fx-glass-bg),rgba(255,255,255,.03));
  border: 1px solid var(--fx-glass-brd);
  backdrop-filter: saturate(140%) blur(8px);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}

/* PAGE ENTER — whole app fades in with crystalline shards */
.fx-enter {
  opacity: 0;
  transform: translateY(12px) scale(.98);
  filter: saturate(.9) blur(.2px);
}
.fx-enter.fx-enter-done {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1),
              transform .7s cubic-bezier(.2,.7,.2,1),
              filter .7s ease;
}

/* SCROLL REVEAL — add .fx to anything; JS toggles .in */
.fx {
  opacity: 0;
  transform: translateY(16px) rotateX(2deg);
  will-change: transform, opacity, filter;
  filter: saturate(.9) blur(.3px);
}
.fx.in {
  opacity: 1;
  transform: translateY(0) rotateX(0);
  filter: none;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1),
              transform .6s cubic-bezier(.2,.7,.2,1),
              filter .6s ease;
}

/* Stagger helper (data-fx-delay set by JS) */
.fx[data-fx-delay] { transition-delay: var(--fx-delay, 0ms); }

/* Sparkle background container */
#fx-sparkles {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  overflow: hidden; contain: layout paint;
}
.fx-sparkle {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--fx-neon-1) 40%, transparent 70%);
  opacity: .0; filter: blur(.5px);
  animation: fxTwinkle linear infinite;
}
@keyframes fxTwinkle {
  0%   { transform: translate3d(var(--x,0), calc(var(--y,0) + 10px), 0) scale(.7); opacity: 0; }
  10%  { opacity: .35; }
  50%  { opacity: .6; }
  100% { transform: translate3d(var(--x,0), calc(var(--y,0) - 60px), 0) scale(1.1); opacity: 0; }
}

/* Shard overlay for the first 900ms */
#fx-shards {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(10,20,32,.6), rgba(10,20,32,.2));
  opacity: 0; transition: opacity .35s ease;
}
#fx-shards.active { opacity: 1; }
.fx-shard {
  position: absolute; width: 24vmin; height: 24vmin; opacity: 0.07;
  background: conic-gradient(from 30deg, var(--fx-neon-1), var(--fx-neon-2), var(--fx-neon-3));
  filter: blur(10px);
  mix-blend-mode: screen;
  transform: translate3d(0,0,0) rotate(0deg) scale(1);
  animation: fxShard 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes fxShard {
  0%   { transform: translateY(40px) scale(.8) rotate(-8deg); opacity: 0; }
  60%  { opacity: .25; }
  100% { transform: translateY(-40px) scale(1.08) rotate(8deg); opacity: 0; }
}

/* Parallax tilt (applied to elements with .fx-tilt) */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.fx-tilt:hover {
  transform: translateY(-2px) rotateX(2deg) rotateY(-2deg);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #fx-sparkles, #fx-shards, .fx, .fx-tilt, .fx-enter { animation: none !important; transition: none !important; }
}