/* fx2 — sparkle & motion pack (2026-11-14) */
/* 1) Twinkling star particles (spawned by fx2.js into .dfv and .final) */
.sparkle-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.sparkle-layer i { position: absolute; display: block; background: #e9c979;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0; animation: fx2-twinkle var(--d,3s) ease-in-out var(--dl,0s) infinite; }
.sparkle-layer i.aq { background: #9fd8d2; }
@keyframes fx2-twinkle {
  0%, 100% { opacity: 0; transform: translateY(0) scale(.5) rotate(0deg); }
  50% { opacity: .95; transform: translateY(-14px) scale(1) rotate(45deg); } }
.dfv, .final { position: relative; }

/* 2) Gold shimmer sweeping across section headings */
.sec__h, .band__h, .final__tag { background: linear-gradient(100deg, currentColor 0%, currentColor 40%, #c9a35a 50%, currentColor 60%, currentColor 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: fx2-shimmer 7s ease-in-out infinite; }
.band__h, .final__tag { background-image: linear-gradient(100deg, #fff 0%, #fff 40%, #ffe9a8 50%, #fff 60%, #fff 100%); }
@keyframes fx2-shimmer { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -120% 0; } }

/* 3) Blur-in reveal for photos and cards (fx2.js adds .fx2-in) */
.fx2-rv { opacity: 0; filter: blur(10px); transform: translateY(26px) scale(.985);
  transition: opacity .9s ease, filter .9s ease, transform .9s cubic-bezier(.22,.8,.3,1); }
.fx2-rv.fx2-in { opacity: 1; filter: blur(0); transform: none; }

/* 4) Rotating conic glow ring on the final card */
.fcard { position: relative; }
.fcard::before { content: ""; position: absolute; inset: -2px; border-radius: 6px; padding: 2px; z-index: -1;
  background: conic-gradient(from var(--a,0deg), transparent 0 70%, #e9c979 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fx2-spin 6s linear infinite; }
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes fx2-spin { to { --a: 360deg; } }

/* 5) Scroll progress bar (gold, top) */
#fx2-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: linear-gradient(90deg, #0e7c8c, #e9c979); box-shadow: 0 0 8px rgba(233,201,121,.7); }

/* 6) Gentle parallax handled by fx2.js on .band__ph img and .final__bg (transform only) */
.band__ph img, .final__bg { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .sparkle-layer i, .sec__h, .band__h, .final__tag, .fcard::before { animation: none !important; }
  .fx2-rv { opacity: 1; filter: none; transform: none; transition: none; } }