/* =====================================================================
   Bluezone brand layer: the logo mark, first-visit intro, page
   transitions, square circuit nodes. Loaded on every front page.
   ===================================================================== */
:root {
  --bz-navy: #0b1736;
  --bz-blue: #0c5adb;
  --bz-orange: #ff7a1a;
  --bz-paper: #f6f8fc;
  --bz-ease: cubic-bezier(0.7, 0, 0.2, 1);
}

/* ---------------------------------------------------------------- the mark */
.bz-mark { display: block; width: 100%; height: auto; overflow: visible; }
.bz-mark-lines path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.bz-mark-nodes rect { transform-box: fill-box; transform-origin: center; }
.bz-mark-b { transform-box: fill-box; transform-origin: 30% 50%; }

/* drawn state: lines trace from the B outward, nodes pop, the B settles */
.is-drawing .bz-mark-lines path { stroke-dashoffset: 1; animation: bzDraw .5s var(--bz-ease) forwards; }
.is-drawing .bz-mark-lines path:nth-child(2) { animation-delay: .08s; }
.is-drawing .bz-mark-lines path:nth-child(3) { animation-delay: .16s; }
.is-drawing .bz-mark-nodes rect { transform: scale(0); animation: bzPop .35s cubic-bezier(.3,1.6,.5,1) forwards; }
.is-drawing .bz-mark-nodes rect:nth-child(1) { animation-delay: .38s; }
.is-drawing .bz-mark-nodes rect:nth-child(2) { animation-delay: .30s; }
.is-drawing .bz-mark-nodes rect:nth-child(3) { animation-delay: .44s; }
.is-drawing .bz-mark-nodes rect:nth-child(4) { animation-delay: .34s; }
.is-drawing .bz-mark-nodes rect:nth-child(5) { animation-delay: .50s; }
.is-drawing .bz-mark-b { opacity: 0; transform: translateX(10px); animation: bzB .45s var(--bz-ease) forwards; }

@keyframes bzDraw { to { stroke-dashoffset: 0; } }
@keyframes bzPop { to { transform: scale(1); } }
@keyframes bzB { to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- first visit intro (once per tab session) */
.bz-intro {
  position: fixed; inset: 0; z-index: 2147483001;
  display: none; place-items: center;
  background: var(--bz-paper);
  transition: clip-path .6s var(--bz-ease);
  clip-path: inset(0 0 0 0);
}
.bz-intro-on .bz-intro { display: grid; }
.bz-intro .bz-mark { width: 92px; }
.bz-intro.is-out { clip-path: inset(0 0 100% 0); }
.bz-intro.is-out .bz-mark { transform: translateY(-24px); opacity: 0; transition: .35s var(--bz-ease); }

@media (prefers-reduced-motion: reduce) {
  .bz-intro { display: none !important; }
}

/* ---------------------------------------------------------------- square circuit node (section labels) */
.bz-node {
  display: inline-block; flex: none;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--bz-orange);
  box-shadow: -13px 0 0 -2.5px rgba(255,122,26,.5);
}
[dir="rtl"] .bz-node { box-shadow: 13px 0 0 -2.5px rgba(255,122,26,.5); }

/* thin circuit divider: line + node, used between blocks */
.bz-circuit {
  position: relative; height: 1px; margin: 0 auto;
  width: min(1400px, 100% - 32px);
  background: linear-gradient(90deg, transparent, #dfe5ef 12%, #dfe5ef 88%, transparent);
}
.bz-circuit::after {
  content: ""; position: absolute; top: -4px; inset-inline-start: 18%;
  width: 9px; height: 9px; border-radius: 2px; background: var(--bz-orange);
}