/*
 * Journey clips — the three hand-inked scenes on the find page.
 *
 * Spec: docs/Redesign/design_handoff_find_page/Journey Section.dc.html
 *
 * Every clip is 3.8s and every animation starts PAUSED. journey_controller adds
 * .is-playing to the open card's clip and cycles .jclip--reset to restart it
 * from zero. Closed clips stay in the DOM, paused at their first frame, so all
 * three cards keep the same height whatever is open.
 *
 * Timing per docs/Redesign/JOURNEY_CLIPS_TIMING_CHANGES.md. Do not push the
 * duration below ~3.2s: the stops are percentages, so the whole scene
 * compresses proportionally and the stagger tiers collapse into a flicker.
 *
 * The markup carries a data-anim hook rather than an inline animation, so the
 * timing lives here and the ERB stays free of style attributes. One rule per
 * keyframe name — each name has exactly one duration and easing across all three
 * clips, which is what makes that possible.
 */

/* ============================ clip 1: search & tour ============================ */

@keyframes ta1 { 0% { stroke-dashoffset: 1; fill-opacity: 0 } 4.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes ta2 { 0%, 2.5% { stroke-dashoffset: 1; fill-opacity: 0 } 6.7% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes ta3 { 0%, 5% { stroke-dashoffset: 1; fill-opacity: 0 } 9.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes ta4 { 0%, 7.5% { stroke-dashoffset: 1; fill-opacity: 0 } 11.7% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes tmagDraw { 0%, 14% { stroke-dashoffset: 1; fill-opacity: 0 } 18.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes tmag { 0%, 13% { opacity: 0; transform: translate(-28px, -18px) scale(0.72) } 17% { opacity: 1; transform: translate(-22px, -14px) scale(0.86) } 24% { opacity: 1; transform: translate(4px, 3px) scale(1) } 30% { opacity: 1; transform: translate(0, 0) scale(1) } 34% { opacity: 1; transform: translate(0, 0) scale(1) } 38%, 100% { opacity: 0; transform: translate(0, 0) scale(1) } }
@keyframes tclick { 0%, 29% { transform: scale(0.2); opacity: 0 } 33% { transform: scale(1); opacity: 0.85 } 40% { transform: scale(2.2); opacity: 0 } 100% { transform: scale(2.2); opacity: 0 } }
@keyframes tsel { 0%, 30% { opacity: 0 } 34% { opacity: 1 } 44% { opacity: 1 } 48%, 100% { opacity: 0 } }
@keyframes tmailDraw { 0%, 33% { stroke-dashoffset: 1; fill-opacity: 0 } 37.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes tkeyIn { 0%, 90% { opacity: 0; transform: scale(0.3) } 96% { opacity: 1; transform: scale(1.14) } 100% { opacity: 1; transform: scale(1) } }
@keyframes tmail { 0%, 33% { transform: translate(0, 0); opacity: 0 } 37% { transform: translate(5px, -3px); opacity: 1 } 46% { transform: translate(60px, -36px); opacity: 1 } 52%, 100% { transform: translate(110px, -54px); opacity: 0 } }
@keyframes tcarDraw { 0%, 40% { stroke-dashoffset: 1; fill-opacity: 0 } 44.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes tseatOut { 0%, 44% { opacity: 1 } 49%, 100% { opacity: 0 } }
@keyframes twalkDraw { 0%, 44% { stroke-dashoffset: 1; fill-opacity: 0 } 48.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes twalkIn { 0%, 45% { transform: translate(0, 0); opacity: 0 } 48% { opacity: 1 } 58% { transform: translate(126px, 0); opacity: 1 } 61%, 100% { transform: translate(126px, 0); opacity: 0 } }
@keyframes twalkBob { 0%, 46% { transform: translate(0, 0) } 50% { transform: translate(0, -3px) } 54% { transform: translate(0, 0) } 57% { transform: translate(0, -2px) } 60%, 100% { transform: translate(0, 0) } }
@keyframes tdriver { 0%, 58% { opacity: 0 } 63% { opacity: 1 } 82% { opacity: 1 } 87%, 100% { opacity: 0 } }
@keyframes tpan { 0%, 60% { transform: translate(0, 0) } 80% { transform: translate(-240px, 0) } 100% { transform: translate(-240px, 0) } }
@keyframes tcarMove { 0%, 60% { transform: translate(0, 0) } 78% { transform: translate(88px, 0) } 84%, 100% { transform: translate(84px, 0) } }
@keyframes tcarHop { 0%, 60% { transform: translate(0, 0) } 66% { transform: translate(0, -1.5px) } 72% { transform: translate(0, 0.8px) } 78% { transform: translate(0, -1.2px) } 84%, 100% { transform: translate(0, 0) } }
@keyframes tcarOut { 0%, 39% { opacity: 0 } 43% { opacity: 1 } 86% { opacity: 1 } 94%, 100% { opacity: 0 } }
@keyframes th1 { 0%, 52% { stroke-dashoffset: 1; fill-opacity: 0 } 56.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes th2 { 0%, 55% { stroke-dashoffset: 1; fill-opacity: 0 } 59.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes th3 { 0%, 58% { stroke-dashoffset: 1; fill-opacity: 0 } 62.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes tg1 { 0%, 70% { stroke-dashoffset: 1; fill-opacity: 0 } 74.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes tg2 { 0%, 73% { stroke-dashoffset: 1; fill-opacity: 0 } 77.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes tp1 { 0%, 78% { stroke-dashoffset: 1; fill-opacity: 0 } 82.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes tout { 0%, 84% { transform: translate(-14px, 0); opacity: 0 } 88% { opacity: 1 } 94% { transform: translate(0, 0); opacity: 1 } 100% { transform: translate(0, 0); opacity: 1 } }
@keyframes tbob { 0%, 88% { transform: translate(0, 0) } 93% { transform: translate(0, -3px) } 98%, 100% { transform: translate(0, 0) } }
@keyframes twave { 0%, 90% { transform: rotate(0deg) } 95% { transform: rotate(-17deg) } 98% { transform: rotate(3deg) } 100% { transform: rotate(-9deg) } }

/* ========================= clip 2: finance & insure ========================= */

@keyframes ma1 { 0% { stroke-dashoffset: 1; fill-opacity: 0 } 6.1% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes ma2 { 0%, 2.6% { stroke-dashoffset: 1; fill-opacity: 0 } 8.8% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes ma3 { 0%, 5.3% { stroke-dashoffset: 1; fill-opacity: 0 } 11.4% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes ma4 { 0%, 7.9% { stroke-dashoffset: 1; fill-opacity: 0 } 14.1% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes mtalk { 0%, 16.9% { transform: rotate(0deg) } 22.2% { transform: rotate(-7deg) } 27.5% { transform: rotate(2deg) } 31.7%, 100% { transform: rotate(-3deg) } }
@keyframes mtalk2 { 0%, 19% { transform: rotate(0deg) } 24.3% { transform: rotate(6deg) } 29.6%, 100% { transform: rotate(1deg) } }
@keyframes mpan { 0%, 29.6% { transform: translate(0, 0) } 52.9% { transform: translate(-240px, 0) } 100% { transform: translate(-240px, 0) } }
@keyframes mlock1 { 0%, 33.8% { stroke-dashoffset: 1; fill-opacity: 0 } 40% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes mlock2 { 0%, 37% { stroke-dashoffset: 1; fill-opacity: 0 } 43.1% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes mlock3 { 0%, 40.2% { stroke-dashoffset: 1; fill-opacity: 0 } 46.3% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes mkeyIn { 0%, 48.6% { transform: translate(-130px, 30px); opacity: 0 } 53.9% { opacity: 1 } 67.7% { transform: translate(0, 0); opacity: 1 } 100% { transform: translate(0, 0); opacity: 1 } }
@keyframes mkeyTurn { 0%, 69.8% { transform: rotate(-90deg) } 80.4% { transform: rotate(-56deg) } 100% { transform: rotate(-58deg) } }
@keyframes mshackle { 0%, 78.2% { transform: translate(0, 0) rotate(0deg) } 88.8% { transform: translate(0, -6px) rotate(-26deg) } 100% { transform: translate(0, -6px) rotate(-24deg) } }
@keyframes mcard1 { 0%, 84.6% { stroke-dashoffset: 1; fill-opacity: 0; opacity: 0 } 90.7% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1 } }
@keyframes mcard2 { 0%, 89.9% { stroke-dashoffset: 1; fill-opacity: 0; opacity: 0 } 96% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1 } }

/* ========================== clip 3: close & move in ========================== */

@keyframes ng1 { 0% { stroke-dashoffset: 1; fill-opacity: 0 } 6% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes nv1 { 0%, 2.1% { stroke-dashoffset: 1; fill-opacity: 0 } 8.1% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes nv2 { 0%, 4.7% { stroke-dashoffset: 1; fill-opacity: 0 } 10.7% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes nvan { 0% { transform: translate(-150px, 0) } 31.3% { transform: translate(6px, 0) } 37.5%, 100% { transform: translate(0, 0) } }
@keyframes nvanHop { 0% { transform: translate(0, 0) } 12.5% { transform: translate(0, -1.5px) } 22.9% { transform: translate(0, 0.8px) } 31.3% { transform: translate(0, -1.2px) } 39.6%, 100% { transform: translate(0, 0) } }
@keyframes nh1 { 0%, 27.1% { stroke-dashoffset: 1; fill-opacity: 0 } 33.1% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes nh2 { 0%, 30.2% { stroke-dashoffset: 1; fill-opacity: 0 } 36.3% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes nh3 { 0%, 33.3% { stroke-dashoffset: 1; fill-opacity: 0 } 39.4% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes na1 { 0%, 47.9% { stroke-dashoffset: 1; fill-opacity: 0 } 54% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes na2 { 0%, 51% { stroke-dashoffset: 1; fill-opacity: 0 } 57.1% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes nb1 { 0%, 54.2% { stroke-dashoffset: 1; fill-opacity: 0 } 60.2% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes nb2 { 0%, 57.3% { stroke-dashoffset: 1; fill-opacity: 0 } 63.3% { stroke-dashoffset: 0; fill-opacity: 1 } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes nreach { 0%, 64.6% { transform: rotate(0deg) } 75% { transform: rotate(-12deg) } 85.4%, 100% { transform: rotate(-9deg) } }
@keyframes ndoorDark { 0%, 87.5% { opacity: 0 } 95.8%, 100% { opacity: 1 } }
@keyframes ndoorSwing { 0%, 87.5% { transform: scaleX(1) } 97.9%, 100% { transform: scaleX(0.2) } }
@keyframes nkeyPass { 0%, 68.8% { transform: translate(14px, 2px) scale(1); opacity: 0 } 75% { transform: translate(10px, 1px) scale(1); opacity: 1 } 87.5% { transform: translate(-6px, 0) scale(1); opacity: 1 } 97.9%, 100% { transform: translate(-6px, -1px) scale(1.15); opacity: 1 } }
@keyframes nbob { 0%, 87.5% { transform: translate(0, 0) } 93.8% { transform: translate(0, -2.5px) } 100% { transform: translate(0, 0) } }

/* The hand-drawn wobble, shared by all three. */
@keyframes boil { 0% { transform: translate(0, 0) } 25% { transform: translate(0.5px, -0.4px) } 50% { transform: translate(-0.4px, 0.3px) } 75% { transform: translate(0.3px, 0.5px) } 100% { transform: translate(0, 0) } }

/* ============================== binding ==============================
   The play-state rules are class-scoped, so they outrank the shorthand below
   whatever the source order — the shorthand would otherwise reset the clip to
   running the moment it is declared. */

.jclip {
  display: block;
  width: 100%;
  max-width: 288px;
  height: 170px;
  overflow: hidden;
}

/* Normalised dash length, so one keyframe set draws paths of any length.
   Declared here as well as in ink_graphics.css so the find page can load this
   file on its own without pulling in the other pages' keyframes. */
.jclip .ink-draw {
  stroke-dasharray: 1;
}

.jclip [data-anim],
.jclip .jclip-boil {
  animation-play-state: paused;
}

.jclip.is-playing [data-anim],
.jclip.is-playing .jclip-boil {
  animation-play-state: running;
}

/* Restart hook. journey_controller adds this for a single frame, which drops
   every running animation; taking it off starts them again from zero.
   Pausing alone cannot do this — a re-opened card would resume from its
   finished frame — and the animations below are bound straight onto
   [data-anim], so there is no existing class to cycle. */
.jclip.jclip--reset [data-anim],
.jclip.jclip--reset .jclip-boil {
  animation: none;
}

.jclip-boil {
  animation: boil 0.42s steps(1) infinite;
}

/* ---- clip 1 ---- */
[data-anim="ta1"] { animation: ta1 3.8s ease-out 1 both }
[data-anim="ta2"] { animation: ta2 3.8s ease-out 1 both }
[data-anim="ta3"] { animation: ta3 3.8s ease-out 1 both }
[data-anim="ta4"] { animation: ta4 3.8s ease-out 1 both }
[data-anim="tmagDraw"] { animation: tmagDraw 3.8s ease-out 1 both }
[data-anim="tmag"] { animation: tmag 3.8s cubic-bezier(0.3, 0.7, 0.3, 1) 1 both }
[data-anim="tclick"] { animation: tclick 3.8s ease-out 1 both }
[data-anim="tsel"] { animation: tsel 3.8s ease-out 1 both }
[data-anim="tmailDraw"] { animation: tmailDraw 3.8s ease-out 1 both }
[data-anim="tmail"] { animation: tmail 3.8s cubic-bezier(0.4, 0, 0.3, 1) 1 both }
[data-anim="tkeyIn"] { animation: tkeyIn 3.8s cubic-bezier(0.34, 1.5, 0.64, 1) 1 both }
[data-anim="tcarDraw"] { animation: tcarDraw 3.8s ease-out 1 both }
[data-anim="tseatOut"] { animation: tseatOut 3.8s ease-out 1 both }
[data-anim="twalkDraw"] { animation: twalkDraw 3.8s ease-out 1 both }
[data-anim="twalkIn"] { animation: twalkIn 3.8s cubic-bezier(0.4, 0, 0.4, 1) 1 both }
[data-anim="twalkBob"] { animation: twalkBob 3.8s ease-in-out 1 both }
[data-anim="tdriver"] { animation: tdriver 3.8s ease-out 1 both }
[data-anim="tpan"] { animation: tpan 3.8s cubic-bezier(0.5, 0, 0.2, 1) 1 both }
[data-anim="tcarMove"] { animation: tcarMove 3.8s cubic-bezier(0.42, 0, 0.25, 1) 1 both }
[data-anim="tcarHop"] { animation: tcarHop 3.8s ease-in-out 1 both }
[data-anim="tcarOut"] { animation: tcarOut 3.8s ease-out 1 both }
[data-anim="th1"] { animation: th1 3.8s ease-out 1 both }
[data-anim="th2"] { animation: th2 3.8s ease-out 1 both }
[data-anim="th3"] { animation: th3 3.8s ease-out 1 both }
[data-anim="tg1"] { animation: tg1 3.8s ease-out 1 both }
[data-anim="tg2"] { animation: tg2 3.8s ease-out 1 both }
[data-anim="tp1"] { animation: tp1 3.8s ease-out 1 both }
[data-anim="tout"] { animation: tout 3.8s cubic-bezier(0.3, 0.7, 0.3, 1) 1 both }
[data-anim="tbob"] { animation: tbob 3.8s ease-in-out 1 both }
[data-anim="twave"] { animation: twave 3.8s ease-in-out 1 both }

/* ---- clip 2 ---- */
[data-anim="ma1"] { animation: ma1 3.8s ease-out 1 both }
[data-anim="ma2"] { animation: ma2 3.8s ease-out 1 both }
[data-anim="ma3"] { animation: ma3 3.8s ease-out 1 both }
[data-anim="ma4"] { animation: ma4 3.8s ease-out 1 both }
[data-anim="mtalk"] { animation: mtalk 3.8s ease-in-out 1 both }
[data-anim="mtalk2"] { animation: mtalk2 3.8s ease-in-out 1 both }
[data-anim="mpan"] { animation: mpan 3.8s cubic-bezier(0.5, 0, 0.2, 1) 1 both }
[data-anim="mlock1"] { animation: mlock1 3.8s ease-out 1 both }
[data-anim="mlock2"] { animation: mlock2 3.8s ease-out 1 both }
[data-anim="mlock3"] { animation: mlock3 3.8s ease-out 1 both }
[data-anim="mkeyIn"] { animation: mkeyIn 3.8s cubic-bezier(0.4, 0, 0.3, 1) 1 both }
[data-anim="mkeyTurn"] { animation: mkeyTurn 3.8s cubic-bezier(0.34, 1.4, 0.64, 1) 1 both }
[data-anim="mshackle"] { animation: mshackle 3.8s cubic-bezier(0.34, 1.4, 0.64, 1) 1 both }
[data-anim="mcard1"] { animation: mcard1 3.8s ease-out 1 both }
[data-anim="mcard2"] { animation: mcard2 3.8s ease-out 1 both }

/* ---- clip 3 ---- */
[data-anim="ng1"] { animation: ng1 3.8s ease-out 1 both }
[data-anim="nv1"] { animation: nv1 3.8s ease-out 1 both }
[data-anim="nv2"] { animation: nv2 3.8s ease-out 1 both }
[data-anim="nvan"] { animation: nvan 3.8s cubic-bezier(0.42, 0, 0.25, 1) 1 both }
[data-anim="nvanHop"] { animation: nvanHop 3.8s ease-in-out 1 both }
[data-anim="nh1"] { animation: nh1 3.8s ease-out 1 both }
[data-anim="nh2"] { animation: nh2 3.8s ease-out 1 both }
[data-anim="nh3"] { animation: nh3 3.8s ease-out 1 both }
[data-anim="na1"] { animation: na1 3.8s ease-out 1 both }
[data-anim="na2"] { animation: na2 3.8s ease-out 1 both }
[data-anim="nb1"] { animation: nb1 3.8s ease-out 1 both }
[data-anim="nb2"] { animation: nb2 3.8s ease-out 1 both }
[data-anim="nreach"] { animation: nreach 3.8s cubic-bezier(0.3, 0.7, 0.3, 1) 1 both }
[data-anim="ndoorDark"] { animation: ndoorDark 3.8s ease-out 1 both }
[data-anim="ndoorSwing"] { animation: ndoorSwing 3.8s cubic-bezier(0.3, 0.7, 0.3, 1) 1 both }
[data-anim="nkeyPass"] { animation: nkeyPass 3.8s cubic-bezier(0.3, 0.7, 0.3, 1) 1 both }
[data-anim="nbob"] { animation: nbob 3.8s ease-in-out 1 both }

/* ---- pivots ----
   Geometry, so per element rather than per keyframe. Values are in the
   coordinate system each group already sits in, exactly as the prototype had
   them; do not add transform-box here or they all move. */

.jclip--tour .jclip-wave { transform-origin: 12px -38px }
.jclip--tour .jclip-keyin { transform-origin: 19px -62px }
.jclip--tour [data-anim="tclick"] { transform-origin: 126px 88px }

.jclip--finance .jclip-talk,
.jclip--finance .jclip-talk2 { transform-origin: 12px -36px }
.jclip--finance .jclip-shackle { transform-origin: 300px 60px }
.jclip--finance .jclip-keyturn { transform-origin: 286px 80px }

.jclip--close .jclip-reach { transform-origin: 12px -36px }
.jclip--close .jclip-reach--agent { transform-origin: 13px -38px }
.jclip--close .jclip-door { transform-origin: 136px 126px }
.jclip--close .jclip-keypass { transform-origin: 128px 78px }

/* ============================ reduced motion ============================
   Freeze the clips at their finished state rather than replaying them. The
   drawing is the point; the motion is the flourish. */

@media (prefers-reduced-motion: reduce) {
  .jclip *,
  .jclip.is-playing * {
    animation: none !important;
  }

  /* Transients that read as debris once frozen. */
  .jclip [data-anim="tmag"],
  .jclip [data-anim="tclick"],
  .jclip [data-anim="tsel"],
  .jclip [data-anim="tmail"],
  .jclip [data-anim="twalkIn"],
  .jclip [data-anim="tcarOut"] {
    opacity: 0;
  }
}