/**
 * Interactive OTP Animation & Verification Showcase
 * Design: High-fidelity micro-interactions with responsive physics & morphing states
 */

/* ==========================================================================
   1. Design Tokens & CSS Custom Properties
   ========================================================================== */
:root {
  --cream: #f6efcc;
  --tan: #dfd2aa;
  --white: #fbfaff;
  --green: #8bd13d;
  --green-hover: #7dbf35;
  --success: #2bcf70;
  --amber: #f5bd28;
  --amber-border: #e9bd43;
  --amber-glow: rgba(245, 189, 40, 0.28);
  --error: #ef4f58;
  --orange: #ff710f;
  --text: #171717;
  --muted: #8a8a8f;
  --card-bg: rgba(252, 251, 255, 0.98);
  --border-subtle: #d9d9dd;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius-card: 32px;
  --radius-input: 12px;
}

/* ==========================================================================
   2. Reset & Layout Setup
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--cream);
  font-family: var(--font-family);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at 50% 20%, #faf5dc 0%, var(--cream) 55%, var(--tan) 100%);
  padding: 24px 16px;
}

.app-container {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

/* ==========================================================================
   3. Header & Headline
   ========================================================================== */
.headline {
  text-align: center;
  margin-bottom: 24px;
}

.headline h1 {
  margin: 0;
  font-size: clamp(28px, 5vw, 36px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -1.2px;
}

.headline .version-tag {
  margin-top: 6px;
  font-size: clamp(16px, 3.5vw, 22px);
  line-height: 1;
  color: var(--orange);
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* ==========================================================================
   4. Scene & Main Card
   ========================================================================== */
.scene {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.card {
  position: relative;
  width: 100%;
  max-width: 580px;
  min-height: 440px;
  margin: 0 auto;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  text-align: center;
  padding: 28px 36px 32px;
  box-shadow: 0 12px 36px rgba(92, 73, 20, 0.09), 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.25s ease;
}

.card.dismiss {
  transform: scale(0.96);
  opacity: 0.7;
}

/* Close button */
.x {
  position: absolute;
  right: 20px;
  top: 18px;
  border: 0;
  background: none;
  color: #a8a8af;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  z-index: 10;
}

.x:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--text);
  transform: scale(1.08);
}

.x:focus-visible {
  outline: 2px solid var(--amber);
}

/* ==========================================================================
   5. Hero Lock SVG & Key Mechanism
   ========================================================================== */
.hero-lock {
  width: 124px;
  height: 126px;
  margin: -6px auto 4px;
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
  border-radius: 20px;
  transition: transform 0.2s ease, filter 0.2s ease;
  position: relative;
  z-index: 2;
}

.hero-lock:hover {
  transform: scale(1.03);
}

.hero-lock:focus-visible {
  filter: drop-shadow(0 0 12px rgba(245, 189, 40, 0.5));
}

.hero-lock svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-lock .shackle,
.hero-lock .key {
  will-change: transform, opacity;
}

.hero-lock.lock-busy {
  pointer-events: none;
}

.shackle path {
  fill: none;
  stroke: #ead67e;
  stroke-width: 14;
  stroke-linecap: round;
}

.key circle,
.key path {
  fill: #efcb4d;
  stroke: #efcb4d;
  stroke-width: 7;
  stroke-linecap: round;
}

.key .hole {
  fill: #fff4c9;
  stroke: none;
}

.body {
  fill: #ffb80e;
}

.keyhole {
  fill: #fff6d3;
}

.shackle {
  transform-origin: 48px 62px;
}

.key {
  transform-origin: 119px 48px;
}

/* Typography */
h2 {
  margin: 4px 0 10px;
  font-size: clamp(20px, 4vw, 25px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.sub {
  margin: 0 auto;
  max-width: 380px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  transition: opacity 0.22s ease, color 0.22s ease;
}

/* ==========================================================================
   6. 4-Digit OTP Inputs
   ========================================================================== */
.inputs {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2.5vw, 16px);
  margin-top: 22px;
  position: relative;
  height: 52px;
  z-index: 5;
}

.inputs input {
  position: relative;
  width: clamp(48px, 12vw, 62px);
  height: 52px;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-input);
  background: linear-gradient(180deg, #f3f3f5 0%, #eaeaea 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 0 #fff;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: #1f1f1f;
  outline: none;
  caret-color: #555;
  transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.25, 1),
              opacity 0.25s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease,
              background 0.2s ease;
}

.inputs input:focus {
  border-color: var(--amber);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 0 0 3px var(--amber-glow);
  background: #fff;
}

.inputs input.filled {
  border-color: var(--amber-border);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 0 0 1.5px var(--amber-glow);
}

.inputs input.pop {
  animation: digitPop 0.22s cubic-bezier(0.2, 1.6, 0.5, 1);
}

@keyframes digitPop {
  0% { transform: scale(0.82); opacity: 0.3; }
  100% { transform: scale(1); opacity: 1; }
}

/* Verifying Glow State */
.card.verifying .inputs input {
  border-color: #f2c44b;
  animation: verifyPulse 0.7s ease-in-out infinite alternate !important;
}

.card.verifying .inputs input:nth-child(2) { animation-delay: 0.08s !important; }
.card.verifying .inputs input:nth-child(3) { animation-delay: 0.16s !important; }
.card.verifying .inputs input:nth-child(4) { animation-delay: 0.24s !important; }

@keyframes verifyPulse {
  from {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(245, 189, 40, 0.35);
  }
  to {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 2px rgba(245, 189, 40, 0.95), 0 0 12px rgba(245, 189, 40, 0.25);
  }
}

/* ==========================================================================
   7. Action Buttons (Resend & Verify)
   ========================================================================== */
.resend {
  display: block;
  margin: 18px auto 14px;
  border: 0;
  border-bottom: 1.5px solid #222;
  background: none;
  padding: 0 0 2px;
  color: #252525;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.resend:hover {
  opacity: 0.75;
}

.verify {
  width: 100%;
  max-width: 460px;
  height: 52px;
  margin: 0 auto;
  border: 0;
  border-radius: 28px;
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  box-shadow: 0 4px 14px rgba(139, 209, 61, 0.35), inset 0 1px rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.25s ease, opacity 0.3s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.verify:hover {
  background: var(--green-hover);
  transform: translateY(-1px);
}

.verify:active {
  transform: translateY(1px);
}

.card.verifying .verify {
  background: #78bd35;
}

.card.verifying .vt {
  font-size: 0;
}

.card.verifying .vt::after {
  content: "Verifying...";
  font-size: 15px;
}

.card.verifying .resend {
  opacity: 0.3;
  pointer-events: none;
}

/* ==========================================================================
   8. Morphing Success Animation
   ========================================================================== */
.success-icon {
  position: absolute;
  left: 50%;
  top: 300px;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%) rotate(8deg) scale(0.82);
  opacity: 0;
  z-index: 8;
  pointer-events: none;
}

.success-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.success-icon rect,
.success-icon path {
  fill: none;
  stroke: var(--success);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.success-icon rect {
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
}

.success-icon path {
  stroke-dasharray: 42;
  stroke-dashoffset: 42;
}

/* Stacking choreography */
.card.morphing .resend { opacity: 0; pointer-events: none; }
.card.morphing .verify { opacity: 0.15; background: #b9dda0; pointer-events: none; }
.card.morphing .inputs { pointer-events: none; }
.card.morphing .inputs input {
  animation: none !important;
  color: transparent;
  background: #f7f7f8;
  border: 2px solid #d8d8dc;
  box-shadow: none;
}

.card.morphing .inputs input:nth-child(1) { transform: translateX(112px) rotate(8deg) scale(0.92); }
.card.morphing .inputs input:nth-child(2) { transform: translateX(37px) rotate(5deg) scale(0.94); }
.card.morphing .inputs input:nth-child(3) { transform: translateX(-37px) rotate(2deg) scale(0.96); }
.card.morphing .inputs input:nth-child(4) { transform: translateX(-112px) rotate(-2deg) scale(0.98); }

.card.stack-tight .inputs input:nth-child(1) { transform: translateX(113px) rotate(10deg) scale(0.86); opacity: 0.72; }
.card.stack-tight .inputs input:nth-child(2) { transform: translateX(38px) rotate(7deg) scale(0.89); opacity: 0.82; }
.card.stack-tight .inputs input:nth-child(3) { transform: translateX(-37px) rotate(4deg) scale(0.92); opacity: 0.9; }
.card.stack-tight .inputs input:nth-child(4) { transform: translateX(-112px) rotate(1deg) scale(0.94); }
.card.stack-tight .inputs { filter: blur(0.2px); }

.card.single-square .inputs { opacity: 0; visibility: hidden; }
.card.single-square .success-icon { opacity: 1; }
.card.single-square .success-icon rect { stroke: #cdded1; stroke-dashoffset: 0; }
.card.single-square .success-icon path { opacity: 0; }

.card.square-green .success-icon {
  animation: squareSettle 0.35s cubic-bezier(0.2, 1.25, 0.3, 1) forwards;
}

.card.square-green .success-icon rect {
  stroke: var(--success);
  transition: stroke 0.25s ease;
}

.card.square-green .success-icon path {
  opacity: 1;
  animation: drawTick 0.35s 0.12s cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

@keyframes squareSettle {
  0%   { transform: translate(-50%, -50%) rotate(8deg) scale(0.82); }
  65%  { transform: translate(-50%, -50%) rotate(-2deg) scale(1.04); }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}

@keyframes drawTick {
  to { stroke-dashoffset: 0; }
}

/* Final Success Badge */
.secure {
  display: none;
}

.card.final-success .verify,
.card.final-success .resend {
  visibility: hidden;
  display: none;
}

.card.final-success .secure {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 55px;
  color: var(--success);
  font-size: 13.5px;
  font-weight: 700;
  animation: fadeUp 0.35s both;
}

.card.final-success .shield-svg {
  width: 18px;
  height: 18px;
}

.card.final-success .sub {
  animation: subSwap 0.3s both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes subSwap {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

/* ==========================================================================
   9. Error State (Shake & Red Outline)
   ========================================================================== */
.card.error .inputs input {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 1.5px var(--error) !important;
}

.card.error .verify {
  background: var(--error);
  box-shadow: 0 4px 14px rgba(239, 79, 88, 0.35);
}

.card.error .sub {
  color: var(--error);
}

.card.error .inputs {
  animation: errorShake 0.4s ease;
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* ==========================================================================
   10. Interactive Controls Panel
   ========================================================================== */
.controls-panel {
  width: 100%;
  max-width: 580px;
}

.controls-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(92, 73, 20, 0.05);
}

.ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e2e2e6;
  border-radius: 12px;
  padding: 8px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ctrl-btn:hover {
  background: #f7f7fa;
  border-color: #d0d0d6;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

.ctrl-btn:active {
  transform: translateY(1px);
}

.ctrl-btn.active {
  background: #171717;
  color: #ffffff;
  border-color: #171717;
}

/* ==========================================================================
   11. Code Preview Box
   ========================================================================== */
.codebox {
  width: 100%;
  max-width: 580px;
  background: #080a0f;
  border-radius: 16px;
  color: #d9dde2;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(35, 25, 5, 0.25);
  border: 1px solid #1a1e27;
}

.codebox .bar {
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #1a1e27;
  padding: 0 16px;
  font-size: 11px;
}

.dots {
  display: flex;
  gap: 6px;
  margin-right: 12px;
}

.dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}

.dots i:nth-child(1) { background: #ff5f56; }
.dots i:nth-child(2) { background: #ffbd2e; }
.dots i:nth-child(3) { background: #27c93f; }

.brand {
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.tag {
  margin-left: 6px;
  color: #dfba35;
  font-weight: 700;
}

.copy-btn {
  margin-left: auto;
  background: #161a23;
  border: 1px solid #2a3140;
  color: #b0b8c4;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background: #202735;
  color: #ffffff;
}

.codearea {
  position: relative;
  padding: 16px 18px;
}

.codearea pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11.5px;
  line-height: 1.65;
  color: #cfd4dc;
  white-space: pre;
  overflow-x: auto;
}

.codearea pre span { color: #5a6272; user-select: none; margin-right: 8px; }
.codearea pre em { font-style: normal; color: #d670d6; }
.codearea pre q { quotes: none; color: #98c379; }

.snippet-badge {
  position: absolute;
  right: 16px;
  bottom: 14px;
  background: rgba(223, 186, 53, 0.15);
  border: 1px solid rgba(223, 186, 53, 0.3);
  color: #e5c04b;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

/* ==========================================================================
   12. Footer Credits
   ========================================================================== */
.credits {
  margin-top: 24px;
  font-size: 12px;
  color: #7a7050;
  text-align: center;
}

.credits a {
  color: #443c22;
  text-decoration: none;
  font-weight: 700;
}

.credits a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   13. Responsive Adaptations & Accessibility
   ========================================================================== */
@media (max-width: 480px) {
  body {
    padding: 16px 10px;
  }

  .card {
    padding: 24px 18px 28px;
    border-radius: 24px;
  }

  .controls-bar {
    gap: 6px;
    padding: 8px 10px;
  }

  .ctrl-btn {
    padding: 6px 10px;
    font-size: 11.5px;
  }

  .codearea pre {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}