*, *::before, *::after { box-sizing: border-box; }

:root { --ease-out: cubic-bezier(.22, .9, .2, 1); }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: #f7f1e1;
  color: #3b2f1c;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- 跳转前的闪白 ---------- */
.flash {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.flash.is-on { animation: flashOut .42s ease-out forwards; }
@keyframes flashOut { to { opacity: 1; } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 校徽开场（常州奶娃大学） ---------- */
.badge-scene {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.2vmin, 20px);
  padding: 4vmin 18px;
  text-align: center;
  color: #3b2f1c;
  background: radial-gradient(60% 48% at 50% 32%, #fffdf7 0%, #f9f2e1 48%, #f1e7d0 100%);
  overflow: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}
.badge-scene.is-out { opacity: 0; visibility: hidden; }

.badge-scene__halo {
  position: absolute;
  width: min(86vmin, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 96, .55) 0%, rgba(255, 205, 96, 0) 62%);
  animation: haloPulse 4.6s ease-in-out infinite;
}
@keyframes haloPulse { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }

.badge {
  position: relative;
  width: min(58vmin, 404px);
  aspect-ratio: 1;
  animation: badgeIn .85s var(--ease-out) both;
}
@keyframes badgeIn { from { opacity: 0; transform: scale(.68) rotate(-9deg); } to { opacity: 1; transform: none; } }
.badge-scene.is-out .badge { animation: badgeOut .5s var(--ease-out) forwards; }
@keyframes badgeOut { to { opacity: 0; transform: scale(1.07); } }

.badge__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(238, 194, 82, .65);
  opacity: 0;
  animation: badgePulse 1.05s var(--ease-out) .42s forwards;
  will-change: transform, opacity;
}
@keyframes badgePulse {
  0% { opacity: 0; transform: scale(.82); }
  25% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.3); }
}

.badge__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.badge__spin { transform-origin: 200px 200px; animation: badgeSpin 26s linear infinite; }
@keyframes badgeSpin { to { transform: rotate(360deg); } }

.badge__cn { fill: #fff; font-size: 25px; font-weight: 800; letter-spacing: .1em; text-anchor: middle; }
.badge__en { fill: #fffdf4; font-size: 13px; font-weight: 600; letter-spacing: .15em; text-anchor: middle; }

.badge__swirl { animation: swirlGlow 3.6s ease-in-out infinite; }
@keyframes swirlGlow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

.badge__bits rect { transform-box: fill-box; transform-origin: center; animation: bitTwinkle 2.8s ease-in-out infinite; }
.badge__bits rect:nth-child(2) { animation-delay: .5s; }
.badge__bits rect:nth-child(3) { animation-delay: 1s; }
.badge__bits rect:nth-child(4) { animation-delay: 1.5s; }
@keyframes bitTwinkle { 0%, 100% { opacity: .5; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }

.badge__shine {
  opacity: 0;
  animation: shineSweep 7s ease-in-out .8s infinite;
  will-change: transform, opacity;
}
@keyframes shineSweep {
  0% { opacity: 0; transform: translateX(0); }
  5% { opacity: 0; }
  13% { opacity: .75; }
  23% { opacity: .4; }
  29% { opacity: 0; transform: translateX(560px); }
  100% { opacity: 0; transform: translateX(560px); }
}

.badge__sparks { filter: drop-shadow(0 0 3px rgba(233, 181, 46, .45)); }
.badge__spark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: sparkFly .85s cubic-bezier(.18, .82, .3, 1) both;
  animation-delay: var(--spark-delay, .55s);
  will-change: transform, opacity;
}
@keyframes sparkFly {
  0% { opacity: 0; transform: translate(0, 0) scale(.35) rotate(45deg); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1) rotate(150deg); }
}

.badge__mascot-wrap {
  position: absolute;
  left: 50%;
  bottom: 22%;
  height: 62%;
  transform: translateX(-50%);
}
.badge__mascot {
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 12px 14px rgba(122, 85, 12, .22));
  animation: mascotIn .9s var(--ease-out) .18s both, mascotFloat 3.4s ease-in-out 1.3s infinite;
}
@keyframes mascotIn { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes mascotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5%); } }

.badge__orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: badgeSpin 9.5s linear infinite;
}
.badge__mini {
  position: absolute;
  left: 95%;
  top: 71%;
  width: 20%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px #e8c66a, 0 6px 14px rgba(122, 85, 12, .22);
  animation: badgeSpinBack 9.5s linear infinite;
}
@keyframes badgeSpinBack { to { transform: rotate(-360deg); } }

.badge-title {
  margin: 0;
  font-size: clamp(30px, 8.6vmin, 60px);
  font-weight: 900;
  letter-spacing: .06em;
  color: #3a2c16;
  animation: fadeUp .7s var(--ease-out) .3s both;
}

.badge-title.is-split { animation: none; }
.badge-title__char {
  display: inline-block;
  animation: charPop .62s var(--ease-out) both;
  will-change: transform, opacity;
}
@keyframes charPop {
  0% { opacity: 0; transform: translateY(18px) scale(.7); }
  60% { opacity: 1; transform: translateY(-3px) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
.badge-sub {
  margin: 0;
  display: flex;
  align-items: center;
  font-size: clamp(13px, 3.4vmin, 18px);
  color: #6d5a38;
  animation: fadeUp .7s var(--ease-out) .55s both;
}
.badge-dots { display: inline-flex; align-items: center; gap: 5px; margin-left: 9px; }
.badge-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c9a24d;
  animation: dotBlink 1.3s ease-in-out infinite;
}
.badge-dots i:nth-child(2) { animation-delay: .18s; }
.badge-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dotBlink { 0%, 100% { opacity: .28; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

.badge-progress {
  display: block;
  width: clamp(132px, 26vmin, 220px);
  height: 4px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(201, 162, 77, .22);
  overflow: hidden;
  animation: fadeUp .7s var(--ease-out) .92s both;
}
.badge-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd977, #dfa41f);
  transform: scaleX(0);
  transform-origin: left center;
  animation: barFill var(--bar-ms, 2600ms) linear forwards;
}
@keyframes barFill { to { transform: scaleX(1); } }

.badge-progress--loop i {
  width: 42%;
  transform: none;
  animation: barSlide 1.15s ease-in-out infinite alternate;
}
@keyframes barSlide {
  from { transform: translateX(-115%); }
  to { transform: translateX(255%); }
}

.badge-visit {
  margin: 0;
  font-size: clamp(12px, 3vmin, 15px);
  color: #8a7751;
  animation: fadeUp .7s var(--ease-out) .8s both;
}
.badge-visit b { display: inline-block; color: #dda31f; font-weight: 800; font-variant-numeric: tabular-nums; }
.badge-visit b.is-in { animation: numPop .5s ease-out; }
@keyframes numPop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }

.badge-go {
  margin-top: 4px;
  padding: 13px 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: linear-gradient(135deg, #ffd977, #e2a92c);
  color: #3a2c16;
  font-size: clamp(15px, 3.6vmin, 18px);
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 16px 32px -16px rgba(160, 120, 30, .85), inset 0 1px 0 rgba(255, 255, 255, .65);
  transition: transform .18s ease, filter .18s ease;
  animation: badgeGoIn .7s var(--ease-out) 1s both, goPulse 2.4s ease-in-out 2.2s infinite;
}
.badge-go:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.05); }
.badge-go:active { transform: translateY(0) scale(.98); }
.badge-go:focus-visible { outline: 2px solid #c9a24d; outline-offset: 3px; }
@keyframes badgeGoIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes goPulse {
  0%, 100% { box-shadow: 0 16px 32px -16px rgba(160, 120, 30, .85), inset 0 1px 0 rgba(255, 255, 255, .65), 0 0 0 0 rgba(226, 169, 44, .5); }
  55% { box-shadow: 0 16px 32px -16px rgba(160, 120, 30, .85), inset 0 1px 0 rgba(255, 255, 255, .65), 0 0 0 12px rgba(226, 169, 44, 0); }
}

.badge-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(8px, 2.2vh, 20px);
  margin: 0;
  font-size: 11.5px;
  color: rgba(122, 104, 66, .72);
}

@media (prefers-reduced-motion: reduce) {
  .badge-scene__halo, .badge__spin, .badge__orbit, .badge__mini, .badge__bits rect, .badge__mascot, .badge-dots i,
  .badge__pulse, .badge__spark, .badge__shine, .badge-progress--loop i { animation: none !important; }
  .badge, .badge-title, .badge-sub, .badge-visit, .badge-go, .badge-progress, .badge-title__char { animation-duration: .3s !important; animation-delay: 0s !important; }
  .badge-go { animation: badgeGoIn .3s ease both !important; }
  .badge-progress--loop i { width: 100%; transform: none; }
}

@media (max-width: 560px) {
  .badge-scene { gap: 16px; }
  .badge { width: min(64vmin, 312px); margin-bottom: 8px; }
}

@media (max-height: 720px) {
  .badge { width: min(42vmin, 300px); }
  .badge-title { font-size: clamp(26px, 6.4vmin, 40px); }
}

@media (max-height: 560px) {
  .badge-scene { gap: 8px; }
  .badge { width: min(34vmin, 236px); }
  .badge-title { font-size: clamp(22px, 5.4vmin, 30px); }
}