/* Care 启动引导：「真」系列 — 作业本气质浅底 + 中间动画 */
.care-launch-splash {
  --bg: #f6f3ec;
  --bg-2: #ebe6db;
  --ink: #1a2332;
  --muted: #5c6a7e;
  --soft: #8b97a8;
  --punch: #0f7aef;
  --punch-soft: rgba(15, 122, 239, 0.16);
  --mint: #1fb89a;
  --ok: #12b886;
  --card: #ffffff;
  --line: rgba(26, 35, 50, 0.08);
  --rule: rgba(90, 120, 160, 0.07);
  --shadow: 0 18px 40px rgba(40, 70, 120, 0.12);
  position: absolute;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  contain: strict;
  background: var(--bg);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  box-sizing: border-box;
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
    "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.care-launch-splash *,
.care-launch-splash *::before,
.care-launch-splash *::after {
  box-sizing: border-box;
}

.care-launch-splash.is-leaving {
  pointer-events: none;
  animation: care-launch-fade-out 0.32s ease-out forwards;
}
@keyframes care-launch-fade-out {
  to {
    opacity: 0;
  }
}

.care-launch-splash__track-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    /* 练习纸横线 */
    repeating-linear-gradient(
      transparent 0,
      transparent 27px,
      var(--rule) 27px,
      var(--rule) 28px
    ),
    /* 左侧装订线感 */
    linear-gradient(
      90deg,
      rgba(232, 90, 90, 0.12) 0,
      rgba(232, 90, 90, 0.12) 2px,
      transparent 2px,
      transparent 18px
    ),
    /* 顶光 */
    radial-gradient(95% 50% at 50% -8%, #fffdf8 0%, transparent 58%),
    /* 品牌蓝光斑 */
    radial-gradient(70% 48% at 108% 78%, rgba(15, 122, 239, 0.16), transparent 58%),
    /* 薄荷绿光斑 */
    radial-gradient(55% 40% at -8% 55%, rgba(31, 184, 154, 0.14), transparent 55%),
    /* 纸色 */
    linear-gradient(165deg, #faf7f1 0%, #f1ece3 48%, #e8eef6 100%);
}
.care-launch-splash__track-wrap::before,
.care-launch-splash__track-wrap::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(2px);
}
.care-launch-splash__track-wrap::before {
  width: 280px;
  height: 280px;
  left: -90px;
  top: 18%;
  background: radial-gradient(
    circle,
    rgba(15, 122, 239, 0.14) 0%,
    transparent 68%
  );
  animation: cls-blob-a 22s ease-in-out infinite alternate;
}
.care-launch-splash__track-wrap::after {
  width: 240px;
  height: 240px;
  right: -70px;
  bottom: 12%;
  background: radial-gradient(
    circle,
    rgba(31, 184, 154, 0.16) 0%,
    transparent 68%
  );
  animation: cls-blob-b 26s ease-in-out infinite alternate;
}
@keyframes cls-blob-a {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(24px, 36px);
  }
}
@keyframes cls-blob-b {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-18px, -28px);
  }
}

.care-launch-splash__track {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.care-launch-splash__slide {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: max(72px, calc(28px + env(safe-area-inset-top, 0px))) 22px
    calc(78px + env(safe-area-inset-bottom, 0px));
}
.care-launch-splash__slide::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -36px;
  top: 22%;
  border: 1.5px solid rgba(15, 122, 239, 0.1);
  border-radius: 36% 64% 58% 42% / 48% 42% 58% 52%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}
.care-launch-splash__slide::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  left: -28px;
  bottom: 26%;
  border: 1.5px solid rgba(31, 184, 154, 0.14);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.care-launch-splash__slide.is-cta {
  padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
}
/* P5：淡淡上升折线，呼应续费↑ */
.care-launch-splash__slide.is-cta::before {
  width: auto;
  height: auto;
  inset: auto 18px 34% 18px;
  top: auto;
  right: 18px;
  left: 18px;
  bottom: 32%;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(18, 184, 134, 0.08) 35%,
      transparent 70%
    );
  opacity: 1;
  clip-path: polygon(
    0% 78%,
    18% 62%,
    34% 70%,
    52% 42%,
    68% 50%,
    84% 28%,
    100% 18%,
    100% 100%,
    0% 100%
  );
}

.care-launch-splash__top {
  flex: 0 0 auto;
  max-width: none;
  margin: 48px auto 0;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
}
.care-launch-splash__idx {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--soft);
}
.care-launch-splash__title {
  margin: 0;
  font-size: clamp(30px, 8.4vw, 40px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.care-launch-splash__punch {
  font-style: normal;
  font-size: 1.06em;
  font-weight: 800;
  color: var(--punch);
  letter-spacing: -0.01em;
  background: linear-gradient(
    transparent 52%,
    var(--punch-soft) 52%,
    var(--punch-soft) 92%,
    transparent 92%
  );
  padding: 0 0.04em;
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
}
.care-launch-splash__slide.is-on .care-launch-splash__punch {
  animation: care-launch-punch-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s
    forwards;
}
@keyframes care-launch-punch-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .care-launch-splash__punch {
    opacity: 1;
    transform: none;
  }
  .care-launch-splash__slide.is-on .care-launch-splash__punch {
    animation: none;
  }
}
.care-launch-splash__sub {
  margin: 16px auto 0;
  font-size: clamp(12px, 3.4vw, 14px);
  line-height: 1.55;
  color: var(--soft);
  max-width: 19em;
}

.care-launch-splash__mid {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  margin: 4px 0 0;
  opacity: 0.96;
  transform: scale(0.96);
  transform-origin: center center;
  position: relative;
  z-index: 1;
}

.care-launch-splash__foot {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 122, 239, 0.12);
  font-size: clamp(13px, 3.6vw, 14px);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
  position: relative;
  z-index: 2;
}
.care-launch-splash__foot::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 32px;
  height: 2px;
  margin-left: -16px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--punch), transparent);
  opacity: 0.7;
}

.care-launch-splash__cta {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: var(--punch);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 122, 239, 0.28);
}
.care-launch-splash__cta:active {
  transform: scale(0.98);
}

.care-launch-splash__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.care-launch-splash__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(21, 32, 51, 0.16);
  transition: width 0.2s ease, background 0.2s ease;
}
.care-launch-splash__dot.is-on {
  width: 16px;
  background: var(--punch);
}

/* —— 中间动画公共 —— */
.cls-viz {
  position: relative;
  width: min(280px, 78vw);
  height: 200px;
}
.care-launch-splash__slide:not(.is-on) .cls-viz,
.care-launch-splash__slide:not(.is-on) .cls-viz * {
  animation-play-state: paused !important;
}

/* 1 拍照批改：匹配题库→直接批改；新题→AI批改→真人核对 */
.cls-viz--scan .cls-viz__sheet {
  position: absolute;
  left: 10px;
  top: 16px;
  width: 168px;
  height: 168px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 16px 12px 12px;
  overflow: hidden;
}
.cls-viz--scan .cls-viz__q {
  position: relative;
  height: 42px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: #f4f7fc;
  padding: 8px 10px;
}
.cls-viz--scan .cls-viz__q-line {
  display: block;
  width: 58%;
  height: 7px;
  border-radius: 999px;
  background: #d5deec;
  margin-top: 4px;
}
.cls-viz--scan .cls-viz__q-line--short {
  width: 42%;
}
.cls-viz--scan .cls-viz__tag {
  position: absolute;
  left: 10px;
  top: -7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
}
.cls-viz--scan .cls-viz__tag--bank {
  background: rgba(15, 122, 239, 0.12);
  color: var(--punch);
}
.cls-viz--scan .cls-viz__tag--new {
  background: rgba(224, 49, 49, 0.12);
  color: #e03131;
}
.cls-viz--scan .cls-viz__mark {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
}
.cls-viz--scan .cls-viz__mark--ok {
  background: var(--ok);
}
.cls-viz--scan .cls-viz__mark--ok::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(40deg);
}
.cls-viz--scan .cls-viz__mark--bad {
  background: #e03131;
}
.cls-viz--scan .cls-viz__mark--bad::before,
.cls-viz--scan .cls-viz__mark--bad::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 2px;
  height: 10px;
  background: #fff;
  border-radius: 1px;
}
.cls-viz--scan .cls-viz__mark--bad::before {
  transform: rotate(45deg);
}
.cls-viz--scan .cls-viz__mark--bad::after {
  transform: rotate(-45deg);
}
.cls-viz--scan .cls-viz__ai,
.cls-viz--scan .cls-viz__human {
  position: absolute;
  right: 34px;
  top: 50%;
  margin-top: -9px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
}
.cls-viz--scan .cls-viz__ai {
  background: #eef2ff;
  color: #4263eb;
}
.cls-viz--scan .cls-viz__human {
  background: #fff4e6;
  color: #f08c00;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cls-viz--scan .cls-viz__human i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(160deg, #ffd8a8, #f08c00);
  display: inline-block;
}
.cls-viz--scan .cls-viz__beam {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--punch), transparent);
  box-shadow: 0 0 12px rgba(15, 122, 239, 0.45);
  animation: cls-scan-beam 3.6s ease-in-out infinite;
  pointer-events: none;
}
.cls-viz--scan .cls-viz__phone {
  position: absolute;
  right: 4px;
  top: 28px;
  width: 72px;
  height: 108px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1d2a44, #0f172a);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cls-phone-bob 3.6s ease-in-out infinite;
}
.cls-viz--scan .cls-viz__lens {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 5px rgba(15, 122, 239, 0.35);
}

/* 时序：扫过 → 库内题秒批 → 新题 AI → 真人 → 出结果 */
.care-launch-splash__slide.is-on .cls-viz--scan .cls-viz__q--bank .cls-viz__tag {
  animation: cls-tag-in 3.6s ease-in-out infinite;
}
.care-launch-splash__slide.is-on .cls-viz--scan .cls-viz__q--bank .cls-viz__mark {
  animation: cls-mark-in 3.6s ease-in-out infinite;
}
.care-launch-splash__slide.is-on .cls-viz--scan .cls-viz__q--bank2 .cls-viz__tag {
  animation: cls-tag-in 3.6s ease-in-out infinite;
  animation-delay: 0.18s;
}
.care-launch-splash__slide.is-on .cls-viz--scan .cls-viz__q--bank2 .cls-viz__mark {
  animation: cls-mark-in 3.6s ease-in-out infinite;
  animation-delay: 0.18s;
}
.care-launch-splash__slide.is-on .cls-viz--scan .cls-viz__q--new .cls-viz__tag {
  animation: cls-tag-in 3.6s ease-in-out infinite;
  animation-delay: 0.35s;
}
.care-launch-splash__slide.is-on .cls-viz--scan .cls-viz__ai {
  animation: cls-ai-in 3.6s ease-in-out infinite;
}
.care-launch-splash__slide.is-on .cls-viz--scan .cls-viz__human {
  animation: cls-human-in 3.6s ease-in-out infinite;
}
.care-launch-splash__slide.is-on .cls-viz--scan .cls-viz__mark--late {
  animation: cls-mark-late 3.6s ease-in-out infinite;
}

@keyframes cls-scan-beam {
  0%,
  8% {
    transform: translateY(8px);
    opacity: 0.25;
  }
  32% {
    transform: translateY(130px);
    opacity: 1;
  }
  40%,
  100% {
    transform: translateY(130px);
    opacity: 0;
  }
}
@keyframes cls-phone-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  28% {
    transform: translateY(-5px);
  }
  40%,
  100% {
    transform: translateY(0);
  }
}
@keyframes cls-tag-in {
  0%,
  28% {
    opacity: 0;
    transform: translateY(4px);
  }
  38%,
  82% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0.45;
    transform: translateY(0);
  }
}
@keyframes cls-mark-in {
  0%,
  36% {
    opacity: 0;
    transform: scale(0.4);
  }
  46%,
  82% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
}
@keyframes cls-ai-in {
  0%,
  40% {
    opacity: 0;
    transform: translateX(6px);
  }
  48%,
  58% {
    opacity: 1;
    transform: translateX(0);
  }
  66%,
  100% {
    opacity: 0;
    transform: translateX(-4px);
  }
}
@keyframes cls-human-in {
  0%,
  58% {
    opacity: 0;
    transform: translateX(6px);
  }
  66%,
  86% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0.45;
    transform: translateX(0);
  }
}
@keyframes cls-mark-late {
  0%,
  68% {
    opacity: 0;
    transform: scale(0.4);
  }
  78%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
}

/* 2 错题整理 */
.cls-viz--cards .cls-viz__card {
  position: absolute;
  left: 50%;
  top: 28px;
  width: 150px;
  height: 110px;
  margin-left: -75px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 16px;
}
.cls-viz--cards .cls-viz__card b {
  display: block;
  font-size: 13px;
  color: var(--punch);
  margin-bottom: 10px;
}
.cls-viz--cards .cls-viz__card span {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: #dce4f0;
  margin-bottom: 8px;
}
.cls-viz--cards .cls-viz__card--a {
  z-index: 1;
  animation: cls-card-a 2.8s ease-in-out infinite;
}
.cls-viz--cards .cls-viz__card--b {
  z-index: 2;
  animation: cls-card-b 2.8s ease-in-out infinite;
}
.cls-viz--cards .cls-viz__card--c {
  z-index: 3;
  animation: cls-card-c 2.8s ease-in-out infinite;
}
@keyframes cls-card-a {
  0%,
  100% {
    transform: translate(-34px, 18px) rotate(-10deg);
  }
  50% {
    transform: translate(-52px, 10px) rotate(-14deg);
  }
}
@keyframes cls-card-b {
  0%,
  100% {
    transform: translate(0, 6px) rotate(2deg);
  }
  50% {
    transform: translate(0, -2px) rotate(0deg);
  }
}
@keyframes cls-card-c {
  0%,
  100% {
    transform: translate(36px, 16px) rotate(11deg);
  }
  50% {
    transform: translate(54px, 8px) rotate(15deg);
  }
}

/* 3 学习日报 */
.cls-viz--report .cls-viz__phone-ui {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 180px;
  height: 180px;
  margin-left: -90px;
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 18px 16px;
}
.cls-viz--report .cls-viz__ui-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}
.cls-viz--report .cls-viz__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.cls-viz--report .cls-viz__stat {
  text-align: center;
  background: var(--punch-soft);
  border-radius: 12px;
  padding: 10px 4px 8px;
}
.cls-viz--report .cls-viz__stat strong {
  display: block;
  font-size: 18px;
  color: var(--punch);
  font-variant-numeric: tabular-nums;
}
.cls-viz--report .cls-viz__stat em {
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
}
.cls-viz--report .cls-viz__bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 54px;
  gap: 8px;
  padding: 0 6px;
}
.cls-viz--report .cls-viz__bars i {
  flex: 1;
  display: block;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #5aa8ff, var(--punch));
  transform-origin: bottom;
  animation: cls-bar 1.6s ease-in-out infinite alternate;
}
.cls-viz--report .cls-viz__bars i:nth-child(1) {
  height: 36%;
  animation-delay: 0s;
}
.cls-viz--report .cls-viz__bars i:nth-child(2) {
  height: 62%;
  animation-delay: 0.12s;
}
.cls-viz--report .cls-viz__bars i:nth-child(3) {
  height: 48%;
  animation-delay: 0.24s;
}
.cls-viz--report .cls-viz__bars i:nth-child(4) {
  height: 78%;
  animation-delay: 0.36s;
}
@keyframes cls-bar {
  from {
    transform: scaleY(0.72);
    opacity: 0.75;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* 4 举一反三 */
.cls-viz--branch .cls-viz__node--root {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 72px;
  margin-left: -36px;
  height: 36px;
  border-radius: 999px;
  background: #fff1f0;
  color: #e03131;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  animation: cls-root-pulse 2s ease-in-out infinite;
}
.cls-viz--branch .cls-viz__links {
  position: absolute;
  left: 50%;
  top: 54px;
  width: 180px;
  height: 48px;
  margin-left: -90px;
}
.cls-viz--branch .cls-viz__links i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 48px;
  background: linear-gradient(180deg, #ffc9c9, var(--punch));
  transform-origin: top center;
  opacity: 0;
}
.cls-viz--branch .cls-viz__links i:nth-child(1) {
  transform: rotate(-28deg);
}
.cls-viz--branch .cls-viz__links i:nth-child(2) {
  transform: rotate(0deg);
}
.cls-viz--branch .cls-viz__links i:nth-child(3) {
  transform: rotate(28deg);
}
.care-launch-splash__slide.is-on .cls-viz--branch .cls-viz__links i {
  animation: cls-link-in 2.4s ease-in-out infinite;
}
.care-launch-splash__slide.is-on .cls-viz--branch .cls-viz__links i:nth-child(2) {
  animation-delay: 0.12s;
}
.care-launch-splash__slide.is-on .cls-viz--branch .cls-viz__links i:nth-child(3) {
  animation-delay: 0.24s;
}
.cls-viz--branch .cls-viz__nodes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  display: flex;
  justify-content: space-between;
  padding: 0 18px;
}
.cls-viz--branch .cls-viz__nodes span {
  width: 68px;
  height: 34px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--punch);
  opacity: 0;
  transform: translateY(10px);
}
.care-launch-splash__slide.is-on .cls-viz--branch .cls-viz__nodes span {
  animation: cls-node-in 2.4s ease-in-out infinite;
}
.care-launch-splash__slide.is-on .cls-viz--branch .cls-viz__nodes span:nth-child(2) {
  animation-delay: 0.12s;
}
.care-launch-splash__slide.is-on .cls-viz--branch .cls-viz__nodes span:nth-child(3) {
  animation-delay: 0.24s;
}
@keyframes cls-root-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes cls-link-in {
  0%,
  15% {
    opacity: 0;
    height: 0;
  }
  35%,
  70% {
    opacity: 1;
    height: 48px;
  }
  100% {
    opacity: 0.35;
    height: 48px;
  }
}
@keyframes cls-node-in {
  0%,
  25% {
    opacity: 0;
    transform: translateY(12px);
  }
  45%,
  75% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0.55;
    transform: translateY(0);
  }
}

/* 5 降本续费：带班降本 → 消失 → 成绩曲线 → 家长满意/续费 */
.cls-viz--scale {
  width: min(300px, 82vw);
  height: 248px;
}
.cls-viz--scale .cls-viz__phase {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__phase--crew {
  animation: cls-phase-crew 5.4s ease-in-out infinite;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__phase--result {
  animation: cls-phase-result 5.4s ease-in-out infinite;
}

.cls-viz--scale .cls-viz__teacher {
  position: absolute;
  left: 50%;
  top: 0;
  width: 96px;
  margin-left: -48px;
  text-align: center;
  z-index: 1;
}
.cls-viz--scale .cls-viz__person {
  position: relative;
  display: block;
  width: 22px;
  height: 30px;
  margin: 0 auto;
}
.cls-viz--scale .cls-viz__person::before,
.cls-viz--scale .cls-viz__person::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.cls-viz--scale .cls-viz__person::before {
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9aadc8;
}
.cls-viz--scale .cls-viz__person::after {
  top: 11px;
  width: 16px;
  height: 16px;
  border-radius: 8px 8px 6px 6px;
  background: #c5d2e8;
}
.cls-viz--scale .cls-viz__person--teach {
  width: 34px;
  height: 42px;
  margin: 0 auto 4px;
  animation: cls-root-pulse 2.2s ease-in-out infinite;
}
.cls-viz--scale .cls-viz__person--teach::before {
  width: 15px;
  height: 15px;
  background: linear-gradient(160deg, #8ec8ff, #4aa3f5);
  box-shadow: 0 0 0 3px rgba(15, 122, 239, 0.14);
}
.cls-viz--scale .cls-viz__person--teach::after {
  top: 17px;
  width: 24px;
  height: 22px;
  border-radius: 12px 12px 9px 9px;
  background: linear-gradient(160deg, #74c0ff, var(--punch));
  box-shadow: var(--shadow);
}
.cls-viz--scale .cls-viz__teacher em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--punch);
  white-space: nowrap;
}
.cls-viz--scale .cls-viz__kids {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 84px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px 4px;
  justify-items: center;
}
.cls-viz--scale .cls-viz__kids .cls-viz__person {
  opacity: 0;
  transform: scale(0.5);
}
.cls-viz--scale .cls-viz__kids .cls-viz__person:nth-child(odd)::before {
  background: #8fa6c4;
}
.cls-viz--scale .cls-viz__kids .cls-viz__person:nth-child(odd)::after {
  background: #b8c8e0;
}
.cls-viz--scale .cls-viz__kids .cls-viz__person:nth-child(even)::before {
  background: #7eb8a8;
}
.cls-viz--scale .cls-viz__kids .cls-viz__person:nth-child(even)::after {
  background: #a8d4c8;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__kids .cls-viz__person {
  animation: cls-kid-in 5.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.028s);
}
.cls-viz--scale .cls-viz__scale-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ok);
}

.cls-viz--scale .cls-viz__phase--result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0 4px;
}
.cls-viz--scale .cls-viz__chart-title {
  margin: 0 0 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--punch);
  opacity: 0;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__chart-title {
  animation: cls-result-title 5.4s ease-in-out infinite;
}
.cls-viz--scale .cls-viz__chart {
  display: block;
  width: 86%;
  height: 88px;
  margin: 0 auto;
  overflow: visible;
}
.cls-viz--scale .cls-viz__chart-line {
  stroke: var(--ok);
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  fill: none;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__chart-line {
  animation: cls-chart-draw 5.4s ease-in-out infinite;
}
.cls-viz--scale .cls-viz__chart-dot {
  fill: var(--ok);
  opacity: 0;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__chart-dot {
  animation: cls-chart-dot 5.4s ease-in-out infinite;
}
.cls-viz--scale .cls-viz__outcomes {
  display: flex;
  justify-content: center;
  margin-top: 0;
  min-height: 78px;
}
.cls-viz--scale .cls-viz__parent {
  position: relative;
  opacity: 0;
  transform: translateY(12px);
}
.cls-viz--scale .cls-viz__parent-art {
  width: 172px;
  height: 106px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 10px 16px rgba(239, 125, 26, 0.16));
}
.cls-viz--scale .cls-viz__parent-arm {
  transform-box: view-box;
  transform-origin: 52px 58px;
  transform: translate(2px, 4px) rotate(6deg);
  opacity: 0.55;
}
.cls-viz--scale .cls-viz__parent-hand {
  transform-box: view-box;
  transform-origin: 75px 48px;
}
.cls-viz--scale .cls-viz__parent-thumb {
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0.55);
}
.cls-viz--scale .cls-viz__parent-spark {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 82px 18px;
  transform: scale(0.4);
}
.cls-viz--scale .cls-viz__parent-bubble {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 92px 36px;
  transform: scale(0.35);
}
.cls-viz--scale .cls-viz__parent-mouth {
  stroke-dasharray: 12;
  stroke-dashoffset: 0;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__parent {
  animation: cls-parent-in 5.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__parent-arm {
  animation: cls-parent-arm 5.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__parent-hand {
  animation: cls-parent-hand 5.4s ease-in-out infinite;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__parent-thumb {
  animation: cls-parent-thumb 5.4s cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__parent-spark {
  animation: cls-parent-spark 5.4s ease-out infinite;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__parent-bubble {
  animation: cls-parent-bubble 5.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.care-launch-splash__slide.is-on .cls-viz--scale .cls-viz__parent-mouth {
  animation: cls-parent-mouth 5.4s ease-in-out infinite;
}

/* 0–32% 带班；32–38% 淡出；38–100% 同屏：先曲线，再家长竖拇指+续费 */
@keyframes cls-phase-crew {
  0%,
  4% {
    opacity: 0;
  }
  10%,
  30% {
    opacity: 1;
  }
  36%,
  100% {
    opacity: 0;
  }
}
@keyframes cls-phase-result {
  0%,
  36% {
    opacity: 0;
  }
  42%,
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cls-kid-in {
  0%,
  8% {
    opacity: 0;
    transform: scale(0.5);
  }
  16%,
  30% {
    opacity: 1;
    transform: scale(1);
  }
  36%,
  100% {
    opacity: 0;
    transform: scale(0.85);
  }
}
@keyframes cls-result-title {
  0%,
  38% {
    opacity: 0;
  }
  44%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cls-chart-draw {
  0%,
  40% {
    stroke-dashoffset: 280;
  }
  54%,
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes cls-chart-dot {
  0%,
  50% {
    opacity: 0;
    transform: scale(0.4);
  }
  56% {
    opacity: 1;
    transform: scale(1.35);
  }
  62%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes cls-parent-in {
  0%,
  54% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
  }
  66%,
  90% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes cls-parent-arm {
  0%,
  54% {
    opacity: 0.4;
    transform: translate(4px, 6px) rotate(10deg);
  }
  62%,
  92% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    opacity: 0.4;
    transform: translate(2px, 4px) rotate(6deg);
  }
}
@keyframes cls-parent-hand {
  0%,
  58% {
    transform: rotate(4deg);
  }
  66% {
    transform: rotate(-2deg);
  }
  72%,
  92% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(2deg);
  }
}
@keyframes cls-parent-thumb {
  0%,
  56% {
    transform: scaleY(0.4);
  }
  62% {
    transform: scaleY(1.12);
  }
  66%,
  92% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.7);
  }
}
@keyframes cls-parent-spark {
  0%,
  62% {
    opacity: 0;
    transform: scale(0.3);
  }
  66% {
    opacity: 1;
    transform: scale(1.1);
  }
  72% {
    opacity: 0.4;
    transform: scale(1.25);
  }
  78%,
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}
@keyframes cls-parent-bubble {
  /* 拇指约 66% 收束完成；5.4s × ~9.3% ≈ 500ms 后再出气泡 */
  0%,
  75% {
    opacity: 0;
    transform: scale(0.28) translateX(-6px);
  }
  81% {
    opacity: 1;
    transform: scale(1.08) translateX(0);
  }
  88%,
  94% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
  100% {
    opacity: 0;
  }
}
@keyframes cls-parent-mouth {
  0%,
  78%,
  100% {
    stroke-width: 1.7;
  }
  84%,
  92% {
    stroke-width: 2.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .care-launch-splash__track,
  .care-launch-splash.is-leaving,
  .care-launch-splash__track-wrap::before,
  .care-launch-splash__track-wrap::after,
  .cls-viz,
  .cls-viz * {
    animation: none !important;
    transition: none !important;
  }
}