/* The vault sign-in: a card on a black page, split in two. On the left a wall of brushed steel with a round vault
   door set in its frame: a spun steel rim, a bed of perlage under smoked glass with the gear train and the eight
   bolts, a black combination dial on a steel collar, a brass index. On the right the sign-in, in warm white on
   graphite with brass for the actions. Behind the door, the vault: safe deposit boxes under a warm lamp. */
:root {
  --page: #000000;          /* the page */
  --card: #0f1113;          /* the sign-in side of the card */
  --wall: #1a1d20;          /* the steel wall the door is set in */
  --ink: #f2eee6;           /* the words */
  --soft: #9aa1a8;          /* the quieter words */
  --faint: #6d747b;         /* the quietest words */
  --line: #2b3035;          /* the edges of the fields */
  --field: #16191c;         /* inside a field */
  --brass: #d8b46c;         /* brass: the index, the gears, the button, the focus */
  --brass-deep: #a77f3c;    /* the shadowed side of the brass */
  --button-ink: #1d1508;    /* the words on the brass button */
  --alarm: #ff5d52;         /* a mistake */
  --lamp: #ffd08a;          /* the warm light inside the vault */
  --steel: #b7bec4;         /* the door's steel */
  --enamel: #121417;        /* the dial's black enamel */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Hanken Grotesk Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 48px 16px;
}

/* ---------------------------------------------------------------- the card */
.vault {
  --bay: 344px;
  --u: calc(var(--bay) / 256);
  position: relative;
  display: grid;
  grid-template-columns: 412px 432px;
  width: min(844px, 100%);
  min-height: 488px;
  margin: 0;
  border-radius: 30px;
  overflow: hidden;
  background: var(--card);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* ---------------------------------------------------------------- the wall and the bay in it */
.wall {
  position: relative;
  display: grid;
  place-items: center;
  padding: 34px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.016) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(90% 70% at 30% 10%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--wall), color-mix(in srgb, var(--wall) 70%, #000000));
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
  isolation: isolate;
}

/* the vault's light spilling on the wall once the door is open */
.wall__spill {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--lamp) 34%, transparent), rgba(0, 0, 0, 0) 62%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.bay {
  position: relative;
  width: var(--bay);
  height: var(--bay);
  perspective: calc(var(--u) * 900);
  perspective-origin: 50% 50%;
}

.bay > * {
  position: absolute;
}

/* ---------------------------------------------------------------- inside the vault */
.inside {
  --lit: 0;
  left: calc(var(--u) * 22);
  top: calc(var(--u) * 22);
  width: calc(var(--u) * 212);
  height: calc(var(--u) * 212);
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 72%, rgba(0, 0, 0, 0.55) 74%, rgba(0, 0, 0, 0.2) 86%, rgba(0, 0, 0, 0.75) 100%),
    conic-gradient(from 200deg, #57544e, #2f2d2a 30%, #64605a 55%, #302e2b 80%, #57544e);
  filter: brightness(calc(0.2 + var(--lit) * 0.78));
}

/* the back wall, smaller than the door because it is far: rows of safe deposit boxes */
.inside__boxes {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 158);
  height: calc(var(--u) * 158);
  margin: calc(var(--u) * -79) 0 0 calc(var(--u) * -79);
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: calc(var(--u) * 12.6);
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.6);
  align-content: center;
  background: #2a241c;
  box-shadow: 0 0 calc(var(--u) * 14) calc(var(--u) * 6) rgba(0, 0, 0, 0.6);
}

.inside__boxes span {
  position: relative;
  border-radius: calc(var(--u) * 1.4);
  background: linear-gradient(180deg, #c4a56b, #8f7140 60%, #725730);
  box-shadow: inset 0 calc(var(--u) * 0.6) 0 rgba(255, 244, 214, 0.5), inset 0 calc(var(--u) * -0.8) 0 rgba(60, 40, 12, 0.45);
}

/* two keyholes on every box */
.inside__boxes span::before,
.inside__boxes span::after {
  content: '';
  position: absolute;
  top: 38%;
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 3.2);
  border-radius: calc(var(--u) * 0.8) calc(var(--u) * 0.8) calc(var(--u) * 0.3) calc(var(--u) * 0.3);
  background: #3b2a12;
}

.inside__boxes span::before {
  left: 30%;
}

.inside__boxes span::after {
  right: 30%;
}

.inside__boxes span.is-tall {
  grid-row: span 2;
}

.inside__lamp {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(64% 50% at 50% 4%, color-mix(in srgb, var(--lamp) 42%, transparent), rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(12, 8, 3, 0.55) 92%),
    radial-gradient(circle at 50% 46%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.45) 68%);
}

/* ---------------------------------------------------------------- the frame and the hinge */
.frame,
.hinge {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hinge {
  pointer-events: none;
}

/* the gap round a locked door turns red for a moment when the passphrase is wrong */
.bay__alarm {
  left: calc(var(--u) * 20);
  top: calc(var(--u) * 20);
  width: calc(var(--u) * 216);
  height: calc(var(--u) * 216);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--u) * 2) color-mix(in srgb, var(--alarm) 80%, transparent), 0 0 calc(var(--u) * 18) calc(var(--u) * 2) color-mix(in srgb, var(--alarm) 45%, transparent);
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the door */
.door {
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: calc(var(--u) * 24) 50%;
}

.door__edge {
  position: absolute;
  left: calc(var(--u) * 24);
  top: calc(var(--u) * 24);
  width: calc(var(--u) * 208);
  height: calc(var(--u) * 208);
  border-radius: 50%;
  background: var(--tone);
}

.door__edge--back {
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0 0.6px, rgba(0, 0, 0, 0.05) 0.6px 1.6px),
    conic-gradient(from 40deg, #474d53, #7d848a 14%, #43494f 30%, #737a80 52%, #42484e 70%, #7a8187 86%, #474d53);
}

.door__face {
  position: absolute;
  inset: 0;
}

.door__face > * {
  position: absolute;
}

/* the door's front, spun steel: fine rings turned on the lathe and the broad highlights of a polished disc */
.plate {
  left: calc(var(--u) * 24);
  top: calc(var(--u) * 24);
  width: calc(var(--u) * 208);
  height: calc(var(--u) * 208);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0 0.5px, rgba(0, 0, 0, 0.05) 0.5px 1.3px),
    conic-gradient(from 18deg, #6a7178, #c3c9ce 11%, #737a81 23%, #cdd3d7 36%, #687076 50%, #b8bfc5 63%, #6e757c 76%, #c6ccd1 89%, #6a7178);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.8) rgba(255, 255, 255, 0.28),
    inset 0 calc(var(--u) * -3) calc(var(--u) * 6) rgba(0, 0, 0, 0.35),
    0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0, 0, 0, 0.55);
}

.mech {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* smoked glass over the movement, with its bezel, a soft reflection that follows the pointer and a streak */
.glass {
  --gx: 34%;
  --gy: 26%;
  left: calc(var(--u) * 37);
  top: calc(var(--u) * 37);
  width: calc(var(--u) * 182);
  height: calc(var(--u) * 182);
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 44%),
    linear-gradient(160deg, rgba(150, 190, 205, 0.08), rgba(8, 16, 22, 0.3));
  box-shadow:
    0 0 0 calc(var(--u) * 2.6) #8b9298,
    0 0 0 calc(var(--u) * 3.2) rgba(255, 255, 255, 0.3),
    0 0 0 calc(var(--u) * 4.2) rgba(0, 0, 0, 0.35),
    inset 0 calc(var(--u) * 7) calc(var(--u) * 16) rgba(0, 0, 0, 0.5),
    inset 0 0 0 calc(var(--u) * 0.6) rgba(255, 255, 255, 0.25);
}

.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.13) 43%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0) 58%);
}

/* the steel collar the dial turns in */
.collar {
  left: calc(var(--u) * 82);
  top: calc(var(--u) * 82);
  width: calc(var(--u) * 92);
  height: calc(var(--u) * 92);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06) 0 0.5px, rgba(0, 0, 0, 0.05) 0.5px 1.2px),
    conic-gradient(from 60deg, #79818a, #d5dade 14%, #7d858d 30%, #c9cfd4 48%, #737b83 66%, #d0d6da 84%, #79818a);
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0, 0, 0, 0.55), inset 0 0 0 calc(var(--u) * 0.6) rgba(255, 255, 255, 0.4);
}

.dial {
  left: calc(var(--u) * 88);
  top: calc(var(--u) * 88);
  width: calc(var(--u) * 80);
  height: calc(var(--u) * 80);
  border-radius: 50%;
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, 0.6);
  will-change: transform;
}

.dial__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dial__ring text {
  font-family: 'Hanken Grotesk Variable', system-ui, sans-serif;
  font-weight: 600;
  font-size: 6.6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  fill: #e9ecee;
}

/* the knob in the middle of the dial: a knurled grip and a spun cap */
.dial__knob {
  position: absolute;
  left: 18.75%;
  top: 18.75%;
  width: 62.5%;
  height: 62.5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 76%, rgba(0, 0, 0, 0.35) 78%, rgba(0, 0, 0, 0) 80%),
    repeating-conic-gradient(from 0deg, #a8afb5 0 4deg, #565d63 4deg 8deg);
  box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 3) rgba(0, 0, 0, 0.6);
}

.dial__knob::after {
  content: '';
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07) 0 0.5px, rgba(0, 0, 0, 0.06) 0.5px 1.1px),
    conic-gradient(from 30deg, #7b838b, #e0e4e7 15%, #7a8189 32%, #cfd4d8 52%, #747c84 70%, #dbe0e3 86%, #7b838b);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.5) rgba(255, 255, 255, 0.5), inset 0 calc(var(--u) * -1.4) calc(var(--u) * 2.4) rgba(0, 0, 0, 0.3);
}

.index {
  left: calc(var(--u) * 122);
  top: calc(var(--u) * 82);
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  overflow: visible;
}

.index path {
  fill: var(--brass);
  stroke: #6e5222;
  stroke-width: 0.5;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- the sign-in side */
.side {
  position: relative;
  z-index: 3;
  display: grid;
  padding: 44px 44px 36px;
}

.panel,
.welcome {
  grid-area: 1 / 1;
  align-self: center;
}

.is-gone {
  visibility: hidden;
}

.head__title,
.welcome__title {
  margin: 0;
  font-family: 'Newsreader Variable', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.head__sub {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--soft);
}

.head {
  margin-bottom: 26px;
}

.field + .field {
  margin-top: 16px;
}

.field__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 560;
  letter-spacing: 0.01em;
  color: #c6ccd1;
}

.field__link {
  font-size: 13px;
  font-weight: 520;
  color: var(--soft);
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.2s ease;
}

.field__link:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.box {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  border-radius: 13px;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.22s ease, background-color 0.22s ease;
}

.box.is-on {
  background: color-mix(in srgb, var(--field) 88%, var(--brass));
  box-shadow: inset 0 0 0 1px var(--brass), 0 0 0 4px color-mix(in srgb, var(--brass) 22%, transparent), inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

.box.is-wrong {
  box-shadow: inset 0 0 0 1px var(--alarm), 0 0 0 4px color-mix(in srgb, var(--alarm) 18%, transparent), inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

.box__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 16px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.01em;
  outline: none;
  caret-color: var(--brass);
}

.box__input[type='password'] {
  letter-spacing: 0.14em;
}

.box__input::placeholder {
  color: #5c636a;
}

.box__input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 40px var(--field) inset;
}

.reveal {
  flex: none;
  height: 36px;
  margin-right: 8px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--brass);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.reveal:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}

.reveal:active {
  transform: scale(0.95);
}

.field__msg {
  height: 0;
  overflow: hidden;
}

.msg {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 0;
  padding-top: 8px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--alarm);
}

.msg svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- the brass button */
.open,
.lock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  margin-top: 24px;
  padding: 0 20px;
  border: 0;
  background: none;
  color: var(--button-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.open__bg,
.lock__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 82%, #ffffff), var(--brass) 45%, var(--brass-deep));
  box-shadow: inset 0 1px 0 rgba(255, 248, 225, 0.65), inset 0 -2px 0 rgba(80, 52, 12, 0.35), 0 8px 20px -8px color-mix(in srgb, var(--brass) 55%, transparent);
  transition: inset 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}

.open__dial {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.open__label {
  display: inline-block;
}

.open:focus-visible,
.lock:focus-visible {
  outline: none;
}

.open:focus-visible .open__bg,
.lock:focus-visible .lock__bg {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--brass), inset 0 1px 0 rgba(255, 248, 225, 0.65);
}

.open:active .open__bg,
.lock:active .lock__bg {
  inset: 2px 3px;
  filter: brightness(0.94);
  transition-duration: 0.08s;
}

.open[aria-disabled='true'] {
  cursor: default;
}

/* the second action, after the door is open: an outline in brass */
.lock {
  color: var(--brass);
}

.lock__bg {
  background: rgba(216, 180, 108, 0.06);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass) 60%, transparent);
}

.hint {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--faint);
}

.hint__word {
  color: var(--soft);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- the vault open */
.welcome__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brass);
}

.welcome__kicker svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.welcome__facts {
  margin: 26px 0 0;
  border-top: 1px solid var(--line);
}

.welcome__facts div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.welcome__facts dt {
  color: var(--soft);
}

.welcome__facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
  color: var(--ink);
  font-weight: 520;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .field__link:hover {
    color: var(--brass);
  }

  .reveal:hover {
    background: rgba(216, 180, 108, 0.12);
  }

  .box:not(.is-on):not(.is-wrong):hover {
    box-shadow: inset 0 0 0 1px #3d444b, inset 0 2px 6px rgba(0, 0, 0, 0.35);
  }

  .open:not([aria-disabled='true']):hover .open__bg,
  .lock:hover .lock__bg {
    inset: -2px -3px;
    filter: brightness(1.06);
  }

  .open:not([aria-disabled='true']):hover .open__dial {
    transform: rotate(-72deg);
  }
}

/* ---------------------------------------------------------------- the phone: the door above the sign-in */
@media (max-width: 760px) {
  .vault {
    --bay: min(300px, calc(100vw - 72px));
    grid-template-columns: minmax(0, 1fr);
    width: min(440px, 100%);
    border-radius: 26px;
  }

  .wall {
    padding: 22px 16px;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  }

  .side {
    grid-template-columns: minmax(0, 1fr);
    padding: 26px 22px 24px;
  }

  .head__title,
  .welcome__title {
    font-size: 30px;
  }

  .head {
    margin-bottom: 20px;
  }
}

/* il telefono basso (la casella dell'anteprima, 341 per 410): la porta più piccola e il modulo più stretto, perché
   porta e modulo stiano insieme nella casella */
@media (max-width: 760px) and (max-height: 720px) {
  .stage {
    padding: 14px 16px;
  }

  .vault {
    --bay: min(184px, calc(100vw - 72px));
    border-radius: 22px;
  }

  .wall {
    padding: 14px 16px;
  }

  .side {
    padding: 18px 20px 16px;
  }

  .head__title,
  .welcome__title {
    font-size: 26px;
  }

  .head__sub {
    margin-top: 4px;
    font-size: 14px;
  }

  .head {
    margin-bottom: 14px;
  }

  .field + .field {
    margin-top: 10px;
  }

  .field__label {
    margin-bottom: 6px;
  }

  .box {
    height: 46px;
  }

  .open,
  .lock {
    height: 48px;
    margin-top: 16px;
  }

  .hint {
    margin-top: 10px;
  }

  .welcome__facts {
    margin-top: 16px;
  }

  .welcome__facts div {
    padding: 10px 0;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .open__bg,
  .lock__bg,
  .open__dial {
    transition: filter 0.2s ease;
  }
}

/* the title takes the focus when the vault opens, for screen readers: it is not a control */
.welcome__title:focus {
  outline: none;
}