/**
 * 优发卡企业版 - 网站前台首页「入站动画」样式
 * 只在前台首页加载（PC 首页视图 / 手机首页）。店铺页与后台不引用本文件。
 * 配色与时长由页面内联配置（--fk-* 变量）驱动，模块本身不含站点专属内容。
 */

.fk-intro {
  display: none;
}

.fk-intro.is-on {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
  overflow: auto;
  box-sizing: border-box;
  background: #eaf1ff;
  color: #20304a;
  -webkit-font-smoothing: antialiased;
  contain: layout paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.fk-intro.is-on.is-ready {
  animation: fkIntroIn .34s ease both;
}

.fk-intro.is-out {
  transform: translate3d(0, -101%, 0);
  transition: transform .62s cubic-bezier(.72, .02, .2, 1);
  will-change: transform;
}

.fk-intro.is-out .fk-intro-card {
  opacity: 0;
  transition: opacity .24s ease;
}

.fk-intro-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.fk-intro-bg i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.fk-intro-mesh {
  inset: -28%;
  background:
    radial-gradient(ellipse 42% 36% at 18% 12%, rgba(255, 255, 255, .38), transparent 62%),
    radial-gradient(ellipse 46% 40% at 88% 78%, var(--fk-light, #7fb0ff), transparent 64%),
    radial-gradient(ellipse 28% 24% at 62% 18%, rgba(255, 255, 255, .16), transparent 70%);
  opacity: .9;
  transform: scale(1.12) translate3d(-6%, 4%, 0);
}

.fk-intro-aurora {
  inset: -40%;
  background: conic-gradient(from 200deg at 48% 58%,
    transparent 0deg,
    rgba(255, 255, 255, .0) 48deg,
    rgba(255, 255, 255, .14) 78deg,
    transparent 118deg,
    rgba(127, 176, 255, .22) 168deg,
    transparent 220deg,
    rgba(255, 255, 255, .1) 280deg,
    transparent 330deg);
  opacity: 0;
}

.fk-intro-shafts {
  inset: -8% -20%;
  background:
    linear-gradient(116deg, transparent 36%, rgba(255, 255, 255, .05) 46%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .06) 54%, transparent 66%),
    linear-gradient(98deg, transparent 48%, rgba(255, 255, 255, .1) 57%, transparent 68%);
  opacity: 0;
  transform-origin: 18% 0%;
}

.fk-intro-beam {
  top: -30%;
  left: 18%;
  width: 64%;
  height: 90%;
  background: radial-gradient(ellipse 28% 70% at 50% 0%, rgba(255, 255, 255, .34), rgba(255, 255, 255, .04) 46%, transparent 72%);
  opacity: 0;
}

.fk-intro-sweep {
  top: -30%;
  left: -45%;
  width: 38%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04), transparent);
  transform: rotate(18deg) translate3d(-40%, 0, 0);
  opacity: 0;
}

.fk-intro-dust {
  inset: 0;
  opacity: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255, 255, 255, .85), transparent),
    radial-gradient(1.2px 1.2px at 28% 68%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.6px 1.6px at 41% 18%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 63% 36%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.5px 1.5px at 74% 72%, rgba(255, 255, 255, .62), transparent),
    radial-gradient(1.1px 1.1px at 86% 24%, rgba(255, 255, 255, .48), transparent),
    radial-gradient(1.3px 1.3px at 9% 84%, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1.2px 1.2px at 52% 88%, rgba(255, 255, 255, .58), transparent);
  background-size: 100% 100%;
}

.fk-intro-vignette {
  inset: 0;
  background:
    radial-gradient(ellipse 58% 52% at 50% 42%, transparent 0%, rgba(5, 12, 32, .18) 62%, rgba(5, 12, 32, .55) 100%);
}

.fk-intro.is-run .fk-intro-mesh {
  animation: fkIntroMesh 3.2s cubic-bezier(.18, .78, .22, 1) both;
}

.fk-intro.is-run .fk-intro-aurora {
  animation: fkIntroAurora 3.4s cubic-bezier(.18, .7, .22, 1) both;
}

.fk-intro.is-run .fk-intro-shafts {
  animation: fkIntroShafts 2.8s cubic-bezier(.2, .82, .22, 1) .08s both;
}

.fk-intro.is-run .fk-intro-beam {
  animation: fkIntroBeam 2.6s cubic-bezier(.22, .8, .2, 1) .05s both;
}

.fk-intro.is-run .fk-intro-sweep {
  animation: fkIntroSweep 2.35s cubic-bezier(.16, .78, .22, 1) .18s both;
}

.fk-intro.is-run .fk-intro-dust {
  animation: fkIntroDust 3.1s linear both;
}

.fk-intro-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  text-align: center;
}

.fk-intro-logo {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
}

.fk-intro-logo::before {
  content: "";
  position: absolute;
  inset: -38px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .1) 34%, transparent 68%);
  opacity: 0;
  transform: scale(.7);
  z-index: 0;
}

.fk-intro.is-run .fk-intro-logo::before {
  animation: fkIntroCorona 2.3s cubic-bezier(.22, .82, .2, 1) both;
}

.fk-intro-logo img {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #fff;
  object-fit: contain;
  padding: 6px;
  box-shadow: 0 8px 24px #c8d5ed;
  animation: fkIntroPop .72s cubic-bezier(.2, .9, .22, 1) both;
}

.fk-intro-ring {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 88px;
  height: 88px;
  overflow: visible;
}

.fk-intro-ring circle {
  fill: none;
  stroke: var(--fk-brand, #3270ed);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 352;
  stroke-dashoffset: 352;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  animation: fkIntroRing 1.05s cubic-bezier(.32, .78, .3, 1) .1s both;
}

.fk-intro-name {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--fk-dark, #20304a);
  overflow-wrap: anywhere;
}

.fk-intro.is-run .fk-intro-name {
  animation: fkIntroFade .55s ease both;
}

.fk-intro-name span {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 108%, 0);
  animation: fkIntroRise .64s cubic-bezier(.22, .86, .24, 1) both;
}

.fk-intro-slogan {
  margin: 10px auto 0;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.7;
  color: #4d5f77;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  animation: fkIntroFade .6s ease .72s both;
}

.fk-intro-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 12.5px;
  flex-wrap: wrap;
  color: #65748b;
  animation: fkIntroFade .6s ease .82s both;
}

.fk-intro-meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
  vertical-align: middle;
}

.fk-intro-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  margin: 26px auto 0;
  animation: fkIntroFade .6s ease .92s both;
}

.fk-intro-stat {
  min-width: 0;
  flex: 1 1 0;
  padding: 0 12px;
  position: relative;
}

.fk-intro-stat + .fk-intro-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: #b8cae5;
}

.fk-intro-stat b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--fk-dark, #20304a);
  font-variant-numeric: tabular-nums;
}

.fk-intro-stat span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #596982;
  overflow-wrap: anywhere;
}

.fk-intro-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 460px;
  margin: 24px auto 0;
  padding: 10px 14px;
  border: 1px solid #c7d8ed;
  border-radius: 8px;
  background: rgba(255, 255, 255, .55);
  font-size: 12.5px;
  line-height: 1.6;
  color: #425773;
  text-align: left;
  overflow-wrap: anywhere;
  animation: fkIntroFade .6s ease 1s both;
}

.fk-intro-notice i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--fk-brand, #3270ed);
  animation: fkIntroPulse 1.6s ease-in-out infinite;
}

.fk-intro-bar {
  height: 2px;
  width: 172px;
  margin: 28px auto 0;
  border-radius: 2px;
  background: #c7d6ef;
  overflow: hidden;
}

.fk-intro-bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--fk-brand, #3270ed);
  transform: scaleX(0);
  transform-origin: left center;
}

.fk-intro.is-run .fk-intro-bar i {
  animation: fkIntroBar var(--fk-dur, 1900ms) cubic-bezier(.3, .7, .3, 1) both;
}

/* 手机端：更紧凑，竖向内容更省空间 */
.fk-intro[data-scope="h5"] .fk-intro-card {
  max-width: 420px;
}

.fk-intro[data-scope="h5"] .fk-intro-logo {
  width: 78px;
  height: 78px;
  margin-bottom: 16px;
}

.fk-intro[data-scope="h5"] .fk-intro-logo img {
  top: 11px;
  left: 11px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.fk-intro[data-scope="h5"] .fk-intro-ring {
  width: 78px;
  height: 78px;
}

.fk-intro[data-scope="h5"] .fk-intro-name {
  font-size: 24px;
}

.fk-intro[data-scope="h5"] .fk-intro-slogan {
  font-size: 13px;
}

.fk-intro[data-scope="h5"] .fk-intro-stats {
  margin-top: 20px;
}

.fk-intro[data-scope="h5"] .fk-intro-stat b {
  font-size: 21px;
}

.fk-intro[data-scope="h5"] .fk-intro-notice {
  margin-top: 18px;
  font-size: 12px;
}

.fk-intro[data-scope="h5"] .fk-intro-bar {
  margin-top: 22px;
}

.fk-intro[data-scope="h5"] .fk-intro-dust {
  opacity: .12;
}

.fk-intro[data-scope="h5"] .fk-intro-aurora {
  opacity: .7;
}

@media (max-height: 560px) {
  .fk-intro-stats,
  .fk-intro-notice {
    display: none;
  }
}

/* 页面滚动锁：播放期间不跟着滚 */
html.fk-intro-lock,
html.fk-intro-lock body {
  overflow: hidden !important;
}

@keyframes fkIntroIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fkIntroPop {
  from {
    opacity: 0;
    transform: scale(.72);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fkIntroRing {
  to {
    stroke-dashoffset: 44;
  }
}

@keyframes fkIntroRise {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fkIntroFade {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fkIntroBar {
  to {
    transform: scaleX(1);
  }
}

@keyframes fkIntroMesh {
  to {
    transform: scale(1) translate3d(5%, -3%, 0);
    opacity: 1;
  }
}

@keyframes fkIntroAurora {
  from {
    opacity: 0;
    transform: rotate(-22deg) scale(1.12);
  }
  to {
    opacity: .72;
    transform: rotate(14deg) scale(1);
  }
}

@keyframes fkIntroShafts {
  from {
    opacity: 0;
    transform: translate3d(-10%, -6%, 0) rotate(-8deg);
  }
  to {
    opacity: 1;
    transform: translate3d(6%, 3%, 0) rotate(4deg);
  }
}

@keyframes fkIntroBeam {
  from {
    opacity: 0;
    transform: translate3d(0, -8%, 0) scaleY(.82);
  }
  to {
    opacity: .95;
    transform: translate3d(0, 4%, 0) scaleY(1);
  }
}

@keyframes fkIntroSweep {
  0% {
    opacity: 0;
    transform: rotate(18deg) translate3d(-30%, 0, 0);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(18deg) translate3d(340%, 0, 0);
  }
}

@keyframes fkIntroDust {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  20% {
    opacity: .85;
  }
  to {
    opacity: .55;
    transform: translate3d(0, -18px, 0);
  }
}

@keyframes fkIntroCorona {
  from {
    opacity: 0;
    transform: scale(.7);
  }
  45% {
    opacity: 1;
    transform: scale(1.08);
  }
  to {
    opacity: .72;
    transform: scale(1);
  }
}

@keyframes fkIntroPulse {
  50% {
    opacity: .35;
    transform: scale(.7);
  }
}

/* 系统关闭动效 / 打印时完全不出现 */
/* Match the storefront's flowing pale palette and diagonal bands. */
.fk-intro-bg{background:linear-gradient(135deg,#eaf1ff 0%,#dce8ff 20%,#f1f6ff 44%,#e2ecff 66%,#eef4ff 84%,#e9f0ff 100%);background-size:240% 240%;animation:fkIntroFlow 26s ease-in-out infinite}
.fk-intro-bg .fk-intro-wave{inset:-8%;opacity:.78}
.fk-intro-wave.b1{background:linear-gradient(158deg,#d3e1f8,#e3ecfb 58%,#eff5fd);clip-path:polygon(0 0,100% 0,56% 100%,0 100%);animation:fkIntroWave 12s ease-in-out infinite alternate}
.fk-intro-wave.b2{background:linear-gradient(202deg,rgba(194,213,244,.88),rgba(226,237,252,.28) 72%);clip-path:polygon(68% 0,100% 0,100% 100%,20% 100%);animation:fkIntroWave 15s ease-in-out -6s infinite alternate-reverse}
.fk-intro-wave.b3{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 58%,transparent 85%);animation:fkIntroWave 14s ease-in-out -4s infinite alternate}
.fk-intro-card{margin:auto;flex-shrink:0}
.fk-intro-logo::before{display:none}
@keyframes fkIntroFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes fkIntroWave{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(4%,3%,0)}}
@media(max-width:600px){.fk-intro-stat{padding:0 4px}.fk-intro-stat b{font-size:20px}}
@media(max-height:560px){.fk-intro-stats{display:flex;margin-top:12px}.fk-intro-slogan{-webkit-line-clamp:2}.fk-intro-logo{margin-bottom:8px}}

@media (prefers-reduced-motion: reduce) {
  .fk-intro {
    display: none !important;
  }
}

@media print {
  .fk-intro {
    display: none !important;
  }
}