/* Aurora customization pack — pink + amber + cream flow.
 *
 * Saturated gradient applied across every styled surface (server name,
 * category, channel, pin, cover, emblem halo, voice/orbit orb). Stops
 * lean rose-amber so labels stay legible on both dark themes (Orblood,
 * Poison) AND the cream Aurora theme. Cover and emblem layers re-use
 * the same palette and animate so the customisation reads as one
 * moving family across the surface. */

@keyframes cz-aurora-flow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes cz-aurora-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes cz-aurora-wave {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Halo color cycle for the cover/emblem layers — slow drift through
 * the same pink/amber/cream wheel without a fully white peak so the
 * surfaces stay legible even on the Aurora cream canvas. */
@keyframes cz-aurora-hue {
  0%   { filter: hue-rotate(0deg)   saturate(1.05); }
  50%  { filter: hue-rotate(20deg)  saturate(1.15); }
  100% { filter: hue-rotate(0deg)   saturate(1.05); }
}

/* Text recipe — used on every label-style surface. Stops are deeper so
 * the text holds contrast on cream surfaces (Aurora theme) without
 * losing pop on dark surfaces (Orblood/Poison). */
/* Same recipe as the orbit vlabel: pink → peach → yellow → white →
 * pink, with a slow drift so a bright island sweeps across the text
 * roughly every 4.5s. Drop-shadows reuse the orb halo colours so
 * names glow the same way the orb does. */
.cz-aurora-text,
.cz-aurora-name,
.cz-aurora-category .ws-cat-h-name,
.cz-aurora-category .ws-cat-name,
.cz-aurora-textchannel .ws-cat-tc-n,
.cz-aurora-voicechannel .ws-cat-vc-n,
.cz-aurora-pin .ws-pin-text,
.cz-aurora-pin .ws-cat-pin-text,
.cz-aurora-pin .ws-pin-l,
.cz-aurora-pin .ws-cat-pin-l,
.cz-aurora-pin .dm-pinned-text {
  background: linear-gradient(90deg,
    #ff7eb6, #ffb88c, #fff0a8, #ffffff, #ffb6e6, #ff7eb6) !important;
  background-size: 400% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: cz-aurora-flow 4.5s ease-in-out infinite !important;
  text-shadow: none !important;
  filter:
    drop-shadow(0 0 4px rgba(255,160,210,0.55))
    drop-shadow(0 0 10px rgba(255,196,140,0.35));
  font-weight: 700;
}

/* Pin banner background — translucent pink/amber wash that flows. */
.cz-aurora-pin {
  background:
    linear-gradient(90deg,
      rgba(196,74,58,0.22), rgba(255,126,182,0.24),
      rgba(255,138,79,0.24), rgba(216,69,138,0.22), rgba(196,74,58,0.22)) !important;
  background-size: 300% 100% !important;
  border-color: transparent !important;
  box-shadow:
    0 0 18px rgba(255,160,180,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.10) !important;
  animation: cz-aurora-flow 5s linear infinite;
}

/* Cover banner. Renderer always emits a .ws-banner-cover host when
 * this pack is active so the wash sits on the host element and inherits
 * its existing fade-to-bottom mask. Two-layer animation: the gradient
 * scrolls horizontally AND the whole cover slowly hue-rotates so the
 * colour drift is unmistakable, even when the user isn't scrolling. */
.cz-aurora-cover .ws-banner-cover {
  background-image: linear-gradient(90deg,
    #c44a3a, #ff5fa2 18%, #ff7eb6 35%, #ff8a4f 52%,
    #ffb88c 70%, #d8458a 90%, #c44a3a) !important;
  background-size: 300% 100% !important;
  background-position: 0% 50% !important;
  animation:
    cz-aurora-flow 5s linear infinite,
    cz-aurora-hue 9s ease-in-out infinite;
  opacity: 1 !important;
}

/* Emblem halo — pink/amber ring spinning around the avatar plus a
 * second slow hue cycle so the colours never sit still. */
.cz-aurora-emblem { position: relative; }
.cz-aurora-emblem::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(
    #c44a3a, #ff5fa2, #ff7eb6, #ff8a4f, #ffb88c, #d8458a, #c44a3a);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 64%);
          mask: radial-gradient(circle, transparent 60%, #000 64%);
  animation:
    cz-aurora-spin 4s linear infinite,
    cz-aurora-hue 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 12px rgba(255,160,180,0.55));
}
.cz-aurora-emblem > * { position: relative; z-index: 2; }

/* Voice / orbit orb — white-pink core with pink/amber halo + soft wave. */
.cz-aurora-orb {
  position: relative;
  background: radial-gradient(circle at 35% 30%,
    #ffffff, #fff0f8 45%, #ffe1d6 100%) !important;
  box-shadow:
    0 0 24px rgba(255,160,210,0.6),
    0 0 60px rgba(255,196,140,0.4),
    inset 0 -3px 10px rgba(255,170,200,0.18),
    inset 0 1px 4px rgba(255,255,255,0.95) !important;
}
.cz-aurora-orb::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(
    #ff7eb6, #ffb88c, #fff0a8, #ffffff, #ffb6e6, #ff7eb6);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 64%);
          mask: radial-gradient(circle, transparent 60%, #000 64%);
  animation: cz-aurora-spin 4s linear infinite;
  pointer-events: none;
  z-index: -1;
}
.cz-aurora-orb::after {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(255,126,182,0.5), rgba(255,184,140,0.5), rgba(255,240,168,0.5),
    rgba(255,255,255,0.5), rgba(255,182,230,0.5), rgba(255,126,182,0.5));
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 60%, transparent 75%);
          mask: radial-gradient(circle, transparent 56%, #000 60%, transparent 75%);
  animation: cz-aurora-wave 6s linear infinite reverse;
  pointer-events: none;
  z-index: -1;
  filter: blur(2px);
}
.cz-aurora-orb.planet,
.orb-slide.cz-aurora-orb .planet {
  background: radial-gradient(circle at 35% 30%,
    #ffffff, #fff0f8 45%, #ffe1d6 100%) !important;
}