@font-face { font-family: "OpenVC Deck Hand"; src: url("assets/fonts/caveat-deck-600.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
/* The final deliverable uses the space reserved beside the four-step timeline. */
.ovc-deck .ovc-process__layout { position: relative; margin-top: 68px; }
.ovc-deck .ovc-timeline { isolation: isolate; width: 80%; margin-top: 0; }
.ovc-deck .ovc-timeline > li { --ovc-step-scale: 1; z-index: 0; }
.ovc-deck .ovc-timeline > li:focus-visible { outline: none; }
.ovc-deck .ovc-timeline > li:focus-visible .ovc-step { outline: 2px solid var(--ovc-ink); outline-offset: 4px; }
.ovc-deck .ovc-step { position: relative; z-index: 1; height: 100%; margin-right: 12px; padding: 20px 14px 24px; border-radius: 14px; transform: scale(var(--ovc-step-scale)); transform-origin: center 82px; transition: transform .38s cubic-bezier(.22,1,.36,1), background-color .24s ease, color .24s ease, box-shadow .3s ease; pointer-events: none; }
.ovc-deck .ovc-timeline__dot { margin-bottom: 0; box-shadow: none !important; transition: background-color .24s ease; }
.ovc-deck .ovc-timeline li:not(:last-child)::after { top: 82px; left: 20px; transition: background-color .24s ease; }
.ovc-deck .ovc-step::after { content: ""; position: absolute; top: 82px; left: 0; right: 0; height: 1px; background: var(--ovc-pink); opacity: 0; transition: opacity .24s ease; }
/* Copy starts close to the line and slides down into a fixed, reserved reveal. */
.ovc-deck .ovc-timeline__content { padding-right: 0; transform: translateY(-108px); transition: transform .42s cubic-bezier(.22,1,.36,1); }
.ovc-deck .ovc-step__motion { height: 132px; opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity .18s ease, clip-path .42s cubic-bezier(.22,1,.36,1); }
.ovc-deck .ovc-step__motion canvas, .ovc-deck .ovc-delivery canvas { display: block; width: 100%; height: 100%; }
.ovc-deck .ovc-step--delivery .ovc-timeline__content { transform: none; margin-top: 24px; }
.ovc-deck .ovc-timeline[data-engaged="true"] > li { --ovc-step-scale: .86; color: #73737b; }
.ovc-deck .ovc-timeline[data-engaged="true"] .ovc-timeline__dot,
.ovc-deck .ovc-timeline[data-engaged="true"] > li::after { background: #d7d7dc; }
.ovc-deck .ovc-timeline[data-engaged="true"] > li[data-active="true"] { --ovc-step-scale: 1.18; z-index: 2; color: var(--ovc-ink); }
.ovc-deck .ovc-timeline > li[data-active="true"] .ovc-step { background: #fff; box-shadow: 0 14px 32px #0808080f; }
.ovc-deck .ovc-timeline > li[data-active="true"] .ovc-step::after { opacity: 1; }
.ovc-deck .ovc-timeline > li[data-active="true"] .ovc-timeline__dot { background: var(--ovc-pink); }
.ovc-deck .ovc-timeline > li[data-active="true"] .ovc-step__motion { opacity: 1; clip-path: inset(0); transition-delay: .06s; }
.ovc-deck .ovc-timeline > li[data-active="true"] .ovc-timeline__content { transform: translateY(0); }
.ovc-deck .ovc-timeline > li[data-active="true"] .ovc-timeline__content p { color: var(--ovc-ink); }
.ovc-deck .ovc-delivery { position: absolute; top: 28px; left: calc(80% + 10px); right: -4px; aspect-ratio: 370 / 530; pointer-events: none; }
@media (min-width: 901px) and (max-width: 1199px) {
  .ovc-deck .ovc-step { margin-right: 6px; padding-inline: 8px; }
  .ovc-deck .ovc-timeline .ovc-desktop-break { display: none; }
}
@media (max-width: 900px) {
  .ovc-deck .ovc-process__layout { margin-top: 44px; }
  .ovc-deck .ovc-timeline { width: min(100%, 600px); margin: 0 auto; }
  .ovc-deck .ovc-timeline > li, .ovc-deck .ovc-timeline > li:last-child { padding: 0 0 16px; }
  .ovc-deck .ovc-step { margin: 0; padding: 20px 22px 24px 42px; transform-origin: center 32px; }
  .ovc-deck .ovc-timeline__dot { top: 26px; left: 16px; }
  .ovc-deck .ovc-timeline li:not(:last-child)::after { top: 32px; left: 22px; }
  .ovc-deck .ovc-step::after { top: 32px; left: 22px; right: auto; bottom: -16px; width: 1px; height: auto; }
  .ovc-deck .ovc-timeline > li:last-child .ovc-step::after { display: none; }
  .ovc-deck .ovc-step__motion { height: 120px; max-width: 320px; }
  .ovc-deck .ovc-timeline__content { transform: translateY(-96px); }
  .ovc-deck .ovc-step--delivery .ovc-timeline__content { margin-top: 24px; }
  .ovc-deck .ovc-timeline[data-engaged="true"] > li { --ovc-step-scale: .94; }
  .ovc-deck .ovc-timeline[data-engaged="true"] > li[data-active="true"] { --ovc-step-scale: 1.04; }
  .ovc-deck .ovc-delivery { position: relative; inset: auto; width: min(100%, 300px); margin: 0 auto -32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ovc-deck .ovc-step { transform: none; }
  .ovc-deck .ovc-step, .ovc-deck .ovc-step__motion, .ovc-deck .ovc-timeline__content, .ovc-deck .ovc-delivery { transition: none; }
}

/* Discovery cue stays separate from the selected-card reveal and fixed hit area. */
@media (prefers-reduced-motion: no-preference) {
  .ovc-deck .ovc-timeline[data-engaged="false"] > li[data-nudging="true"] .ovc-step {
    animation: ovc-step-nudge .48s ease-in-out;
  }
}
@keyframes ovc-step-nudge {
  0%, 100% { transform: translateX(0) rotate(0); }
  12%, 36% { transform: translateX(-2px) rotate(-.3deg); }
  24%, 48% { transform: translateX(2px) rotate(.3deg); }
  60% { transform: translateX(-1.5px) rotate(-.2deg); }
  72% { transform: translateX(1.5px) rotate(.2deg); }
  84% { transform: translateX(-.75px) rotate(-.1deg); }
}