/* welp-background-and-tour.css - v0.4.0 (2026-10-11)
   The dragon background, the big mute button, the walkthrough marks. */

html { background: #14110d; }
body { background: transparent; position: relative; }
.wb-header, .wb-main, .wb-footer { position: relative; z-index: 1; }

/* ---------- background layer ---------- */
.wbg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.wbg-still, .wbg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wbg-still {
  background-size: cover;
  background-position: center;
  filter: saturate(0.85);
}
.wbg-video { object-fit: cover; }
/* v0.6.0: the dragon is SEEN - only a light dim over it on every screen; the work
   sits on its own dark card instead (no blur filter: it costs CPU with graphics accel off) */
.wbg-scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 13, 0.12);
}
.wb-main {
  background: rgba(20, 17, 13, 0.72);
  border-radius: 22px;
}
body[data-step="1"] .wb-main { background: rgba(20, 17, 13, 0.5); }
.wb-header .wb-dots { background: rgba(20, 17, 13, 0.6); padding: 6px 10px; border-radius: 999px; }
.wb-footer { color: #f3ead8; text-shadow: 0 1px 3px #000; }

/* ---------- the big mute button: always on top, always in the same spot ---------- */
.wbg-mute {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0));
  bottom: calc(16px + env(safe-area-inset-bottom, 0));
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 20px 10px 14px;
  border: 3px solid #f2c14e;
  border-radius: 999px;
  background: #1f1a12;
  color: #f3ead8;
  font: 700 1.05rem -apple-system, "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.wbg-mute-icon { font-size: 1.9rem; line-height: 1; }
.wbg-mute[aria-pressed="true"] { border-color: #a8873a; color: #b9ae97; }
.wbg-mute.is-glowing { animation: wbg-glow 1.4s ease-in-out infinite; }
@keyframes wbg-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 193, 78, 0.0), 0 0 14px 2px rgba(242, 193, 78, 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(242, 193, 78, 0.18), 0 0 30px 8px rgba(242, 193, 78, 0.9); }
}
@media (max-width: 520px) {
  .wbg-mute { min-height: 58px; padding: 8px 16px 8px 12px; font-size: 0.95rem; }
}
/* keep the last buttons on a page clear of the mute button */
.wb-footer { padding-bottom: 96px; }

/* ---------- the walkthrough ---------- */
.wbt-shade {
  position: fixed;
  inset: 0;
  z-index: 8990;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.wbt-ring {
  position: fixed;
  z-index: 9000;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: 0 0 0 4px #f2c14e, 0 0 24px 6px rgba(242, 193, 78, 0.7), 0 0 0 9999px rgba(0, 0, 0, 0.5);
  animation: wbt-pulse 1.3s ease-in-out infinite;
  transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease;
}
@keyframes wbt-pulse {
  0%, 100% { box-shadow: 0 0 0 4px #f2c14e, 0 0 18px 4px rgba(242, 193, 78, 0.6), 0 0 0 9999px rgba(0, 0, 0, 0.5); }
  50%      { box-shadow: 0 0 0 6px #ffd978, 0 0 34px 10px rgba(242, 193, 78, 0.95), 0 0 0 9999px rgba(0, 0, 0, 0.5); }
}
.wbt-arrow {
  position: fixed;
  z-index: 9100;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  pointer-events: none;
  animation: wbt-bob 0.9s ease-in-out infinite;
}
.wbt-arrow.is-up { border-bottom: 18px solid #f2c14e; }
.wbt-arrow.is-down { border-top: 18px solid #f2c14e; }
@keyframes wbt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.wbt-bubble {
  position: fixed;
  z-index: 9100;
  padding: 14px 16px;
  border: 2px solid #f2c14e;
  border-radius: 16px;
  background: #1f1a12;
  color: #f3ead8;
  font: 600 1.05rem/1.4 -apple-system, "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.wbt-bubble.is-waiting { opacity: 0.9; }
.wbt-count { color: #f2c14e; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; }
.wbt-btns { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.wbt-btn {
  min-height: 48px;
  padding: 8px 18px;
  border-radius: 12px;
  border: 2px solid #f2c14e;
  font: 700 1rem -apple-system, "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.wbt-btn.is-main { background: #f2c14e; color: #14110d; }
.wbt-btn.is-quiet { background: transparent; color: #f3ead8; border-color: #3a3122; }
/* v0.6.1: the mute button glows on every PC - no reduced-motion opt-out */

/* ---------- v0.6.0: recording + watermark code ---------- */
/* while recording, the mouse cannot reach the YouTube player (no title / buttons pop up) */
.wb-media.is-recording, .wb-media.is-recording iframe { pointer-events: none; }
.wb-watermark-code { display: flex; flex-direction: column; gap: 8px; max-width: 640px; width: 100%; margin: 6px auto 0; }
.wb-watermark-code .wb-chip-row { flex-wrap: nowrap; }
.wb-code-box { flex: 1 1 auto; min-width: 0; min-height: 52px; }
/* v0.7.1: no mouse pointer anywhere in the tab while a clip records */
html.wb-recording, html.wb-recording * { cursor: none !important; }

/* v0.7.2: the YouTube box is always exactly 16:9 - on a short window it gets narrower,
   never wider, so YouTube never pads the picture with black bars */
.wb-media--player { aspect-ratio: 16 / 9; max-height: none; width: min(100%, calc(52dvh * 16 / 9)); margin: 0 auto; }
/* v0.7.2: nothing of the page may sit over the video while it records */
html.wb-recording .wbg-mute { visibility: hidden; }

/* v0.7.2: choose-your-clip - stacked on tall screens, video left + controls right on wide ones */
.wb-clip-grid { display: flex; flex-direction: column; gap: 12px; }
.wb-chooser { display: flex; flex-direction: column; gap: 10px; }
@media (min-aspect-ratio: 3/2) {
  body[data-step="2"] .wb-main { max-width: 1500px; }
  .wb-clip-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
  /* never taller than the window: header + title + margins take about 190 px */
  .wb-clip-grid .wb-media--player { width: min(100%, calc((100dvh - 190px) * 16 / 9)); }
}

/* v0.7.2: the mute button lives in the empty top-right of the header - never over a page button */
.wbg-mute { top: calc(6px + env(safe-area-inset-top, 0)); bottom: auto; min-height: 56px; }
.wb-footer { padding-bottom: 24px; }

/* v0.7.3: the heads-up note on screen 1 */
.wb-heads-up { max-width: 640px; margin: 4px auto 0; font-size: 0.95rem; color: #e8dcc2; }