:root {
  --fx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
}

body[data-effects-page] {
  position: relative;
  overflow-x: hidden;
}

.fx-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.fx-orb,
.fx-grid {
  position: absolute;
  inset: auto;
}

.fx-orb {
  border-radius: 999px;
  filter: blur(14px);
  opacity: 0.55;
  will-change: transform, opacity;
  animation: fxOrbDrift 14s var(--fx-ease-soft) infinite alternate;
}

.fx-orb--primary {
  width: 34rem;
  height: 34rem;
  top: -8rem;
  left: -6rem;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 214, 170, 0.7), transparent 28%),
    radial-gradient(circle at center, rgba(251, 155, 54, 0.2), rgba(251, 155, 54, 0));
}

.fx-orb--success {
  width: 30rem;
  height: 30rem;
  top: 8rem;
  right: -8rem;
  background:
    radial-gradient(circle at 35% 35%, rgba(226, 255, 191, 0.55), transparent 22%),
    radial-gradient(circle at center, rgba(157, 255, 44, 0.14), rgba(157, 255, 44, 0));
  animation-duration: 18s;
}

.fx-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.9), transparent 78%);
  opacity: 0.32;
  transform: translateY(calc(var(--fx-scroll-shift, 0px) * -1));
}

.app,
.wrap,
.login-box {
  position: relative;
  z-index: 1;
}

.fx-shell {
  isolation: isolate;
}

.fx-surface,
.fx-header-band {
  position: relative;
}

.fx-header-band::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(251, 155, 54, 0.1),
    transparent 28%,
    transparent 68%,
    rgba(157, 255, 44, 0.08)
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

body.fx-scrolled .fx-header-band::before {
  opacity: 1;
}

[data-fx-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.985);
  transition:
    opacity 700ms var(--fx-ease-out) var(--fx-delay, 0ms),
    transform 700ms var(--fx-ease-out) var(--fx-delay, 0ms),
    filter 700ms var(--fx-ease-out) var(--fx-delay, 0ms);
  filter: blur(10px);
  will-change: transform, opacity, filter;
}

[data-fx-reveal="hero"] {
  transform: translate3d(0, 38px, 0) scale(0.97);
}

[data-fx-reveal].fx-enter,
[data-fx-reveal].fx-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

[data-fx-hover],
[data-fx-tilt] {
  position: relative;
  overflow: hidden;
}

[data-fx-hover] {
  transform: translate3d(var(--fx-move-x, 0), var(--fx-move-y, 0), 0);
  transition:
    transform 220ms var(--fx-ease-soft),
    box-shadow 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    filter 220ms ease;
}

[data-fx-hover]:hover {
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

[data-fx-hover="lift"]:hover {
  transform: translate3d(var(--fx-move-x, 0), calc(var(--fx-move-y, 0) - 2px), 0);
}

[data-fx-hover="ink"]::before {
  content: "";
  position: absolute;
  inset: auto 14px 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(251, 155, 54, 0.92), rgba(157, 255, 44, 0.72));
  transform: scaleX(0.18);
  transform-origin: left;
  opacity: 0.35;
  transition: transform 220ms var(--fx-ease-out), opacity 220ms ease;
}

[data-fx-hover="ink"]:hover::before,
.nav-item.active::before,
.auth-tab.active::before,
.category.active::before,
.tab-btn.active::before {
  transform: scaleX(1);
  opacity: 1;
}

[data-fx-tilt] {
  transform:
    perspective(1200px)
    rotateX(var(--fx-rotate-x, 0deg))
    rotateY(var(--fx-rotate-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 260ms var(--fx-ease-soft), box-shadow 260ms ease, border-color 260ms ease;
}

[data-fx-tilt]:hover {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
}

[data-fx-glow="pointer"]::after,
[data-fx-glow="pointer"]:hover::after,
.login-box .login-card[data-fx-glow="pointer"]::after,
.login-box .login-card[data-fx-glow="pointer"]:hover::after {
  content: none;
  background: none;
  opacity: 0;
}

.fx-ripple {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
  transform: translate(-50%, -50%) scale(0.6);
  animation: fxRipple 640ms ease-out forwards;
}

.login-card,
.card,
.panel,
.stat,
.table-wrap,
.sidebar,
.top-bar,
.top {
  backdrop-filter: blur(10px);
}

.login-card,
.card,
.panel,
.stat,
.table-wrap {
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.page-header,
.top-bar,
.top {
  border-radius: 18px;
}

.top-bar,
.sidebar {
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

body.fx-scrolled .top-bar,
body.fx-scrolled .top,
body.fx-scrolled .sidebar {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

@keyframes fxOrbDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(0, 18px, 0) scale(1.05);
  }
}

@keyframes fxRipple {
  from {
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(0.6);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-orb,
  [data-fx-reveal],
  [data-fx-hover],
  [data-fx-tilt],
  .fx-ripple {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  [data-fx-reveal] {
    opacity: 1 !important;
  }
}