/* SPDX-License-Identifier: LicenseRef-Werewolf-Pro */
@layer werewolf-effects.base, werewolf-effects.guard;
@property --effect-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}
@property --effect-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}
@property --effect-glow-color-a {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --effect-glow-color-b {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --effect-spotlight-drift {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 30%;
}
@property --effect-aurora-x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 12%;
}
@property --effect-aurora-x2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --effect-aurora-x3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 88%;
}
@property --effect-aurora-h1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 62%;
}
@property --effect-aurora-h2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 32%;
}
@property --effect-aurora-h3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 62%;
}
@keyframes werewolf-effect-beam {
  to {
    --effect-beam-angle: 1turn;
  }
}
@keyframes werewolf-effect-glow-orbit {
  to {
    --effect-glow-angle: 1turn;
  }
}
@keyframes werewolf-effect-glow-hue {
  0%,
  100% {
    --effect-glow-color-a: var(--effect-c1);
    --effect-glow-color-b: var(--effect-c3);
  }
  25% {
    --effect-glow-color-a: var(--effect-c2);
    --effect-glow-color-b: var(--effect-c4);
  }
  50% {
    --effect-glow-color-a: var(--effect-c3);
    --effect-glow-color-b: var(--effect-c1);
  }
  75% {
    --effect-glow-color-a: var(--effect-c4);
    --effect-glow-color-b: var(--effect-c2);
  }
}
@keyframes werewolf-effect-shimmer {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 200% 0;
  }
}
@keyframes werewolf-effect-grain {
  0%,
  100% {
    background-position: 0 0, 0 0, 0 0;
  }
  20% {
    background-position: var(--spacing-md) var(--spacing-xs), 0 0, 0 0;
  }
  40% {
    background-position: calc(var(--spacing-lg) * -1) var(--spacing-md), 0 0, 0 0;
  }
  60% {
    background-position: var(--spacing-xs) calc(var(--spacing-xl) * -1), 0 0, 0 0;
  }
  80% {
    background-position: calc(var(--spacing-xl) * -1) calc(var(--spacing-sm) * -1), 0 0, 0 0;
  }
}
@keyframes werewolf-effect-spotlight-drift {
  to {
    --effect-spotlight-drift: 45%;
  }
}
@keyframes werewolf-effect-aurora-x1 {
  0% {
    --effect-aurora-x1: 12%;
  }
  23% {
    --effect-aurora-x1: 17%;
  }
  51% {
    --effect-aurora-x1: 9%;
  }
  78% {
    --effect-aurora-x1: 15%;
  }
  100% {
    --effect-aurora-x1: 11%;
  }
}
@keyframes werewolf-effect-aurora-x2 {
  0% {
    --effect-aurora-x2: 50%;
  }
  23% {
    --effect-aurora-x2: 44%;
  }
  51% {
    --effect-aurora-x2: 55%;
  }
  78% {
    --effect-aurora-x2: 47%;
  }
  100% {
    --effect-aurora-x2: 52%;
  }
}
@keyframes werewolf-effect-aurora-x3 {
  0% {
    --effect-aurora-x3: 88%;
  }
  23% {
    --effect-aurora-x3: 83%;
  }
  51% {
    --effect-aurora-x3: 91%;
  }
  78% {
    --effect-aurora-x3: 85%;
  }
  100% {
    --effect-aurora-x3: 89%;
  }
}
@keyframes werewolf-effect-aurora-h1 {
  0% {
    --effect-aurora-h1: 58%;
  }
  23% {
    --effect-aurora-h1: 46%;
  }
  51% {
    --effect-aurora-h1: 64%;
  }
  78% {
    --effect-aurora-h1: 50%;
  }
  100% {
    --effect-aurora-h1: 60%;
  }
}
@keyframes werewolf-effect-aurora-h2 {
  0% {
    --effect-aurora-h2: 32%;
  }
  23% {
    --effect-aurora-h2: 40%;
  }
  51% {
    --effect-aurora-h2: 27%;
  }
  78% {
    --effect-aurora-h2: 36%;
  }
  100% {
    --effect-aurora-h2: 30%;
  }
}
@keyframes werewolf-effect-aurora-h3 {
  0% {
    --effect-aurora-h3: 56%;
  }
  23% {
    --effect-aurora-h3: 66%;
  }
  51% {
    --effect-aurora-h3: 48%;
  }
  78% {
    --effect-aurora-h3: 62%;
  }
  100% {
    --effect-aurora-h3: 52%;
  }
}
@layer werewolf-effects.base {
  :where(:root) {
    --effect-glow-size: var(--spacing-md);
    --effect-glow-orbit: var(--spacing-sm);
    --effect-glow-strength: 70%;
    --effect-glow-strength-strong: 90%;
    --effect-glow-duration: calc(var(--duration-loop) * 3);
    --effect-beam-width: var(--border-width);
    --effect-beam-arc: 30%;
    --effect-beam-rest-strength: 20%;
    --effect-beam-duration: calc(var(--duration-loop) * 3);
    --effect-shimmer-duration: calc(var(--duration-loop) * 3);
    --effect-spotlight-size: var(--size-panel-sm);
    --effect-spotlight-duration: calc(var(--duration-loop) * 4);
    --effect-grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --effect-grain-size: var(--spacing-5xl);
    --effect-grain-duration: calc(var(--duration-loop) / 2);
    --effect-aurora-scale: 0.45;
    --effect-aurora-blur: calc(var(--blur-lg) * 1.5);
    --effect-aurora-strength: 100%;
    --effect-aurora-core-strength: 95%;
    --effect-aurora-duration: calc(var(--duration-loop) * 4);
  }
  :where([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora]) {
    --effect-c1: var(--color-blue);
    --effect-c2: var(--color-purple);
    --effect-c3: var(--color-pink);
    --effect-c4: var(--color-teal);
    --effect-t1: var(--color-text-blue);
    --effect-t2: var(--color-text-purple);
    --effect-t3: var(--color-text-pink);
    --effect-t4: var(--color-text-teal);
    --effect-s1: var(--color-background-blue);
    --effect-s2: var(--color-background-purple);
    --effect-s3: var(--color-background-pink);
    --effect-s4: var(--color-background-teal);
  }
  :where([data-effect-palette="aurora"] :is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])) {
    --effect-c1: var(--color-blue);
    --effect-c2: var(--color-purple);
    --effect-c3: var(--color-pink);
    --effect-c4: var(--color-teal);
    --effect-t1: var(--color-text-blue);
    --effect-t2: var(--color-text-purple);
    --effect-t3: var(--color-text-pink);
    --effect-t4: var(--color-text-teal);
    --effect-s1: var(--color-background-blue);
    --effect-s2: var(--color-background-purple);
    --effect-s3: var(--color-background-pink);
    --effect-s4: var(--color-background-teal);
  }
  :where([data-effect-palette="sunset"] :is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])) {
    --effect-c1: var(--color-orange);
    --effect-c2: var(--color-pink);
    --effect-c3: var(--color-purple);
    --effect-c4: var(--color-red);
    --effect-t1: var(--color-text-orange);
    --effect-t2: var(--color-text-pink);
    --effect-t3: var(--color-text-purple);
    --effect-t4: var(--color-text-red);
    --effect-s1: var(--color-background-orange);
    --effect-s2: var(--color-background-pink);
    --effect-s3: var(--color-background-purple);
    --effect-s4: var(--color-background-red);
  }
  :where([data-effect-palette="ocean"] :is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])) {
    --effect-c1: var(--color-teal);
    --effect-c2: var(--color-blue);
    --effect-c3: var(--color-purple);
    --effect-c4: var(--color-green);
    --effect-t1: var(--color-text-teal);
    --effect-t2: var(--color-text-blue);
    --effect-t3: var(--color-text-purple);
    --effect-t4: var(--color-text-green);
    --effect-s1: var(--color-background-teal);
    --effect-s2: var(--color-background-blue);
    --effect-s3: var(--color-background-purple);
    --effect-s4: var(--color-background-green);
  }
  :where([data-effect-palette="spectrum"] :is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])) {
    --effect-c1: var(--color-pink);
    --effect-c2: var(--color-orange);
    --effect-c3: var(--color-green);
    --effect-c4: var(--color-blue);
    --effect-t1: var(--color-text-pink);
    --effect-t2: var(--color-text-orange);
    --effect-t3: var(--color-text-green);
    --effect-t4: var(--color-text-blue);
    --effect-s1: var(--color-background-pink);
    --effect-s2: var(--color-background-orange);
    --effect-s3: var(--color-background-green);
    --effect-s4: var(--color-background-blue);
  }
  :where([data-effect-palette="dawn"] :is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])) {
    --effect-c1: var(--color-orange);
    --effect-c2: var(--color-pink);
    --effect-c3: var(--color-blue);
    --effect-c4: var(--color-purple);
    --effect-t1: var(--color-text-orange);
    --effect-t2: var(--color-text-pink);
    --effect-t3: var(--color-text-blue);
    --effect-t4: var(--color-text-purple);
    --effect-s1: var(--color-background-orange);
    --effect-s2: var(--color-background-pink);
    --effect-s3: var(--color-background-blue);
    --effect-s4: var(--color-background-purple);
  }
  :where([data-effect-palette="accent"] :is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])) {
    --effect-c1: var(--color-accent);
    --effect-c2: var(--color-text-accent);
    --effect-c3: var(--color-accent);
    --effect-c4: var(--color-text-accent);
    --effect-t1: var(--color-text-accent);
    --effect-t2: var(--color-text-primary);
    --effect-t3: var(--color-text-accent);
    --effect-t4: var(--color-text-primary);
    --effect-s1: var(--color-accent-muted);
    --effect-s2: var(--color-background-gray);
    --effect-s3: var(--color-accent-muted);
    --effect-s4: var(--color-background-gray);
  }
  :where([data-effect-palette="neutral"] :is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])) {
    --effect-c1: var(--color-text-primary);
    --effect-c2: var(--color-text-secondary);
    --effect-c3: var(--color-text-primary);
    --effect-c4: var(--color-text-secondary);
    --effect-t1: var(--color-text-primary);
    --effect-t2: var(--color-text-secondary);
    --effect-t3: var(--color-text-primary);
    --effect-t4: var(--color-text-secondary);
    --effect-s1: var(--color-background-gray);
    --effect-s2: var(--color-background-gray);
    --effect-s3: var(--color-background-gray);
    --effect-s4: var(--color-background-gray);
  }
  :where(:is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])[data-effect-palette="aurora"]) {
    --effect-c1: var(--color-blue);
    --effect-c2: var(--color-purple);
    --effect-c3: var(--color-pink);
    --effect-c4: var(--color-teal);
    --effect-t1: var(--color-text-blue);
    --effect-t2: var(--color-text-purple);
    --effect-t3: var(--color-text-pink);
    --effect-t4: var(--color-text-teal);
    --effect-s1: var(--color-background-blue);
    --effect-s2: var(--color-background-purple);
    --effect-s3: var(--color-background-pink);
    --effect-s4: var(--color-background-teal);
  }
  :where(:is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])[data-effect-palette="sunset"]) {
    --effect-c1: var(--color-orange);
    --effect-c2: var(--color-pink);
    --effect-c3: var(--color-purple);
    --effect-c4: var(--color-red);
    --effect-t1: var(--color-text-orange);
    --effect-t2: var(--color-text-pink);
    --effect-t3: var(--color-text-purple);
    --effect-t4: var(--color-text-red);
    --effect-s1: var(--color-background-orange);
    --effect-s2: var(--color-background-pink);
    --effect-s3: var(--color-background-purple);
    --effect-s4: var(--color-background-red);
  }
  :where(:is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])[data-effect-palette="ocean"]) {
    --effect-c1: var(--color-teal);
    --effect-c2: var(--color-blue);
    --effect-c3: var(--color-purple);
    --effect-c4: var(--color-green);
    --effect-t1: var(--color-text-teal);
    --effect-t2: var(--color-text-blue);
    --effect-t3: var(--color-text-purple);
    --effect-t4: var(--color-text-green);
    --effect-s1: var(--color-background-teal);
    --effect-s2: var(--color-background-blue);
    --effect-s3: var(--color-background-purple);
    --effect-s4: var(--color-background-green);
  }
  :where(:is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])[data-effect-palette="spectrum"]) {
    --effect-c1: var(--color-pink);
    --effect-c2: var(--color-orange);
    --effect-c3: var(--color-green);
    --effect-c4: var(--color-blue);
    --effect-t1: var(--color-text-pink);
    --effect-t2: var(--color-text-orange);
    --effect-t3: var(--color-text-green);
    --effect-t4: var(--color-text-blue);
    --effect-s1: var(--color-background-pink);
    --effect-s2: var(--color-background-orange);
    --effect-s3: var(--color-background-green);
    --effect-s4: var(--color-background-blue);
  }
  :where(:is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])[data-effect-palette="dawn"]) {
    --effect-c1: var(--color-orange);
    --effect-c2: var(--color-pink);
    --effect-c3: var(--color-blue);
    --effect-c4: var(--color-purple);
    --effect-t1: var(--color-text-orange);
    --effect-t2: var(--color-text-pink);
    --effect-t3: var(--color-text-blue);
    --effect-t4: var(--color-text-purple);
    --effect-s1: var(--color-background-orange);
    --effect-s2: var(--color-background-pink);
    --effect-s3: var(--color-background-blue);
    --effect-s4: var(--color-background-purple);
  }
  :where(:is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])[data-effect-palette="accent"]) {
    --effect-c1: var(--color-accent);
    --effect-c2: var(--color-text-accent);
    --effect-c3: var(--color-accent);
    --effect-c4: var(--color-text-accent);
    --effect-t1: var(--color-text-accent);
    --effect-t2: var(--color-text-primary);
    --effect-t3: var(--color-text-accent);
    --effect-t4: var(--color-text-primary);
    --effect-s1: var(--color-accent-muted);
    --effect-s2: var(--color-background-gray);
    --effect-s3: var(--color-accent-muted);
    --effect-s4: var(--color-background-gray);
  }
  :where(:is([data-glow], [data-beam], [data-shimmer], [data-grain], [data-spotlight], [data-aurora])[data-effect-palette="neutral"]) {
    --effect-c1: var(--color-text-primary);
    --effect-c2: var(--color-text-secondary);
    --effect-c3: var(--color-text-primary);
    --effect-c4: var(--color-text-secondary);
    --effect-t1: var(--color-text-primary);
    --effect-t2: var(--color-text-secondary);
    --effect-t3: var(--color-text-primary);
    --effect-t4: var(--color-text-secondary);
    --effect-s1: var(--color-background-gray);
    --effect-s2: var(--color-background-gray);
    --effect-s3: var(--color-background-gray);
    --effect-s4: var(--color-background-gray);
  }
  :where([data-beam], [data-grain], [data-spotlight], [data-aurora]):not(:where(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"]) *, :where(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"])) {
    position: relative;
    isolation: isolate;
  }
  :where([data-aurora]):not(:where(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"]) *, :where(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"])) {
    overflow: clip;
  }
  [data-glow] {
    --_effect-glow-strength: var(--effect-glow-strength);
    --effect-glow-color-a: var(--effect-c1);
    --effect-glow-color-b: var(--effect-c3);
    filter: drop-shadow(
        calc(cos(var(--effect-glow-angle)) * var(--effect-glow-orbit))
          calc(sin(var(--effect-glow-angle)) * var(--effect-glow-orbit))
          var(--effect-glow-size)
          color-mix(in srgb, var(--effect-glow-color-a) var(--_effect-glow-strength), transparent)
      )
      drop-shadow(
        calc(cos(var(--effect-glow-angle) + 0.5turn) * var(--effect-glow-orbit))
          calc(sin(var(--effect-glow-angle) + 0.5turn) * var(--effect-glow-orbit))
          calc(var(--effect-glow-size) * 1.5)
          color-mix(in srgb, var(--effect-glow-color-b) var(--_effect-glow-strength), transparent)
      );
  }
  [data-glow="strong"] {
    --_effect-glow-strength: var(--effect-glow-strength-strong);
  }
  [data-beam]:not(button, a, input, select, textarea, label, [role="button"], [role="switch"], [role="checkbox"], [role="radio"], [role="tab"])::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: var(--effect-beam-width);
    pointer-events: none;
    background: linear-gradient(
      100deg,
      color-mix(in srgb, var(--effect-c1) var(--effect-beam-rest-strength), transparent),
      color-mix(in srgb, var(--effect-c2) var(--effect-beam-rest-strength), transparent),
      color-mix(in srgb, var(--effect-c3) var(--effect-beam-rest-strength), transparent),
      color-mix(in srgb, var(--effect-c4) var(--effect-beam-rest-strength), transparent)
    );
    -webkit-mask: linear-gradient(var(--color-text-primary) 0 0) content-box, linear-gradient(var(--color-text-primary) 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(var(--color-text-primary) 0 0) content-box exclude, linear-gradient(var(--color-text-primary) 0 0);
  }
  [data-shimmer] {
    background-image: linear-gradient(100deg, var(--effect-t1), var(--effect-t2), var(--effect-t3), var(--effect-t4), var(--effect-t1));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  :where([data-spotlight], [data-grain])::after {
    --_effect-grain-layer: none;
    --_effect-spot-layer: none, none;
    --_effect-grain-motion: none;
    --_effect-spot-motion: none;
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background-image: var(--_effect-grain-layer), var(--_effect-spot-layer);
    background-size: var(--effect-grain-size), 100% 100%, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat;
  }
  :where([data-grain])::after {
    --_effect-grain-layer: var(--effect-grain-image);
    --_effect-grain-motion: werewolf-effect-grain var(--effect-grain-duration) steps(1) infinite;
  }
  :where([data-spotlight])::after {
    --_effect-spot-layer: radial-gradient(
        circle var(--effect-spotlight-size) at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
        var(--effect-s1),
        color-mix(in srgb, var(--effect-s2) 60%, transparent) 45%,
        transparent
      ),
      none;
  }
  :where([data-spotlight="top"])::after {
    --_effect-spot-layer: radial-gradient(ellipse 55% 75% at var(--effect-spotlight-drift) 0%, var(--effect-s1), transparent),
      radial-gradient(ellipse 55% 75% at calc(100% - var(--effect-spotlight-drift)) 0%, var(--effect-s2), transparent);
    --_effect-spot-motion: werewolf-effect-spotlight-drift var(--effect-spotlight-duration) ease-in-out infinite alternate;
  }
  [data-aurora]:not([data-beam])::before {
    content: "";
    position: absolute;
    inset: auto calc(var(--effect-aurora-blur) * -2) calc(var(--effect-aurora-blur) * -1.5);
    height: calc(100% + var(--effect-aurora-blur) * 1.5);
    z-index: -1;
    pointer-events: none;
    filter: blur(var(--effect-aurora-blur));
    background-image: radial-gradient(
        in oklab ellipse 48% calc(var(--effect-aurora-h2) * var(--effect-aurora-scale) * 0.55) at calc(50% + (var(--effect-aurora-x2) - 50%) * 0.6) calc(100% - var(--effect-aurora-blur) * 1.5),
        color-mix(in srgb, var(--color-border-chart-marker) var(--effect-aurora-core-strength), transparent),
        color-mix(in srgb, var(--color-border-chart-marker) 55%, transparent) 45%,
        transparent
      ),
      radial-gradient(
        in oklab ellipse 58% calc(var(--effect-aurora-h1) * var(--effect-aurora-scale)) at var(--effect-aurora-x1) calc(100% - var(--effect-aurora-blur) * 1.5),
        color-mix(in oklab, var(--color-border-chart-marker) var(--effect-aurora-core-strength), var(--effect-c3)),
        color-mix(in oklab, var(--color-border-chart-marker) calc(var(--effect-aurora-core-strength) * 0.75), var(--effect-c3)) 24%,
        color-mix(in srgb, var(--effect-c3) var(--effect-aurora-strength), transparent) 42%,
        color-mix(in srgb, var(--effect-c2) var(--effect-aurora-strength), transparent) 60%,
        color-mix(in srgb, var(--effect-c1) calc(var(--effect-aurora-strength) * 0.65), transparent) 78%,
        transparent 94%
      ),
      radial-gradient(
        in oklab ellipse 58% calc(var(--effect-aurora-h3) * var(--effect-aurora-scale)) at var(--effect-aurora-x3) calc(100% - var(--effect-aurora-blur) * 1.5),
        color-mix(in oklab, var(--color-border-chart-marker) var(--effect-aurora-core-strength), var(--effect-c3)),
        color-mix(in oklab, var(--color-border-chart-marker) calc(var(--effect-aurora-core-strength) * 0.75), var(--effect-c3)) 24%,
        color-mix(in srgb, var(--effect-c3) var(--effect-aurora-strength), transparent) 42%,
        color-mix(in srgb, var(--effect-c2) var(--effect-aurora-strength), transparent) 60%,
        color-mix(in srgb, var(--effect-c1) calc(var(--effect-aurora-strength) * 0.65), transparent) 78%,
        transparent 94%
      ),
      radial-gradient(
        in oklab ellipse 44% calc(var(--effect-aurora-h2) * var(--effect-aurora-scale)) at var(--effect-aurora-x2) calc(100% - var(--effect-aurora-blur) * 1.5),
        color-mix(in oklab, var(--color-border-chart-marker) var(--effect-aurora-core-strength), var(--effect-c3)),
        color-mix(in oklab, var(--color-border-chart-marker) calc(var(--effect-aurora-core-strength) * 0.75), var(--effect-c3)) 24%,
        color-mix(in srgb, var(--effect-c3) var(--effect-aurora-strength), transparent) 42%,
        color-mix(in srgb, var(--effect-c2) var(--effect-aurora-strength), transparent) 60%,
        color-mix(in srgb, var(--effect-c1) calc(var(--effect-aurora-strength) * 0.65), transparent) 78%,
        transparent 94%
      );
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-glow] {
      animation:
        werewolf-effect-glow-orbit var(--effect-glow-duration) linear infinite,
        werewolf-effect-glow-hue calc(var(--effect-glow-duration) * 1.5) linear infinite;
    }
    [data-beam]:not(button, a, input, select, textarea, label, [role="button"], [role="switch"], [role="checkbox"], [role="radio"], [role="tab"])::before {
      background:
        conic-gradient(
          from var(--effect-beam-angle),
          transparent 0 calc(100% - var(--effect-beam-arc)),
          var(--effect-c1),
          var(--effect-c2),
          var(--effect-c3),
          var(--effect-c4)
        ),
        linear-gradient(
          100deg,
          color-mix(in srgb, var(--effect-c1) var(--effect-beam-rest-strength), transparent),
          color-mix(in srgb, var(--effect-c4) var(--effect-beam-rest-strength), transparent)
        );
      animation: werewolf-effect-beam var(--effect-beam-duration) linear infinite;
    }
    [data-shimmer] {
      animation: werewolf-effect-shimmer var(--effect-shimmer-duration) linear infinite;
    }
    :where([data-spotlight], [data-grain])::after {
      animation: var(--_effect-grain-motion), var(--_effect-spot-motion);
    }
    [data-aurora]:not([data-beam])::before {
      animation:
        werewolf-effect-aurora-x1 calc(var(--effect-aurora-duration) * 1.3) ease-in-out calc(var(--effect-aurora-duration) * -0.4) infinite alternate,
        werewolf-effect-aurora-x2 calc(var(--effect-aurora-duration) * 1.7) ease-in-out calc(var(--effect-aurora-duration) * -1.1) infinite alternate,
        werewolf-effect-aurora-x3 calc(var(--effect-aurora-duration) * 1.1) ease-in-out calc(var(--effect-aurora-duration) * -0.7) infinite alternate,
        werewolf-effect-aurora-h1 calc(var(--effect-aurora-duration) * 0.9) ease-in-out calc(var(--effect-aurora-duration) * -0.2) infinite alternate,
        werewolf-effect-aurora-h2 calc(var(--effect-aurora-duration) * 1.45) ease-in-out calc(var(--effect-aurora-duration) * -0.9) infinite alternate,
        werewolf-effect-aurora-h3 calc(var(--effect-aurora-duration) * 0.75) ease-in-out calc(var(--effect-aurora-duration) * -0.5) infinite alternate;
    }
  }
}
@layer werewolf-effects.guard {
  :is(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"]) [data-glow],
  :is(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"])[data-glow] {
    filter: none;
    animation: none;
  }
  :is(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"]) [data-beam]::before,
  :is(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"])[data-beam]::before,
  :is(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"]) :is([data-spotlight], [data-grain])::after,
  :is(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"]):is([data-spotlight], [data-grain])::after,
  :is(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"]) [data-aurora]::before,
  :is(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"])[data-aurora]::before {
    content: none;
  }
  :is(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"]) [data-shimmer],
  :is(form, [role="form"], [role="search"], table, [role="table"], [role="grid"], [role="treegrid"], nav, [role="navigation"], [role="tablist"], dialog, [role="dialog"], [role="alertdialog"], [role="menu"], [role="menubar"], [role="listbox"])[data-shimmer] {
    background-image: none;
    -webkit-text-fill-color: currentcolor;
    animation: none;
  }
  @media (forced-colors: active) {
    [data-glow] {
      filter: none;
      animation: none;
    }
    [data-beam]::before,
    :is([data-spotlight], [data-grain])::after,
    [data-aurora]::before {
      content: none;
    }
    [data-shimmer] {
      background-image: none;
      -webkit-text-fill-color: currentcolor;
      animation: none;
    }
  }
}