/* Webby conversion-first motion — additive. Content visible by default; JS adds play classes. v=webby2 */

/* --- CTA soft attention (scale/glow; opacity !important on #submit-btn blocks opacity pulse) --- */
@keyframes fw-cta-pulse {
  0%, 100% { transform: scale(1); box-shadow: none; }
  45% { transform: scale(1.02); box-shadow: 0 0 0 2px rgba(243, 234, 211, 0.55), 0 0 0 4px rgba(154, 31, 28, 0.28); }
  100% { transform: scale(1); box-shadow: none; }
}
#submit-btn.fw-cta-pulse {
  animation: fw-cta-pulse 1.2s ease-in-out 1;
  transform-origin: center center;
}

/* --- Board header watching-dot: one slow breath after cascade --- */
.board .btop .watching-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--cream, #f7f1e4);
  box-shadow: 0 0 0 1px rgba(154, 31, 28, 0.55);
  opacity: 0.55;
  transform: scale(1);
}
@keyframes fw-watch-breath {
  0%, 100% { opacity: 0.45; transform: scale(1); background: var(--cream, #f7f1e4); }
  50% { opacity: 1; transform: scale(1.15); background: var(--press, #9a1f1c); }
}
.board .btop .watching-dot.is-breath {
  animation: fw-watch-breath 2.4s ease-in-out 1;
}

/* --- Caption "watching" one tick (no digit re-run) --- */
@keyframes fw-cap-tick {
  0%, 100% { opacity: 1; letter-spacing: inherit; }
  40% { opacity: 0.55; }
  70% { opacity: 1; }
}
.board .cap.fw-cap-tick b {
  animation: fw-cap-tick 0.7s ease-in-out 1;
  color: #d2c6ae;
}

/* --- How steps: fade-up + ink rule on enter (JS adds .fw-in). Visible without class. --- */
@keyframes fw-fade-up {
  from { opacity: 0.01; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fw-ink-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
ol.steps li {
  position: relative;
}
ol.steps li.fw-in {
  animation: fw-fade-up 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
ol.steps li.fw-in::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ink, #161412);
  transform-origin: left center;
  animation: fw-ink-draw 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  pointer-events: none;
}
@media (min-width: 881px) {
  ol.steps li.fw-in::after { display: none; }
  ol.steps li.fw-in {
    box-shadow: inset 0 -2px 0 0 transparent;
  }
  ol.steps.fw-steps-played {
    border-bottom-color: var(--ink, #161412);
  }
}

/* Real Savings fade-in on enter — visible by default */
@keyframes fw-fade-in {
  from { opacity: 0.01; }
  to { opacity: 1; }
}
#testimonial.fw-in .paper-sheet,
#testimonial h2.fw-in,
#testimonial.fw-in {
  animation: fw-fade-in 0.6s ease both;
}

/* --- Trip deck peek + shadow lift (extend; no-op if #deck absent) --- */
#deck.scroller,
.deck .scroller,
#deck {
  scroll-padding-inline: 8px;
}
.scroller {
  padding-right: 14px;
  grid-auto-columns: minmax(250px, min(310px, calc(100% - 12px)));
}
.watch-card {
  box-shadow: 7px 8px 0 rgba(22, 20, 18, 0.06);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.watch-card.is-in {
  transform: translateY(-5px);
  box-shadow: 8px 12px 0 rgba(22, 20, 18, 0.1), 0 10px 22px rgba(22, 20, 18, 0.08);
}
@keyframes fw-deck-nudge {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-8px); }
  70% { transform: translateX(0); }
}
.scroller.fw-nudge,
#deck.fw-nudge {
  animation: fw-deck-nudge 0.7s ease 1;
}

@media (prefers-reduced-motion: reduce) {
  #submit-btn.fw-cta-pulse,
  .board .btop .watching-dot.is-breath,
  .board .cap.fw-cap-tick b,
  ol.steps li.fw-in,
  ol.steps li.fw-in::after,
  #testimonial.fw-in,
  #testimonial.fw-in .paper-sheet,
  .scroller.fw-nudge,
  #deck.fw-nudge {
    animation: none !important;
  }
  .watch-card.is-in { transform: none; }
}