/* home-phone.css: the hero phone, its chat film and the story bar under it (landing-v3). Linked in
   the body just before the phone, after home-chat.css (the shared chat pieces), so it never holds
   up the hero words. The markup is the finished frame and every rule here draws it; home-hero.js
   plays the film by setting `hidden` and a few state classes on elements that are already there.
   Before it takes over (.is-live), .hp-motion draws the first frame: your question in the chat.
   Every color is a token or a mix of tokens. Scoped to .ph-zoom: these short class names belong
   to the phone. */
.ph-zoom [hidden] { display: none !important; }
.ph-wrap { position: relative; }
.ph-wrap::before { content: ""; position: absolute; inset: -70px -100px; background: radial-gradient(closest-side, color-mix(in srgb, var(--mint) 28%, transparent), transparent); pointer-events: none; }

/* The frame: a 390 x 844 app screen, drawn at 340 wide inside the bezel. */
.ph { position: relative; padding: 8px; border-radius: 56px; background: linear-gradient(155deg, color-mix(in srgb, var(--ink) 75%, var(--surface)) 0%, var(--ink-deep) 34%, var(--ink-deep) 70%, color-mix(in srgb, var(--ink) 85%, var(--surface)) 100%); box-shadow: inset 0 0 0 1.5px var(--glass12), inset 0 2px 1px var(--glass6), 0 60px 120px -30px color-mix(in srgb, var(--ink-deep) 75%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--ink-deep) 65%, transparent); }
.ph::before, .ph::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: var(--ink); }
.ph::before { left: -2px; top: 168px; height: 62px; }
.ph::after { right: -2px; top: 216px; height: 96px; }
.ph-scr { position: relative; width: 340px; height: 434px; border-radius: 48px; overflow: hidden; background: var(--canvas); isolation: isolate; }
.ph-app { position: relative; width: 390px; height: 498px; zoom: 0.871795; display: flex; flex-direction: column; color: var(--ink); line-height: normal; }
.ph-isl { position: absolute; top: 11px; left: 50%; width: 122px; height: 36px; margin-left: -61px; border-radius: 18px; background: var(--ink-deep); z-index: 20; }
.ph .ah { flex: 0 0 auto; position: relative; z-index: 2; height: 108px; padding: 56px 16px 0; display: flex; align-items: center; gap: 11px; background: var(--canvas); border-bottom: 1px solid var(--line); }
.ph .at { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 16px 6px; -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--ink) 24px); mask-image: linear-gradient(180deg, transparent 0, var(--ink) 24px); }
.ph .who-gap { margin-top: 12px; }
/* With home-hero.js the thread is top-aligned and moved up by transform (no layout shift). */
.ph-zoom.is-follow .at { justify-content: flex-start; }
.ph-zoom.is-follow .at-g { flex: 0 0 auto; }

/* Cura's assistant: the nausea check-in card. */
.ph .wc { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; padding: 17px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.ph .wc-top { display: flex; flex-direction: column; gap: 12px; }
.ph .wc-h { display: flex; align-items: center; gap: 9px; }
.ph .wc-nr { line-height: 18px; }
.ph .wc-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ph .wc-time { font-size: 11.5px; color: var(--capApp); }
.ph .cap8 { font-size: 8.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--capApp); }
.ph .wc-open { font-size: 15px; line-height: 22px; color: var(--ink); }
.ph .wc-intro { font-size: 13.5px; line-height: 20px; color: var(--body); }
/* The intro and the running summary share one slot, so the questions below never move when one
   replaces the other; while the film runs the hidden ones keep their room. */
.ph .wc-slot { display: grid; }
.ph .wc-slot > * { grid-area: 1 / 1; }
.ph-zoom.is-follow .wc-slot > [hidden] { display: flex !important; flex-direction: column; visibility: hidden; }
.ph-zoom.is-follow .qp-back[hidden] { display: flex !important; visibility: hidden; }
.ph .bcw { display: flex; flex-direction: column; gap: 10px; }
.ph .bc { padding: 2px; border-radius: 8px; font-size: 13px; line-height: 19px; color: var(--body); }
.ph .hr { height: 1px; background: var(--line); }
.ph .qb { display: flex; flex-direction: column; gap: 12px; }
.ph .qp { --qn: 4; display: flex; align-items: center; gap: 8px; height: 16px; }
.ph .qp-back { display: flex; align-items: center; gap: 1px; font-size: 11px; font-weight: 500; color: var(--capApp); }
.ph .qp-tr { flex: 1; height: 3px; border-radius: 2px; background: var(--emberFill); overflow: hidden; }
.ph .qp-fi { width: calc(var(--qn) * 20%); height: 3px; border-radius: 2px; background: var(--ember); transition: width 460ms cubic-bezier(0.2, 0.75, 0.25, 1); }
.ph .qp-n { font-size: 11px; font-weight: 500; color: var(--capApp); }
.ph .qin { display: flex; flex-direction: column; gap: 12px; }
.ph .qt { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); }
.ph .qw { margin-top: -9px; font-size: 12.5px; line-height: 18px; color: var(--body); }
.ph .chips { display: flex; flex-wrap: wrap; column-gap: 9px; }
.ph .chip-t { min-height: 44px; display: flex; align-items: center; }
.ph .chip { display: inline-flex; align-items: center; padding: 8px 13px; border-radius: var(--pill); background: var(--white); border: 1px solid color-mix(in srgb, var(--pdark) 18%, transparent); font-size: 13px; line-height: 17px; font-weight: 600; color: var(--ink); }
.ph .chip.sel { background: var(--ink); border-color: var(--ink); color: var(--white); }
.ph .opts { display: flex; flex-direction: column; gap: 12px; }
.ph .opt { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 15px; background: var(--white); border: 1.5px solid var(--surface-mid); border-radius: 16px; }
.ph .opt p { flex: 1; margin-right: 8px; font-size: 15.5px; line-height: 19px; font-weight: 700; color: var(--ink); }
.ph .opt.sel { background: var(--curaSurface); border-color: var(--ink); }
.ph .cb { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid var(--surface-high); color: var(--ink); transition: background-color 160ms ease, border-color 160ms ease; }
.ph .cb .ic { opacity: 0; transform: scale(0.5); transition: opacity 160ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.ph .cb.on { background: var(--ember); border-color: var(--ember); }
.ph .cb.on .ic { opacity: 1; transform: none; }
.ph .rd { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 10px; border: 1.5px solid var(--surface-high); }
.ph .rd i { width: 10px; height: 10px; border-radius: 5px; background: var(--ember); transform: scale(0); transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.ph .rd.on { border-color: var(--ember); }
.ph .rd.on i { transform: scale(1); }
.ph .next { padding: 15px 0; border-radius: 16px; background: var(--ember); text-align: center; font-size: 15px; line-height: 17px; font-weight: 700; color: var(--ink); }

/* The result, then the handoff from the assistant to Cura through the little door. */
.ph .res { display: flex; flex-direction: column; gap: 14px; }
.ph .rb { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink); }
.ph .tcd { display: flex; flex-direction: column; gap: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; }
.ph .tcd-g { font-size: 18px; line-height: 24px; font-weight: 650; color: var(--ink); }
.ph .tcd-eb { margin-top: -6px; font-size: 8.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--success); }
.ph .tcd-dc { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--primary); }
.ph .tcd-so { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.ph .tcd-so .cap8 { margin-bottom: 3px; }
.ph .tcd-li { display: flex; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink); }
.ph .tcd-li::before { content: ""; flex: 0 0 auto; width: 4px; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--capApp); }
.ph .ho { position: relative; }
.ph .st { position: relative; height: 84px; margin-left: 33px; border-left: 1px solid var(--line); transition: height 320ms cubic-bezier(0.33, 1, 0.68, 1) 220ms; }
.ph .st.col { height: 43px; }
.ph .st-note { position: absolute; top: 12px; left: 13px; right: 66px; font-size: 13px; line-height: 19px; color: var(--capApp); }
.ph .st.col .st-note { right: 14px; }
.ph .door { position: absolute; top: 12px; right: 14px; z-index: 2; width: 40px; height: 60px; transition: opacity 200ms ease; }
.ph .st.col .door { opacity: 0; }
.ph .door-f { position: absolute; inset: 0; overflow: hidden; background: var(--pdark); border: 2px solid var(--sage); border-radius: 20px 20px 3px 3px; }
.ph .door-p { position: absolute; inset: 0; background: var(--chat); border-radius: 18px 18px 0 0; transform-origin: 0 50%; transform: perspective(220px) rotateY(0deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 280ms cubic-bezier(0.33, 1, 0.68, 1); }
.ph .door.open .door-p { transform: perspective(220px) rotateY(-100deg); }
.ph .door-i { position: absolute; top: 8px; bottom: 6px; left: 6px; right: 6px; border: 1px solid var(--chatLine); border-radius: 12px 12px 0 0; }
.ph .door-k { position: absolute; top: 30px; right: 6px; width: 4px; height: 4px; border-radius: 2px; background: var(--primary); }
.ph .door-r { position: absolute; left: -3px; top: -3px; overflow: visible; pointer-events: none; }
.ph .door-r path { fill: none; stroke: var(--mint); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 16 181.12; }
.ph .sb { position: absolute; top: 12px; left: 13px; right: 100px; padding: 9px 11px; background: var(--chat); border-radius: 12px 12px 3px 12px; font-size: 13px; line-height: 19px; color: var(--primary); }
.ph .sb::after { content: ""; position: absolute; right: -7px; bottom: 8px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid var(--chat); }
.ph .sa { position: absolute; top: 44px; right: 62px; z-index: 3; width: 28px; height: 28px; }
.ph .ho-sp { height: 0; }
.ph .ho-spr { position: absolute; left: 0; top: 0; z-index: 4; width: 40px; height: 40px; }
.ph .cn { display: flex; flex-direction: column; gap: 10px; padding: 15px 17px; background: var(--chat); border: 1px solid var(--chatLine); border-radius: 14px; }
.ph .cn-h { display: flex; align-items: center; gap: 9px; }
.ph .cn-n { font-size: 14px; font-weight: 700; color: var(--primary); }
.ph .cn-b { font-size: 14.5px; line-height: 22px; color: var(--ink); }
.ph .cn-fb { display: flex; align-items: center; justify-content: space-between; padding-top: 2px; font-size: 12.5px; color: var(--capApp); }
.ph .cn-th { display: flex; gap: 16px; color: var(--capApp); }
.ph .cn-down { transform: rotate(180deg); }
.ph .sch { display: flex; flex-direction: column; gap: 6px; }
.ph .sch-t { font-size: 14.5px; line-height: 21px; color: var(--body); }
.ph .sch-c { padding: 2px 0; font-size: 14px; font-weight: 500; color: var(--primary); }
.ph .ql { min-height: 30px; display: flex; align-items: center; font-size: 12px; line-height: 16px; color: var(--capApp); }

/* The 6:04 PM check-back. */
.ph .fuc { display: flex; gap: 7px; margin-top: 11px; }
.ph .fuc span { flex: 1; min-height: 44px; display: grid; place-items: center; padding: 6px 8px; background: var(--white); border: 1px solid color-mix(in srgb, var(--pdark) 18%, transparent); border-radius: 14px; font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: center; transition: opacity 220ms ease; }
.ph .fuc.done span { opacity: 0.45; }
.ph .fuc.done span.sel { opacity: 1; background: var(--sel); border-color: var(--primary); color: var(--primary); }
.ph .fua { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; color: var(--capApp); }
.ph .fua .ic { color: var(--mint); }

/* Maintain and Build muscle: Cura's answer, its paragraphs and its action lines (an ember dot
   before each line, as #cura draws the same row; ink text). */
.ph .ans { display: grid; gap: 12px; }
.ph .acts { display: grid; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--canvas); }
.ph .act { display: flex; align-items: flex-start; gap: 10px; }
.ph .act::before { content: ""; flex: 0 0 auto; width: 3px; height: 16px; margin-top: 3px; border-radius: 2px; background: var(--ember); }
.ph .act > span { flex: 1; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); }

/* The composer. */
.ph .ac { flex: 0 0 auto; position: relative; z-index: 2; padding: 8px 16px 26px; background: var(--canvas); }
.ph .ac-r { display: flex; align-items: center; gap: 10px; }
.ph .ac-i { flex: 1; min-width: 0; height: 46px; display: flex; align-items: center; padding: 0 16px; background: var(--white); border: 1px solid var(--line); border-radius: 23px; font-size: 15px; white-space: nowrap; overflow: hidden; }
.ph .ac-s { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 23px; background: var(--ember); color: var(--ink); opacity: 0.45; }

/* "Later today": the clock that moves the story to the evening. */
.ph .wp { position: absolute; left: 0; right: 0; top: 108px; bottom: 0; z-index: 10; display: grid; place-items: center; background: color-mix(in srgb, var(--canvas) 76%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ph .wp-c { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 24px 34px 22px; background: var(--white); border-radius: 26px; box-shadow: 0 24px 60px -14px color-mix(in srgb, var(--ink-deep) 30%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink-deep) 4%, transparent); }
.ph .wp-c svg { margin-bottom: 10px; stroke-linecap: round; }
.ph .wp-face { fill: var(--canvas); stroke: var(--ink); stroke-width: 2.5; }
.ph .wp-tk { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.ph .wp-hh { stroke: var(--ink); stroke-width: 4; transform-origin: 36px 36px; }
.ph .wp-mh { stroke: var(--primary); stroke-width: 2.6; transform-origin: 36px 36px; }
.ph .wp-pin { fill: var(--ember); }
.ph .wp-t { font-size: 19px; font-weight: 750; color: var(--ink); }
.ph .wp-s { font-size: 13.5px; font-weight: 500; color: var(--capApp); }

/* The screen is shorter than the app's (390 x 498 of its 390 x 844) at the same text size, so the
   calendar, the phone and its story bar fit on one screen together; the chat keeps its newest line
   in view, so what came before moves up. Beside the calendar (760 to 980 px) it can be taller. */
@media (min-width: 760px) and (max-width: 980px) {
  .ph-scr { height: 504px; }
  .ph-app { height: 578px; }
}

/* The story bar: four segments and the caption for each beat, and the one button. */
.story { display: flex; flex-direction: column; gap: 12px; }
.story-segs { display: flex; gap: 6px; }
.sg { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--surface) 16%, transparent); }
.sg i { display: block; height: 100%; border-radius: inherit; background: var(--ember); transform-origin: 0 50%; }
html[data-goal=maintain] .sg:nth-child(n+3), html[data-goal=muscle] .sg:nth-child(n+3) { display: none; }
.story-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; }
.story-t { min-width: 0; }
.story-t .sc { display: none; }
.story-t .sc.on { display: block; }
.st-cap { display: block; font-size: 15.5px; font-weight: 700; color: var(--onDark); }
.st-sub { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; color: var(--onDarkDim); }
/* Maintain and Build muscle end on "Cura answers from your day" (reduced motion, before the script runs). */
html[data-goal=maintain]:not(.hp-motion) .ph-zoom:not(.is-live) .sc[data-cap="3"], html[data-goal=muscle]:not(.hp-motion) .ph-zoom:not(.is-live) .sc[data-cap="3"],
html[data-goal=maintain] .ph-zoom.hp-done:not(.is-live) .sc[data-cap="3"], html[data-goal=muscle] .ph-zoom.hp-done:not(.is-live) .sc[data-cap="3"] { display: block; }
html[data-goal=maintain] .ph-zoom:not(.is-live) .sc[data-cap="4"], html[data-goal=muscle] .ph-zoom:not(.is-live) .sc[data-cap="4"] { display: none; }

/* The first frame, before home-hero.js takes over: your question (the first row) and the first caption. */
.hp-motion .ph-zoom:not(.is-live):not(.hp-done) .at-g > :not(:first-child) { display: none; }
.hp-motion .ph-zoom:not(.is-live):not(.hp-done) .sc { display: none; }
.hp-motion .ph-zoom:not(.is-live):not(.hp-done) .sc[data-cap="1"] { display: block; }
.hp-motion .ph-zoom:not(.hp-done) .sg:not(.done) i { transform: scaleX(0); }
.hp-motion .ph-zoom:is(.hp-run, .hp-paused) .sg.cur i { animation: phSegFill linear both; }

/* Motion, under the player's flag only: each piece eases in as the film shows it. */
.hp-motion .ph .g-card { animation-duration: 520ms; }
.hp-motion .ph :is(.qin) { animation: phSlideIn 340ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.hp-motion .ph .bcw:not([hidden]) .bc { animation: phBcPulse 1200ms ease-out both; }
.hp-motion .ph :is(.chip.sel, .opt.sel, .next.press, .fuc.done span.sel) { animation: phPress 260ms ease both, phTapRing 650ms ease-out both; }
.hp-motion .ph .tcd { animation: popIn 420ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.hp-motion .ph .st-note { animation: fadeIn 300ms ease both; }
.hp-motion .ph .sb { animation: phSbIn 200ms ease-out both; }
.hp-motion .ph .sb.out { animation: phSbOut 260ms ease-in both; }
.hp-motion .ph .ch1 { animation: chIn 1ms linear both; }
.hp-motion .ph .sa.talk { animation: phSaBob 260ms ease-in-out infinite alternate; }
.hp-motion .ph .sa.exit { animation: hoExit 600ms linear 280ms both; }
.hp-motion .ph .door-r .rl { animation: hoRunL 2150ms infinite, hoRunO 2150ms linear infinite; }
.hp-motion .ph .door-r .rr { animation: hoRunR 2150ms infinite, hoRunO 2150ms linear infinite; }
.hp-motion .ph .ho-sp { animation: phSpaceGrow 1500ms cubic-bezier(0.45, 0, 0.55, 1) 500ms forwards; }
.hp-motion .ph .ho-spr { animation: hoHop 1500ms linear 500ms both; }
.hp-motion .ph .cn { animation: fadeIn 180ms ease both; }
.hp-motion .ph .wp { animation: fadeIn 260ms ease both; }
.hp-motion .ph .wp.out { animation: phFadeOut 300ms ease both; }
.hp-motion .ph .wp-c { animation: popIn 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.hp-motion .ph .wp-hh { animation: phHourSpin 1250ms cubic-bezier(0.65, 0, 0.35, 1) 150ms both; }
.hp-motion .ph .wp-mh { animation: phMinSpin 1250ms cubic-bezier(0.65, 0, 0.35, 1) 150ms both; }
.hp-motion .ph-zoom.is-live .st-cap { animation: phStoryIn 380ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.hp-motion .ph-zoom.is-live .st-sub { animation: phStoryIn 380ms cubic-bezier(0.2, 0.75, 0.25, 1) 60ms both; }

@keyframes phFadeOut { to { opacity: 0; } }
@keyframes phSlideIn { from { opacity: 0; transform: translateX(16px); } }
@keyframes phStoryIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes phPress { 0% { transform: scale(1); } 35% { transform: scale(0.955); } 100% { transform: scale(1); } }
@keyframes phTapRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 24%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes phBcPulse { 0% { background-color: transparent; } 22% { background-color: var(--emberSoft); } 100% { background-color: transparent; } }
@keyframes phSegFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes phSbIn { from { opacity: 0; transform: translateX(8px) scale(0.97); } }
@keyframes phSbOut { to { opacity: 0; transform: translateX(8px) scale(0.97); } }
@keyframes phSaBob { from { transform: none; } to { transform: translateY(-1.5px) rotate(-3deg); } }
@keyframes phSpaceGrow { from { height: 0; } to { height: 82px; } }
@keyframes phHourSpin { from { transform: rotate(33deg); } to { transform: rotate(182deg); } }
@keyframes phMinSpin { from { transform: rotate(36deg); } to { transform: rotate(1824deg); } }
@keyframes hoExit {
  0% { transform: translate(0px, 0px) scale(1); opacity: 1; }
  10% { transform: translate(0.84px, -0.78px) scale(0.99); opacity: 1; }
  20% { transform: translate(3.36px, -2.94px) scale(0.97); opacity: 1; }
  30% { transform: translate(7.56px, -5.9px) scale(0.93); opacity: 1; }
  40% { transform: translate(13.44px, -8.7px) scale(0.87); opacity: 1; }
  50% { transform: translate(21px, -10px) scale(0.8); opacity: 1; }
  60% { transform: translate(28.56px, -8.7px) scale(0.73); opacity: 1; }
  70% { transform: translate(34.44px, -5.9px) scale(0.67); opacity: 0.72; }
  80% { transform: translate(38.64px, -2.94px) scale(0.63); opacity: 0.32; }
  90% { transform: translate(41.16px, -0.78px) scale(0.61); opacity: 0.08; }
  100% { transform: translate(42px, 0px) scale(0.6); opacity: 0; }
}
@keyframes hoHop {
  0% { transform: translate(270px, 40px) scale(0.65, 0.55); opacity: 0; }
  1.67% { transform: translate(265.8px, 37.58px) scale(0.65, 0.56); opacity: 0.28; }
  3.33% { transform: translate(261.6px, 35.52px) scale(0.65, 0.57); opacity: 0.56; }
  5% { transform: translate(257.4px, 33.82px) scale(0.65, 0.59); opacity: 0.83; }
  6.67% { transform: translate(253.2px, 32.48px) scale(0.64, 0.61); opacity: 1; }
  8.33% { transform: translate(249px, 31.5px) scale(0.63, 0.63); opacity: 1; }
  10% { transform: translate(244.8px, 30.88px) scale(0.62, 0.66); opacity: 1; }
  11.67% { transform: translate(240.6px, 30.62px) scale(0.62, 0.68); opacity: 1; }
  13.33% { transform: translate(236.4px, 30.72px) scale(0.61, 0.7); opacity: 1; }
  15% { transform: translate(232.2px, 31.18px) scale(0.61, 0.71); opacity: 1; }
  16.67% { transform: translate(228px, 32px) scale(0.61, 0.72); opacity: 1; }
  18.33% { transform: translate(223.8px, 33.18px) scale(0.62, 0.72); opacity: 1; }
  20% { transform: translate(219.6px, 34.72px) scale(0.64, 0.72); opacity: 1; }
  21.67% { transform: translate(215.4px, 36.62px) scale(0.65, 0.72); opacity: 1; }
  23.33% { transform: translate(211.2px, 38.88px) scale(0.68, 0.71); opacity: 1; }
  25% { transform: translate(207px, 41.5px) scale(0.7, 0.7); opacity: 1; }
  26.67% { transform: translate(202.8px, 44.48px) scale(0.72, 0.69); opacity: 1; }
  28.33% { transform: translate(198.6px, 47.82px) scale(0.75, 0.68); opacity: 1; }
  30% { transform: translate(194.4px, 51.52px) scale(0.77, 0.67); opacity: 1; }
  31.67% { transform: translate(190.2px, 55.58px) scale(0.78, 0.67); opacity: 1; }
  33.33% { transform: translate(186px, 60px) scale(0.79, 0.67); opacity: 1; }
  35% { transform: translate(181.8px, 57.58px) scale(0.8, 0.68); opacity: 1; }
  36.67% { transform: translate(177.6px, 55.52px) scale(0.79, 0.7); opacity: 1; }
  38.33% { transform: translate(173.4px, 53.82px) scale(0.79, 0.72); opacity: 1; }
  40% { transform: translate(169.2px, 52.48px) scale(0.78, 0.74); opacity: 1; }
  41.67% { transform: translate(165px, 51.5px) scale(0.77, 0.77); opacity: 1; }
  43.33% { transform: translate(160.8px, 50.88px) scale(0.75, 0.79); opacity: 1; }
  45% { transform: translate(156.6px, 50.62px) scale(0.74, 0.82); opacity: 1; }
  46.67% { transform: translate(152.4px, 50.72px) scale(0.74, 0.84); opacity: 1; }
  48.33% { transform: translate(148.2px, 51.18px) scale(0.73, 0.85); opacity: 1; }
  50% { transform: translate(144px, 52px) scale(0.74, 0.86); opacity: 1; }
  51.67% { transform: translate(139.8px, 53.18px) scale(0.75, 0.87); opacity: 1; }
  53.33% { transform: translate(135.6px, 54.72px) scale(0.76, 0.87); opacity: 1; }
  55% { transform: translate(131.4px, 56.62px) scale(0.78, 0.86); opacity: 1; }
  56.67% { transform: translate(127.2px, 58.88px) scale(0.81, 0.85); opacity: 1; }
  58.33% { transform: translate(123px, 61.5px) scale(0.83, 0.83); opacity: 1; }
  60% { transform: translate(118.8px, 64.48px) scale(0.86, 0.82); opacity: 1; }
  61.67% { transform: translate(114.6px, 67.82px) scale(0.89, 0.81); opacity: 1; }
  63.33% { transform: translate(110.4px, 71.52px) scale(0.91, 0.8); opacity: 1; }
  65% { transform: translate(106.2px, 75.58px) scale(0.93, 0.79); opacity: 1; }
  66.67% { transform: translate(102px, 80px) scale(0.94, 0.8); opacity: 1; }
  68.33% { transform: translate(97.8px, 77.58px) scale(0.94, 0.81); opacity: 1; }
  70% { transform: translate(93.6px, 75.52px) scale(0.94, 0.82); opacity: 1; }
  71.67% { transform: translate(89.4px, 73.82px) scale(0.93, 0.84); opacity: 1; }
  73.33% { transform: translate(85.2px, 72.48px) scale(0.92, 0.87); opacity: 1; }
  75% { transform: translate(81px, 71.5px) scale(0.9, 0.9); opacity: 1; }
  76.67% { transform: translate(76.8px, 70.88px) scale(0.88, 0.93); opacity: 1; }
  78.33% { transform: translate(72.6px, 70.62px) scale(0.87, 0.96); opacity: 1; }
  80% { transform: translate(68.4px, 70.72px) scale(0.86, 0.98); opacity: 1; }
  81.67% { transform: translate(64.2px, 71.18px) scale(0.86, 1); opacity: 1; }
  83.33% { transform: translate(60px, 72px) scale(0.86, 1.01); opacity: 1; }
  85% { transform: translate(55.8px, 73.18px) scale(0.87, 1.01); opacity: 1; }
  86.67% { transform: translate(51.6px, 74.72px) scale(0.89, 1.01); opacity: 1; }
  88.33% { transform: translate(47.4px, 76.62px) scale(0.91, 1); opacity: 1; }
  90% { transform: translate(43.2px, 78.88px) scale(0.94, 0.98); opacity: 1; }
  91.67% { transform: translate(39px, 81.5px) scale(0.97, 0.97); opacity: 1; }
  93.33% { transform: translate(34.8px, 84.48px) scale(1, 0.95); opacity: 1; }
  95% { transform: translate(30.6px, 87.82px) scale(1.03, 0.93); opacity: 1; }
  96.67% { transform: translate(26.4px, 91.52px) scale(1.05, 0.92); opacity: 1; }
  98.33% { transform: translate(22.2px, 95.58px) scale(1.07, 0.92); opacity: 1; }
  100% { transform: translate(18px, 100px) scale(1, 1); opacity: 1; }
}
@keyframes hoRunL { 0% { stroke-dashoffset: 8; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } 79.07% { stroke-dashoffset: -90.56; } 100% { stroke-dashoffset: -90.56; } }
@keyframes hoRunR { 0% { stroke-dashoffset: 8; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } 79.07% { stroke-dashoffset: 106.56; } 100% { stroke-dashoffset: 106.56; } }
@keyframes hoRunO { 0% { stroke-opacity: 0; } 15.81% { stroke-opacity: 1; } 61.39% { stroke-opacity: 1; } 79.07% { stroke-opacity: 0; } 100% { stroke-opacity: 0; } }