/* Homepage magical burst effects (arrow animation removed). */
.od-scribble-magic-burst {
  position: fixed;
  z-index: 3300;
  pointer-events: none;
  border-radius: 12px;
  isolation: isolate;
  will-change: opacity, box-shadow, transform;
  animation: od-magic-aura 1850ms cubic-bezier(0.19, 0.72, 0.2, 1) forwards;
}

.od-scribble-magic-burst::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(255, 236, 170, 0.9);
  box-shadow:
    0 0 18px rgba(255, 226, 150, 0.85),
    inset 0 0 14px rgba(255, 226, 150, 0.55);
  opacity: 0;
  animation: od-magic-ring 1650ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.od-scribble-magic-burst::after {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 252, 220, 0.62) 0%, rgba(255, 252, 220, 0.3) 32%, rgba(255, 252, 220, 0) 68%),
    conic-gradient(
      from 0deg,
      rgba(255, 244, 194, 0) 0deg,
      rgba(255, 244, 194, 0.64) 58deg,
      rgba(203, 178, 255, 0.44) 118deg,
      rgba(255, 244, 194, 0) 178deg,
      rgba(255, 244, 194, 0.62) 236deg,
      rgba(203, 178, 255, 0.32) 294deg,
      rgba(255, 244, 194, 0) 360deg
    );
  box-shadow:
    0 0 26px rgba(255, 238, 176, 0.38),
    0 0 38px rgba(197, 162, 255, 0.26);
  filter: saturate(1.22) brightness(1.08);
  opacity: 0;
  transform: scale(0.8) rotate(-10deg);
  animation: od-magic-shimmer 1500ms cubic-bezier(0.19, 0.72, 0.2, 1) forwards;
}

@supports (mix-blend-mode: screen) {
  .od-scribble-magic-burst::after {
    mix-blend-mode: screen;
  }
}

.od-scribble-magic-spark {
  position: absolute;
  margin: -9px 0 0 -9px;
  font-size: var(--spark-size, 16px);
  line-height: 1;
  color: #fff2bf;
  text-shadow:
    0 0 7px rgba(255, 226, 150, 0.98),
    0 0 14px rgba(255, 198, 120, 0.74),
    0 0 22px rgba(193, 157, 255, 0.36);
  opacity: 0;
  will-change: transform, opacity;
  animation: od-magic-spark var(--spark-duration, 1080ms) ease-out forwards;
  animation-delay: var(--spark-delay, 0ms);
}

@keyframes od-magic-aura {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 226, 150, 0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  24% {
    box-shadow:
      0 0 26px 6px rgba(255, 226, 150, 0.7),
      0 0 48px 14px rgba(190, 150, 255, 0.35);
  }
  52% {
    box-shadow:
      0 0 34px 9px rgba(255, 239, 184, 0.78),
      0 0 58px 18px rgba(183, 150, 255, 0.42);
  }
  76% {
    box-shadow:
      0 0 22px 5px rgba(255, 231, 158, 0.5),
      0 0 42px 12px rgba(183, 150, 255, 0.24);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 226, 150, 0);
    opacity: 0;
  }
}

@keyframes od-magic-ring {
  0% {
    transform: scale(0.94);
    opacity: 0;
  }
  16% {
    transform: scale(1.03);
    opacity: 1;
  }
  46% {
    transform: scale(1.17);
    opacity: 0.86;
  }
  72% {
    transform: scale(1.22);
    opacity: 0.28;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes od-magic-shimmer {
  0% {
    transform: scale(0.8) rotate(-10deg);
    opacity: 0;
  }
  24% {
    transform: scale(0.98) rotate(4deg);
    opacity: 0.9;
  }
  54% {
    transform: scale(1.08) rotate(11deg);
    opacity: 0.78;
  }
  100% {
    transform: scale(1.14) rotate(18deg);
    opacity: 0;
  }
}

@keyframes od-magic-spark {
  0% {
    transform: translate3d(0, 0, 0) scale(0) rotate(0deg);
    opacity: 0;
  }
  18% {
    transform: translate3d(
      calc(var(--spark-dx, 0px) * 0.24),
      calc(var(--spark-dy, 0px) * 0.24),
      0
    ) scale(1.06) rotate(calc(var(--spark-rotate, 0deg) * 0.25));
    opacity: 1;
  }
  40% {
    transform: translate3d(
      calc(var(--spark-dx, 0px) * 0.4),
      calc(var(--spark-dy, 0px) * 0.4),
      0
    ) scale(0.92) rotate(calc(var(--spark-rotate, 0deg) * 0.55));
    opacity: 0.55;
  }
  56% {
    transform: translate3d(
      calc(var(--spark-dx, 0px) * 0.66),
      calc(var(--spark-dy, 0px) * 0.66),
      0
    ) scale(1.04) rotate(calc(var(--spark-rotate, 0deg) * 0.8));
    opacity: 1;
  }
  100% {
    transform: translate3d(
      var(--spark-dx, 0px),
      var(--spark-dy, 0px),
      0
    ) scale(0.2) rotate(var(--spark-rotate, 95deg));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.od-magic-motion-full) .od-scribble-magic-burst {
    animation: od-magic-aura-reduced 1300ms ease-out forwards;
    opacity: 0;
  }

  body:not(.od-magic-motion-full) .od-scribble-magic-burst::before {
    animation: od-magic-ring-reduced 1300ms ease-out forwards;
    transform: scale(1.04);
  }

  body:not(.od-magic-motion-full) .od-scribble-magic-burst::after {
    animation: none;
    opacity: 0;
  }

  body:not(.od-magic-motion-full) .od-scribble-magic-spark {
    animation: od-magic-spark-reduced 900ms ease-out forwards;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes od-magic-aura-reduced {
  0% {
    opacity: 0;
    box-shadow:
      0 0 8px 2px rgba(255, 226, 150, 0.25),
      0 0 20px 6px rgba(190, 150, 255, 0.12);
  }
  35% {
    opacity: 1;
    box-shadow:
      0 0 18px 4px rgba(255, 226, 150, 0.56),
      0 0 34px 10px rgba(190, 150, 255, 0.23);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 0 6px 1px rgba(255, 226, 150, 0.1),
      0 0 16px 4px rgba(190, 150, 255, 0.06);
  }
}

@keyframes od-magic-ring-reduced {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.74;
  }
  100% {
    opacity: 0;
  }
}

@keyframes od-magic-spark-reduced {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}