/*
 * The sign-in page's brand picture (resources/views/partials/auth-hub.blade.php):
 * the panel as a hub — the WilberNight mark at the centre of an orbit, six
 * glass tiles for what the panel runs, a pulse running out to each in turn.
 *
 * Light by default and dark under [data-bs-theme="dark"], like the brand
 * panel it sits in. The stage keeps its 600 × 520 proportions, and the core
 * and tiles are sized in container units, so the drawing reads the same at
 * any width. One 6s cycle drives the pulses and the tiles they light; each
 * tile's --d offsets it by a second, clockwise from the top.
 */

.wn-hub {
  --hub-glow: rgba(255, 170, 60, .30);
  --hub-ring: rgba(15, 23, 42, .08);
  --hub-orbit: rgba(15, 23, 42, .16);
  --hub-core-ring: rgba(218, 120, 0, .22);
  --hub-spoke: rgba(218, 120, 0, .28);
  --hub-pulse: #da7800;
  --hub-pulse-glow: rgba(255, 154, 31, .8);
  --hub-accent: #da7800;
  --hub-accent-ring: rgba(218, 120, 0, .14);
  --hub-accent-glow: rgba(218, 120, 0, .55);
  --hub-core-bg: linear-gradient(160deg, #ffffff, #f5f7fb);
  --hub-core-line: rgba(15, 23, 42, .07);
  --hub-core-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 26px 50px -22px rgba(218, 120, 0, .45), inset 0 1px 0 #fff;
  --hub-rim: rgba(255, 170, 60, .55);
  --hub-mark-glow: rgba(218, 120, 0, .35);
  --hub-tile-bg: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .84));
  --hub-tile-line: rgba(15, 23, 42, .08);
  --hub-tile-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 16px 30px -18px rgba(30, 41, 59, .40), inset 0 1px 0 #fff;
  --hub-icon: #3d4350;
  --hub-label: #5d6579;
  --hub-bit-opacity: .7;

  position: relative;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  aspect-ratio: 600 / 520;
  container-type: inline-size;
  direction: ltr;              /* the drawing is not mirrored; the labels are */
  user-select: none;
  -webkit-user-select: none;
}

[data-bs-theme="dark"] .wn-hub {
  --hub-glow: rgba(218, 120, 0, .30);
  --hub-ring: rgba(255, 255, 255, .06);
  --hub-orbit: rgba(255, 255, 255, .14);
  --hub-core-ring: rgba(255, 154, 31, .25);
  --hub-spoke: rgba(255, 154, 31, .25);
  --hub-pulse: #ffb84d;
  --hub-pulse-glow: rgba(255, 170, 60, .9);
  --hub-accent: #ff9a1f;
  --hub-accent-ring: rgba(255, 154, 31, .16);
  --hub-accent-glow: rgba(255, 154, 31, .5);
  --hub-core-bg: linear-gradient(160deg, #2a2e38, #16181e);
  --hub-core-line: rgba(255, 255, 255, .10);
  --hub-core-shadow: 0 30px 60px -24px rgba(218, 120, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  --hub-rim: rgba(255, 184, 77, .6);
  --hub-mark-glow: rgba(255, 154, 31, .55);
  --hub-tile-bg: linear-gradient(160deg, rgba(40, 44, 54, .85), rgba(22, 24, 30, .85));
  --hub-tile-line: rgba(255, 255, 255, .09);
  --hub-tile-shadow: 0 18px 34px -18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06);
  --hub-icon: #d4d7e2;
  --hub-label: #9aa0b4;
  --hub-bit-opacity: .85;
}

.wn-hub__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- the drawing -------------------------------------------------------- */

.wn-hub .wnhub-s-glow { stop-color: var(--hub-glow); }

.wn-hub .wnhub-halo {
  transform-box: view-box;
  transform-origin: 300px 262px;
  animation: wnhub-breathe 6s ease-in-out infinite;
}

.wn-hub .wnhub-ring { fill: none; stroke: var(--hub-ring); stroke-width: 1; }
.wn-hub .wnhub-ring--orbit { stroke: var(--hub-orbit); stroke-dasharray: 2 8; stroke-linecap: round; }
.wn-hub .wnhub-ring--core { stroke: var(--hub-core-ring); }

/* The orbit turns, slowly, carrying two satellites past the tiles. */
.wn-hub .wnhub-orbit {
  transform-box: view-box;
  transform-origin: 300px 262px;
  animation: wnhub-spin 90s linear infinite;
}
.wn-hub .wnhub-sat { fill: var(--hub-accent); filter: drop-shadow(0 0 4px var(--hub-pulse-glow)); }
.wn-hub .wnhub-sat--dim { opacity: .55; }

/* A short arc sweeping round the core's ring. */
.wn-hub .wnhub-scan {
  fill: none;
  stroke: var(--hub-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 14 86;
  transform-box: view-box;
  transform-origin: 300px 262px;
  animation: wnhub-spin 10s linear infinite;
}

.wn-hub .wnhub-spokes path { fill: none; stroke: var(--hub-spoke); stroke-width: 1.4; stroke-linecap: round; }

.wn-hub .wnhub-pulses path {
  fill: none;
  stroke: var(--hub-pulse);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 18 100;
  stroke-dashoffset: 18;
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--hub-pulse-glow));
  animation: wnhub-pulse 6s cubic-bezier(.45, 0, .25, 1) infinite;
  animation-delay: var(--d, 0s);
}

.wn-hub .wnhub-bit {
  fill: url(#wnhub-diamond);
  opacity: var(--hub-bit-opacity);
  transform-box: fill-box;
  transform-origin: center;
  animation: wnhub-float 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* ---- the core: the mark on glass ---------------------------------------- */

.wn-hub__core {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50.385%;                /* 262 of 520 */
  display: grid;
  place-items: center;
  width: 20.667cqw;            /* 124 of 600 */
  height: 20.667cqw;
  border-radius: 6cqw;
  transform: translate(-50%, -50%);
  background: var(--hub-core-bg);
  border: 1px solid var(--hub-core-line);
  box-shadow: var(--hub-core-shadow);
}

/* A warm rim of light along the top-left edge. */
.wn-hub__core::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, var(--hub-rim), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.wn-hub__mark {
  width: 56%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 .8cqw 2cqw var(--hub-mark-glow));
}
.wn-hub__mark path { fill: url(#wnhub-diamond); }

/* ---- the tiles ---------------------------------------------------------- */

.wn-hub__tile {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 11.333cqw;            /* 68 of 600 */
  height: 11.333cqw;
  border-radius: 3.4cqw;
  transform: translate(-50%, -50%);
  background: var(--hub-tile-bg);
  border: 1px solid var(--hub-tile-line);
  box-shadow: var(--hub-tile-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

.wn-hub__tile i {
  color: var(--hub-icon);
  font-size: 5.2cqw;
  line-height: 1;
  animation: wnhub-icon 6s ease-out infinite;
  animation-delay: var(--d, 0s);
}

/* The light a pulse leaves when it lands. */
.wn-hub__tile::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--hub-accent);
  box-shadow: 0 0 0 4px var(--hub-accent-ring), 0 10px 26px -10px var(--hub-accent-glow);
  opacity: 0;
  pointer-events: none;
  animation: wnhub-land 6s ease-out infinite;
  animation-delay: var(--d, 0s);
}

/* Each label sits on the side away from its spoke: under the lower tiles,
   over the upper ones. */
.wn-hub__tile small {
  position: absolute;
  top: calc(100% + 1.4cqw);
  left: 50%;
  transform: translateX(-50%);
  color: var(--hub-label);
  font-size: 12px;
  font-size: clamp(11px, 2.2cqw, 13px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.wn-hub__tile--up small {
  top: auto;
  bottom: calc(100% + 1.4cqw);
}

[dir="rtl"] .wn-hub__tile small { direction: rtl; }

/* ---- motion ------------------------------------------------------------- */

@keyframes wnhub-spin { to { transform: rotate(360deg); } }

@keyframes wnhub-breathe {
  0%, 100% { opacity: .75; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes wnhub-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Out along the spoke in the first third of the cycle, then gone. */
@keyframes wnhub-pulse {
  0% { stroke-dashoffset: 18; opacity: 0; }
  4% { opacity: 1; }
  26% { opacity: 1; }
  32% { stroke-dashoffset: -100; opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes wnhub-land {
  0%, 26% { opacity: 0; }
  33% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

@keyframes wnhub-icon {
  0%, 26% { color: var(--hub-icon); }
  33%, 42% { color: var(--hub-accent); }
  62%, 100% { color: var(--hub-icon); }
}

@media (prefers-reduced-motion: reduce) {
  .wn-hub *,
  .wn-hub *::after { animation: none !important; }
  .wn-hub .wnhub-pulses { display: none; }
}