/* pin-gate.css — 4-digit PIN modal + guard blur */

.pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 11, 52, 0.62);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  animation: pin-fade 220ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes pin-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pin-card {
  width: 100%;
  max-width: 412px;
  background: #fff;
  border-radius: 6px;
  padding: 40px 36px 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 11, 52, 0.28), 0 2px 0 rgba(0, 11, 52, 0.04);
  animation: pin-rise 320ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes pin-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pin-card.is-shake { animation: pin-shake 440ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes pin-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

.pin-lock {
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #8AE78F;
}
.pin-lock svg { width: 26px; height: 26px; display: block; }

.pin-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: var(--ls-tight, -0.01em);
  color: #000B34;
  margin: 0 0 8px;
}
.pin-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-secondary);
  margin: 0 auto 24px;
  max-width: 30ch;
}

.pin-inputs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.pin-box {
  width: 56px;
  height: 64px;
  border: 1px solid #D8D8D8;
  border-radius: 4px;
  background: #F2F2F2;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  text-align: center;
  color: #000B34;
  caret-color: #8AE78F;
  outline: none;
  transition: border-color 160ms cubic-bezier(0.2, 0, 0, 1),
              background  160ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow  160ms cubic-bezier(0.2, 0, 0, 1);
  -webkit-appearance: none;
  appearance: none;
}
.pin-box:focus {
  border-color: #000B34;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(138, 231, 143, 0.5);
}
.pin-inputs.has-error .pin-box {
  border-color: #D9534F;
  background: #FDF2F2;
}

.pin-error {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.4;
  color: #D9534F;
  min-height: 18px;
  margin-bottom: 20px;
}

.pin-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}
.pin-btn { flex: 1; padding: 16px 20px; font-size: 16px; border-radius: 4px; }

.pin-alt {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-secondary);
  margin: 0;
  text-wrap: pretty;
}
.pin-alt a {
  color: #000B34;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 400;
  transition: text-decoration-thickness 160ms cubic-bezier(0.2, 0, 0, 1);
}
.pin-alt a:hover { text-decoration-thickness: 2px; }

/* guard — blur protected page content behind the modal */
.cs-guard-content.is-locked {
  filter: blur(12px);
  pointer-events: none;
  user-select: none;
}

/* "Protected" pill on case-study card */
.case-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  background: rgba(138, 231, 143, 0.6);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000B34;
}
.case-lock svg { width: 12px; height: 12px; display: block; }

@media (max-width: 480px) {
  .pin-card { padding: 32px 22px 24px; }
  .pin-box { width: 46px; height: 56px; font-size: 22px; }
  .pin-inputs { gap: 9px; }
  .pin-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .pin-overlay, .pin-card, .pin-card.is-shake { animation: none; }
  .pin-box, .pin-alt a { transition: none; }
}