/* Resonance — attentional field. Content stays still; the field around it moves. */

:root {
  --resonance-h: 196;
  --resonance-s: 100%;
  --resonance-l: 62%;
  --resonance-strength: 0.72;
  --resonance-edge-opacity: 0.42;
  --resonance-field-opacity: 0.14;
  --resonance-field-radius: 14px;
  --resonance-ignition-duration: 920ms;
  --resonance-response-duration: 640ms;
  --resonance-active-duration: 7.2s;
  --resonance-signal: hsl(var(--resonance-h) var(--resonance-s) var(--resonance-l));
}

[data-resonance-tone="identity"] {
  --resonance-h: 196;
  --resonance-s: 100%;
  --resonance-l: 62%;
}
[data-resonance-tone="active"],
[data-resonance-tone="verified"] {
  --resonance-h: 145;
  --resonance-s: 100%;
  --resonance-l: 74%;
}
[data-resonance-tone="warning"] {
  --resonance-h: 42;
  --resonance-s: 88%;
  --resonance-l: 62%;
}
[data-resonance-tone="critical"] {
  --resonance-h: 350;
  --resonance-s: 82%;
  --resonance-l: 66%;
}
[data-resonance-tone="selected"] {
  --resonance-h: 270;
  --resonance-s: 72%;
  --resonance-l: 72%;
}

[data-resonance] {
  position: relative;
  isolation: isolate;
  --resonance-signal: hsl(var(--resonance-h) var(--resonance-s) var(--resonance-l));
}

[data-resonance-shape="circle"] {
  border-radius: 50%;
}

[data-resonance-level="1"] {
  --resonance-strength: 0.42;
  --resonance-field-opacity: 0.08;
  --resonance-edge-opacity: 0.28;
}
[data-resonance-level="2"] {
  --resonance-strength: 0.78;
  --resonance-field-opacity: 0.16;
  --resonance-edge-opacity: 0.4;
}
[data-resonance-level="3"] {
  --resonance-strength: 0.7;
  --resonance-field-opacity: 0.14;
  --resonance-edge-opacity: 0.48;
}

.resonance-field {
  position: absolute;
  inset: calc(var(--resonance-field-radius) * -1);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.resonance-halo {
  position: absolute;
  inset: 18%;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px hsl(var(--resonance-h) var(--resonance-s) var(--resonance-l) / var(--resonance-edge-opacity)),
    0 0 22px hsl(var(--resonance-h) var(--resonance-s) var(--resonance-l) / var(--resonance-field-opacity));
  opacity: 0.38;
  transform: scale(1);
  transition: opacity 420ms ease, transform 420ms ease, box-shadow 420ms ease;
}

[data-resonance-shape="circle"] .resonance-halo {
  inset: 10%;
}

[data-resonance-level="1"] .resonance-halo {
  inset: 4%;
  opacity: 0;
}

.resonance-signal {
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  opacity: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0 78%,
    hsl(var(--resonance-h) var(--resonance-s) var(--resonance-l) / 0.05) 84%,
    var(--resonance-signal) 93%,
    hsl(var(--resonance-h) var(--resonance-s) var(--resonance-l) / 0.08) 97%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  will-change: transform, opacity;
}

[data-resonance-shape="circle"] .resonance-signal {
  inset: 4%;
}

[data-resonance] > :not(.resonance-field) {
  position: relative;
  z-index: 1;
}

[data-resonance-tone="identity"] img {
  transform: none;
  animation: none;
}

[data-resonance-state="dormant"] .resonance-halo {
  opacity: 0.32;
}

[data-resonance-level="1"][data-resonance-state="dormant"] .resonance-halo {
  opacity: 0;
}

[data-resonance-state="ignition"] .resonance-halo {
  opacity: calc(0.45 + var(--resonance-strength) * 0.35);
  transform: scale(1.035);
}

[data-resonance-state="presence"] .resonance-halo {
  opacity: 0.4;
  transform: scale(1);
}

[data-resonance-level="1"][data-resonance-state="presence"] .resonance-halo {
  opacity: 0;
}

[data-resonance-state="response"] .resonance-halo {
  opacity: calc(0.5 + var(--resonance-strength) * 0.25);
  transform: scale(1.028);
  box-shadow:
    0 0 0 1px hsl(var(--resonance-h) var(--resonance-s) var(--resonance-l) / 0.55),
    0 0 26px hsl(var(--resonance-h) var(--resonance-s) var(--resonance-l) / 0.22);
}

[data-resonance-state="active"] .resonance-halo {
  opacity: 0.48;
}

[data-resonance-state="ignition"] .resonance-signal {
  animation: resonance-travel var(--resonance-ignition-duration) cubic-bezier(0.16, 1, 0.3, 1) 1;
}

[data-resonance-state="response"] .resonance-signal {
  animation: resonance-travel var(--resonance-response-duration) cubic-bezier(0.22, 1, 0.36, 1) 1;
}

[data-resonance-level="3"][data-resonance-state="active"] .resonance-signal {
  opacity: 0.55;
  animation: resonance-travel var(--resonance-active-duration) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes resonance-travel {
  0% {
    opacity: 0;
    transform: rotate(-12deg);
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(348deg);
  }
}

[data-resonance-kind="tab"] {
  --resonance-field-radius: 6px;
}

[data-resonance-kind="tab"][aria-selected="true"] {
  box-shadow: 0 0 0 1px hsl(var(--resonance-h) var(--resonance-s) var(--resonance-l) / 0.45);
}

.button {
  --resonance-field-radius: 8px;
  overflow: visible;
}

.button[data-resonance-kind="button"] .resonance-halo,
.button .resonance-halo {
  inset: 0;
  border-radius: inherit;
}

.button[data-resonance-kind="button"] .resonance-signal,
.button .resonance-signal {
  inset: 0;
  border-radius: inherit;
}

.button[data-resonance-state="response"],
[data-resonance-kind="button"][data-resonance-state="response"] {
  transform: translateY(-2px);
}

.button:focus-visible,
.button[data-resonance]:focus-visible,
[data-resonance-kind="tab"]:focus-visible,
a.button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

html[data-resonance-experiment="static"] .resonance-field,
html[data-resonance-experiment="static"] .resonance-signal {
  display: none;
}

html[data-resonance-experiment="field"] .resonance-signal {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .resonance-signal {
    animation: none !important;
    opacity: 0 !important;
  }
  .resonance-halo {
    transform: none !important;
    transition: none;
    opacity: 0.45;
  }
  [data-resonance-level="1"] .resonance-halo {
    opacity: 0;
  }
  [data-resonance-level="1"][data-resonance-state="response"] .resonance-halo,
  [data-resonance-kind="tab"][aria-selected="true"] .resonance-halo,
  [data-resonance-state="active"] .resonance-halo {
    opacity: 0.5;
  }
  .button[data-resonance-state="response"],
  [data-resonance-kind="button"][data-resonance-state="response"] {
    transform: none;
  }
}