/* ============================================================
   DEMO INTRO FLOW — demo-overrides.css
   Layers on top of castle.css. All elements created by
   demo-driver.js, never touching castle-managed DOM.
   ============================================================ */

/* ── 7.1 Greeter Container ── */
#adv-greeter {
  width: 520px;
  margin: 8px auto 0;
  background: var(--dmg-dark);
  border: 4px solid var(--dmg-darkest);
  box-shadow: 4px 4px 0 var(--dmg-darkest), inset 0 0 0 2px var(--dmg-mid);
  padding: 14px 16px;
  box-sizing: border-box;
  font-family: var(--font-pixel);
}

/* ── 7.2 Input Row ── */
.adv-greeter-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

/* ── 7.3 Ticker Input ── */
.adv-greeter-input {
  flex: 1;
  min-width: 0;
  background: var(--dmg-darkest);
  border: 2px solid var(--dmg-mid);
  color: var(--dmg-lightest);
  font-family: var(--font-pixel);
  font-size: 10px;
  padding: 8px 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  outline: none;
  box-sizing: border-box;
}

.adv-greeter-input::placeholder {
  color: var(--dmg-mid);
  text-transform: none;
  font-size: 8px;
  letter-spacing: 0;
}

.adv-greeter-input:focus {
  border-color: var(--dmg-lightest);
  box-shadow: 0 0 0 2px var(--dmg-mid);
}

/* ── 7.4 CTA Button ── */
.adv-greeter-btn {
  flex-shrink: 0;
  background: var(--dmg-mid);
  border: 2px solid var(--dmg-darkest);
  color: var(--dmg-darkest);
  font-family: var(--font-pixel);
  font-size: 9px;
  padding: 8px 12px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--dmg-darkest);
  transition: all 0.1s;
}

.adv-greeter-btn:hover {
  background: var(--dmg-lightest);
}

.adv-greeter-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--dmg-darkest);
}

.adv-greeter-btn:focus-visible {
  outline: 2px solid var(--dmg-lightest);
  outline-offset: 2px;
}

.adv-greeter-btn:disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* ── 7.5 Sample Trial Link ── */
.adv-greeter-sample {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--dmg-mid);
  font-family: var(--font-pixel);
  font-size: 7px;
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 0;
}

.adv-greeter-sample:hover {
  color: var(--dmg-lightest);
}

.adv-greeter-sample:focus-visible {
  outline: 2px solid var(--dmg-mid);
  outline-offset: 2px;
}

/* ── 7.6 Error Message ── */
.adv-greeter-error {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--dmg-darkest);
  border-left: 3px solid var(--dmg-mid);
  color: var(--dmg-lightest);
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 1.6;
}

/* ── 7.7 Validation Shake Animation ── */
@keyframes adv-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.adv-greeter-input.adv-shake {
  animation: adv-shake 0.15s ease-in-out 2;
}

/* ── 7.8 Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .adv-greeter-input.adv-shake {
    animation: none;
    border-color: var(--dmg-mid);
    transition: border-color 0.15s ease-in-out;
  }

  @keyframes adv-greeter-error-flash {
    0%, 100% { border-color: var(--dmg-mid); }
    50%      { border-color: var(--dmg-lightest); }
  }
  .adv-greeter-input.adv-shake {
    animation: adv-greeter-error-flash 0.5s ease-in-out;
  }

  /* Instant show/hide for all state transitions */
  #adv-greeter,
  #rt-verdict-card,
  #rt-challenge-card,
  #rt-report-carousel,
  #adv-deliberation-grid,
  #adv-momentum-bar,
  #adv-sentiment-readout,
  #adv-move-flourish {
    transition: none !important;
  }
}

/* ── 8. Transitions ── */
/* Fade helpers used by demo-driver.js for state transitions */

/* A → B: trial chrome fades in */
#adv-deliberation-grid,
#adv-momentum-bar,
#adv-sentiment-readout,
#adv-move-flourish {
  transition: opacity 0.3s ease-in;
}

/* A → B: greeter fades out */
#adv-greeter {
  transition: opacity 0.2s ease-out;
}

/* A → B: control buttons fade in */
#demo-replay-btn,
#demo-new-trial-btn {
  transition: opacity 0.3s ease-in;
}

/* C: post-verdict chrome fades in sequentially */
#rt-verdict-card,
#rt-challenge-card,
#rt-report-carousel {
  transition: opacity 0.3s ease-in;
}

/* ── 9. Mobile (≤480px) ── */
@media (max-width: 480px) {
  #adv-greeter {
    width: calc(100vw - 32px);
    max-width: 520px;
    padding: 10px 12px;
  }

  .adv-greeter-row {
    flex-direction: column;
    gap: 6px;
  }

  .adv-greeter-input {
    font-size: 10px;
    padding: 10px;
    width: 100%;
  }

  .adv-greeter-btn {
    width: 100%;
    font-size: 10px;
    padding: 10px;
    text-align: center;
  }

  .adv-greeter-sample {
    font-size: 7px;
  }
}