/* Ceremony finder quiz — shared by find-your-ceremony (standalone page)
   and index.html (embedded in the hero). Edit once, applies to both.
   Requires assets/js/ceremony-finder.js and a container:
   <div class="finder"><div class="prog-wrap"><div class="prog-fill" id="prog"></div></div><div id="sc"></div></div>
   All rules are scoped under .finder / .opt-btn / etc. — nothing here is unscoped
   except :root custom properties (checked for name collisions with main.css/site.css). */

  :root {
    --text: #1a1a18;
    --text-muted: #555;
    --text-hint: #999;
    --border: rgba(0,0,0,0.1);
    --border-strong: rgba(0,0,0,0.18);
    --surface: #ffffff;
    --surface-3: #f4f4f4;
    --radius: 12px;
    --radius-sm: 8px;
  }

  .finder-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem 4rem;
  }

  .finder { width: 100%; max-width: 580px; color: var(--text); font-family: 'Source Sans Pro', sans-serif; text-transform: none; letter-spacing: normal; }
  .finder button, .finder a { text-transform: none; letter-spacing: normal; }

  .prog-wrap { height: 3px; background: var(--border); border-radius: 2px; margin-bottom: 2rem; overflow: hidden; }
  .prog-fill { height: 100%; background: #c8a96e; border-radius: 2px; transition: width 0.4s ease; width: 0%; }
  .prog-fill.pulse { box-shadow: 0 0 6px 1px rgba(200,169,110,0.7); }

  .step { display: none; }
  .step.active { display: block; animation: fadeUp 0.3s ease; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .opt-btn.selected { border-color: #c8a96e; background: #fdfaf4; }
  .opt-btn.selected .opt-arr { display: none; }
  .opt-check {
    display: none; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: #c8a96e; color: #fff; font-size: 0.75rem;
    animation: popIn 0.3s cubic-bezier(.34,1.56,.64,1);
  }
  .opt-btn.selected .opt-check { display: flex; }
  @keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

  .confetti-dot {
    position: fixed; width: 6px; height: 6px; border-radius: 50%;
    pointer-events: none; z-index: 9999;
    animation: confettiPop 0.5s ease-out forwards;
  }
  @keyframes confettiPop {
    0%   { transform: translate(0,0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx),var(--ty)) scale(0.3); opacity: 0; }
  }

  .result-hero-icon { animation: iconPop 0.5s cubic-bezier(.34,1.56,.64,1); }
  @keyframes iconPop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

  .q-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-hint); margin-bottom: 6px; }
  .q-title { font-size: 1.85rem; font-weight: 500; line-height: 1.25; color: var(--text); margin-bottom: 6px; }
  .q-sub { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem; }

  .options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.5rem; }
  .opt-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1.5px solid var(--border-strong);
    border-radius: 16px;
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    width: 100%;
  }
  .opt-btn:hover, .opt-btn:active {
    border-color: #c8a96e;
    background: var(--surface-3);
    transform: scale(1.02);
    box-shadow: 0 8px 22px rgba(0,0,0,0.1);
  }
  .opt-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
  .opt-body { flex: 1; }
  .opt-title { font-size: 1.1rem; font-weight: 600; color: var(--text); line-height: 1.3; }
  .opt-arr { font-size: 1.25rem; color: var(--text-hint); flex-shrink: 0; }
  .result-hero {
    display: block;
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
    margin-bottom: 1rem;
    border: 2px solid #000;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }
  .result-hero:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.1); transform: translateY(-2px); }
  .result-hero-icon { font-size: 4rem; line-height: 1; margin-bottom: 0.5rem; }
  .result-hero-name { font-size: 2.1rem; font-weight: 700; line-height: 1.15; margin-bottom: 0.4rem; color: var(--text) !important; }
  .result-hero-tag { font-size: 1rem; color: var(--text-muted); margin-bottom: 1.1rem; }
  .result-why-line { font-size: 0.95rem; color: var(--text); line-height: 1.5; max-width: 30rem; margin: 0 auto; }
  .hero-cta-hint { font-size: 0.8rem; font-weight: 600; color: #c8a96e; margin-top: 1.1rem; }
  .stat-strip { text-align: center; font-size: 0.8rem; color: var(--text-hint); margin-bottom: 1.25rem; letter-spacing: 0.02em; }
  .second-note { text-align: center; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.6; }

  .retreat-card { border: 1.5px solid #000; border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; background: var(--surface); cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
  .retreat-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.1); transform: translateY(-2px); }
  .retreat-badge { font-size: 0.75rem; font-weight: 500; background: var(--surface-3); color: var(--text-muted); padding: 3px 10px; border-radius: var(--radius-sm); display: inline-block; margin-bottom: 10px; letter-spacing: 0.03em; }
  .retreat-name { font-size: 1.125rem; font-weight: 500; color: var(--text); margin-bottom: 6px; line-height: 1.3; }
  .retreat-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 10px; }
  .features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .feat { font-size: 0.75rem; color: var(--text-muted); background: var(--surface-3); border-radius: var(--radius-sm); padding: 4px 10px; }
  .retreat-match { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 14px; }

  .cta-primary {
    display: block;
    width: 100%;
    padding: 14px 26px;
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease;
    margin-bottom: 8px;
    box-sizing: border-box;
  }
  .cta-primary:hover { background: #fff !important; color: #000 !important; }

  .suit-warn { border: 0.5px solid #e0a020; border-radius: var(--radius); padding: 12px 14px; margin-bottom: 1rem; font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; background: #fffbf0; }

  .caveat { font-size: 0.75rem; color: var(--text-hint); line-height: 1.7; margin-top: 1rem; padding-top: 1rem; border-top: 0.5px solid var(--border); }