/* Animated hero device. Graphite surface, ice-blue accent, no new palette. */

.vault-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(40px, 7vh, 88px) 0 clamp(32px, 5vh, 56px);
}

@media (max-width: 900px) {
  .vault-hero {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }
}

/* ---------- phone ---------- */

.vault-phone {
  position: relative;
  width: min(340px, 78vw);
  margin-inline: auto;
  aspect-ratio: 340 / 690;
  border-radius: 44px;
  padding: 10px;
  background: linear-gradient(160deg, #2a3038, #12151a 42%, #05070a);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 8%) inset,
    0 40px 90px -30px rgb(0 0 0 / 85%),
    0 0 70px -20px rgb(134 201 255 / 18%);
}

/* Notch. Small, because a heavy notch reads as a stock mockup. */
.vault-phone::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  border-radius: 999px;
  background: #05070a;
  z-index: 3;
}

.vault-screen {
  position: relative;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: var(--canvas, #101216);
  display: flex;
  flex-direction: column;
  padding: 46px 20px 20px;
}

.vault-screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.vault-screen-head span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #acb6c3);
}

.vault-screen-head em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #86c9ff;
}

/* The state word must change colour with the state, not just the text. */
.vault-screen-head em[data-demo-state="Locked"] { color: var(--muted, #acb6c3); }

/* ---------- pattern pad ---------- */

.vault-pad {
  position: relative;
  width: 100%;
  max-width: 240px;
  margin: 6px auto 0;
  aspect-ratio: 1;
}

.vault-pad svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vault-pad path {
  fill: none;
  stroke: #86c9ff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The line appears to be drawn by the finger. */
  transition: d 140ms linear;
}

[data-demo-dot] {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #232a33;
  box-shadow: 0 0 0 1.5px #39424e inset;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

[data-demo-dot].is-on {
  background: #86c9ff;
  box-shadow: 0 0 0 1.5px #86c9ff inset, 0 0 14px rgb(134 201 255 / 60%);
  transform: scale(1.18);
}

/* ---------- file reveal ---------- */

.vault-files {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
}

.vault-screen.is-open .vault-files {
  opacity: 1;
  transform: none;
}

[data-demo-file] {
  aspect-ratio: 1;
  border-radius: 7px;
  background: linear-gradient(150deg, #1d232b, #141920);
  border: 1px solid var(--line, #353d48);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 240ms ease, transform 240ms ease;
}

[data-demo-file].is-in {
  opacity: 1;
  transform: none;
}

/* Alternating tints so the grid reads as distinct files, not a solid block. */
[data-demo-file]:nth-child(2n) { background: linear-gradient(150deg, #1b2a33, #101a20); }
[data-demo-file]:nth-child(3n) { background: linear-gradient(150deg, #232a33, #151a20); }

.vault-caption {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--muted, #acb6c3);
}

@media (prefers-reduced-motion: reduce) {
  .vault-pad path,
  [data-demo-dot],
  .vault-files,
  [data-demo-file] {
    transition: none;
  }
}