/* Pakstoor :: what-is-pakstoor.css :: v1.0-000004 :: 2026-06-21 */
/*
  "What is Pakstoor?" — a fast, glanceable 5-node icon flow explainer.
  Self-contained (no cross-file class dependency); reuses core.css tokens
  so it adapts to light/dark automatically. Gold is reserved for the
  protected/escrow node only. Used on /, /login, and /what-is-pakstoor.
*/

.wip {
  padding: var(--s-12, 48px) 0;
}
.wip-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--gutter, 20px);
}

/* ── Heading ─────────────────────────────────────────────── */
.wip-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto var(--s-8, 32px);
}
.wip-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}
.wip-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 10px;
}
.wip-sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

/* ── Flow ────────────────────────────────────────────────── */
.wip-flow {
  list-style: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.wip-node {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 20px 12px;
}
.wip-glyph {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  color: var(--ink-muted);
}
.wip-glyph svg { width: 26px; height: 26px; }
.wip-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.wip-label {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink);
}
.wip-desc {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-dim);
}

/* Role tints — gold = brand/protected, blue = informational, green = trust */
.wip-node--gold .wip-glyph    { background: rgba(217, 166, 37, 0.10); border-color: rgba(217, 166, 37, 0.32); color: var(--gold); }
.wip-node--blue .wip-glyph    { background: rgba(159, 199, 232, 0.10); border-color: rgba(159, 199, 232, 0.32); color: var(--blue); }
.wip-node--success .wip-glyph { background: rgba(94, 168, 114, 0.12); border-color: rgba(94, 168, 114, 0.34); color: var(--success); }
/* The escrow/"held" node gets the one bit of gold emphasis on the card edge. */
.wip-node--held { border-color: rgba(217, 166, 37, 0.30); }

.wip-arrow {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.wip-arrow svg { width: 20px; height: 20px; }

/* ── Footer line ─────────────────────────────────────────── */
.wip-foot {
  margin-top: var(--s-7, 28px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.wip-slogan {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 15px;
  color: var(--ink);
}
.wip-slogan em { color: var(--gold); font-style: normal; }
.wip-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 540px;
}
.wip-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
}
.wip-link:hover { text-decoration: underline; }

/* ── Subtle "held in trust" pulse on the escrow node ─────── */
@media (prefers-reduced-motion: no-preference) {
  .wip-node--held .wip-glyph { animation: wipHeldPulse 3.4s ease-in-out infinite; }
  @keyframes wipHeldPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 166, 37, 0.0); }
    50%      { box-shadow: 0 0 0 5px rgba(217, 166, 37, 0.12); }
  }
}

/* ── Slim variant (login strip) ──────────────────────────── */
.wip--slim { padding: var(--s-8, 32px) 0 var(--s-6, 24px); }
.wip--slim .wip-head { margin-bottom: var(--s-6, 24px); }
.wip--slim .wip-sub { display: none; }
.wip--slim .wip-node { padding: 14px 10px; gap: 8px; border-radius: 12px; }
.wip--slim .wip-glyph { width: 42px; height: 42px; border-radius: 11px; }
.wip--slim .wip-glyph svg { width: 22px; height: 22px; }
.wip--slim .wip-label { font-size: 13.5px; }
.wip--slim .wip-desc { font-size: 11px; }
.wip--slim .wip-foot { margin-top: var(--s-5, 20px); }

/* ── Standalone page framing (/what-is-pakstoor) ─────────── */
.wip-page { padding: var(--s-10, 40px) 0 var(--s-12, 48px); }
.wip-cta-row {
  margin-top: var(--s-8, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ── Responsive: stack vertically, rotate arrows to point down ── */
@media (max-width: 880px) {
  .wip-flow { flex-direction: column; align-items: stretch; gap: 4px; }
  .wip-node { flex-direction: row; text-align: left; align-items: center; gap: 14px; padding: 14px 16px; }
  .wip-txt { align-items: flex-start; text-align: left; }
  .wip-arrow { transform: rotate(90deg); padding: 2px 0; }
}

/* ── Flagship sizing on the standalone /what-is-pakstoor page ──────
   Bigger, more substantial cards + icons than the compact embed. Scoped
   to .wip-page so any other (slim) usage is untouched. */
.wip-page .wip-flow { gap: 8px; }
.wip-page .wip-node { padding: 30px 18px; gap: 14px; border-radius: 18px; }
.wip-page .wip-glyph { width: 68px; height: 68px; border-radius: 17px; }
.wip-page .wip-glyph svg { width: 34px; height: 34px; }
.wip-page .wip-label { font-size: 17px; }
.wip-page .wip-desc { font-size: 13px; }
.wip-page .wip-arrow svg { width: 24px; height: 24px; }

/* The powerful one-paragraph pitch sitting above the CTA buttons. */
.wip-pitch {
  max-width: 680px;
  margin: 4px auto 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-muted);
}
.wip-pitch strong { color: var(--ink); font-weight: 700; }

/* Readable card holding the pitch + slogan so the copy sits clearly above the
   honeycomb field. Slightly translucent + blurred so the hexagons still whisper
   through the edges without ever fighting the text. */
.wip-pitch-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--bg-1);
  background: color-mix(in srgb, var(--bg-1) 90%, transparent);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  box-shadow: 0 24px 70px -28px rgba(0, 0, 0, 0.55);
}
.wip-pitch-card .wip-pitch { margin: 0; max-width: none; }
@media (max-width: 880px) { .wip-pitch-card { padding: 22px 20px; } }

@media (max-width: 880px) {
  .wip-page .wip-node { padding: 18px 18px; }
  .wip-page .wip-glyph { width: 58px; height: 58px; }
  .wip-page .wip-glyph svg { width: 30px; height: 30px; }
  .wip-pitch { font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════
   HEXAGON SHOWCASE — bespoke honeycomb world, scoped to .wip-page.
   CSS/SVG only (no JS, CSP/Trusted-Types safe). Two decorative
   layers behind the content + hexagon-clipped glyph cells. Gold is
   reserved for the escrow node, which glows as the jewel of the page.
   All motion is GPU-cheap (transform/filter) and reduced-motion
   guarded. overflow:hidden keeps the drifting layers from ever
   causing horizontal scroll.
   ════════════════════════════════════════════════════════════════ */
.wip-page { position: relative; overflow: hidden; }
.wip-page .wip-inner { position: relative; z-index: 2; }

/* Layer 1 — tiled honeycomb field, masked to a soft radial so it is
   strongest behind the flow and dissolves toward the edges. */
.wip-page::before {
  content: "";
  position: absolute;
  inset: -48px 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238b939d' fill-opacity='0.6'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 50px 87px;
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(ellipse 82% 64% at 50% 42%, #000 28%, transparent 80%);
          mask-image: radial-gradient(ellipse 82% 64% at 50% 42%, #000 28%, transparent 80%);
}

/* Layer 2 — depth: a cool top glow, a faint gold bloom behind the
   flow, and two large outlined accent hexagons floating in the field. */
.wip-page::after {
  content: "";
  position: absolute;
  inset: -24px 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,3 91,26.5 91,73.5 50,97 9,73.5 9,26.5' fill='none' stroke='%238b939d' stroke-width='1.1' stroke-opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,3 91,26.5 91,73.5 50,97 9,73.5 9,26.5' fill='none' stroke='%23d9a625' stroke-width='1.4' stroke-opacity='0.45'/%3E%3C/svg%3E"),
    radial-gradient(820px 460px at 50% 8%, rgba(159, 199, 232, 0.10), transparent 72%),
    radial-gradient(560px 360px at 50% 55%, rgba(217, 166, 37, 0.10), transparent 66%);
  background-repeat: no-repeat;
  background-position: 90% 10%, 7% 90%, 50% 0%, 50% 50%;
  background-size: 300px 300px, 220px 220px, auto, auto;
}

/* Hexagon glyph cells — the flow icons sit inside pointy-top hexagons
   with a gem-like tint gradient. The border is dropped (clip-path hides
   it) and replaced by the fill + the gold glow on the escrow cell. */
.wip-page .wip-glyph {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 0;
  border-radius: 0;
}
.wip-page .wip-node--gold .wip-glyph    { background: linear-gradient(155deg, rgba(217, 166, 37, 0.22), rgba(217, 166, 37, 0.05)); }
.wip-page .wip-node--blue .wip-glyph    { background: linear-gradient(155deg, rgba(159, 199, 232, 0.22), rgba(159, 199, 232, 0.05)); }
.wip-page .wip-node--success .wip-glyph { background: linear-gradient(155deg, rgba(94, 168, 114, 0.24), rgba(94, 168, 114, 0.05)); }

/* The escrow ("held") node is the jewel — a stronger gold cell, a gold
   ring on the card, and a steady gold glow (drop-shadow follows the
   hexagon clip; box-shadow would be clipped away). */
.wip-page .wip-node--held { border-color: rgba(217, 166, 37, 0.5); box-shadow: 0 0 0 1px rgba(217, 166, 37, 0.18) inset, 0 10px 40px -12px rgba(217, 166, 37, 0.28); }
.wip-page .wip-node--held .wip-glyph { background: linear-gradient(155deg, rgba(217, 166, 37, 0.34), rgba(217, 166, 37, 0.08)); filter: drop-shadow(0 0 6px rgba(217, 166, 37, 0.45)); }

/* Light mode — dial the field back so it stays a whisper, not a grid. */
:root[data-theme="light"] .wip-page::before { opacity: 0.16; }
:root[data-theme="light"] .wip-page::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,3 91,26.5 91,73.5 50,97 9,73.5 9,26.5' fill='none' stroke='%23667085' stroke-width='1.1' stroke-opacity='0.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,3 91,26.5 91,73.5 50,97 9,73.5 9,26.5' fill='none' stroke='%23c79a1f' stroke-width='1.4' stroke-opacity='0.5'/%3E%3C/svg%3E"),
    radial-gradient(820px 460px at 50% 8%, rgba(80, 120, 170, 0.08), transparent 72%),
    radial-gradient(560px 360px at 50% 55%, rgba(217, 166, 37, 0.12), transparent 66%);
}

/* Motion — slow, calm, and only when the visitor allows it. */
@media (prefers-reduced-motion: no-preference) {
  .wip-page::before { animation: wipHexDrift 26s ease-in-out infinite alternate; }
  .wip-page::after  { animation: wipHexFloat 22s ease-in-out infinite alternate; }
  .wip-page .wip-node--held .wip-glyph { animation: wipHexGlow 3.6s ease-in-out infinite; }
  @keyframes wipHexDrift { from { transform: translateY(0); }    to { transform: translateY(-22px); } }
  @keyframes wipHexFloat { from { transform: translateY(0); }    to { transform: translateY(13px); } }
  @keyframes wipHexGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(217, 166, 37, 0.35)); }
    50%      { filter: drop-shadow(0 0 11px rgba(217, 166, 37, 0.7)); }
  }
}