.view--lock {
  background:
    radial-gradient(ellipse at center, #1a1d22 0%, #0a0d10 80%),
    var(--bg-deep);
  overflow: hidden;
}

.view--lock::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.015;
  pointer-events: none;
}

.lock-time-block {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  animation: lock-fade-in 800ms ease-out 200ms forwards;
}

.lock-time {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.lock-date {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.lock-notif-slot {
  position: absolute;
  top: 290px;
  left: var(--space-4);
  right: var(--space-4);
  pointer-events: none;
}

.lock-notif {
  pointer-events: auto;
}

.lock-unlock-hint {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  opacity: 0;
  cursor: pointer;
  animation: lock-fade-in 800ms ease-out 1200ms forwards, lock-pulse 2.4s ease-in-out 2s infinite;
}

@keyframes lock-fade-in {
  to { opacity: 1; }
}

@keyframes lock-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}

.view--lock .status-bar {
  opacity: 0;
  animation: lock-fade-in 800ms ease-out 200ms forwards;
}

.view--lock .lock-clock-hide .lock-time-block {
  opacity: 0;
}