/* Shared morphing glow for active cards (period history, workspaces, …) */

.card-glow {
  position: relative;
  display: block;
  overflow: visible;
}

.card-glow__surface {
  position: relative;
  z-index: 1;
  transition:
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}

@keyframes glow-morph-a {
  0%, 100% {
    left: 6%;
    right: 8%;
    height: 18px;
    top: 50%;
    bottom: auto;
    border-radius: 52% 48% 50% 50%;
    transform: translateY(-50%) scaleX(1);
    opacity: 0.72;
  }
  25% {
    left: 12%;
    right: 4%;
    height: 24px;
    top: 50%;
    bottom: auto;
    border-radius: 44% 56% 48% 52%;
    transform: translateY(-50%) scaleX(1.12);
    opacity: 0.95;
  }
  50% {
    left: 4%;
    right: 14%;
    height: 15px;
    top: 50%;
    bottom: auto;
    border-radius: 58% 42% 54% 46%;
    transform: translateY(-50%) scaleX(0.9);
    opacity: 0.65;
  }
  75% {
    left: 10%;
    right: 6%;
    height: 21px;
    top: 50%;
    bottom: auto;
    border-radius: 48% 52% 46% 54%;
    transform: translateY(-50%) scaleX(1.06);
    opacity: 0.88;
  }
}

@keyframes glow-morph-b {
  0%, 100% {
    left: 28%;
    right: 32%;
    height: 10px;
    top: 50%;
    bottom: auto;
    border-radius: 50%;
    transform: translateY(-50%) scaleX(1) translateX(0);
    opacity: 0.55;
  }
  33% {
    left: 22%;
    right: 38%;
    height: 14px;
    top: 50%;
    bottom: auto;
    border-radius: 46% 54% 50% 50%;
    transform: translateY(-50%) scaleX(1.18) translateX(3%);
    opacity: 0.78;
  }
  66% {
    left: 34%;
    right: 24%;
    height: 9px;
    top: 50%;
    bottom: auto;
    border-radius: 54% 46% 48% 52%;
    transform: translateY(-50%) scaleX(0.86) translateX(-2%);
    opacity: 0.48;
  }
}

@keyframes glow-surface-pulse {
  0%, 100% {
    box-shadow: var(--shadow-sm);
  }
  50% {
    box-shadow: var(--shadow-md);
  }
}

@keyframes glow-drift-before {
  0%, 100% {
    translate: 0 0;
  }
  25% {
    translate: var(--glow-before-dx-1, 0%) var(--glow-before-dy-1, 0%);
  }
  50% {
    translate: var(--glow-before-dx-2, 0%) var(--glow-before-dy-2, 0%);
  }
  75% {
    translate: var(--glow-before-dx-3, 0%) var(--glow-before-dy-3, 0%);
  }
}

@keyframes glow-drift-after {
  0%, 100% {
    translate: 0 0;
  }
  33% {
    translate: var(--glow-after-dx-1, 0%) var(--glow-after-dy-1, 0%);
  }
  66% {
    translate: var(--glow-after-dx-2, 0%) var(--glow-after-dy-2, 0%);
  }
}

@keyframes glow-drift-move {
  0%, 100% {
    translate: 0 0;
  }
  25% {
    translate: var(--glow-dx-1, 0%) var(--glow-dy-1, 0%);
  }
  50% {
    translate: var(--glow-dx-2, 0%) var(--glow-dy-2, 0%);
  }
  75% {
    translate: var(--glow-dx-3, 0%) var(--glow-dy-3, 0%);
  }
}

@keyframes glow-morph-c {
  0%, 100% {
    left: 18%;
    right: 54%;
    height: 12px;
    top: 50%;
    bottom: auto;
    border-radius: 56% 44% 52% 48%;
    transform: translateY(-50%) scaleX(1);
    opacity: 0.46;
  }
  30% {
    left: 24%;
    right: 46%;
    height: 16px;
    top: 50%;
    bottom: auto;
    border-radius: 42% 58% 46% 54%;
    transform: translateY(calc(-50% + 2%)) scaleX(1.08);
    opacity: 0.62;
  }
  65% {
    left: 12%;
    right: 58%;
    height: 10px;
    top: 50%;
    bottom: auto;
    border-radius: 50% 50% 44% 56%;
    transform: translateY(calc(-50% - 2%)) scaleX(0.92);
    opacity: 0.36;
  }
}

@keyframes glow-morph-d {
  0%, 100% {
    left: 52%;
    right: 14%;
    height: 11px;
    top: 50%;
    bottom: auto;
    border-radius: 48% 52% 56% 44%;
    transform: translateY(-50%) scaleX(1) translateX(0);
    opacity: 0.42;
  }
  35% {
    left: 46%;
    right: 8%;
    height: 15px;
    top: 50%;
    bottom: auto;
    border-radius: 54% 46% 50% 50%;
    transform: translateY(-50%) scaleX(1.1) translateX(-2%);
    opacity: 0.58;
  }
  70% {
    left: 58%;
    right: 18%;
    height: 9px;
    top: 50%;
    bottom: auto;
    border-radius: 44% 56% 48% 52%;
    transform: translateY(-50%) scaleX(0.9) translateX(3%);
    opacity: 0.34;
  }
}

@keyframes glow-morph-c-light {
  0%, 100% {
    left: 18%;
    right: 54%;
    height: 12px;
    top: 50%;
    bottom: auto;
    border-radius: 56% 44% 52% 48%;
    transform: translateY(-50%) scaleX(1);
    opacity: 0.54;
  }
  30% {
    left: 24%;
    right: 46%;
    height: 16px;
    top: 50%;
    bottom: auto;
    border-radius: 42% 58% 46% 54%;
    transform: translateY(calc(-50% + 2%)) scaleX(1.08);
    opacity: 0.72;
  }
  65% {
    left: 12%;
    right: 58%;
    height: 10px;
    top: 50%;
    bottom: auto;
    border-radius: 50% 50% 44% 56%;
    transform: translateY(calc(-50% - 2%)) scaleX(0.92);
    opacity: 0.44;
  }
}

@keyframes glow-morph-d-light {
  0%, 100% {
    left: 52%;
    right: 14%;
    height: 11px;
    top: 50%;
    bottom: auto;
    border-radius: 48% 52% 56% 44%;
    transform: translateY(-50%) scaleX(1) translateX(0);
    opacity: 0.5;
  }
  35% {
    left: 46%;
    right: 8%;
    height: 15px;
    top: 50%;
    bottom: auto;
    border-radius: 54% 46% 50% 50%;
    transform: translateY(-50%) scaleX(1.1) translateX(-2%);
    opacity: 0.68;
  }
  70% {
    left: 58%;
    right: 18%;
    height: 9px;
    top: 50%;
    bottom: auto;
    border-radius: 44% 56% 48% 52%;
    transform: translateY(-50%) scaleX(0.9) translateX(3%);
    opacity: 0.4;
  }
}

/* List card spots: nearly full card height (inset from top/bottom) */
@keyframes glow-morph-a-list {
  0%, 100% {
    left: 6%;
    right: 8%;
    top: 5%;
    bottom: 5%;
    border-radius: 52% 48% 50% 50%;
    transform: scaleX(1);
    opacity: 0.72;
  }
  25% {
    left: 12%;
    right: 4%;
    top: 3%;
    bottom: 3%;
    border-radius: 44% 56% 48% 52%;
    transform: scaleX(1.12);
    opacity: 0.95;
  }
  50% {
    left: 4%;
    right: 14%;
    top: 6%;
    bottom: 6%;
    border-radius: 58% 42% 54% 46%;
    transform: scaleX(0.9);
    opacity: 0.65;
  }
  75% {
    left: 10%;
    right: 6%;
    top: 4%;
    bottom: 4%;
    border-radius: 48% 52% 46% 54%;
    transform: scaleX(1.06);
    opacity: 0.88;
  }
}

@keyframes glow-morph-b-list {
  0%, 100% {
    left: 28%;
    right: 32%;
    top: 6%;
    bottom: 6%;
    border-radius: 50%;
    transform: scaleX(1) translateX(0);
    opacity: 0.55;
  }
  33% {
    left: 22%;
    right: 38%;
    top: 4%;
    bottom: 4%;
    border-radius: 46% 54% 50% 50%;
    transform: scaleX(1.18) translateX(3%);
    opacity: 0.78;
  }
  66% {
    left: 34%;
    right: 24%;
    top: 7%;
    bottom: 7%;
    border-radius: 54% 46% 48% 52%;
    transform: scaleX(0.86) translateX(-2%);
    opacity: 0.48;
  }
}

@keyframes glow-morph-c-list {
  0%, 100% {
    left: 18%;
    right: 54%;
    top: 5%;
    bottom: 5%;
    border-radius: 56% 44% 52% 48%;
    transform: scaleX(1);
    opacity: 0.46;
  }
  30% {
    left: 24%;
    right: 46%;
    top: 4%;
    bottom: 6%;
    border-radius: 42% 58% 46% 54%;
    transform: scaleX(1.08);
    opacity: 0.62;
  }
  65% {
    left: 12%;
    right: 58%;
    top: 6%;
    bottom: 4%;
    border-radius: 50% 50% 44% 56%;
    transform: scaleX(0.92);
    opacity: 0.36;
  }
}

@keyframes glow-morph-d-list {
  0%, 100% {
    left: 52%;
    right: 14%;
    top: 5%;
    bottom: 5%;
    border-radius: 48% 52% 56% 44%;
    transform: scaleX(1) translateX(0);
    opacity: 0.42;
  }
  35% {
    left: 46%;
    right: 8%;
    top: 3%;
    bottom: 3%;
    border-radius: 54% 46% 50% 50%;
    transform: scaleX(1.1) translateX(-2%);
    opacity: 0.58;
  }
  70% {
    left: 58%;
    right: 18%;
    top: 7%;
    bottom: 7%;
    border-radius: 44% 56% 48% 52%;
    transform: scaleX(0.9) translateX(3%);
    opacity: 0.34;
  }
}

@keyframes glow-morph-a-list-light {
  0%, 100% {
    left: 6%;
    right: 8%;
    top: 5%;
    bottom: 5%;
    border-radius: 52% 48% 50% 50%;
    transform: scaleX(1);
    opacity: 0.82;
  }
  25% {
    left: 12%;
    right: 4%;
    top: 3%;
    bottom: 3%;
    border-radius: 44% 56% 48% 52%;
    transform: scaleX(1.12);
    opacity: 1;
  }
  50% {
    left: 4%;
    right: 14%;
    top: 6%;
    bottom: 6%;
    border-radius: 58% 42% 54% 46%;
    transform: scaleX(0.9);
    opacity: 0.72;
  }
  75% {
    left: 10%;
    right: 6%;
    top: 4%;
    bottom: 4%;
    border-radius: 48% 52% 46% 54%;
    transform: scaleX(1.06);
    opacity: 0.92;
  }
}

@keyframes glow-morph-b-list-light {
  0%, 100% {
    left: 28%;
    right: 32%;
    top: 6%;
    bottom: 6%;
    border-radius: 50%;
    transform: scaleX(1) translateX(0);
    opacity: 0.62;
  }
  33% {
    left: 22%;
    right: 38%;
    top: 4%;
    bottom: 4%;
    border-radius: 46% 54% 50% 50%;
    transform: scaleX(1.18) translateX(3%);
    opacity: 0.88;
  }
  66% {
    left: 34%;
    right: 24%;
    top: 7%;
    bottom: 7%;
    border-radius: 54% 46% 48% 52%;
    transform: scaleX(0.86) translateX(-2%);
    opacity: 0.54;
  }
}

@keyframes glow-morph-c-list-light {
  0%, 100% {
    left: 18%;
    right: 54%;
    top: 5%;
    bottom: 5%;
    border-radius: 56% 44% 52% 48%;
    transform: scaleX(1);
    opacity: 0.54;
  }
  30% {
    left: 24%;
    right: 46%;
    top: 4%;
    bottom: 6%;
    border-radius: 42% 58% 46% 54%;
    transform: scaleX(1.08);
    opacity: 0.72;
  }
  65% {
    left: 12%;
    right: 58%;
    top: 6%;
    bottom: 4%;
    border-radius: 50% 50% 44% 56%;
    transform: scaleX(0.92);
    opacity: 0.44;
  }
}

@keyframes glow-morph-d-list-light {
  0%, 100% {
    left: 52%;
    right: 14%;
    top: 5%;
    bottom: 5%;
    border-radius: 48% 52% 56% 44%;
    transform: scaleX(1) translateX(0);
    opacity: 0.5;
  }
  35% {
    left: 46%;
    right: 8%;
    top: 3%;
    bottom: 3%;
    border-radius: 54% 46% 50% 50%;
    transform: scaleX(1.1) translateX(-2%);
    opacity: 0.68;
  }
  70% {
    left: 58%;
    right: 18%;
    top: 7%;
    bottom: 7%;
    border-radius: 44% 56% 48% 52%;
    transform: scaleX(0.9) translateX(3%);
    opacity: 0.4;
  }
}

.card-glow.is-active:has(.card-glow__spots)::before,
.card-glow.is-active:has(.card-glow__spots)::after {
  display: none;
}

.card-glow__spots {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.card-glow.is-active .card-glow-spot {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: left, right, top, bottom, transform, border-radius, opacity, translate;
}

.card-glow.is-active .card-glow-spot--1 {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--card-glow-spot) var(--card-glow-alpha-core), transparent) 0%,
    color-mix(in srgb, var(--card-glow-spot) var(--card-glow-alpha-mid), transparent) 58%,
    transparent 80%
  );
  filter: blur(var(--card-glow-blur-a));
  animation:
    glow-morph-a-list 6.2s ease-in-out infinite,
    glow-drift-move 12.4s ease-in-out infinite;
  animation-delay: 0s, -3.1s;
}

.card-glow.is-active .card-glow-spot--2 {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--card-glow-spot-bright) var(--card-glow-alpha-bright-core), transparent) 0%,
    color-mix(in srgb, var(--card-glow-spot-bright) var(--card-glow-alpha-bright-mid), transparent) 52%,
    transparent 76%
  );
  filter: blur(var(--card-glow-blur-b));
  animation:
    glow-morph-b-list 4.1s ease-in-out infinite,
    glow-drift-move 8.2s ease-in-out infinite;
  animation-delay: 0s, -2.4s;
}

.card-glow.is-active .card-glow-spot--3 {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--card-glow-spot-bright) 70%, transparent) 0%,
    color-mix(in srgb, var(--card-glow-spot) 42%, transparent) 54%,
    transparent 82%
  );
  filter: blur(calc(var(--card-glow-blur-a) - 2px));
  animation:
    glow-morph-c-list 7.8s ease-in-out infinite,
    glow-drift-move 15.6s ease-in-out infinite;
  animation-delay: 0s, -5.2s;
}

.card-glow.is-active .card-glow-spot--4 {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--card-glow-spot-bright) 58%, transparent) 0%,
    color-mix(in srgb, var(--card-glow-spot) 34%, transparent) 56%,
    transparent 84%
  );
  filter: blur(calc(var(--card-glow-blur-b) + 2px));
  animation:
    glow-morph-d-list 5.6s ease-in-out infinite,
    glow-drift-move 11.2s ease-in-out infinite;
  animation-delay: 0s, -3.8s;
}

[data-theme="light"] .card-glow.is-active .card-glow-spot--1 {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--card-glow-spot-bright) 76%, transparent) 0%,
    color-mix(in srgb, var(--card-glow-spot) 54%, transparent) 40%,
    color-mix(in srgb, var(--card-glow-spot) 18%, transparent) 66%,
    transparent 84%
  );
  animation:
    glow-morph-a-list-light 6.2s ease-in-out infinite,
    glow-drift-move 12.4s ease-in-out infinite;
  animation-delay: 0s, -3.1s;
}

[data-theme="light"] .card-glow.is-active .card-glow-spot--2 {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, #eafff4 88%, transparent) 0%,
    color-mix(in srgb, var(--card-glow-spot-bright) 64%, transparent) 46%,
    color-mix(in srgb, var(--card-glow-spot) 14%, transparent) 72%,
    transparent 86%
  );
  animation:
    glow-morph-b-list-light 4.1s ease-in-out infinite,
    glow-drift-move 8.2s ease-in-out infinite;
  animation-delay: 0s, -2.4s;
}

[data-theme="light"] .card-glow.is-active .card-glow-spot--3 {
  animation:
    glow-morph-c-list-light 7.8s ease-in-out infinite,
    glow-drift-move 15.6s ease-in-out infinite;
  animation-delay: 0s, -5.2s;
}

[data-theme="light"] .card-glow.is-active .card-glow-spot--4 {
  animation:
    glow-morph-d-list-light 5.6s ease-in-out infinite,
    glow-drift-move 11.2s ease-in-out infinite;
  animation-delay: 0s, -3.8s;
}

.card-glow.is-active::before,
.card-glow.is-active::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--card-glow-spot) var(--card-glow-alpha-core), transparent) 0%,
    color-mix(in srgb, var(--card-glow-spot) var(--card-glow-alpha-mid), transparent) 58%,
    transparent 80%
  );
  filter: blur(var(--card-glow-blur-a));
  will-change: left, right, height, top, transform, border-radius, opacity, translate;
}

.card-glow.is-active::before {
  animation:
    glow-morph-a 6.2s ease-in-out infinite,
    glow-drift-before 12.4s ease-in-out infinite;
}

.card-glow.is-active::after {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--card-glow-spot-bright) var(--card-glow-alpha-bright-core), transparent) 0%,
    color-mix(in srgb, var(--card-glow-spot-bright) var(--card-glow-alpha-bright-mid), transparent) 52%,
    transparent 76%
  );
  filter: blur(var(--card-glow-blur-b));
  animation:
    glow-morph-b 4.1s ease-in-out infinite,
    glow-drift-after 8.2s ease-in-out infinite;
}

.card-glow.is-active .card-glow__surface {
  background: color-mix(in srgb, var(--surface) var(--card-glow-surface-fill), transparent);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  animation: glow-surface-pulse 6.2s ease-in-out infinite;
}

[data-theme="light"] .card-glow.is-active::before,
[data-theme="light"] .card-glow.is-active::after {
  opacity: 1;
}

[data-theme="light"] .card-glow.is-active::before {
  animation:
    glow-morph-a-light 6.2s ease-in-out infinite,
    glow-drift-before 12.4s ease-in-out infinite;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--card-glow-spot-bright) 76%, transparent) 0%,
    color-mix(in srgb, var(--card-glow-spot) 54%, transparent) 40%,
    color-mix(in srgb, var(--card-glow-spot) 18%, transparent) 66%,
    transparent 84%
  );
}

[data-theme="light"] .card-glow.is-active::after {
  animation:
    glow-morph-b-light 4.1s ease-in-out infinite,
    glow-drift-after 8.2s ease-in-out infinite;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, #eafff4 88%, transparent) 0%,
    color-mix(in srgb, var(--card-glow-spot-bright) 64%, transparent) 46%,
    color-mix(in srgb, var(--card-glow-spot) 14%, transparent) 72%,
    transparent 86%
  );
}

[data-theme="light"] .card-glow.is-active .card-glow__surface {
  border-color: var(--border);
  animation: glow-surface-pulse-light 6.2s ease-in-out infinite;
}

@keyframes glow-surface-pulse-light {
  0%, 100% {
    box-shadow: var(--shadow-sm);
  }
  50% {
    box-shadow: var(--shadow-md);
  }
}

@keyframes glow-morph-a-light {
  0%, 100% {
    left: 6%;
    right: 8%;
    height: 18px;
    top: 50%;
    bottom: auto;
    border-radius: 52% 48% 50% 50%;
    transform: translateY(-50%) scaleX(1);
    opacity: 0.82;
  }
  25% {
    left: 12%;
    right: 4%;
    height: 24px;
    top: 50%;
    bottom: auto;
    border-radius: 44% 56% 48% 52%;
    transform: translateY(-50%) scaleX(1.12);
    opacity: 1;
  }
  50% {
    left: 4%;
    right: 14%;
    height: 15px;
    top: 50%;
    bottom: auto;
    border-radius: 58% 42% 54% 46%;
    transform: translateY(-50%) scaleX(0.9);
    opacity: 0.72;
  }
  75% {
    left: 10%;
    right: 6%;
    height: 21px;
    top: 50%;
    bottom: auto;
    border-radius: 48% 52% 46% 54%;
    transform: translateY(-50%) scaleX(1.06);
    opacity: 0.92;
  }
}

@keyframes glow-morph-b-light {
  0%, 100% {
    left: 28%;
    right: 32%;
    height: 10px;
    top: 50%;
    bottom: auto;
    border-radius: 50%;
    transform: translateY(-50%) scaleX(1) translateX(0);
    opacity: 0.62;
  }
  33% {
    left: 22%;
    right: 38%;
    height: 14px;
    top: 50%;
    bottom: auto;
    border-radius: 46% 54% 50% 50%;
    transform: translateY(-50%) scaleX(1.18) translateX(3%);
    opacity: 0.88;
  }
  66% {
    left: 34%;
    right: 24%;
    height: 9px;
    top: 50%;
    bottom: auto;
    border-radius: 54% 46% 48% 52%;
    transform: translateY(-50%) scaleX(0.86) translateX(-2%);
    opacity: 0.54;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-glow.is-active::before,
  .card-glow.is-active::after,
  .card-glow.is-active .card-glow-spot,
  .card-glow.is-active .card-glow__surface {
    animation: none;
  }

  [data-theme="light"] .card-glow.is-active::before,
  [data-theme="light"] .card-glow.is-active::after,
  [data-theme="light"] .card-glow.is-active .card-glow-spot,
  [data-theme="light"] .card-glow.is-active .card-glow__surface {
    animation: none;
  }
}

html[data-card-glow="off"] .card-glow__spots,
html[data-card-glow="off"] .settings-account-glow,
html[data-card-glow="off"] .home-top-glow,
html[data-card-glow="off"] .card-glow.is-active::before,
html[data-card-glow="off"] .card-glow.is-active::after {
  display: none;
}

html[data-card-glow="off"] .card-glow.is-active .card-glow__surface,
html[data-card-glow="off"] .settings-profile {
  background: var(--surface);
  animation: none;
}

html[data-card-glow="off"] .settings-profile-glow {
  animation: none;
}