/* ── Motion effects (test build) ── */

/* 1. Cursor spotlight: a soft light that follows the pointer across glass */
.fx-spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), rgba(184,148,63,0.14), transparent 70%); }
.fx-spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(180px circle at var(--mx, -999px) var(--my, -999px), rgba(184,148,63,0.75), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
[data-theme="dark"] .fx-spot { background: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), rgba(212,168,75,0.13), transparent 70%); }
.fx-host.fx-lit > .fx-spot { opacity: 1; }
.social-btn > .fx-spot { background: radial-gradient(90px circle at var(--mx, -999px) var(--my, -999px), rgba(184,148,63,0.16), transparent 70%); }
.social-btn > .fx-spot::after { display: none; }
.fx-host { position: relative; }
.fx-host > *:not(.fx-spot):not(.fx-trail) { position: relative; z-index: 1; }

/* 2. Scroll reveal */
.fx-reveal { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.8,0.2,1); }
.fx-reveal.fx-wait { opacity: 0; transform: translateY(30px) scale(0.985); }

/* 3. Name shimmer */
.hub-header h1.fx-shimmer {
  background: linear-gradient(100deg, var(--heading-color) 0%, var(--heading-color) 40%, #fff3cf 50%, var(--heading-color) 60%, var(--heading-color) 100%);
  background-size: 250% 100%; background-position: 150% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 22px rgba(184,148,63,0.22));
  animation: fx-sweep 5s ease-in-out infinite; }
@keyframes fx-sweep { 0%, 58% { background-position: 150% 0; } 88%, 100% { background-position: -50% 0; } }

/* 5. 3D tilt (organization cards) */
.fx-tilt-parent { perspective: 900px; }
.org-card.fx-tilt { transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1), background 0.3s, border-color 0.3s; will-change: transform; }
.org-card.fx-tilt.fx-tilting { transition: transform 0.08s linear, background 0.3s, border-color 0.3s; }

/* 6. Glowing border trail on hover */
@property --fx-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.fx-trail { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.35s;
  background: conic-gradient(from var(--fx-ang), transparent 0deg, transparent 250deg, var(--fx-c, #b8943f) 320deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fx-spin 2.6s linear infinite; }
.fx-host:hover > .fx-trail { opacity: 1; }
@keyframes fx-spin { to { --fx-ang: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .hub-header h1.fx-shimmer, .fx-trail { animation: none; }
  .fx-reveal.fx-wait { opacity: 1; transform: none; }
}