/* revori.ai/bob: the book-value page. Loaded after index-order-demo.css. */

/* Hero: the headline arrives word by word, so the heading block itself stays put (no second fade/slide). */
#hero .hero-display.hero-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Pilot timeline: the line draws to each month's dot and pauses while that month appears, then a marker
   moves along the line and holds on each month. Stops are measured by assets/timeline.js. */
#timeline { padding: clamp(64px, 7vw, 96px) 0; }
.tl-head h2 { font-family: var(--sans); font-optical-sizing: auto; font-weight: 620; font-size: clamp(24px, 2.7vw, 34px); color: var(--text); letter-spacing: -0.015em; line-height: 1.18; margin: 0 0 clamp(36px, 4.5vw, 56px); }
.tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.2vw, 44px); position: relative; }
.tl::before, .tl::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; }
.tl::before { background: var(--border); }
.tl::after { background: var(--accent); transform-origin: left center; }
.tl-step { position: relative; padding-top: 34px; }
.tl-dot { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); z-index: 1; }
.tl-when { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.tl-t { font-family: var(--sans); font-size: 20px; font-weight: 650; line-height: 1.25; color: var(--text); margin: 0 0 8px; }
.tl-b { font-family: var(--sans); font-size: 15.5px; line-height: 1.62; color: var(--text-secondary); margin: 0; max-width: 34ch; }

.tl-step:nth-child(1) { --at: .2s; }
.tl-step:nth-child(2) { --at: 1.73s; }
.tl-step:nth-child(3) { --at: 3.44s; }
.tl.tl-armed::after { transform: scaleX(0); }
.tl.tl-armed .tl-step { opacity: 0; transform: translateY(32px); }
.tl.tl-armed .tl-dot { transform: scale(0); }
.tl.tl-armed.tl-in::after { animation: tl-draw 4.5s ease-in-out .2s both; }
.tl.tl-armed.tl-in .tl-step { opacity: 1; transform: none; transition: opacity .7s ease var(--at), transform .9s cubic-bezier(.16, 1, .3, 1) var(--at); }
.tl.tl-armed.tl-in .tl-dot { transform: scale(1); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) var(--at); }
@keyframes tl-draw {
  0%   { transform: scaleX(0); }
  12%  { transform: scaleX(var(--f0, 0)); }
  34%  { transform: scaleX(var(--f1, .34)); }
  50%  { transform: scaleX(var(--f1, .34)); }
  72%  { transform: scaleX(var(--f2, .67)); }
  88%  { transform: scaleX(var(--f2, .67)); }
  100% { transform: scaleX(1); }
}

/* The site removes box-shadows, so the marker's ring is a border. */
.tl-runner { position: absolute; left: 0; top: 0; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 4px solid var(--accent); opacity: 0; z-index: 2; pointer-events: none; transform: translate(var(--x0, 0px), var(--y0, 0px)); }
.tl.tl-in .tl-runner { animation: tl-stops 7.5s cubic-bezier(.65, 0, .35, 1) 5.2s infinite; }
@keyframes tl-stops {
  0%   { transform: translate(var(--x0), var(--y0)) scale(.6); opacity: 0; }
  5%   { transform: translate(var(--x0), var(--y0)) scale(1.35); opacity: 1; }
  22%  { transform: translate(var(--x0), var(--y0)) scale(1.35); opacity: 1; }
  34%  { transform: translate(var(--x1), var(--y1)) scale(1.35); }
  54%  { transform: translate(var(--x1), var(--y1)) scale(1.35); }
  66%  { transform: translate(var(--x2), var(--y2)) scale(1.35); opacity: 1; }
  90%  { transform: translate(var(--x2), var(--y2)) scale(1.35); opacity: 1; }
  100% { transform: translate(var(--x2), var(--y2)) scale(.6); opacity: 0; }
}

/* Phones: the line runs down the left edge and the months stack. */
@media (max-width: 760px) {
  .tl { grid-template-columns: 1fr; gap: 34px; padding-left: 34px; }
  .tl::before, .tl::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .tl::after { transform-origin: center top; }
  .tl.tl-armed::after { transform: scaleY(0); }
  .tl.tl-armed.tl-in::after { animation-name: tl-draw-down; }
  .tl-step { padding-top: 0; }
  .tl-dot { left: -34px; top: 2px; }
  @keyframes tl-draw-down {
    0%   { transform: scaleY(0); }
    12%  { transform: scaleY(var(--f0, 0)); }
    34%  { transform: scaleY(var(--f1, .34)); }
    50%  { transform: scaleY(var(--f1, .34)); }
    72%  { transform: scaleY(var(--f2, .67)); }
    88%  { transform: scaleY(var(--f2, .67)); }
    100% { transform: scaleY(1); }
  }
}