/* 对照用户实拍视频：文字扫光、报名双次呼吸、金球左下柔光与右侧星光；小人缓慢从右側探出。
   保留原图，仅供合法界面演示，非银行官方服务。 */
.hero-campaign { height: calc(292 / 3 * var(--u)); overflow: hidden; }
/* Screenshot mascot overlap: omit its 39px source strip and use the adjoining
   tree/sky strip as a mirrored CSS background. This is a small reconstructed
   region; the supplied PNG and the rest of its artwork remain unchanged. */
.home-banner-slide[data-route='home-life-campaign'] img {
  -webkit-clip-path: polygon(0 0, 96.21% 0, 96.21% 53.03%, 100% 53.03%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 96.21% 0, 96.21% 53.03%, 100% 53.03%, 100% 100%, 0 100%);
}
.home-banner-slide[data-route='home-life-campaign']::after {
  content: '';
  position: absolute;
  left: calc((.833 + 990 / 3) * var(--u));
  top: calc(3.833 * var(--u));
  width: calc(39 / 3 * var(--u));
  height: calc(140 / 3 * var(--u));
  border-top-left-radius: calc(5 * var(--u));
  background: url('./assets/home-carousel-life.png') calc(-951 / 3 * var(--u)) 0 / calc(343 * var(--u)) calc(88 * var(--u)) no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}
/* The same supplied artwork also appears on Life and its activity detail. */
.life-campaign-repair,
.static-page__campaign[data-route='home-life-campaign'] { position: relative; }
.life-campaign-repair img,
.static-page__campaign[data-route='home-life-campaign'] img {
  -webkit-clip-path: polygon(0 0, 96.21% 0, 96.21% 53.03%, 100% 53.03%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 96.21% 0, 96.21% 53.03%, 100% 53.03%, 100% 100%, 0 100%);
}
.life-campaign-repair::after,
.static-page__campaign[data-route='home-life-campaign']::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 3.790087%;
  height: 53.030303%;
  border-top-left-radius: calc(5 * var(--u));
  background: url('./assets/home-carousel-life.png') 96.060606% 0 / 2638.461538% 188.571429% no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}
.hero-headline-glint {
  position: absolute;
  left: calc(164 / 3 * var(--u));
  top: calc(122 / 3 * var(--u));
  width: calc(436 / 3 * var(--u));
  height: calc(108 / 3 * var(--u));
  pointer-events: none;
  -webkit-mask: url('./assets/hero-headline-glint-mask.svg') center / 100% 100% no-repeat;
  mask: url('./assets/hero-headline-glint-mask.svg') center / 100% 100% no-repeat;
}
.hero-headline-glint::after,
.hero-gift-digits::after {
  content: '';
  position: absolute;
  inset: -30% -45%;
  background: linear-gradient(105deg, transparent 40%, #fff9d8a6 47%, #ffffffd9 50%, #fff9d8a6 53%, transparent 60%);
  animation: campaign-letter-shine 5.8s linear infinite;
}
.hero-cta-art {
  position: absolute;
  left: calc(468 / 3 * var(--u));
  top: calc(241 / 3 * var(--u));
  width: calc(190 / 3 * var(--u));
  height: calc(45 / 3 * var(--u));
  border-radius: calc(24 / 3 * var(--u));
  background: url('./assets/hero-campaign.png') calc(-468 / 3 * var(--u)) calc(-241 / 3 * var(--u)) / calc(375 * var(--u)) calc(292 / 3 * var(--u)) no-repeat;
  pointer-events: none;
  transform-origin: center;
  animation: campaign-cta-breathe 3s ease-in-out infinite;
}
.hero-gift-underlay,
.hero-gift {
  position: absolute;
  left: calc(700 / 3 * var(--u));
  top: calc(45 / 3 * var(--u));
  width: calc(262 / 3 * var(--u));
  height: calc(230 / 3 * var(--u));
  pointer-events: none;
  --gift-outline: polygon(3% 37%, 13% 26%, 16% 18%, 22% 13%, 28% 5%, 34% 5%, 41% 9%, 54% 9%, 58% 6%, 64% 7%, 66% 15%, 74% 15%, 82% 12%, 85% 14%, 92% 48%, 96% 57%, 94% 68%, 87% 78%, 74% 89%, 57% 98%, 42% 98%, 31% 93%, 21% 86%, 16% 80%, 10% 76%, 4% 80%, 2% 74%, 2% 66%, 6% 59%, 4% 47%);
}
.hero-gift-underlay {
  /* Restore the banner's blue field under the moving, flattened screenshot
     artwork. This small field is a CSS approximation of the original gradient. */
  background: radial-gradient(ellipse at 98% 65%, #a4ccedbb, transparent 65%), linear-gradient(115deg, #78a3cd, #87b2d8 60%, #9ac2e2);
  left: calc(692 / 3 * var(--u));
  top: calc(35 / 3 * var(--u));
  width: calc(280 / 3 * var(--u));
  height: calc(242 / 3 * var(--u));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-gift { transform-origin: 54% 65%; animation: gift-video-sway 3s ease-in-out infinite; }
.hero-gift-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: url('./assets/hero-campaign.png') calc(-700 / 3 * var(--u)) calc(-45 / 3 * var(--u)) / calc(375 * var(--u)) calc(292 / 3 * var(--u)) no-repeat;
  -webkit-clip-path: var(--gift-outline);
  clip-path: var(--gift-outline);
}
.hero-gift-shine {
  display: none;
}
.hero-gift-breath {
  position: absolute;
  left: -2%;
  top: 45%;
  width: 54%;
  height: 47%;
  background: radial-gradient(ellipse, #fff5bdf2, #ffefbf8f 38%, transparent 74%);
  opacity: 0;
  animation: campaign-sphere-glow 3s ease-in-out infinite;
  animation-delay: -.5s;
}
.hero-gift-digits {
  position: absolute;
  left: calc(50 / 3 * var(--u));
  top: calc(60 / 3 * var(--u));
  width: calc(128 / 3 * var(--u));
  height: calc(75 / 3 * var(--u));
  background: url('./assets/hero-campaign.png') calc(-750 / 3 * var(--u)) calc(-105 / 3 * var(--u)) / calc(375 * var(--u)) calc(292 / 3 * var(--u)) no-repeat;
  -webkit-clip-path: polygon(0 26%, 96% 0, 100% 67%, 5% 100%);
  clip-path: polygon(0 26%, 96% 0, 100% 67%, 5% 100%);
  transform-origin: 50% 50%;
  transform: none;
  -webkit-mask: url('./assets/hero-digits-glint-mask.svg') center / 100% 100% no-repeat;
  mask: url('./assets/hero-digits-glint-mask.svg') center / 100% 100% no-repeat;
}
.hero-gift-digits::after { animation-delay: -2s; }
.hero-gift-sparkles {
  position: absolute;
  left: calc(702 / 3 * var(--u));
  top: calc(32 / 3 * var(--u));
  width: calc(275 / 3 * var(--u));
  height: calc(250 / 3 * var(--u));
  pointer-events: none;
}
.hero-gift-spark {
  position: absolute;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  background: #fffbe7;
  -webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: gift-video-twinkle 2.5s ease-in-out infinite;
}
.hero-gift-spark:nth-child(1) { right: 0; top: 56%; animation-delay: -.65s; }
.hero-gift-spark:nth-child(2) { right: 7%; top: 69%; width: calc(9 * var(--u)); height: calc(9 * var(--u)); animation-delay: -1.8s; }
.hero-gift-spark:nth-child(3) { left: 29%; top: 73%; width: calc(5.5 * var(--u)); height: calc(5.5 * var(--u)); animation-delay: -.1s; }
/* The filmed helper is a side-peeking character, not a 15px vertical float.
   Its transparent hit area never covers neighbouring controls. */
.phone-app .floating-helper {
  top: calc((1483 / 3 - 44) * var(--u) + var(--safe-top));
  width: calc(28 * var(--u));
  height: calc(194 / 3 * var(--u));
  overflow: hidden;
  pointer-events: none;
}
.phone-app.on-wealth .floating-helper {
  top: calc((1480 / 3 - 44) * var(--u) + var(--safe-top));
  height: calc(194 / 3 * var(--u));
}
.phone-app .floating-helper .mascot-character {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  transform-origin: 100% 60%;
  animation: mascot-video-peek 5.8s cubic-bezier(.35, 0, .45, 1) infinite;
}
.phone-app .floating-helper .mascot-base {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(28 * var(--u));
  height: calc(194 / 3 * var(--u));
  pointer-events: none;
  -webkit-mask: url('./assets/mascot-body-home-mask.svg') center / 100% 100% no-repeat;
  mask: url('./assets/mascot-body-home-mask.svg') center / 100% 100% no-repeat;
}
.mascot-eye-open, .mascot-hand {
  position: absolute;
  display: block;
  pointer-events: none;
}
.mascot-eye-open {
  left: calc(16 / 3 * var(--u));
  top: calc(88 / 3 * var(--u));
  width: calc(28 / 3 * var(--u));
  height: calc(31 / 3 * var(--u));
  background: url('./assets/wealth-mascot.png') calc(-16 / 3 * var(--u)) calc(-95 / 3 * var(--u)) / calc(28 * var(--u)) calc(209 / 3 * var(--u)) no-repeat;
  -webkit-mask: url('./assets/mascot-eye-mask.svg') center / 100% 100% no-repeat;
  mask: url('./assets/mascot-eye-mask.svg') center / 100% 100% no-repeat;
  animation: mascot-eye-open 5.8s linear infinite;
}
.mascot-hand {
  inset: 0 auto auto 0;
  width: calc(28 * var(--u));
  height: calc(194 / 3 * var(--u));
  background: url('./assets/below-mascot.png') 0 0 / 100% 100% no-repeat;
  -webkit-mask: url('./assets/mascot-hand-mask.svg') center / 100% 100% no-repeat;
  mask: url('./assets/mascot-hand-mask.svg') center / 100% 100% no-repeat;
  transform-origin: 81% 78.9%;
  animation: mascot-hand-wave 5.8s ease-in-out infinite;
}
@keyframes gift-video-sway {
  0%, 100% { transform: rotate(0deg) scale(.99); }
  28% { transform: rotate(.45deg) scale(1.04); }
  72% { transform: rotate(-.4deg) scale(1.015); }
}
@keyframes gift-video-twinkle {
  0%, 42%, 100% { transform: scale(.25); opacity: 0; }
  58% { transform: scale(.95); opacity: .75; }
  70% { transform: scale(1.25); opacity: 1; }
  87% { transform: scale(.7); opacity: .32; }
}
@keyframes mascot-video-peek {
  0%, 8%, 100% { transform: translateX(101%) rotate(2deg); opacity: 0; }
  15% { transform: translateX(93%) rotate(2deg); opacity: 1; }
  55%, 75% { transform: translateX(0) rotate(0); opacity: 1; }
  94% { transform: translateX(101%) rotate(2deg); opacity: 0; }
}
/* Two left-eye winks and two hand waves share the same 5.8s clock as the peek.
   Open/closed poses use opacity, not a squashed pupil or a JS animation timer. */
@keyframes mascot-eye-open {
  0%, 29%, 33%, 43%, 47%, 100% { opacity: 1; }
  30.5%, 31.5%, 44.5%, 45.5% { opacity: 0; }
}
@keyframes mascot-hand-wave {
  0%, 20%, 100% { transform: rotate(14deg); }
  27%, 64%, 75% { transform: rotate(0); }
  33%, 49% { transform: rotate(-14deg); }
  41%, 57% { transform: rotate(8deg); }
}
@keyframes campaign-letter-shine {
  0%, 10% { transform: translateX(-40%); opacity: 0; }
  18% { opacity: .7; }
  48% { opacity: .9; }
  76% { opacity: .75; }
  86%, 100% { transform: translateX(40%); opacity: 0; }
}
@keyframes campaign-cta-breathe {
  0%, 44%, 83%, 100% { transform: scale(1); }
  23% { transform: scale(1.1); }
  65% { transform: scale(1.07); }
}
@keyframes campaign-sphere-glow {
  0%, 100% { transform: scale(.75); opacity: .06; }
  50% { transform: scale(1.18); opacity: .82; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-gift, .hero-gift-spark, .hero-cta-art, .hero-gift-breath,
  .hero-headline-glint::after, .hero-gift-digits::after,
  .phone-app .floating-helper .mascot-character,
  .mascot-eye-open, .mascot-hand { animation: none; }
  .hero-gift-underlay, .hero-gift { display: none; }
  .hero-headline-glint, .hero-gift-breath { opacity: 0; }
  .hero-gift-spark { opacity: 0; }
  .phone-app .floating-helper .mascot-character { transform: none; opacity: 1; }
  .mascot-eye-open { opacity: 1; }
  .mascot-hand { transform: none; }
}