/* ---------------------------------------------------------------------------
   BNI Summit 鼎峰商机日 — 开场动画
   投影幕专用：近黑底、BNI 红、一款字三个字重。
   --------------------------------------------------------------------------- */

:root {
  --ink: #060608;
  --white: #f7f7f8;
  --white-dim: rgb(247 247 248 / 0.62);
  --white-faint: rgb(247 247 248 / 0.34);
  --red: #db042c;
  --red-glow: rgb(219 4 44 / 0.55);
  --gold: #e8b64c;

  --font: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  /* 落地页同款弹簧曲线 */
  --spring: linear(
    0, 0.3892, 0.921, 1.1515, 1.1295, 1.037, 0.9817, 0.9751, 0.9892, 1.0011, 1,
    1.0026, 1.0003, 1, 0.9994, 0.9998, 1
  );
  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-slam: cubic-bezier(0.11, 0.9, 0.18, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

/* --- 霓虹底色 -------------------------------------------------------------- */
/* 四团大光晕在黑底上慢速游走。用 radial-gradient 自带的柔边而不是 blur()，
   投影机 GPU 便宜得多；只动 transform，全程合成器动画。 */

#neon {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.neon-blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  will-change: transform;
}

/* 红是品牌色只留一团，其余给紫 / 蓝 / 品红 — 夜店霓虹的冷暖对比 */
.nb-red {
  left: -25vmax; top: -30vmax;
  background: radial-gradient(circle, rgb(219 4 44 / 0.34), transparent 62%);
  animation: nb-drift-1 26s ease-in-out infinite alternate;
}
.nb-violet {
  right: -30vmax; top: -18vmax;
  background: radial-gradient(circle, rgb(122 43 255 / 0.36), transparent 60%);
  animation: nb-drift-2 34s ease-in-out infinite alternate;
}
.nb-blue {
  left: -22vmax; bottom: -32vmax;
  background: radial-gradient(circle, rgb(43 130 255 / 0.3), transparent 60%);
  animation: nb-drift-3 30s ease-in-out infinite alternate;
}
.nb-magenta {
  right: -24vmax; bottom: -28vmax;
  background: radial-gradient(circle, rgb(255 45 120 / 0.26), transparent 58%);
  animation: nb-drift-4 40s ease-in-out infinite alternate;
}

@keyframes nb-drift-1 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(24vmax, 16vmax) scale(1.25); }
}
@keyframes nb-drift-2 {
  from { transform: translate(0, 0) scale(1.15); }
  to { transform: translate(-20vmax, 22vmax) scale(0.95); }
}
@keyframes nb-drift-3 {
  from { transform: translate(0, 0) scale(1.1); }
  to { transform: translate(22vmax, -18vmax) scale(1.3); }
}
@keyframes nb-drift-4 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-18vmax, -20vmax) scale(1.2); }
}

/* --- 场景背景视频 ----------------------------------------------------------- */
/* 视频铺满全屏躺在霓虹层之上、文字之下；scrim 压暗画面保证白字可读。
   整个 wrapper 淡入淡出，没有视频的场景就完全看不到它。 */

#videowrap {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  /* 退场要快：下一场的重锤得砸在黑底上，不能砸在残影上 */
  transition: opacity 320ms ease;
}
#videowrap.live { opacity: 1; transition-duration: 800ms; }
#videowrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
#videowrap video.active { display: block; }
#videowrap .video-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 62% 52% at 50% 46%, rgb(6 6 8 / 0.42), transparent 72%),
    linear-gradient(rgb(6 6 8 / 0.5), rgb(6 6 8 / 0.24) 30%, rgb(6 6 8 / 0.24) 70%, rgb(6 6 8 / 0.55));
}

/* --- 舞台 ------------------------------------------------------------------ */

/* 文字在彩带之上：彩带庆祝归庆祝，不能盖住「活动正式开始」 */
#shaker { position: fixed; inset: 0; z-index: 10; }
#shaker.shake { animation: shake 480ms linear; }
#shaker.shake-big { animation: shake-big 620ms linear; }

@keyframes shake {
  0% { transform: translate(0, 0); }
  12% { transform: translate(-10px, 6px); }
  24% { transform: translate(9px, -5px); }
  36% { transform: translate(-7px, -6px); }
  48% { transform: translate(6px, 5px); }
  60% { transform: translate(-4px, 3px); }
  72% { transform: translate(3px, -2px); }
  86% { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}
@keyframes shake-big {
  0% { transform: translate(0, 0) scale(1.01); }
  10% { transform: translate(-16px, 10px) scale(1.01); }
  22% { transform: translate(14px, -9px) scale(1.008); }
  34% { transform: translate(-11px, -10px) scale(1.006); }
  46% { transform: translate(10px, 8px) scale(1.004); }
  58% { transform: translate(-7px, 5px) scale(1.002); }
  72% { transform: translate(5px, -4px); }
  86% { transform: translate(-2px, 2px); }
  100% { transform: translate(0, 0); }
}

#stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6vmin;
}
.scene.leaving { animation: scene-out 420ms var(--ease-cine) forwards; }
@keyframes scene-out {
  to { opacity: 0; filter: blur(10px); transform: scale(0.97); }
}

/* --- 影院黑边 -------------------------------------------------------------- */

.bar {
  position: fixed;
  left: 0; right: 0;
  height: 0;
  background: #000;
  z-index: 30;
  transition: height 900ms var(--ease-cine);
}
.bar-top { top: 0; }
.bar-bottom { bottom: 0; }
body.playing .bar { height: 6.5vh; }

/* --- 画布层 ---------------------------------------------------------------- */

#dust, #confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#dust { z-index: 5; }
#confetti { z-index: 6; }

/* --- 白闪 / 红脉冲 / 颗粒 / 暗角 ------------------------------------------- */

#flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}
#flash.go { animation: flash-out 560ms ease-out; }
#flash.go-soft { animation: flash-soft 460ms ease-out; }
@keyframes flash-out { from { opacity: 0.95; } to { opacity: 0; } }
@keyframes flash-soft { from { opacity: 0.4; } to { opacity: 0; } }

#pulse {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, var(--red-glow), transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
#pulse.go { animation: pulse-out 900ms ease-out; }
@keyframes pulse-out { from { opacity: 0.85; } to { opacity: 0; } }

#grain {
  position: fixed;
  inset: -100px;
  pointer-events: none;
  z-index: 50;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-jitter 700ms steps(6) infinite;
}
@keyframes grain-jitter {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-30px, 20px); }
  40% { transform: translate(25px, -35px); }
  60% { transform: translate(-20px, -25px); }
  80% { transform: translate(35px, 30px); }
  100% { transform: translate(0, 0); }
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 45;
  background: radial-gradient(ellipse 110% 100% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.55) 100%);
}

/* ===========================================================================
   待机画面
   =========================================================================== */

.standby { display: grid; place-items: center; }
.standby-inner {
  display: grid;
  justify-items: center;
  gap: 4.5vmin;
  animation: standby-in 1400ms var(--ease-cine) both;
}
@keyframes standby-in {
  from { opacity: 0; transform: translateY(24px); }
}

.standby-logo {
  height: 16vmin;
  width: auto;
  filter: drop-shadow(0 0 40px rgb(219 4 44 / 0.25));
}

/* 主视觉的「生意是」三个字是黑墨，投在深底上会消失 —
   叠两层白描边光晕把笔画托出来 */
.standby-art {
  width: min(64vw, 120vmin);
  height: auto;
  animation: art-breathe 5.2s ease-in-out infinite;
  filter: drop-shadow(0 0 1px rgb(247 247 248 / 0.9))
    drop-shadow(0 0 2px rgb(247 247 248 / 0.7))
    drop-shadow(0 0 18px rgb(247 247 248 / 0.28));
}
@keyframes art-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

.standby-halo {
  position: absolute;
  width: min(70vw, 130vmin);
  aspect-ratio: 2.6 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(219 4 44 / 0.16), transparent 65%);
  animation: halo-breathe 5.2s ease-in-out infinite;
  z-index: -1;
}
@keyframes halo-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

.standby-meta {
  display: grid;
  justify-items: center;
  gap: 1.4vmin;
  font-weight: 600;
  font-size: clamp(15px, 2.4vmin, 26px);
  letter-spacing: 0.14em;
  color: var(--white-dim);
}

.standby-status {
  display: inline-flex;
  align-items: center;
  gap: 1.2vmin;
  margin-top: 1vmin;
  padding: 1.1vmin 2.6vmin;
  border: 1px solid rgb(247 247 248 / 0.18);
  border-radius: 999px;
  font-size: clamp(14px, 2vmin, 22px);
  letter-spacing: 0.18em;
  color: var(--white);
  box-shadow: 0 0 2.4vmin rgb(219 4 44 / 0.3), inset 0 0 1.2vmin rgb(219 4 44 / 0.12);
}
.standby-dot {
  width: 1vmin;
  height: 1vmin;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgb(219 4 44 / 0.6); }
  50% { opacity: 0.6; box-shadow: 0 0 0 1.2vmin rgb(219 4 44 / 0); }
}

/* ===========================================================================
   场景一：诚意呈献
   =========================================================================== */

.presents { display: grid; justify-items: center; gap: 5vmin; }
.presents-logo {
  height: 20vmin;
  animation: logo-in 1600ms var(--ease-cine) both;
}
@keyframes logo-in {
  from { opacity: 0; transform: scale(1.12); filter: blur(14px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
.presents-line {
  font-size: clamp(20px, 4vmin, 46px);
  font-weight: 400;
  color: var(--white-dim);
  animation: tracking-in 1800ms var(--ease-cine) 500ms both;
}
@keyframes tracking-in {
  from { opacity: 0; letter-spacing: 1.1em; filter: blur(6px); text-indent: 1.1em; }
  to { opacity: 1; letter-spacing: 0.55em; filter: blur(0); text-indent: 0.55em; }
}

/* ===========================================================================
   场景二：商机日（逐字砸落）
   =========================================================================== */

.slam { display: grid; justify-items: center; gap: 4vmin; }
.slam-line { display: flex; }
.slam-char {
  font-size: clamp(90px, 30vmin, 400px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  animation: char-slam 520ms var(--ease-slam) both;
  animation-delay: calc(var(--i) * 260ms);
  text-shadow: 0 0 8vmin rgb(219 4 44 / 0.35);
}
@keyframes char-slam {
  from { opacity: 0; transform: scale(2.6); filter: blur(18px); }
  60% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: scale(1); }
}
.slam-caption {
  display: flex;
  align-items: center;
  gap: 2.4vmin;
  font-size: clamp(12px, 2vmin, 24px);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--red);
  animation: caption-in 700ms ease-out 1100ms both;
}
.slam-caption::before, .slam-caption::after {
  content: '';
  width: 9vmin;
  height: 2px;
  background: var(--red);
  transform-origin: center;
  animation: rule-grow 700ms var(--ease-cine) 1100ms both;
}
@keyframes caption-in { from { opacity: 0; } }
@keyframes rule-grow { from { transform: scaleX(0); } }

/* ===========================================================================
   静场文案（我们想告诉你 / 让我们一起倒数）
   =========================================================================== */

.quiet-line {
  font-size: clamp(26px, 6vmin, 72px);
  font-weight: 400;
  color: var(--white);
  animation: quiet-in 1300ms var(--ease-cine) both;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-shadow: 0 0 0.5em rgb(219 4 44 / 0.4), 0 0 1.4em rgb(219 4 44 / 0.25);
}
@keyframes quiet-in {
  from { opacity: 0; transform: translateY(3.5vmin); filter: blur(8px); }
}

/* ===========================================================================
   场景四：生意是玩出来的（主视觉砸出）
   =========================================================================== */

.artwork { display: grid; place-items: center; }
.artwork img {
  width: min(84vw, 160vmin);
  height: auto;
  animation: art-slam 640ms var(--ease-slam) both;
  /* 同待机画面：白描边把黑墨字从深底里托出来 */
  filter: drop-shadow(0 0 1px rgb(247 247 248 / 0.9))
    drop-shadow(0 0 2px rgb(247 247 248 / 0.7))
    drop-shadow(0 0 22px rgb(247 247 248 / 0.3));
}
@keyframes art-slam {
  from { opacity: 0; transform: scale(1.5); }
  55% { opacity: 1; }
  to { opacity: 1; transform: scale(1); }
}

/* 冲击波圆环 */
.ring {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 10vmin;
  height: 10vmin;
  margin: -5vmin 0 0 -5vmin;
  border: 3px solid rgb(247 247 248 / 0.8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 25;
  animation: ring-out 900ms var(--ease-cine) forwards;
}
.ring.red { border-color: rgb(219 4 44 / 0.85); }
@keyframes ring-out {
  from { opacity: 1; transform: scale(0.4); }
  to { opacity: 0; transform: scale(14); border-width: 1px; }
}

/* ===========================================================================
   提问场（逐字浮起）
   =========================================================================== */

.question { display: grid; justify-items: center; gap: 3.5vmin; }
.question-line { display: flex; flex-wrap: wrap; justify-content: center; }
.question-char {
  font-size: clamp(30px, 7.4vmin, 104px);
  font-weight: 900;
  line-height: 1.25;
  animation: char-rise 640ms var(--ease-cine) both;
  animation-delay: calc(var(--i) * 70ms);
  text-shadow: 0 0 0.4em rgb(255 45 120 / 0.35), 0 0 1.2em rgb(219 4 44 / 0.25);
}
@keyframes char-rise {
  from { opacity: 0; transform: translateY(0.55em) rotate(2deg); filter: blur(6px); }
}
.question-underline {
  width: 22vmin;
  height: 0.7vmin;
  min-height: 4px;
  background: var(--red);
  border-radius: 999px;
  transform-origin: left center;
  animation: underline-sweep 640ms var(--ease-cine) both;
  animation-delay: var(--u-delay, 900ms);
  box-shadow: 0 0 3vmin rgb(219 4 44 / 0.6);
}
@keyframes underline-sweep { from { transform: scaleX(0); } }

/* ===========================================================================
   倒数
   =========================================================================== */

.count { display: grid; place-items: center; }
.count-num {
  position: absolute;
  font-size: clamp(160px, 58vmin, 780px);
  font-weight: 900;
  line-height: 1;
  animation: num-in 1000ms var(--ease-slam) both;
  text-shadow: 0 0 12vmin rgb(219 4 44 / 0.5);
  font-variant-numeric: lining-nums;
}
@keyframes num-in {
  from { opacity: 0; transform: scale(2.4); filter: blur(24px); }
  30% { opacity: 1; filter: blur(0); transform: scale(1); }
  78% { opacity: 1; transform: scale(0.96); }
  to { opacity: 0; transform: scale(0.9); filter: blur(6px); }
}
.count-num:last-child { animation-name: num-in-hold; }
@keyframes num-in-hold {
  from { opacity: 0; transform: scale(2.4); filter: blur(24px); }
  30% { opacity: 1; filter: blur(0); transform: scale(1); }
  to { opacity: 1; transform: scale(0.94); }
}

/* ===========================================================================
   活动正式开始！
   =========================================================================== */

.burst { display: grid; justify-items: center; gap: 4vmin; }
.burst-line { display: flex; flex-wrap: wrap; justify-content: center; }
.burst-char {
  font-size: clamp(44px, 11.2vmin, 160px);
  font-weight: 900;
  line-height: 1.15;
  animation: char-pop 700ms var(--spring) both;
  animation-delay: calc(var(--i) * 90ms);
  text-shadow: 0 0 10vmin rgb(232 182 76 / 0.35);
}
@keyframes char-pop {
  from { opacity: 0; transform: scale(0.2); }
  1% { opacity: 1; }
}

/* ===========================================================================
   终场：QR Code
   =========================================================================== */

@property --halo-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.qr-scene { display: grid; place-items: center; }
/* 宽屏（如 2:1 投影）上 vmin 会偏大、纵向放不下 —
   所有尺寸再用 vh 封顶，保证整叠内容永远塞进上下黑边之间 */
.qr-stack {
  display: grid;
  justify-items: center;
  gap: min(4vmin, 2.2vh);
  animation: qr-rise 900ms var(--spring) both;
}
@keyframes qr-rise {
  from { opacity: 0; transform: translateY(7vmin) scale(0.92); }
}

.qr-heading {
  font-size: clamp(24px, min(5.4vmin, 5vh), 66px);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  animation: quiet-in 900ms var(--ease-cine) 250ms both;
}

/* 背光卡片：光环在卡后旋转，与落地页倒数卡同一手法 */
.qr-card {
  position: relative;
  padding: min(3.2vmin, 2.2vh);
  border-radius: 3vmin;
  background: #101014;
  isolation: isolate;
}
.qr-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #101014;
  z-index: -1;
}
.qr-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -2;
  background: conic-gradient(
    from var(--halo-angle),
    #db042c, #ff7a45, #e8b64c, #ff4d6d, #db042c
  );
  filter: blur(3.6vmin) saturate(1.6);
  animation: halo-spin 7s linear infinite;
}
@keyframes halo-spin {
  to { --halo-angle: 360deg; }
}

.qr-panel {
  background: #fff;
  border-radius: 1.6vmin;
  padding: min(2.6vmin, 1.8vh);
  line-height: 0;
}
.qr-panel svg {
  width: min(46vmin, 52vw, 42vh);
  height: auto;
  display: block;
}

.qr-meta {
  display: grid;
  justify-items: center;
  gap: 1.2vmin;
  animation: quiet-in 900ms var(--ease-cine) 500ms both;
}
.qr-sub {
  font-size: clamp(15px, min(2.8vmin, 2.8vh), 34px);
  font-weight: 600;
  color: var(--white-dim);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.qr-url {
  font-size: clamp(13px, 2vmin, 24px);
  color: var(--white-faint);
  letter-spacing: 0.08em;
}
.qr-logo {
  height: min(9vmin, 7vh);
  animation: quiet-in 900ms var(--ease-cine) 150ms both;
}