/* Motion and interaction layer. Layout lives in styles.css. */
@property --ring-fill {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

:root {
  --motion-snap: cubic-bezier(.2, .9, .24, 1.22);
  --motion-slam: cubic-bezier(.12, .9, .2, 1);
  --motion-glide: cubic-bezier(.16, 1, .3, 1);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .14;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(23, 23, 20, .52) 0 1px, transparent 1.2px);
  background-size: 8px 8px;
  mask-image: linear-gradient(to bottom, transparent 0 16%, #000 38% 86%, transparent);
}

.speed-lines {
  opacity: .16;
  background:
    repeating-linear-gradient(105deg, transparent 0 34px, rgba(23, 23, 20, .16) 35px 36px, transparent 37px 73px),
    repeating-linear-gradient(76deg, transparent 0 56px, rgba(238, 85, 72, .12) 57px 59px, transparent 60px 111px);
  transform: scale(1.25);
  transform-origin: center;
  animation: speedline-drift 18s linear infinite alternate;
}

.topbar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 3px;
  opacity: .65;
  background: repeating-linear-gradient(90deg, var(--ink) 0 22px, transparent 22px 29px);
  transform-origin: left;
  animation: header-ink 1s var(--motion-glide) both;
}

.hero-shell::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  opacity: .22;
  pointer-events: none;
  background: repeating-conic-gradient(from 186deg at 79% 53%, rgba(246, 201, 40, .6) 0deg 1.2deg, transparent 1.2deg 8deg);
  mask-image: radial-gradient(circle at 79% 53%, #000 0 13%, transparent 59%);
  transform-origin: 79% 53%;
  animation: hero-rays 15s linear infinite;
}

body.is-guest .hero-shell { filter: saturate(.92); }
body.is-authenticated .hero-shell { filter: saturate(1.04) contrast(1.02); }
.landing-step-card > span,
.landing-stat-card,
.demo-exercise-row,
.demo-swap-card,
.demo-habit-card,
.demo-weight-panel,
.landing-focus-card { transition: transform .28s var(--motion-snap), border-color .24s ease, box-shadow .28s ease, background-color .28s ease; }
.landing-story-visual img { transition: transform .75s var(--motion-glide), filter .5s ease; }
.landing-final-cta .landing-login-link { transition: transform .18s var(--motion-snap), color .18s ease, background-color .18s ease, box-shadow .18s ease; }

@supports (animation-timeline: view()) {
  .app-enter .public-landing-section > :is(.landing-section-intro, .landing-live-layout, .landing-onboarding-steps, .landing-cabinet-story, .landing-story-visual, .landing-swap-demo, .landing-focus-card, .demo-habit-board, .demo-habit-summary, .landing-weight-layout),
  .app-enter .landing-final-cta > :is(.kicker, h2, p, .hero-actions, .landing-cta-privacy) {
    opacity: 0;
    animation: landing-reveal .72s var(--motion-glide) both;
    animation-timeline: view();
    animation-range: entry 7% cover 27%;
  }
  .app-enter .landing-story-visual { animation-name: landing-image-cut; }
  .app-enter .demo-chart-line,
  .app-enter .demo-chart-shadow {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: landing-chart-draw 1.1s ease-out both;
    animation-timeline: view();
    animation-range: entry 5% cover 34%;
  }
  .app-enter .demo-chart-points { opacity: 0; animation: landing-points-in .45s ease-out both; animation-timeline: view(); animation-range: entry 24% cover 39%; }
}

.app-enter .hero-copy > * {
  opacity: 0;
  animation: panel-cut-in .7s var(--motion-slam) forwards;
}
.app-enter .hero-copy > :nth-child(2) { animation-delay: .07s; }
.app-enter .hero-copy > :nth-child(3) { animation-delay: .14s; }
.app-enter .hero-copy > :nth-child(4) { animation-delay: .21s; }

.app-enter .hero-score-card {
  opacity: 0;
  animation: score-card-in .72s .28s var(--motion-snap) forwards;
}

.app-enter .hero-stamp {
  opacity: 0;
  animation: stamp-in .72s .32s var(--motion-snap) forwards, stamp-breathe 4.2s 1.04s ease-in-out infinite;
}

.app-enter :is(.mission-panel, .side-stack > *, .fighter-card, .distance-card, .boss-card) {
  opacity: 0;
  animation: card-drop .6s var(--motion-glide) forwards;
  animation-delay: calc(.18s + var(--task-delay, 0s));
}

.hero-stamp { animation: stamp-breathe 4.2s ease-in-out infinite; }
.hero-stamp::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px dashed currentColor;
  border-radius: inherit;
  opacity: .48;
  animation: seal-turn 16s linear infinite;
}
.live-dot { animation: live-pulse 1.8s ease-out infinite; }

.switch-member,
.music-toggle,
.icon-button,
.header-login,
.plan-button,
.catalog-search-button,
.catalog-result-go,
.mini-edit,
.quick-complete,
.swap-button,
.focus-button,
.result-control button,
.habit-toggle,
.exercise-pick,
.weekday-pills span,
.avatar-picker span {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease, transform .18s var(--motion-snap), filter .18s ease;
}

:is(.music-toggle, .icon-button, .header-login, .plan-button, .catalog-search-button, .catalog-result-go, .mini-edit, .quick-complete, .swap-button, .focus-button, .result-control button, .habit-toggle, .exercise-pick):not(:disabled):hover { transform: translateY(-2px); }
:is(.music-toggle, .icon-button, .header-login, .plan-button, .catalog-search-button, .catalog-result-go, .quick-complete, .swap-button, .focus-button, .result-control button, .habit-toggle, .exercise-pick):not(:disabled):active { transform: translateY(1px) scale(.98); }
.landing-step-card:hover > span { transform: translateY(-6px) rotate(-5deg); box-shadow: 9px 11px 0 var(--ink); }
.landing-step-card:nth-child(2):hover > span { transform: translateY(-6px) rotate(4deg); }
.landing-stat-card:hover { z-index: 1; background: rgba(246,201,40,.08); transform: translateX(4px); }
.landing-story-visual:hover img { filter: saturate(1) contrast(1.08); transform: scale(1.055); }
.demo-exercise-row:hover { border-color: rgba(23,23,20,.54); transform: translateX(3px); }
.demo-swap-card--target:hover { box-shadow: 11px 11px 0 rgba(246,201,40,.2); transform: translate(-3px,-3px); }
.demo-habit-card:hover { box-shadow: 8px 8px 0 rgba(23,23,20,.2); transform: translate(-2px,-2px); }
.landing-final-cta .landing-login-link:hover { box-shadow: 8px 8px 0 #fff; transform: translate(-3px,-3px); }
.landing-final-cta::before { animation: landing-rays 22s linear infinite; }

.music-toggle.playing,
.music-toggle[aria-pressed="true"] {
  color: var(--yellow);
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(23, 23, 20, .12);
  animation: music-beat 1.15s ease-in-out infinite;
}

.power-ring {
  --ring-fill: calc(var(--power, 0) * 1%);
  background: conic-gradient(var(--yellow) var(--ring-fill), rgba(23, 23, 20, .12) 0);
  transition: --ring-fill .85s var(--motion-glide), transform .25s var(--motion-snap), filter .25s ease;
}
.power-ring::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2px solid var(--red);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.76);
}
.power-console.ready .power-ring,
.power-console[data-ready="true"] .power-ring {
  filter: drop-shadow(0 0 12px rgba(246, 201, 40, .68));
  animation: meter-impact .58s var(--motion-snap);
}
.power-console.ready .power-ring::after,
.power-console[data-ready="true"] .power-ring::after { animation: ring-shock .7s ease-out; }
.power-ring-value { transition: transform .28s var(--motion-snap), color .2s ease; }
.power-console.ready .power-ring-value,
.power-console[data-ready="true"] .power-ring-value { color: #a53b31; transform: scale(1.08) rotate(-2deg); }
.balance-pips i.active { animation: pip-hit .32s var(--motion-snap) both; animation-delay: calc(var(--pip-index, 0) * 55ms); }

.locked-mission::before {
  content: "ДОПУСК";
  position: absolute;
  top: 15px;
  right: -26px;
  width: 120px;
  padding: 5px;
  color: var(--paper);
  background: var(--red);
  font-family: "Russo One", Impact, sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
  transform: rotate(36deg);
}

.task-item {
  isolation: isolate;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s var(--motion-snap), opacity .22s ease, filter .22s ease;
}
.task-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: repeating-linear-gradient(112deg, transparent 0 13px, rgba(23, 23, 20, .06) 14px 15px, transparent 16px 27px);
  transform: translateX(-12px);
  transition: opacity .22s ease, transform .4s var(--motion-glide);
}
.task-item::after {
  content: "ГОТОВО";
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  padding: 4px 6px;
  border: 2px solid var(--green);
  color: var(--green);
  background: rgba(245, 240, 230, .9);
  font-family: "Russo One", Impact, sans-serif;
  font-size: 8px;
  letter-spacing: .08em;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.6) rotate(-11deg);
}
.task-item:hover {
  z-index: 2;
  border-color: rgba(23, 23, 20, .42);
  box-shadow: var(--task-hover-shadow, 4px 5px 0 rgba(23, 23, 20, .13));
  transform: var(--task-hover-transform, translate(-2px, -2px));
}
.task-item:hover::before,
.task-item.focus-task::before { opacity: 1; transform: translateX(0); }
.task-item.result-partial { animation: partial-flash .45s var(--motion-glide); }
.task-item.result-complete { animation: complete-hit .55s var(--motion-snap); }
.task-item.result-complete::after { animation: done-stamp .58s .1s var(--motion-snap) both; }
.task-item.result-complete .quick-complete { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45); }
.task-item.focus-task { animation: focus-edge 2.5s ease-in-out infinite; }
.task-item.is-syncing { opacity: .72; filter: saturate(.55); }
.task-item.is-syncing::before {
  opacity: .85;
  background: linear-gradient(105deg, transparent 25%, rgba(246, 201, 40, .34) 48%, transparent 70%);
  background-size: 220% 100%;
  animation: syncing-sweep 1s linear infinite;
}
.task-item.is-sync-error { border-color: var(--red); animation: error-shake .35s ease; }

.habit-toggle { position: relative; overflow: hidden; }
.habit-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 30%, rgba(246, 201, 40, .55) 50%, transparent 70%);
  transform: translateX(-100%);
}
.habit-toggle:hover { border-color: var(--ink); box-shadow: 3px 3px 0 rgba(23, 23, 20, .2); }
.habit-toggle.checked { animation: habit-lock .46s var(--motion-snap); }
.habit-toggle.checked::after { animation: habit-sweep .58s ease-out; }
.habit-toggle.checked em { animation: check-pop .4s var(--motion-snap); }

.habit-stat-track i,
.power-track i,
.rank-progress i,
.boss-progress i,
.plan-load i b { position: relative; overflow: hidden; }
:is(.habit-stat-track i, .power-track i, .rank-progress i, .boss-progress i, .plan-load i b)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 48%, transparent 74%);
  transform: translateX(-120%);
  animation: meter-sheen 3.2s 1.2s ease-in-out infinite;
}

.fighter-card,
.rank-card,
.streak-card,
.quote-card,
.habit-stat-card,
.distance-card,
.boss-card { transition: transform .22s var(--motion-snap), box-shadow .22s ease, border-color .22s ease; }
:is(.fighter-card, .rank-card, .streak-card, .quote-card, .habit-stat-card, .distance-card, .boss-card):hover { transform: translateY(-4px) rotate(-.18deg); box-shadow: 8px 10px 0 rgba(23, 23, 20, .12), var(--shadow); }

.weight-line-shadow,
.weight-line {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: chart-draw 1.35s .2s var(--motion-glide) forwards;
}
.weight-line { animation-delay: .34s; }
.weight-dot {
  opacity: 0;
  transform: scale(.45);
  transform-box: fill-box;
  transform-origin: center;
  animation: chart-dot .38s var(--motion-snap) forwards;
}
.weight-dot:nth-of-type(1) { animation-delay: .45s; }
.weight-dot:nth-of-type(2) { animation-delay: .57s; }
.weight-dot:nth-of-type(3) { animation-delay: .69s; }
.weight-dot:nth-of-type(4) { animation-delay: .81s; }
.weight-dot:nth-of-type(5) { animation-delay: .93s; }
.weight-dot:nth-of-type(6) { animation-delay: 1.05s; }
.weight-dot:nth-of-type(n+7) { animation-delay: 1.16s; }
.week-track .day-cell.today { animation: today-mark 3.2s ease-in-out infinite; }

.exercise-pick:hover,
.exercise-pick:focus-visible { border-color: var(--ink); background: var(--yellow-soft); box-shadow: 4px 4px 0 var(--ink); }
.exercise-pick.selected,
.exercise-pick[aria-pressed="true"] { border-color: var(--red); background: #fff0eb; box-shadow: 4px 4px 0 var(--red); transform: translate(-2px, -2px); }

.onboarding-mode .plan-builder > * { opacity: 0; animation: builder-entry .4s var(--motion-glide) forwards; }
.onboarding-mode .plan-builder > :nth-child(2) { animation-delay: .06s; }
.onboarding-mode .plan-builder > :nth-child(3) { animation-delay: .12s; }
.onboarding-mode .plan-builder > :nth-child(4) { animation-delay: .18s; }
.onboarding-mode .plan-builder > :nth-child(n+5) { animation-delay: .24s; }

.modal[open] { animation: var(--modal-enter-animation, modal-impact .42s var(--motion-snap) both); }
.modal[open]::backdrop { animation: var(--modal-backdrop-animation, backdrop-in .28s ease both); }
.modal[open] form > * { animation: modal-content .35s .08s var(--motion-glide) both; }
.modal-close:hover { color: var(--yellow); background: var(--ink); transform: rotate(7deg); }
.weight-seal { animation: weight-seal 3.6s ease-in-out infinite; }
.toast.show { animation: toast-slam .42s var(--motion-snap); }

.impact::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(246, 201, 40, .7) 0deg 2deg, transparent 2deg 11deg);
}
.impact.fire { animation: impact-word .72s var(--motion-snap) both; }
.impact.fire::before { animation: impact-burst .72s ease-out both; }

@media (hover: none), (pointer: coarse) {
  :is(.fighter-card, .rank-card, .streak-card, .quote-card, .habit-stat-card, .distance-card, .boss-card):hover { transform: none; box-shadow: var(--shadow); }
  .habit-toggle:hover,
  .exercise-pick:hover { transform: none; }
  .landing-step-card:hover > span,
  .landing-stat-card:hover,
  .demo-exercise-row:hover,
  .demo-swap-card--target:hover,
  .demo-habit-card:hover,
  .landing-final-cta .landing-login-link:hover { transform: none; }
  .landing-story-visual:hover img { filter: saturate(.85) contrast(1.06); transform: scale(1.015); }
}

@keyframes speedline-drift { from { transform: scale(1.25) translate3d(-1.5%, -.5%, 0); } to { transform: scale(1.25) translate3d(1.5%, .5%, 0); } }
@keyframes header-ink { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hero-rays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes panel-cut-in { from { opacity: 0; transform: translate3d(-34px, 12px, 0) skewX(-4deg); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { opacity: 1; transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes card-drop { from { opacity: 0; transform: translate3d(0, 24px, 0) rotate(.5deg); } to { opacity: 1; transform: none; } }
@keyframes score-card-in { 0% { opacity: 0; transform: translateY(26px) rotate(4deg); } 70% { opacity: 1; transform: translateY(-2px) rotate(.5deg); } 100% { opacity: 1; transform: rotate(1deg); } }
@keyframes stamp-in { 0% { opacity: 0; transform: scale(1.7) rotate(2deg); filter: blur(3px); } 65% { opacity: 1; transform: scale(.94) rotate(14deg); filter: none; } 100% { opacity: .86; transform: rotate(12deg); } }
@keyframes stamp-breathe { 0%, 100% { filter: drop-shadow(0 0 0 rgba(246, 201, 40, 0)); } 50% { filter: drop-shadow(0 0 13px rgba(246, 201, 40, .34)); } }
@keyframes seal-turn { to { transform: rotate(360deg); } }
@keyframes live-pulse { 0%, 45% { box-shadow: 0 0 0 0 rgba(238, 85, 72, .42); } 100% { box-shadow: 0 0 0 8px rgba(238, 85, 72, 0); } }
@keyframes music-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes meter-impact { 0% { transform: scale(.88) rotate(-6deg); } 64% { transform: scale(1.08) rotate(2deg); } 100% { transform: none; } }
@keyframes ring-shock { 0% { opacity: .8; transform: scale(.76); } 100% { opacity: 0; transform: scale(1.42); } }
@keyframes pip-hit { from { opacity: .25; transform: scaleX(.3) skewX(-13deg); } to { opacity: 1; transform: scaleX(1) skewX(-13deg); } }
@keyframes partial-flash { 0% { box-shadow: inset 0 0 0 999px rgba(101, 168, 215, .28); } 100% { box-shadow: inset 0 0 0 999px transparent; } }
@keyframes complete-hit { 0% { transform: scale(.985); } 48% { transform: scale(1.012) skewX(-.3deg); } 100% { transform: none; } }
@keyframes done-stamp { 0% { opacity: 0; transform: scale(1.6) rotate(-18deg); } 68% { opacity: 1; transform: scale(.9) rotate(-9deg); } 100% { opacity: .85; transform: scale(1) rotate(-11deg); } }
@keyframes focus-edge { 0%, 100% { box-shadow: 4px 4px 0 rgba(238, 85, 72, .2); } 50% { box-shadow: 4px 4px 0 rgba(238, 85, 72, .52), 0 0 0 3px rgba(238, 85, 72, .09); } }
@keyframes syncing-sweep { to { background-position: -220% 0; } }
@keyframes error-shake { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-5px); } 65% { transform: translateX(4px); } }
@keyframes habit-lock { 0% { transform: scale(.97) rotate(-.4deg); } 70% { transform: scale(1.015); } 100% { transform: none; } }
@keyframes habit-sweep { 0% { opacity: 0; transform: translateX(-100%); } 35% { opacity: .7; } 100% { opacity: 0; transform: translateX(100%); } }
@keyframes check-pop { from { transform: scale(.3) rotate(-24deg); } to { transform: none; } }
@keyframes meter-sheen { 0%, 62% { transform: translateX(-120%); } 86%, 100% { transform: translateX(120%); } }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-dot { to { opacity: 1; transform: scale(1); } }
@keyframes today-mark { 0%, 100% { box-shadow: 3px 3px 0 var(--ink); } 50% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 5px rgba(246, 201, 40, .25); } }
@keyframes builder-entry { from { opacity: 0; transform: translateX(-13px); } to { opacity: 1; transform: none; } }
@keyframes modal-impact { 0% { opacity: 0; transform: translateY(18px) scale(.94) rotate(-.5deg); } 70% { opacity: 1; transform: translateY(-2px) scale(1.008); } 100% { opacity: 1; transform: none; } }
@keyframes sheet-rise { from { opacity: .35; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes backdrop-in { from { background: rgba(17, 17, 15, 0); } to { background: rgba(17, 17, 15, .72); } }
@keyframes modal-content { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes weight-seal { 0%, 100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(-4deg) scale(1.04); } }
@keyframes toast-slam { 0% { transform: translateX(calc(100% + 56px)) skewX(-8deg); } 70% { transform: translateX(-7px) skewX(1deg); } 100% { transform: translateX(0); } }
@keyframes impact-word { 0% { opacity: 0; transform: scale(.28) rotate(-17deg); } 42% { opacity: 1; transform: scale(1.06) rotate(-8deg); } 78% { opacity: 1; transform: scale(.98) rotate(-9deg); } 100% { opacity: 0; transform: scale(1.22) rotate(-7deg); } }
@keyframes impact-burst { 0% { opacity: 0; transform: scale(.3) rotate(-10deg); } 28% { opacity: .7; } 100% { opacity: 0; transform: scale(1.3) rotate(7deg); } }
@keyframes landing-reveal { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: none; } }
@keyframes landing-image-cut { from { opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transform: translate3d(-24px, 12px, 0) rotate(-1deg); } to { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; } }
@keyframes landing-chart-draw { to { stroke-dashoffset: 0; } }
@keyframes landing-points-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes landing-rays { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .speed-lines,
  .hero-shell::before,
  .hero-stamp,
  .hero-stamp::after,
  .live-dot,
  .music-toggle.playing,
  .power-console.ready .power-ring,
  .power-console[data-ready="true"] .power-ring,
  .task-item,
  .task-item::before,
  .task-item::after,
  .habit-toggle,
  .habit-toggle::after,
  .habit-toggle em,
  .weight-line-shadow,
  .weight-line,
  .weight-dot,
  .week-track .day-cell.today,
  .weight-seal,
  .impact,
  .impact::before,
  .landing-final-cta::before,
  .demo-chart-line,
  .demo-chart-shadow,
  .demo-chart-points { animation: none !important; }

  .app-enter .hero-copy > *,
  .app-enter :is(.hero-score-card, .hero-stamp, .mission-panel, .side-stack > *, .fighter-card, .distance-card, .boss-card),
  .app-enter .public-landing-section > *,
  .app-enter .landing-final-cta > *,
  .onboarding-mode .plan-builder > *,
  .modal[open],
  .modal[open] form > * {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none !important;
  }
  .weight-line-shadow,
  .weight-line { stroke-dashoffset: 0; }
  .demo-chart-line,
  .demo-chart-shadow { stroke-dashoffset: 0; }
  .demo-chart-points { opacity: 1; }
  .weight-dot { opacity: 1; transform: none; }
}