/* Soft animated ambient light — front-end only */

html {
  background-color: var(--tb-bg);
}

body {
  position: relative;
  isolation: isolate;
  background-color: var(--tb-bg);
  background-image: none;
}

.tb-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.tb-ambient-orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  background: radial-gradient(circle at 35% 35%, var(--orb-core) 0%, var(--orb-mid) 42%, transparent 72%);
  opacity: var(--tb-ambient-opacity);
  animation: tb-ambient-drift var(--orb-duration, var(--tb-ambient-duration)) ease-in-out infinite alternate;
}

.tb-ambient-orb--a {
  --orb-core: rgba(124, 58, 237, 0.55);
  --orb-mid: rgba(196, 181, 253, 0.38);
  --orb-duration: var(--tb-ambient-duration);
  width: min(68vw, 42rem);
  height: min(68vw, 42rem);
  top: -18%;
  right: -12%;
  animation-name: tb-ambient-drift-a;
}

.tb-ambient-orb--b {
  --orb-core: rgba(99, 102, 241, 0.48);
  --orb-mid: rgba(124, 58, 237, 0.28);
  --orb-duration: var(--tb-ambient-duration-b);
  width: min(58vw, 36rem);
  height: min(58vw, 36rem);
  top: 28%;
  left: -16%;
  opacity: var(--tb-ambient-opacity-soft);
  animation-name: tb-ambient-drift-b;
  animation-delay: -8s;
}

.tb-ambient-orb--c {
  --orb-core: rgba(232, 121, 249, 0.42);
  --orb-mid: rgba(196, 181, 253, 0.3);
  --orb-duration: var(--tb-ambient-duration-c);
  width: min(52vw, 30rem);
  height: min(52vw, 30rem);
  bottom: -12%;
  right: 8%;
  opacity: calc(var(--tb-ambient-opacity-soft) + 0.08);
  animation-name: tb-ambient-drift-c;
  animation-delay: -14s;
}

.tb-ambient-orb--d {
  --orb-core: rgba(196, 181, 253, 0.5);
  --orb-mid: rgba(99, 102, 241, 0.26);
  --orb-duration: 28s;
  width: min(40vw, 24rem);
  height: min(40vw, 24rem);
  top: 58%;
  left: 38%;
  opacity: 0.4;
  animation-name: tb-ambient-drift-d;
  animation-delay: -4s;
}

@keyframes tb-ambient-drift-a {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
  50% { transform: translate3d(-6%, 8%, 0) scale(1.08); opacity: 0.78; }
  100% { transform: translate3d(-10%, 4%, 0) scale(1.02); opacity: 0.62; }
}

@keyframes tb-ambient-drift-b {
  0% { transform: translate3d(0, 0, 0) scale(1.05); opacity: 0.4; }
  50% { transform: translate3d(10%, -6%, 0) scale(1); opacity: 0.62; }
  100% { transform: translate3d(6%, 8%, 0) scale(1.1); opacity: 0.48; }
}

@keyframes tb-ambient-drift-c {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.42; }
  50% { transform: translate3d(-8%, -10%, 0) scale(1.12); opacity: 0.68; }
  100% { transform: translate3d(4%, -4%, 0) scale(0.96); opacity: 0.5; }
}

@keyframes tb-ambient-drift-d {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.32; }
  50% { transform: translate3d(8%, 6%, 0) scale(1.15); opacity: 0.52; }
  100% { transform: translate3d(-6%, 2%, 0) scale(1.04); opacity: 0.36; }
}

/* Static soft wash under orbs (no animation) */
.tb-ambient::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 55% 40% at 80% 12%, rgba(196, 181, 253, 0.35), transparent 60%),
    radial-gradient(ellipse 45% 35% at 12% 70%, rgba(99, 102, 241, 0.18), transparent 58%),
    radial-gradient(ellipse 40% 30% at 55% 88%, rgba(232, 121, 249, 0.14), transparent 55%);
  opacity: 0.85;
}

@media (max-width: 47.99rem) {
  :root {
    --tb-ambient-opacity: 0.5;
    --tb-ambient-opacity-soft: 0.34;
  }

  .tb-ambient-orb--d {
    display: none;
  }

  .tb-ambient-orb--a {
    width: min(78vw, 28rem);
    height: min(78vw, 28rem);
  }

  .tb-ambient-orb--b,
  .tb-ambient-orb--c {
    width: min(70vw, 24rem);
    height: min(70vw, 24rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tb-ambient-orb {
    animation: none !important;
    will-change: auto;
  }

  .tb-ambient-orb--a {
    transform: translate3d(-4%, 4%, 0);
    opacity: 0.58;
  }

  .tb-ambient-orb--b {
    transform: translate3d(6%, -2%, 0);
    opacity: 0.42;
  }

  .tb-ambient-orb--c {
    transform: translate3d(-2%, -4%, 0);
    opacity: 0.4;
  }

  .tb-ambient-orb--d {
    transform: translate3d(2%, 2%, 0);
    opacity: 0.28;
  }
}