/* ──────────────────────────────────────────────────────────────────
 * walkthrough.css — progressive 'Click here →' disclosure styles
 * Companion to /assets/walkthrough.js
 * Activated when an ol.steps has data-progressive-disclosure="true"
 * ────────────────────────────────────────────────────────────────── */

ol.steps[data-progressive-disclosure="true"] {
  position:relative;
}

.wt-step{
  position:relative;
  transition:opacity .35s ease, filter .35s ease;
}

/* Collapsed (locked) step: dim, hide the payload, blur lightly */
.wt-step.wt-collapsed{
  opacity:.45;
  filter:grayscale(.5);
}
.wt-step.wt-collapsed .wt-payload{
  display:none;
}
.wt-step.wt-collapsed h3::after{
  content:" 🔒";
  font-size:.7em;
  opacity:.6;
}

/* Active step: full color, gold left border, subtle glow */
.wt-step.wt-active{
  opacity:1;
  filter:none;
}
.wt-step.wt-active::before{
  content:"";
  position:absolute;
  left:-12px;
  top:6px;
  bottom:6px;
  width:3px;
  background:#FFB800;
  border-radius:3px;
  box-shadow:0 0 12px rgba(255,184,0,.5);
}

/* Done step: muted gold check */
.wt-step.wt-done{
  opacity:.85;
}
.wt-step.wt-done h3::after{
  content:" ✓";
  color:#FFB800;
  font-weight:700;
  margin-left:6px;
  font-size:.85em;
}

/* The Click-here button */
.wt-reveal{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:11px 18px;
  background:linear-gradient(180deg, #FFE38A, #FFB800);
  color:#0A0A0E;
  border:none;
  border-radius:10px;
  font-family:var(--mono, ui-monospace, monospace);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 22px -8px rgba(255,184,0,.6), 0 0 0 1px rgba(255,184,0,.35);
  transition:transform .18s, box-shadow .18s;
  animation:wt-pulse 2.4s ease-in-out infinite;
}
.wt-reveal:hover,
.wt-reveal:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -8px rgba(255,184,0,.75), 0 0 0 1px rgba(255,184,0,.5);
  outline:none;
  animation:none;
}

.wt-reveal-arrow{
  display:inline-block;
  font-size:14px;
  line-height:1;
  transition:transform .2s;
}
.wt-reveal:hover .wt-reveal-arrow{
  transform:translateX(3px);
}

@keyframes wt-pulse{
  0%, 100% { box-shadow:0 8px 22px -8px rgba(255,184,0,.6), 0 0 0 1px rgba(255,184,0,.35); }
  50%      { box-shadow:0 12px 32px -6px rgba(255,184,0,.95), 0 0 0 2px rgba(255,184,0,.55); }
}

/* Finish link on the last step */
.wt-finish{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:16px;
  padding:10px 16px;
  background:rgba(255,184,0,.08);
  color:#FFB800;
  border:1px solid rgba(255,184,0,.4);
  border-radius:10px;
  font-family:var(--mono, ui-monospace, monospace);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  transition:background .18s, transform .18s;
}
.wt-finish:hover{
  background:rgba(255,184,0,.16);
  transform:translateY(-1px);
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .wt-reveal{ animation:none; }
  .wt-step{ transition:none; }
}