/* base/site-effects.css — animations + hover effects for EVERY page
   (home, login, join, admin desk, member desk, app).
   Turned off automatically for people who ask their device for less motion. */

:root {
  --fx-purple: #983747;
  --fx-plum: #3a1219;
  --fx-gold: #e4b53a;
  --fx-rose: #d66074;
  --fx-glow: 0 14px 34px -10px rgba(152, 55, 71, .45);
  --fx-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Page opens with a soft fade ---------- */
body { animation: fx-page-in .6s ease backwards; }
@keyframes fx-page-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Buttons: lift, glow, shine ---------- */
:where(.btn, button.btn, .member-act) { position: relative; overflow: hidden; }
.btn, button.btn, .member-act {
  transition: transform .22s var(--fx-ease), box-shadow .22s ease, filter .22s ease, background-color .22s ease;
}
.btn::after, .member-act::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn:hover::after, .member-act:hover::after { left: 130%; }
.btn:not([disabled]):hover, .member-act:hover {
  transform: translateY(-2px);
  filter: brightness(1.07) saturate(1.1);
  box-shadow: var(--fx-glow);
}
.btn:not([disabled]):active, .member-act:active { transform: translateY(0) scale(.97); }

/* ---------- Inputs: glowing focus ring ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus, textarea:focus {
  border-color: var(--fx-purple);
  box-shadow: 0 0 0 4px rgba(152, 55, 71, .16), 0 0 18px rgba(228, 181, 58, .25);
  outline: none;
}

/* ---------- Cards & stat boxes: lift + colour glow ---------- */
.stat, .dash-card, .package-card, .metric-grid > div, .invite,
.client-wallet, .referral-card, .level-block, .act-card, .bank-card {
  transition: transform .3s var(--fx-ease), box-shadow .3s ease, border-color .3s ease;
}
.stat:hover, .dash-card:hover, .package-card:hover, .metric-grid > div:hover,
.client-wallet:hover, .referral-card:hover, .level-block:hover, .act-card:hover, .bank-card:hover {
  transform: translateY(-5px);
  border-color: var(--fx-gold);
  box-shadow: 0 18px 36px -14px rgba(152, 55, 71, .5), 0 0 0 1px rgba(228, 181, 58, .55);
}
.panel { transition: box-shadow .3s ease; }
.panel:hover { box-shadow: 0 16px 40px -18px rgba(152, 55, 71, .45); }

/* ---------- Tables: row highlight ---------- */
table.data tbody tr { transition: background-color .18s ease, box-shadow .18s ease; }
table.data tbody tr:hover {
  background-color: rgba(152, 55, 71, .07);
  box-shadow: inset 4px 0 0 var(--fx-gold);
}

/* ---------- Site navigation: animated gold underline ---------- */
.site-nav a, .nav-bar a { position: relative; }
.site-nav a::after {
  content: "";
  position: absolute; left: 50%; right: 50%; bottom: -4px; height: 2px;
  background: linear-gradient(90deg, var(--fx-gold), var(--fx-rose));
  border-radius: 2px;
  transition: left .3s var(--fx-ease), right .3s var(--fx-ease);
}
.site-nav a:hover::after, .site-nav a.is-active::after, .site-nav a[aria-current]::after { left: 0; right: 0; }

/* ---------- Desk side menu: slide + gold bar ---------- */
.desk-rail nav a {
  transition: transform .22s var(--fx-ease), background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.desk-rail nav a:hover {
  transform: translateX(5px);
  box-shadow: inset 3px 0 0 var(--fx-gold);
}

/* ---------- Login / Join cards float in ---------- */
.auth-card, .join-card {
  animation: fx-card-in .8s var(--fx-ease) .1s backwards;
}
@keyframes fx-card-in {
  from { opacity: 0; transform: translateY(30px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Desk content: panels slide up one by one ---------- */
.desk-content > * { animation: fx-slide-up .6s var(--fx-ease) backwards; }
.desk-content > *:nth-child(2) { animation-delay: .06s; }
.desk-content > *:nth-child(3) { animation-delay: .12s; }
.desk-content > *:nth-child(4) { animation-delay: .18s; }
.desk-content > *:nth-child(5) { animation-delay: .24s; }
.desk-content > *:nth-child(n+6) { animation-delay: .3s; }
@keyframes fx-slide-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Scroll reveal (class added by site-effects.js) ---------- */
.fx-in {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--fx-ease), transform .7s var(--fx-ease);
  transition-delay: var(--fx-d, 0s);
}
.fx-in.is-in { opacity: 1; transform: none; }

/* ---------- Flash messages pop in ---------- */
.flash { animation: fx-pop .45s var(--fx-ease) backwards; }
@keyframes fx-pop {
  0%   { opacity: 0; transform: scale(.95) translateY(-6px); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Scroll progress bar (every page) ---------- */
.fx-bar {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--fx-purple), var(--fx-rose), var(--fx-gold));
  box-shadow: 0 0 10px rgba(214, 96, 116, .6);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body, .auth-card, .join-card, .desk-content > *, .flash { animation: none; }
  .fx-in { opacity: 1; transform: none; transition: none; }
  .btn:hover, .member-act:hover, .stat:hover, .dash-card:hover, .package-card:hover,
  .metric-grid > div:hover, .client-wallet:hover, .referral-card:hover, .level-block:hover,
  .act-card:hover, .bank-card:hover, .desk-rail nav a:hover { transform: none; }
}
@media print {
  body, .desk-content > * { animation: none !important; }
  .fx-bar { display: none; }
  .fx-in { opacity: 1 !important; transform: none !important; }
}