/* randwod-website/css/hero-wod.css — hero gesture slot styles */

/* gaps between words in the scaled reel row */
.reel-gap { width: calc(var(--cw) * 0.55); flex: none; }

/* dim scrim behind the card */
.wod-deck-scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.6);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.wod-deck-scrim.show { opacity: 1; pointer-events: auto; }

/* centered preview card — parity with iOS WODCardContent.swift */
.wod-card-mount {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  pointer-events: none;
}
.wod-card-mount.show { pointer-events: auto; }
.wod-card {
  width: 430px; max-width: 92vw; height: min(70vh, 520px);
  background: #1A1A1A; /* mirrors iOS WODCardContent black1A — intentionally lighter than --bg2 for card depth */ border-radius: 32px; border: 2px solid #000;
  box-shadow: 0 30px 80px -20px #000; display: flex; flex-direction: column;
  overflow: hidden; opacity: 0; transform: scale(0.96) translateY(10px);
}
.wod-card.in { opacity: 1; transform: none; transition: opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
.wod-card-top { display: flex; align-items: center; gap: 12px; padding: 20px 22px 0; }
.wod-pill {
  display: inline-flex; align-items: center; background: var(--orange); color: #fff;
  padding: 8px 14px; border-radius: 100px; font-size: 14px; font-weight: 500;
}
.wod-card-spacer { flex: 1; }
.wod-card-x {
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: rgba(242,240,235,.08); color: var(--text-60); font-size: 13px;
  font-weight: 700; cursor: pointer;
}
.wod-card-title { font-size: 46px; font-weight: 700; color: var(--text); line-height: 1; padding: 16px 22px 0; letter-spacing: -.02em; }
.wod-card-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px 22px 0; font-size: 14px; color: var(--text-40); }
.wod-tag { font-family: var(--mono); font-size: 11px; border: 1px solid #2a2a2a; border-radius: 5px; padding: 2px 7px; color: var(--text-60); }
.wod-card-steps { flex: 1; overflow: auto; padding: 18px 22px 8px; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
.wod-step { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.wod-reps { font-size: 24px; font-weight: 700; color: var(--text); white-space: nowrap; }
/* 400, not 300: Space Grotesk 300 isn't in the font request, so 300 was
   silently rendering as synthesized/400 anyway — this pins what ships. */
.wod-mv { font-size: 24px; font-weight: 400; color: var(--text-60); }
.wod-card-bar { display: flex; gap: 10px; padding: 14px 18px 18px; }
.wod-btn { flex: 1; text-align: center; padding: 14px; border-radius: 14px; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; border: none; }
.wod-btn-ghost { background: transparent; border: 1px solid #333; color: var(--text); }
.wod-btn-o { background: var(--orange); color: #fff; }

/* deal button is now the shared .btn-g ghost tab (style.css §05) */
.deal-note { margin-top: 14px; font-family: var(--mono); font-size: 11px; color: var(--text-25); }

/* corner camera PiP */
.gesture-pip {
  position: fixed; right: 18px; bottom: 18px; z-index: 45;
  width: 160px; height: 120px; border: 1px solid var(--blue); border-radius: 10px;
  overflow: hidden; background: #0a0f12; box-shadow: 0 10px 30px -10px #000;
}
.gesture-pip video, .gesture-pip canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gesture-pip video { transform: scaleX(-1); object-fit: cover; } /* mirror for natural feel */
.pip-dot { position: absolute; top: 7px; left: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

/* PiP instruction overlay — a tinted hint that tells the user what gesture to make.
   Semi-transparent so the live feed + landmark dots still show through. Hidden until
   the deck calls show; data-mode switches the animation + caption. */
.pip-hint {
  position: absolute; inset: 0; z-index: 2; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(8, 15, 18, 0.5); pointer-events: none; text-align: center;
}
.pip-hint.show { display: flex; }
.pip-hint-hands { position: relative; width: 38px; height: 40px; }
.pip-hint-hands span { position: absolute; inset: 0; font-size: 32px; line-height: 40px; }
.pip-hint-text::after { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--text); text-transform: uppercase; }
.pip-hint[data-mode="start"] .pip-hint-text::after { content: "Open palm to start"; }
.pip-hint[data-mode="stop"]  .pip-hint-text::after { content: "Make a fist to stop"; }
/* crossfade the two hands to imply the motion; direction flips with the mode */
@keyframes pip-hand-lead { 0%, 35% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes pip-hand-follow { 0%, 35% { opacity: 0; } 65%, 100% { opacity: 1; } }
.pip-hint[data-mode="start"] .h-fist { animation: pip-hand-lead 1.8s ease-in-out infinite; }
.pip-hint[data-mode="start"] .h-palm { animation: pip-hand-follow 1.8s ease-in-out infinite; }
.pip-hint[data-mode="stop"]  .h-palm { animation: pip-hand-lead 1.8s ease-in-out infinite; }
.pip-hint[data-mode="stop"]  .h-fist { animation: pip-hand-follow 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pip-hint-hands span { animation: none !important; }
  .pip-hint[data-mode="start"] .h-fist, .pip-hint[data-mode="stop"] .h-palm { opacity: 0; }
  .pip-hint[data-mode="start"] .h-palm, .pip-hint[data-mode="stop"] .h-fist { opacity: 1; }
}