/**
 * HeroDemo component styles.
 * Prefixed with .hd- to avoid conflicts with global styles.
 * Supports light/dark via .dark-theme parent or data-theme attribute.
 */

.hero-demo-container {
  width: 480px;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card, #1e293b);
  border: 1px solid var(--border, #334155);
  box-shadow: 0 25px 60px rgba(0,0,0,0.3), 0 0 40px rgba(16,185,129,0.06);
}

/* Browser chrome */
.hd-browser-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--secondary, #334155);
  border-bottom: 1px solid var(--border, #475569);
}
.hd-dots { display: flex; gap: 5px; }
.hd-dots span { width: 10px; height: 10px; border-radius: 50%; }
.hd-dots span:nth-child(1) { background: #ef4444; }
.hd-dots span:nth-child(2) { background: #f59e0b; }
.hd-dots span:nth-child(3) { background: #10b981; }
.hd-url {
  flex: 1; border-radius: 6px; padding: 5px 10px;
  font-size: 12px; display: flex; align-items: center; gap: 6px;
  background: var(--background, #1e293b);
  color: var(--muted-foreground, #94a3b8);
}
.hd-lock { color: #10b981; font-size: 10px; }

/* Content area */
.hd-content { padding: 24px; min-height: 300px; position: relative; overflow: hidden; }

/* Phase transitions */
.hd-phase {
  position: absolute; inset: 24px; opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease, transform 0.5s ease;
  text-align: left;
}
.hd-phase-url { transform: translateX(-30px); }
.hd-phase-scan { transform: translateY(30px); }
.hd-phase-score { transform: scale(0.9); }
.hd-phase-doc { transform: translateX(30px); }
.hd-phase-result { transform: scale(0.9); }
.hd-phase.hd-active { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
.hd-phase.hd-exiting { opacity: 0; transition: opacity 0.3s ease, transform 0.4s ease; }
.hd-phase-url.hd-exiting { transform: translateX(-40px) scale(0.95); }
.hd-phase-scan.hd-exiting { transform: translateY(-30px) scale(0.95); }
.hd-phase-score.hd-exiting { transform: scale(0.85); }
.hd-phase-doc.hd-exiting { transform: translateX(40px) scale(0.95); }
.hd-phase-result.hd-exiting { transform: scale(0.85); }

/* Phase 1: URL */
.hd-subtitle { font-size: 14px; font-weight: 400; margin-bottom: 14px; color: var(--muted-foreground, #94a3b8); }
.hd-url-input { display: flex; gap: 8px; margin-bottom: 16px; }
.hd-url-field {
  flex: 1; border-radius: 8px; padding: 11px 14px; font-size: 14px; font-family: monospace;
  background: var(--background, #0f172a);
  border: 1px solid var(--border, #475569);
  color: var(--foreground, #f1f5f9);
}
.hd-cursor { display: inline-block; width: 2px; height: 16px; background: #10b981; animation: hd-blink 0.8s infinite; vertical-align: text-bottom; }
@keyframes hd-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
.hd-btn {
  background: linear-gradient(135deg, #10b981, #059669); color: white; border: none;
  border-radius: 8px; padding: 11px 18px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px;
  text-decoration: none; justify-content: center; transition: transform 0.15s;
}
.hd-btn.hd-pressed { transform: scale(0.93); }
.hd-trust { display: flex; gap: 16px; font-size: 11px; color: var(--muted-foreground, #64748b); }

/* Phase 2: Scan */
.hd-scan-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.hd-spinner { width: 20px; height: 20px; border: 2px solid var(--border, #334155); border-top-color: #10b981; border-radius: 50%; animation: hd-spin 0.8s linear infinite; }
@keyframes hd-spin { to { transform: rotate(360deg); } }
.hd-scan-status { font-size: 13px; color: var(--muted-foreground, #94a3b8); }
.hd-progress { width: 100%; height: 4px; border-radius: 2px; margin-bottom: 20px; overflow: hidden; background: var(--border, #334155); }
.hd-progress-fill { height: 100%; background: linear-gradient(90deg, #10b981, #059669); border-radius: 2px; width: 0%; transition: width 0.3s ease; }
.hd-scan-items { display: flex; flex-direction: column; gap: 10px; }
.hd-scan-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-foreground, #94a3b8); opacity: 0; transform: translateX(-10px); transition: all 0.3s; }
.hd-scan-item.hd-visible { opacity: 1; transform: translateX(0); }
.hd-check { color: #10b981; font-weight: bold; font-size: 14px; }
.hd-cross { color: #ef4444; font-weight: bold; font-size: 14px; }

/* Recap bounce: cross items pulse one by one before transitioning out */
.hd-scan-item.hd-recap {
  animation: hd-recap-bump 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  color: #ef4444;
  font-weight: 600;
}
@keyframes hd-recap-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.08) translateX(4px); }
  100% { transform: scale(1); }
}

/* Phase 3 & 5: Score gauge */
.hd-score-display { text-align: center; margin-bottom: 16px; }
.hd-gauge { width: 180px; height: 100px; margin: 0 auto 8px; position: relative; overflow: hidden; }
.hd-gauge svg { width: 180px; height: 100px; }
.hd-gauge-bg { fill: none; stroke-width: 14; stroke-linecap: round; stroke: var(--border, #334155); }
.hd-gauge-fill, .hd-gauge-fill2 { fill: none; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 236; stroke-dashoffset: 236; transition: stroke-dashoffset 1.5s ease; }
.hd-gauge-num, .hd-gauge-num2 { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 36px; font-weight: 800; color: var(--foreground, #f1f5f9); }
.hd-score-label { font-size: 12px; font-weight: 600; padding: 4px 14px; border-radius: 12px; display: inline-block; background: rgba(245,158,11,0.15); color: #f59e0b; }
.hd-result-label { font-size: 12px; font-weight: 600; padding: 4px 14px; border-radius: 12px; display: inline-block; background: rgba(16,185,129,0.15); color: #10b981; }

.hd-score-details { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.hd-detail { display: flex; justify-content: space-between; font-size: 11px; padding: 5px 0; opacity: 0; transition: opacity 0.3s; border-bottom: 1px solid var(--background, #1e293b); }
.hd-detail.hd-visible { opacity: 1; }
.hd-dl { color: var(--muted-foreground, #94a3b8); }
.hd-dv { font-weight: 600; color: var(--foreground, #f1f5f9); }

/* Phase 4: Document */
.hd-doc-preview { border-radius: 8px; padding: 18px; font-size: 11px; line-height: 1.7; max-height: 220px; overflow: hidden; position: relative; background: #f8fafc; color: #1e293b; text-align: left; }
.hd-doc-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 9px; color: #10b981; font-weight: 600; }
.hd-doc-preview h4 { font-size: 15px; margin-bottom: 8px; color: #0f172a; border-bottom: 2px solid #10b981; padding-bottom: 6px; }
.hd-sec-title { font-weight: 700; margin-top: 10px; margin-bottom: 3px; font-size: 11px; color: #0f172a; }
.hd-doc-preview p { margin-bottom: 6px; color: #475569; }
.hd-doc-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 50px; background: linear-gradient(transparent, #f8fafc); }
.hd-tw-cursor { display: inline-block; width: 2px; height: 12px; background: #10b981; animation: hd-blink 0.6s infinite; vertical-align: text-bottom; }
.hd-doc-sent { text-align: center; margin-top: 14px; font-size: 12px; color: #10b981; font-weight: 600; opacity: 0; transition: opacity 0.5s; }
.hd-doc-sent.hd-visible { opacity: 1; }

/* Phase 5: Result */
/* Confetti particles on score 100 */
.hd-confetti {
  position: absolute;
  top: 80px; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.hd-confetti span {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  opacity: 0;
}
.hd-confetti.hd-burst span {
  animation: hd-confetti-fly 1s ease-out forwards;
}
.hd-confetti span:nth-child(1) { background: #10b981; }
.hd-confetti span:nth-child(2) { background: #059669; }
.hd-confetti span:nth-child(3) { background: #34d399; }
.hd-confetti span:nth-child(4) { background: #6ee7b7; }
.hd-confetti span:nth-child(5) { background: #10b981; }
.hd-confetti span:nth-child(6) { background: #fbbf24; }
.hd-confetti span:nth-child(1) { --dx: -40px; --dy: -60px; animation-delay: 0s; }
.hd-confetti span:nth-child(2) { --dx: 35px; --dy: -70px; animation-delay: 0.05s; }
.hd-confetti span:nth-child(3) { --dx: -55px; --dy: -40px; animation-delay: 0.1s; }
.hd-confetti span:nth-child(4) { --dx: 50px; --dy: -50px; animation-delay: 0.08s; }
.hd-confetti span:nth-child(5) { --dx: -20px; --dy: -75px; animation-delay: 0.12s; }
.hd-confetti span:nth-child(6) { --dx: 25px; --dy: -65px; animation-delay: 0.03s; }
@keyframes hd-confetti-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

.hd-result-warning { text-align: center; font-size: 13px; margin-top: 12px; padding: 10px 16px; border-radius: 8px; color: #fbbf24; background: rgba(251,191,36,0.1); }
.hd-result-cta { margin-top: 14px; opacity: 0; transform: translateY(8px); transition: opacity 0.5s 0.3s, transform 0.5s 0.3s; }
.hd-phase-result.hd-active .hd-result-cta { opacity: 1; transform: translateY(0); }
.hd-result-cta .hd-btn { width: 100%; }

/* Restart bar — hidden for cleaner look */
.hd-restart { display: none; }

/* Video mode */
.hero-demo-video { width: 480px; max-width: 100%; border-radius: 16px; overflow: hidden; }
.hero-demo-video video { width: 100%; display: block; }

/* Responsive */
@media (max-width: 520px) {
  .hero-demo-container, .hero-demo-video { width: 100%; }
  .hd-trust { gap: 8px; font-size: 10px; }
  .hd-url-field { font-size: 12px; padding: 9px 10px; }
}