/* ============================================================================
   Reponomics — vault door
   ----------------------------------------------------------------------------
   Pure-CSS vault door, ported from the Dashboard's own encrypted lock screen
   (the auth-locked state you see at reponomics.github.io/reponomics-dashboard-
   demo/). No images, no SVG, no canvas — every ring, bolt, spoke and dial mark
   is a gradient.

   Why it's here: the vault IS the Dashboard's thesis. Your data is encrypted
   with your key and decrypted in your browser, so the product's front door is
   literally a safe. Borrowing it for the /dashboard hero says that in one look,
   and keeps that page visually distinct from the homepage's kinetic headline.

   Renamed from the source's `auth-*` classes to `rp-vault-*`: on a marketing
   page nothing is being authenticated, and the original names would misdescribe
   what this is.

   Scope: the palette is declared on .rp-vault itself rather than :root, so the
   vault's near-black greys can't leak into the page's own surface tokens.
   ========================================================================= */

/* Overhead light.
   The source page lights the door with a gold wash on body.auth-locked. Without
   it the wheel, spokes and hub sink into the near-black face and the door reads
   as a flat dark circle. Scoped to the hero section so it can't tint the rest
   of the page. */
.rp-vault-hero {
  position: relative;
}

.rp-vault-hero::before {
  content: "";
  position: absolute;
  inset: -12% 0 auto 0;
  height: 88%;
  background: radial-gradient(
    900px 520px at 50% -6%,
    rgba(195, 148, 61, 0.11),
    rgba(195, 148, 61, 0.03) 46%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

.rp-vault-hero > * {
  position: relative;
  z-index: 1;
}

/* Stage: sets the door's footprint and owns the size-container context, so the
   lockup can be measured against the door while rendering OUTSIDE it. Overflow
   stays visible here — that's the whole point. */
.rp-vault-stage {
  position: relative;
  width: min(620px, 84vw);
  margin-inline: auto;
  container-type: inline-size;
}

.rp-vault {
  --vault-black: #010203;
  --vault-950: #030507;
  --vault-900: #06090d;
  --vault-850: #0d1218;
  --vault-800: #141a23;
  --vault-700: #222b38;
  --vault-gold: #c3943d;
  --vault-gold-bright: #e6c36b;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  /* Fills the stage, which carries the actual sizing. */
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 51% 51%,
      rgba(104, 181, 255, 0.055) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 52% 49%,
      rgba(195, 148, 61, 0.05),
      transparent 17%
    ),
    radial-gradient(
      ellipse at 45% 38%,
      rgba(255, 255, 255, 0.06),
      transparent 27%
    ),
    radial-gradient(
      circle at 50% 52%,
      transparent 0 26.7%,
      rgba(145, 162, 186, 0.13) 27.1% 27.9%,
      transparent 28.3% 44.5%,
      rgba(195, 148, 61, 0.09) 45% 45.55%,
      transparent 46.1% 60.4%,
      rgba(145, 162, 186, 0.095) 61% 61.55%,
      transparent 62.1%
    ),
    repeating-conic-gradient(
      from 17deg,
      rgba(255, 255, 255, 0.012) 0deg 0.45deg,
      transparent 0.65deg 8.5deg
    ),
    conic-gradient(
      from 19deg,
      transparent 0deg 43deg,
      rgba(255, 255, 255, 0.022) 43deg 47deg,
      transparent 47deg 92deg,
      rgba(195, 148, 61, 0.038) 92deg 97deg,
      transparent 97deg 171deg,
      rgba(104, 181, 255, 0.026) 171deg 175deg,
      transparent 175deg 271deg,
      rgba(255, 255, 255, 0.016) 271deg 276deg,
      transparent 276deg 360deg
    ),
    linear-gradient(
      145deg,
      var(--vault-800) 0%,
      var(--vault-900) 44%,
      var(--vault-black) 100%
    );
  box-shadow:
    rgba(255, 255, 255, 0.04) 0 0 0 1px inset,
    rgba(0, 0, 0, 0.28) 0 0 0 18px inset,
    rgba(255, 255, 255, 0.027) 32px 26px 80px inset,
    rgba(0, 0, 0, 0.84) -62px -64px 124px inset,
    rgba(0, 0, 0, 0.62) 0 34px 96px;
  transform-origin: center center;
}

/* Recessed outer band + engraved arc marks. */
.rp-vault::before {
  content: "";
  position: absolute;
  inset: 6.4%;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      transparent 0,
      transparent 38.5%,
      rgba(0, 0, 0, 0.46) 39.1%,
      rgba(0, 0, 0, 0.46) 41.1%,
      transparent 41.8%
    ),
    conic-gradient(
      from -31deg,
      transparent 0deg 35deg,
      rgba(195, 148, 61, 0.05) 35deg 42deg,
      transparent 42deg 137deg,
      rgba(255, 255, 255, 0.027) 137deg 145deg,
      transparent 145deg 262deg,
      rgba(104, 181, 255, 0.02) 262deg 267deg,
      transparent 267deg 360deg
    );
  box-shadow:
    rgba(0, 0, 0, 0.22) 0 0 0 12px inset,
    rgba(255, 255, 255, 0.02) 0 24px 46px inset,
    rgba(0, 0, 0, 0.56) 0 -44px 62px inset;
  pointer-events: none;
}

/* Inner plate the wheel sits on. */
.rp-vault::after {
  content: "";
  position: absolute;
  inset: 33.5%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 41% 35%,
      rgba(255, 255, 255, 0.055),
      transparent 27%
    ),
    radial-gradient(circle, rgba(195, 148, 61, 0.043), transparent 65%),
    radial-gradient(
      circle at 54% 52%,
      rgba(47, 129, 247, 0.035),
      transparent 44%
    ),
    linear-gradient(145deg, rgba(17, 23, 31, 0.76), rgba(1, 2, 3, 0.88));
  box-shadow:
    rgba(255, 255, 255, 0.04) 0 1px 0 inset,
    rgba(0, 0, 0, 0.58) 0 -24px 38px inset,
    rgba(0, 0, 0, 0.4) 0 22px 42px;
  pointer-events: none;
}

/* Every direct child sits above the ::before/::after plates AND above the face
   overlay, which is z-index 1 itself. Without this the face's darkening layers
   paint over the rings, bolts and wheel and the door reads as a flat disc —
   DOM order then decides what stacks on what, which is why the face is first. */
.rp-vault > * {
  z-index: 1;
}

/* Brushed-metal grain and specular sheen. */
.rp-vault-face {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.rp-vault-face::before,
.rp-vault-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.rp-vault-face::before {
  opacity: 0.48;
  background:
    linear-gradient(
      101deg,
      transparent 0 27%,
      rgba(255, 255, 255, 0.027) 27.2% 27.45%,
      transparent 27.8% 100%
    ),
    linear-gradient(
      76deg,
      transparent 0 62%,
      rgba(195, 148, 61, 0.024) 62.1% 62.36%,
      transparent 62.75% 100%
    ),
    radial-gradient(
        circle at 23% 50%,
        rgba(255, 255, 255, 0.03) 0 0.7px,
        transparent 1.5px
      )
      0 0 / 17px 13px,
    radial-gradient(
        circle at 72% 25%,
        rgba(255, 255, 255, 0.027) 0 0.65px,
        transparent 1.45px
      )
      0 0 / 23px 19px,
    radial-gradient(
        circle at 61% 83%,
        rgba(145, 162, 186, 0.024) 0 0.75px,
        transparent 1.6px
      )
      0 0 / 29px 21px;
  -webkit-mask-image: radial-gradient(
    circle,
    #000 0,
    #000 67%,
    transparent 82%
  );
  mask-image: radial-gradient(circle, #000 0, #000 67%, transparent 82%);
}

.rp-vault-face::after {
  opacity: 0.52;
  background:
    radial-gradient(at 42% 36%, rgba(255, 255, 255, 0.027), transparent 22%),
    radial-gradient(at 67% 64%, rgba(0, 0, 0, 0.26), transparent 30%),
    linear-gradient(
      172deg,
      transparent 0 45%,
      rgba(0, 0, 0, 0.18) 45.2% 46.8%,
      transparent 47.2% 100%
    );
  -webkit-mask-image: radial-gradient(
    circle,
    transparent 0,
    transparent 19%,
    #000 25%,
    #000 70%,
    transparent 82%
  );
  mask-image: radial-gradient(
    circle,
    transparent 0,
    transparent 19%,
    #000 25%,
    #000 70%,
    transparent 82%
  );
}

/* Concentric scribed rings. */
.rp-vault-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.rp-vault-ring--outer {
  inset: 4.4%;
  border: 1px solid rgba(195, 148, 61, 0.094);
  box-shadow:
    rgba(255, 255, 255, 0.02) 0 0 0 1px inset,
    rgba(195, 148, 61, 0.035) 0 0 22px;
}

/* Deliberately off-centre and rotated — a perfectly concentric ring reads as
   machine-drawn, this reads as a made object. */
.rp-vault-ring--inner {
  inset: 21.8% 22.4% 22.2% 21.7%;
  border: 1px solid rgba(104, 181, 255, 0.086);
  transform: translate(-1.4%, 1.2%) rotate(5deg);
  box-shadow: rgba(47, 129, 247, 0.035) 0 0 24px;
}

/* Eight bolts, each at its own scale so the ring isn't mechanically even. */
.rp-vault-bolt {
  position: absolute;
  width: clamp(0.46rem, 1.35vmin, 0.78rem);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 32% 25%,
      rgba(255, 255, 255, 0.32),
      transparent 24%
    ),
    radial-gradient(circle at 62% 68%, rgba(0, 0, 0, 0.46), transparent 42%),
    linear-gradient(145deg, rgb(42, 53, 69), rgb(5, 7, 11) 70%);
  box-shadow:
    rgba(255, 255, 255, 0.055) 0 0 0 1px inset,
    rgba(255, 255, 255, 0.04) 0 1px 0,
    rgba(0, 0, 0, 0.42) 0 8px 14px;
}

.rp-vault-bolt--1 {
  top: 8.4%;
  left: 48.7%;
  transform: scale(0.92);
}
.rp-vault-bolt--2 {
  top: 18.9%;
  right: 24.1%;
  transform: scale(1.08);
}
.rp-vault-bolt--3 {
  top: 43.2%;
  right: 9.8%;
  transform: scale(0.86);
}
.rp-vault-bolt--4 {
  bottom: 22.8%;
  right: 20.2%;
  transform: scale(1.03);
}
.rp-vault-bolt--5 {
  bottom: 9.7%;
  left: 51.2%;
  transform: scale(0.94);
}
.rp-vault-bolt--6 {
  bottom: 19.6%;
  left: 20.9%;
  transform: scale(1.1);
}
.rp-vault-bolt--7 {
  top: 46.8%;
  left: 9.5%;
  transform: scale(0.9);
}
.rp-vault-bolt--8 {
  top: 16.8%;
  left: 23.1%;
  transform: scale(1.02);
}

/* The handle. Rests at -8deg; turns to -72deg when .is-turning is set. */
.rp-vault-wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(10rem, 31%, 15rem);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(195, 148, 61, 0.16);
  border-radius: 50%;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 41% 34%,
      rgba(255, 255, 255, 0.092),
      transparent 24%
    ),
    radial-gradient(circle, var(--vault-800) 0 27%, transparent 28%),
    radial-gradient(
      circle,
      transparent 0 57%,
      rgba(195, 148, 61, 0.07) 58.3% 59.2%,
      transparent 60.3%
    ),
    repeating-conic-gradient(
      from 6deg,
      rgba(255, 255, 255, 0.014) 0deg 0.7deg,
      transparent 0.9deg 18deg
    ),
    linear-gradient(145deg, #151d28, #05070a 78%);
  box-shadow:
    rgba(0, 0, 0, 0.3) 0 0 0 10px inset,
    rgba(255, 255, 255, 0.024) 0 18px 30px inset,
    rgba(0, 0, 0, 0.6) 0 -30px 44px inset,
    rgba(0, 0, 0, 0.48) 0 20px 42px;
  transform: translate(-50%, -50%) rotate(-8deg);
  transform-origin: center center;
  transition:
    transform 3400ms cubic-bezier(0.62, 0.03, 0.2, 1),
    border-color 1500ms,
    box-shadow 1500ms;
}

/* Gold bloom behind the wheel, revealed as it turns. */
.rp-vault-wheel::before {
  content: "";
  position: absolute;
  inset: -17%;
  z-index: -1;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(
      circle,
      transparent 0 48%,
      rgba(230, 195, 107, 0.42) 57%,
      rgba(195, 148, 61, 0.18) 63%,
      transparent 72%
    ),
    conic-gradient(
      from 12deg,
      transparent 0deg 56deg,
      rgba(230, 195, 107, 0.22) 56deg 94deg,
      transparent 94deg 190deg,
      rgba(195, 148, 61, 0.14) 190deg 232deg,
      transparent 232deg 360deg
    );
  filter: blur(12px);
  transform: scale(0.86);
  transition:
    opacity 2400ms ease-in,
    transform 3400ms cubic-bezier(0.62, 0.03, 0.2, 1);
}

.rp-vault-wheel::after {
  content: "";
  position: absolute;
  inset: -3.5%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(
    circle,
    transparent 0 56%,
    rgba(230, 195, 107, 0.38) 58%,
    rgba(230, 195, 107, 0.14) 61%,
    transparent 65%
  );
  filter: blur(4px);
  transition: opacity 2200ms ease-in;
}

/* Four spokes, each a different length — again, deliberately not uniform. */
.rp-vault-spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 43%;
  height: clamp(0.42rem, 1.1vmin, 0.68rem);
  border-radius: 999px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.01)),
    linear-gradient(90deg, rgb(46, 58, 75), rgb(12, 18, 26));
  box-shadow:
    rgba(255, 255, 255, 0.07) 0 1px 0 inset,
    rgba(0, 0, 0, 0.42) 0 -6px 8px inset,
    rgba(0, 0, 0, 0.34) 0 8px 16px;
  transform-origin: 0 50%;
}

.rp-vault-spoke--a {
  width: 42%;
  transform: rotate(-3deg);
}
.rp-vault-spoke--b {
  width: 44%;
  transform: rotate(91deg);
}
.rp-vault-spoke--c {
  width: 41%;
  transform: rotate(181deg);
}
.rp-vault-spoke--d {
  width: 43.5%;
  transform: rotate(269deg);
}

.rp-vault-hub {
  position: absolute;
  inset: 34%;
  border: 1px solid rgba(195, 148, 61, 0.17);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 38% 31%,
      rgba(255, 255, 255, 0.16),
      transparent 30%
    ),
    linear-gradient(145deg, rgb(38, 49, 63), rgb(5, 7, 10) 74%);
  box-shadow:
    rgba(255, 255, 255, 0.1) 0 1px 0 inset,
    rgba(0, 0, 0, 0.52) 0 -13px 22px inset,
    rgba(0, 0, 0, 0.42) 0 12px 28px;
}

/* ── Turning state ────────────────────────────────────────────────────────
   Set by splash-kinetic.jsx while the primary CTA is hovered or focused, so
   the vault appears to unlock as you reach for the template. */

.rp-vault.is-turning .rp-vault-wheel {
  border-color: rgba(230, 195, 107, 0.44);
  box-shadow:
    rgba(0, 0, 0, 0.24) 0 0 0 10px inset,
    rgba(255, 255, 255, 0.035) 0 18px 30px inset,
    rgba(0, 0, 0, 0.52) 0 -28px 42px inset,
    rgba(0, 0, 0, 0.38) 0 20px 42px,
    rgba(195, 148, 61, 0.16) 0 0 48px,
    rgba(47, 129, 247, 0.055) 0 0 42px;
  transform: translate(-50%, -50%) rotate(-72deg) scale(1.025);
}

.rp-vault.is-turning .rp-vault-wheel::before {
  opacity: 0.58;
  transform: scale(1);
}

.rp-vault.is-turning .rp-vault-wheel::after {
  opacity: 0.76;
}

/* ── Lockup overlaid on the door ──────────────────────────────────────────
   The real dashboard puts its unlock form here too. This page deliberately
   doesn't: .rp-vault is overflow:hidden, so controls placed inside can't
   escape the circle when it shrinks on a phone, and the only way to keep them
   usable would be rendering a second copy outside — which duplicates every
   link for screen readers. The door carries the name; the CTAs sit beneath it
   in normal flow.

   Percentages, not pixels, so the lockup tracks the fluid width. */

.rp-vault-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* No inline padding: the lockup is meant to run past the door's edge. */
  padding: 21% 0 0;
  pointer-events: none;
  text-align: center;
}

/* 0.74cqw = the 5.6px the source leaves at a 760px door. The two lines should
   very nearly touch — that tight stack is what makes the lockup read as one
   mark rather than a heading with a subtitle. */
.rp-vault-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.74cqw;
}

/* Sized against the DOOR, not the viewport: the source lockup spans roughly
   58% of the vault's width, and the door here is 560px rather than 760px, so
   these have to scale with it or the lockup floats undersized in the middle. */
/* Sized in cqw against the door, reproducing the source lockup's proportions
   at any diameter. Measured on the demo at a 760px door:
     reponomics.  72.8px = 9.58% of the door, weight 900, tracking NORMAL
     DASHBOARD    64px   = 8.42% of the door, weight 500, tracking 0.04em
     vertical gap  5.6px = 0.74% of the door
   The tracking matters: h1.brand ships at -0.055em, and the source overrides it
   to normal here. That alone widens the wordmark by ~45% and is most of why the
   demo lockup reads bigger and bolder. */
/* `h1.brand` deliberately, not `.brand`: colors_and_type.css declares
   `.reponomics h1.brand` (specificity 0-2-1), which outranks a plain
   `.rp-vault-lockup .brand` (0-2-0) and would keep the wordmark pinned at its
   3rem clamp and -0.055em tracking. Matching 0-2-1 and loading vault.css after
   it wins on source order.
   margin:0 because an <h1> still carries the UA's 0.67em block margin, which
   was opening a 34px hole between the two lines. */
.rp-vault-lockup h1.brand {
  margin: 0;
  /* 15.4cqw puts the wordmark at ~98% of the door's diameter. Since it sits
     around a quarter of the way down, the circle is only ~87% as wide there —
     so the word genuinely breaks the edge on both sides rather than sitting
     politely inside it. The source's 9.58cqw kept it at 61%, which read sparse
     once the door was the only thing on the fold. */
  font-size: 15.4cqw;
  letter-spacing: normal;
  line-height: 0.88;
  white-space: nowrap;
  text-shadow:
    rgba(0, 0, 0, 0.55) 0 18px 36px,
    rgba(0, 0, 0, 0.35) 0 2px 10px;
}

.rp-vault-lockup-sub {
  font-family: var(--font-sans);
  /* Scaled with the wordmark, keeping the source's ratio between the two lines
     (55.6 : 60.9), so DASHBOARD still sits just inside the wordmark's width. */
  font-size: 13.5cqw;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 0.9;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgb(138, 150, 166);
  text-shadow:
    rgba(0, 0, 0, 0.55) 0 18px 36px,
    rgba(0, 0, 0, 0.35) 0 2px 10px;
}

/* ── Unlock control ───────────────────────────────────────────────────────
   Sits where the real dashboard puts its key form (64% down the door). Brass
   treatment lifted from the source's .auth-button. */

.rp-vault-unlock {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 clamp(0.9rem, 3cqw, 1.55rem);

  border: 1px solid rgba(230, 195, 107, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.024) 45%,
      rgba(0, 0, 0, 0.42)
    ),
    rgba(1, 3, 5, 0.86);
  box-shadow:
    rgba(255, 255, 255, 0.06) 0 1px 0 inset,
    rgba(0, 0, 0, 0.55) 0 14px 24px inset,
    rgba(0, 0, 0, 0.42) 0 12px 26px;

  color: rgb(243, 223, 173);
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 2.3cqw, 0.95rem);
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 220ms,
    box-shadow 220ms,
    color 220ms;
}

.rp-vault-unlock:hover {
  border-color: rgba(230, 195, 107, 0.62);
  color: rgb(250, 236, 199);
}

.rp-vault-unlock:focus-visible {
  outline: 2px solid rgba(230, 195, 107, 0.85);
  outline-offset: 3px;
}

.rp-vault-unlock:active {
  box-shadow:
    rgba(0, 0, 0, 0.6) 0 16px 26px inset,
    rgba(0, 0, 0, 0.3) 0 4px 10px;
}

.rp-vault-unlock.is-open {
  border-color: rgba(230, 195, 107, 0.7);
  box-shadow:
    rgba(255, 255, 255, 0.06) 0 1px 0 inset,
    rgba(0, 0, 0, 0.5) 0 14px 24px inset,
    rgba(195, 148, 61, 0.22) 0 0 30px;
}

@media (max-width: 600px) {
  /* Lift the lockup slightly as the door shrinks, but DON'T centre it: the
     unlock button is pinned at 64%, and centring drove the lockup straight into
     it — "DASHBOARD" ended up behind the button at 375px. Top-weighted keeps
     the two apart at every size. */
  .rp-vault-overlay {
    /* Inline padding stays at 0 here too — the lockup is nowrap and meant to
       break the door's edge, so constraining it would only clip the intent. */
    padding: 23% 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rp-vault-wheel,
  .rp-vault-wheel::before,
  .rp-vault-wheel::after {
    transition: none;
  }
  .rp-vault.is-turning .rp-vault-wheel {
    transform: translate(-50%, -50%) rotate(-8deg);
  }
  .rp-vault.is-turning .rp-vault-wheel::before,
  .rp-vault.is-turning .rp-vault-wheel::after {
    opacity: 0;
  }
}