@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.4; transform: scale(1.45); }
}

@keyframes glow {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: none; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pageEnter {
  from { opacity: 0; margin-top: 20px; }
  to   { opacity: 1; margin-top: 0; }
}

.anim-fade-up   { animation: fadeInUp    0.45s ease both; }
.anim-fade-down { animation: fadeInDown  0.45s ease both; }
.anim-fade-in   { animation: fadeIn      0.35s ease both; }
.anim-scale-in  { animation: scaleIn     0.35s ease both; }

.anim-delay-1 { animation-delay: 0.05s; }
.anim-delay-2 { animation-delay: 0.10s; }
.anim-delay-3 { animation-delay: 0.15s; }
.anim-delay-4 { animation-delay: 0.20s; }
.anim-delay-5 { animation-delay: 0.25s; }
.anim-delay-6 { animation-delay: 0.30s; }
.anim-delay-7 { animation-delay: 0.35s; }
.anim-delay-8 { animation-delay: 0.40s; }

.anim-pulse { animation: pulse  2s ease-in-out infinite; }
.anim-spin  { animation: spin   1s linear infinite; }

.bg-orbs {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.orb { position: absolute; border-radius: 50%; display: none; }

.bg-classic .orb-1, .bg-classic .orb-2, .bg-classic .orb-3 { display: block; }
.bg-classic .orb-1 {
  width:840px; height:840px; top:-270px; inset-inline-start:-220px;
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--brand-a) 15%, transparent) 0%, color-mix(in srgb, var(--brand-a) 15%, transparent) 28%,
    color-mix(in srgb, var(--brand-a) 5%, transparent) 62%, color-mix(in srgb, var(--brand-a) 0%, transparent) 100%);
}
.bg-classic .orb-2 {
  width:670px; height:670px; bottom:-220px; inset-inline-end:-200px;
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--brand-b) 15%, transparent) 0%, color-mix(in srgb, var(--brand-b) 15%, transparent) 28%,
    color-mix(in srgb, var(--brand-b) 5%, transparent) 62%, color-mix(in srgb, var(--brand-b) 0%, transparent) 100%);
}
.bg-classic .orb-3 {
  width:520px; height:520px; top:calc(40% - 120px); inset-inline-end:calc(28% - 120px);
  background: radial-gradient(circle closest-side,
    rgba(29,78,216,.15) 0%, rgba(29,78,216,.15) 28%,
    rgba(29,78,216,.05) 62%, rgba(29,78,216,0) 100%);
}

.bg-warm .orb-1, .bg-warm .orb-2, .bg-warm .orb-3, .bg-warm .orb-4, .bg-warm .orb-5 { display: block; }
.bg-warm .orb-1 {
  width:840px; height:840px; top:-270px; inset-inline-start:-220px;
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--brand-a) 12%, transparent) 0%, color-mix(in srgb, var(--brand-a) 12%, transparent) 28%,
    color-mix(in srgb, var(--brand-a) 4%, transparent) 62%, color-mix(in srgb, var(--brand-a) 0%, transparent) 100%);
}
.bg-warm .orb-2 {
  width:670px; height:670px; bottom:-220px; inset-inline-end:-200px;
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--brand-b) 12%, transparent) 0%, color-mix(in srgb, var(--brand-b) 12%, transparent) 28%,
    color-mix(in srgb, var(--brand-b) 4%, transparent) 62%, color-mix(in srgb, var(--brand-b) 0%, transparent) 100%);
}
.bg-warm .orb-3 {
  width:520px; height:520px; top:calc(40% - 120px); inset-inline-end:calc(28% - 120px);
  background: radial-gradient(circle closest-side,
    rgba(29,78,216,.10) 0%, rgba(29,78,216,.10) 28%,
    rgba(29,78,216,.035) 62%, rgba(29,78,216,0) 100%);
}
.bg-warm .orb-4 {
  width:640px; height:640px; top:-205px; inset-inline-end:-165px;
  background: radial-gradient(circle closest-side,
    rgba(244,114,182,.13) 0%, rgba(236,72,153,.10) 42%,
    rgba(236,72,153,.03) 70%, rgba(236,72,153,0) 100%);
}
.bg-warm .orb-5 {
  width:570px; height:570px; bottom:-65px; inset-inline-start:calc(6% - 105px);
  background: radial-gradient(circle closest-side,
    rgba(167,139,250,.20) 0%, rgba(139,92,246,.15) 42%,
    rgba(139,92,246,.05) 70%, rgba(139,92,246,0) 100%);
}

.bg-aurora .orb-1, .bg-aurora .orb-2, .bg-aurora .orb-3, .bg-aurora .orb-4 { display: block; mix-blend-mode: screen; }
.bg-aurora .orb-1 {
  width:915px; height:915px; top:-303px; inset-inline-start:-263px;
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--brand-a) 55%, transparent) 0%, color-mix(in srgb, var(--brand-a) 34%, transparent) 40%,
    color-mix(in srgb, var(--brand-a) 9%, transparent) 72%, color-mix(in srgb, var(--brand-a) 0%, transparent) 100%);
}
.bg-aurora .orb-2 {
  width:765px; height:765px; bottom:-243px; inset-inline-end:-223px;
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--brand-b) 45%, transparent) 0%, color-mix(in srgb, var(--brand-b) 28%, transparent) 40%,
    color-mix(in srgb, var(--brand-b) 8%, transparent) 72%, color-mix(in srgb, var(--brand-b) 0%, transparent) 100%);
}
.bg-aurora .orb-3 {
  width:715px; height:715px; top:calc(18% - 98px); inset-inline-end:calc(32% - 98px);
  background: radial-gradient(circle closest-side,
    rgba(217,70,239,.30) 0%, rgba(217,70,239,.18) 40%,
    rgba(217,70,239,.05) 72%, rgba(217,70,239,0) 100%);
}
.bg-aurora .orb-4 {
  width:610px; height:610px; bottom:calc(8% - 90px); inset-inline-start:calc(10% - 90px);
  background: radial-gradient(circle closest-side,
    rgba(139,92,246,.35) 0%, rgba(139,92,246,.21) 40%,
    rgba(139,92,246,.06) 72%, rgba(139,92,246,0) 100%);
}

.bg-minimal .orb-1, .bg-minimal .orb-2 { display: block; }
.bg-minimal .orb-1 {
  width:1150px; height:1150px; top:-415px; inset-inline-start:-385px;
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--brand-a) 20%, transparent) 0%, color-mix(in srgb, var(--brand-a) 13%, transparent) 42%,
    color-mix(in srgb, var(--brand-a) 4%, transparent) 72%, color-mix(in srgb, var(--brand-a) 0%, transparent) 100%);
}
.bg-minimal .orb-2 {
  width:1010px; height:1010px; bottom:-385px; inset-inline-end:-345px;
  background: radial-gradient(circle closest-side,
    rgba(244,114,182,.16) 0%, rgba(236,72,153,.11) 45%,
    rgba(236,72,153,.03) 72%, rgba(236,72,153,0) 100%);
}

.bg-image.bg-orbs::after { content: ""; position: absolute; inset: 0; }

.bg-none.bg-orbs { display: none; }
.bg-none .orb { display: none; }

#fwCanvas {
  position: fixed; inset: 0; z-index: 5;
  pointer-events: none;
}

.page-enter {
  animation: pageEnter 0.4s ease both;
}

.hover-lift {
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal);
}
.hover-lift:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-card);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}