/* ============================================================
   Let's Do. – Coming Soon / Vault (Tresor) Styles
   Vanilla CSS | No Framework | Dark Theme
   ============================================================ */

/* ── Page ── */
.cs-page {
  min-height: 100vh;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  position: relative;
}

/* Radial ambient glow from center */
.cs-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(227,6,19,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Logo ── */
.cs-logo {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
  animation: cs-logo-pulse 3s ease-in-out infinite;
}
.cs-logo img {
  height: 48px;
  filter: drop-shadow(0 0 16px rgba(227,6,19,0.5));
}
@keyframes cs-logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(227,6,19,0.5)); }
  50%       { filter: drop-shadow(0 0 32px rgba(227,6,19,0.85)); }
}

/* ── Headline ── */
.cs-headline {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 2.5rem;
}
.cs-headline h1 {
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 800;
  color: #f5f5f5;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}
.cs-headline p {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: #888;
  font-weight: 400;
}

/* ============================================================
   VAULT – Tresor
   ============================================================ */
.vault-wrapper {
  position: relative;
  z-index: 1;
  perspective: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Outer frame / wall */
.vault-frame {
  width: 340px;
  background: linear-gradient(160deg, #1c1c1c 0%, #141414 40%, #0e0e0e 100%);
  border-radius: 18px;
  padding: 28px 28px 32px;
  border: 1px solid #2a2a2a;
  box-shadow:
    0 0 0 1px #111,
    0 4px 6px rgba(0,0,0,0.4),
    0 12px 40px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: box-shadow 0.3s ease;
}

/* ── Door ── */
.vault-door {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: linear-gradient(
    145deg,
    #3a3a3a 0%,
    #2c2c2c 15%,
    #454545 30%,
    #303030 45%,
    #3e3e3e 60%,
    #282828 75%,
    #404040 90%,
    #242424 100%
  );
  border: 3px solid #555;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.08),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 4px 16px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  transform-origin: left center;
  transition: transform 1s ease-in-out, box-shadow 0.5s ease;
  transform-style: preserve-3d;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Brushed metal horizontal lines */
.vault-door::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.015) 3px,
    rgba(255,255,255,0.015) 4px
  );
  border-radius: inherit;
  pointer-events: none;
}

/* Shine */
.vault-door::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}

/* Hinges */
.vault-hinge {
  position: absolute;
  left: -4px;
  width: 12px;
  height: 28px;
  background: linear-gradient(90deg, #222 0%, #666 40%, #888 60%, #555 80%, #333 100%);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}
.vault-hinge-top    { top: 18%; }
.vault-hinge-bottom { bottom: 18%; }

/* ── Dial (Drehrad) ── */
.vault-dial {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 35%,
    #555 0%,
    #3a3a3a 30%,
    #222 60%,
    #1a1a1a 100%
  );
  border: 3px solid #666;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.6),
    inset 0 2px 4px rgba(255,255,255,0.1),
    inset 0 -2px 4px rgba(0,0,0,0.4);
  position: relative;
  transition: transform 1.5s ease-out;
  flex-shrink: 0;
}

/* Dial tick marks */
.vault-dial::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.12);
}

/* Dial indicator dot */
.vault-dial::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e30613;
  box-shadow: 0 0 6px rgba(227,6,19,0.8);
}

/* Dial center knob */
.vault-dial-knob {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #888 0%, #444 60%, #222 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 2px 4px rgba(0,0,0,0.5);
}

/* Dial tick lines */
.vault-dial-ticks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.vault-dial-tick {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px;
  height: 10px;
  background: rgba(255,255,255,0.25);
  transform-origin: 50% 0;
  margin-left: -1px;
  margin-top: -38px;
  border-radius: 1px;
}

/* Door locking bolts */
.vault-bolts {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vault-bolt {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #888 0%, #555 50%, #333 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

/* ── PIN Display (on door) ── */
.vault-pin-display {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.vault-pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #555;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.vault-pin-dot.filled {
  background: #f5f5f5;
  border-color: #f5f5f5;
  box-shadow: 0 0 8px rgba(245,245,245,0.4);
}
.vault-pin-dot.success {
  background: #00c853;
  border-color: #00c853;
  box-shadow: 0 0 12px rgba(0,200,83,0.7);
}
.vault-pin-dot.error {
  background: #e30613;
  border-color: #e30613;
  box-shadow: 0 0 12px rgba(227,6,19,0.7);
}

/* ── PIN Pad ── */
.vault-pinpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.vault-key {
  aspect-ratio: 1 / 1;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  background: linear-gradient(145deg, #2a2a2a 0%, #1e1e1e 100%);
  color: #e0e0e0;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s ease, background 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.05);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.vault-key::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: rgba(255,255,255,0.03);
  border-radius: 10px 10px 0 0;
}

.vault-key:hover:not(:disabled) {
  background: linear-gradient(145deg, #333 0%, #252525 100%);
  border-color: #4a4a4a;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}

.vault-key:active:not(:disabled),
.vault-key.pressed {
  transform: scale(0.93);
  background: linear-gradient(145deg, #1e1e1e 0%, #181818 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 2px rgba(0,0,0,0.3);
}

.vault-key:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.vault-key.key-action {
  background: linear-gradient(145deg, #2a1a1a 0%, #1e1212 100%);
  border-color: #4a2020;
  color: #cc5555;
}
.vault-key.key-action:hover:not(:disabled) {
  background: linear-gradient(145deg, #351a1a 0%, #281414 100%);
  border-color: #5a2a2a;
  color: #e06060;
}

.vault-key.key-enter {
  background: linear-gradient(145deg, #1a2a1a 0%, #121e12 100%);
  border-color: #204a20;
  color: #55cc55;
}
.vault-key.key-enter:hover:not(:disabled) {
  background: linear-gradient(145deg, #1e351e 0%, #142814 100%);
  border-color: #2a5a2a;
  color: #60e060;
}

.vault-key svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* ── Lockout Timer ── */
.vault-lockout {
  text-align: center;
  color: #e30613;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 12px;
  min-height: 20px;
  letter-spacing: 0.02em;
  transition: opacity 0.3s ease;
}

/* ── Shake animation (wrong PIN) ── */
@keyframes vault-shake {
  0%   { transform: translateX(0); }
  12%  { transform: translateX(-8px) rotate(-0.5deg); }
  25%  { transform: translateX(8px) rotate(0.5deg); }
  37%  { transform: translateX(-6px) rotate(-0.3deg); }
  50%  { transform: translateX(6px) rotate(0.3deg); }
  62%  { transform: translateX(-3px); }
  75%  { transform: translateX(3px); }
  87%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}
.vault-frame.shake {
  animation: vault-shake 0.5s ease-out;
}

/* ── Dial spin animation ── */
.vault-dial.spinning {
  transform: rotate(720deg);
  transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Door open animation ── */
.vault-door.opening {
  transform: perspective(1200px) rotateY(-110deg);
  box-shadow: -20px 0 40px rgba(0,0,0,0.6);
}

/* ── Door interior (revealed after opening) ── */
.vault-door-interior {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 40%, rgba(227,6,19,0.3) 0%, #0d0505 60%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease 0.8s;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
.vault-door.opening .vault-door-interior {
  opacity: 1;
}
.vault-door-interior svg {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 0 20px rgba(227,6,19,0.8));
  animation: interior-pulse 1s ease-in-out infinite;
}
@keyframes interior-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.1); }
}

/* ── Page transition overlay ── */
.cs-transition-overlay {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.cs-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ── Go-Live Celebration overlay ── */
.cs-golive-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.97);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.cs-golive-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.cs-golive-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  color: #f5f5f5;
  letter-spacing: -0.02em;
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
.cs-golive-overlay.active .cs-golive-title {
  transform: scale(1);
  opacity: 1;
}
.cs-golive-title span {
  color: #e30613;
}

.cs-golive-subtitle {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: #888;
  margin-top: 1rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;
}
.cs-golive-overlay.active .cs-golive-subtitle {
  opacity: 1;
  transform: translateY(0);
}

.cs-golive-btn {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e30613;
  color: #fff;
  border: none;
  padding: 0.85rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.8s, transform 0.4s ease 0.8s, background 0.2s ease;
}
.cs-golive-overlay.active .cs-golive-btn {
  opacity: 1;
  transform: translateY(0);
}
.cs-golive-btn:hover { background: #c80510; }

#cs-confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
}

/* ── Responsive ── */
@media (max-width: 400px) {
  .vault-frame { width: 300px; padding: 20px 20px 24px; }
  .vault-dial  { width: 74px; height: 74px; }
  .vault-key   { font-size: 1rem; }
}

@media (max-height: 700px) {
  .cs-logo     { margin-bottom: 1rem; }
  .cs-logo img { height: 36px; }
  .cs-headline { margin-bottom: 1.5rem; }
  .cs-headline h1 { font-size: 1.2rem; }
}