/* Coastal GradientOrb, reused from the /design brand component. */
.brand-orb {
  width: 100%; height: 100%;
  --brand-color-1: #89DDF9; --brand-color-2: #209CD5;
  --brand-color-3: #0F5B9C; --brand-color-4: #50CAA9; --brand-color-5: #082A5B;
  --brand-x: 23%; --brand-y: 26%; --brand-turn: -24deg;
  --brand-duration: 19s; --brand-phase: -3s;
}
.brand-orb {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--brand-color-3);
}
.brand-orb *, .brand-orb::before, .brand-orb::after {animation-play-state: var(--brand-play-state, running) !important}
/* A small, static texture adds grain without a live SVG filter or a canvas loop. */
.brand-orb::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url('./orb-grain.png') repeat;
  background-size: 64px 64px;
  mix-blend-mode: soft-light;
  opacity: .16;
}
.brand-orb {border-radius: 50%}
.brand-orb::before {content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient(ellipse at 62% 32%, transparent 58%, #053c4a18 100%); pointer-events: none}
.brand-orb-flow, .brand-orb-bloom, .brand-orb-current {position: absolute; pointer-events: none}
.brand-orb-flow {
  inset: -28%;
  background:
    radial-gradient(ellipse 32% 38% at var(--brand-x) var(--brand-y), var(--brand-color-4), transparent 80%),
    radial-gradient(ellipse 44% 18% at 64% 78%, var(--brand-color-1), transparent 85%),
    radial-gradient(ellipse 38% 30% at 68% 43%, var(--brand-color-5), transparent 88%),
    radial-gradient(ellipse 36% 46% at 12% 72%, var(--brand-color-3), transparent 85%),
    linear-gradient(145deg, var(--brand-color-1), var(--brand-color-2) 45%, var(--brand-color-3));
  animation: orb-flow calc(var(--brand-duration) * 1.2) linear var(--brand-phase) infinite;
}
.brand-orb-bloom {
  inset: -28%;
  background: radial-gradient(ellipse 40% 16% at 65% 72%, var(--brand-color-1), transparent 85%), radial-gradient(ellipse 26% 32% at 28% 36%, var(--brand-color-4), transparent 85%);
  mix-blend-mode: screen;
  opacity: .42;
  transform-origin: 44% 56%;
  animation: orb-bloom calc(var(--brand-duration) * .9) linear var(--brand-phase) infinite reverse;
}
.brand-orb-current {
  inset: -28%;
  background: radial-gradient(ellipse 32% 20% at 25% 40%, var(--brand-color-4), transparent 82%), radial-gradient(ellipse 36% 24% at 75% 60%, var(--brand-color-2), transparent 85%);
  opacity: .36;
  animation: orb-current calc(var(--brand-duration) * .65) ease-in-out var(--brand-phase) infinite alternate;
}
@keyframes orb-flow {
  0% {transform: translate(-6%, 2%) rotate(var(--brand-turn)) scale(1.04, 1.08)}
  25% {transform: translate(4%, -4%) rotate(calc(var(--brand-turn) + 90deg)) scale(1.12, 1.02)}
  50% {transform: translate(6%, 5%) rotate(calc(var(--brand-turn) + 180deg)) scale(1.03, 1.14)}
  75% {transform: translate(-3%, 6%) rotate(calc(var(--brand-turn) + 270deg)) scale(1.1, 1.04)}
  100% {transform: translate(-6%, 2%) rotate(calc(var(--brand-turn) + 360deg)) scale(1.04, 1.08)}
}
@keyframes orb-bloom {
  0% {transform: translate(7%, -8%) rotate(calc(var(--brand-turn) * -1)) scale(.94, 1.12)}
  25% {transform: translate(-6%, -3%) rotate(calc(var(--brand-turn) * -1 + 90deg)) scale(1.12, .96)}
  50% {transform: translate(-8%, 7%) rotate(calc(var(--brand-turn) * -1 + 180deg)) scale(1.02, 1.16)}
  75% {transform: translate(5%, 8%) rotate(calc(var(--brand-turn) * -1 + 270deg)) scale(1.16, 1.02)}
  100% {transform: translate(7%, -8%) rotate(calc(var(--brand-turn) * -1 + 360deg)) scale(.94, 1.12)}
}
@keyframes orb-current {
  from {transform: translate(-11%, 8%) rotate(-42deg) scale(.96, 1.14)}
  50% {transform: translate(7%, -9%) rotate(22deg) scale(1.12, .94)}
  to {transform: translate(10%, 5%) rotate(82deg) scale(1.02, 1.1)}
}
@media (prefers-reduced-motion: reduce) {
  .brand-orb *, .brand-orb::before, .brand-orb::after {animation: none !important}
}