/* aqua diagram — self-contained, scoped under .aqd */

.aqd {
  --aqd-img-bg: url('../img/diagram/bg.svg');
  --aqd-img-beam: url('../img/diagram/beam.svg');
  --aqd-img-detect: url('../img/diagram/detect.svg');
  --aqd-img-enforce: url('../img/diagram/enforce.svg');
  --aqd-img-contain: url('../img/diagram/contain.svg');
  --aqd-img-monitor: url('../img/diagram/monitor.svg');
  --aqd-img-stars: url('../img/diagram/stars.svg');
  --aqd-img-logo: url('../img/diagram/logo.svg');

  --aqd-ring-mask: url('../img/diagram/ring-mask.svg');

  /* 1400-unit artboard; guide circle d=1346.35276 */
  --aqd-art: 1400;
  --aqd-bg-w: 2241.48535;
  --aqd-bg-h: 1393.04138;
  --aqd-guide: 1346.35276;

  /* artboard sits on the guide circle */
  --aqd-art-dx: -1.7260%;
  --aqd-art-dy: -0.0915%;

  /* beam tip as a share of height */
  --aqd-beam-apex: 42.43%;

  /* --aqd-rot also schedules the JS */
  --aqd-rot: 280ms;
  --aqd-rot-logo: 180ms;
  --aqd-rot-stars: 520ms;
  --aqd-beam: 260ms;
  --aqd-stars-delay: 100ms;
  --aqd-ease: ease-in-out;

  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: var(--aqd-max-width, 760px);
  margin-inline: auto;
  aspect-ratio: 2241.48535 / 1400;
  background: var(--aqd-bg, #051028);
  overflow: hidden;
}

/* not .aqd; it cancelled margin-inline: auto */
.aqd { box-sizing: border-box; padding: 0; border: 0; }
.aqd *,
.aqd *::before,
.aqd *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

.aqd-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--aqd-img-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% calc(100% * var(--aqd-bg-h) / var(--aqd-art));
}

.aqd-art {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  aspect-ratio: 1;
  transform: translateX(-50%) translate(var(--aqd-art-dx), var(--aqd-art-dy));
}

.aqd-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform-origin: 50% 50%;
}

.aqd-layer[data-crop="guide"] {
  background-size:
    calc(100% * var(--aqd-guide) / var(--aqd-art))
    calc(100% * var(--aqd-guide) / var(--aqd-art));
}

.aqd-beam            { z-index: 1; }
.aqd-seg--detect     { z-index: 2; }
.aqd-seg--enforce    { z-index: 3; }
.aqd-seg--contain    { z-index: 4; }
.aqd-seg--monitor    { z-index: 5; }
.aqd-stars           { z-index: 6; }
.aqd-logo            { z-index: 7; }

.aqd-seg {
  opacity: .7;
  transition: opacity var(--aqd-beam) var(--aqd-ease);
}

.aqd-state-detect  .aqd-seg--detect,
.aqd-state-enforce .aqd-seg--enforce,
.aqd-state-contain .aqd-seg--contain,
.aqd-state-monitor .aqd-seg--monitor {
  opacity: 1;
}

.aqd-seg--detect  { background-image: var(--aqd-img-detect); }
.aqd-seg--enforce { background-image: var(--aqd-img-enforce); }
.aqd-seg--contain { background-image: var(--aqd-img-contain); }
.aqd-seg--monitor { background-image: var(--aqd-img-monitor); }

.aqd-logo,
.aqd-beam,
.aqd-stars-spin {
  transform: rotate(var(--aqd-spin, 0deg));
  transition: transform var(--aqd-rot) var(--aqd-ease);
  will-change: transform;
}

.aqd-logo {
  background-image: var(--aqd-img-logo);
  transition: transform var(--aqd-rot-logo) var(--aqd-ease);
}

/* outer element masks, inner one rotates */
.aqd-stars {
  -webkit-mask-image: var(--aqd-ring-mask);
  mask-image: var(--aqd-ring-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.aqd-stars-spin {
  position: absolute;
  inset: 0;
  background-image: var(--aqd-img-stars);
  background-repeat: no-repeat;
  background-position: center;
  background-size:
    calc(100% * var(--aqd-guide) / var(--aqd-art))
    calc(100% * var(--aqd-guide) / var(--aqd-art));
  transform-origin: 50% 50%;
  transition: transform var(--aqd-rot-stars) var(--aqd-ease) var(--aqd-stars-delay);
}

.aqd-beam {
  background-image: var(--aqd-img-beam);
  background-size:
    calc(100% * var(--aqd-guide) / var(--aqd-art))
    calc(100% * var(--aqd-guide) / var(--aqd-art));
  opacity: 0;
  clip-path: inset(var(--aqd-beam-apex) 0 50% 0);
  transition: transform var(--aqd-rot) var(--aqd-ease),
              clip-path var(--aqd-beam) var(--aqd-ease),
              opacity calc(var(--aqd-beam) * .35) ease;
}

.aqd-beam.aqd-is-open {
  opacity: 1;
  clip-path: inset(0 0 50% 0);
}

/* one-shot moves ignore reduced-motion; see tokens.css */
html.a11y-no-motion .aqd {
  --aqd-rot: 1ms;
  --aqd-rot-logo: 1ms;
  --aqd-rot-stars: 1ms;
  --aqd-beam: 1ms;
  --aqd-stars-delay: 0ms;
}

/* hover targets + tooltip */
/* wedges by quarter; --aqd-hit-turn rotates all four */

.aqd-hits { position: absolute; inset: 0; z-index: 8; }

.aqd-hit {
  position: absolute;
  inset: 0;
  background: none;
  cursor: pointer;
  appearance: none;
  clip-path: polygon(50% 50%, 14.6% 14.6%, 85.4% 14.6%);
  transform: rotate(calc(var(--aqd-hit-turn, 0deg) + var(--aqd-hit-quarter, 0) * 90deg));
  transform-origin: 50% 50%;
}
.aqd-hit--detect  { --aqd-hit-quarter: 0; }
.aqd-hit--enforce { --aqd-hit-quarter: 1; }
.aqd-hit--contain { --aqd-hit-quarter: 2; }
.aqd-hit--monitor { --aqd-hit-quarter: 3; }

/* logo disc drops back to idle */
.aqd-hit--core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  height: 30%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  clip-path: none;
  background: none;
  cursor: default;
  z-index: 9;
}

.aqd-hit:focus-visible {
  outline: 2px solid var(--aqd-focus, #4891f9);
  outline-offset: -6px;
}

/* outside .aqd, so not clipped; repeat the tokens */
.aqd-scene {
  position: relative;
  width: 100%;
  --aqd-beam: 260ms;
  --aqd-ease: ease-in-out;
}

/* follows the pointer; the wedge under it is the link */
.aqd-tip {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  width: clamp(13rem, 22%, 24rem);
  transform: translate(var(--aqd-tip-x, 0px), var(--aqd-tip-y, 0px));
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(5, 16, 40, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #e6edf7;
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(var(--aqd-beam) * .4) var(--aqd-ease);
}
.aqd-tip.aqd-is-open { opacity: 1; }

.aqd-tip__title,
.aqd-tip__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.aqd-tip__title { -webkit-line-clamp: 3; font-size: 1rem; font-weight: 700; color: #fff; }
a.aqd-tip__title:hover { text-decoration: underline; }
.aqd-tip__title[href=""] { pointer-events: none; }
.aqd-tip__text { -webkit-line-clamp: 6; margin-top: 0.3rem; font-size: 0.8125rem; line-height: 1.45; color: rgba(230, 237, 247, 0.8); }

/* no hover on touch */
@media (hover: none) {
  .aqd-hits, .aqd-tip { display: none; }
}