/* 登录页与首页的节日装饰。普通日期不加载此文件。 */
.seasonal-midautumn {
  --festival-deep: #142f54;
  --festival-rich: #28486f;
  --festival-glow: #f7d992;
  --festival-cream: #fff5d8;
}
.seasonal-national {
  --festival-deep: #822334;
  --festival-rich: #b83a3b;
  --festival-glow: #f6cf83;
  --festival-cream: #fff5dd;
}
.seasonal-spring {
  --festival-deep: #801f2c;
  --festival-rich: #b63238;
  --festival-glow: #f7c76f;
  --festival-cream: #fff1d2;
}

body.seasonal-login {
  background: radial-gradient(circle at 82% 12%, rgba(255, 230, 177, .38), transparent 26%),
    linear-gradient(130deg, rgba(17, 36, 59, .83), rgba(22, 54, 64, .63)),
    url('../assets/logpicture.jpg') center / cover fixed;
}
body.seasonal-national.seasonal-login,
body.seasonal-spring.seasonal-login {
  background: radial-gradient(circle at 82% 10%, rgba(255, 211, 141, .34), transparent 25%),
    linear-gradient(130deg, rgba(89, 18, 27, .85), rgba(135, 34, 37, .65)),
    url('../assets/logpicture.jpg') center / cover fixed;
}

.seasonal-login-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 184px;
  max-width: 780px;
  margin: 28px auto 0;
  padding: 22px 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 238, 192, .55);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(115deg, var(--festival-deep), var(--festival-rich));
  box-shadow: 0 18px 44px rgba(19, 31, 42, .24);
}
.seasonal-login-banner::before,
.seasonal-login-banner::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(255, 238, 192, .20);
  border-radius: 50%;
  pointer-events: none;
}
.seasonal-login-banner::before { width: 480px; height: 480px; right: -178px; top: -365px; }
.seasonal-login-banner::after { width: 590px; height: 590px; right: -130px; bottom: -526px; }
.seasonal-banner-copy { position: relative; z-index: 1; min-width: 0; }
.seasonal-eyebrow {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid rgba(255, 232, 177, .58);
  border-radius: 99px;
  color: var(--festival-cream);
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  letter-spacing: .13em;
}
.seasonal-banner-copy h1 { margin: 9px 0 4px; font-size: clamp(23px, 3.2vw, 34px); line-height: 1.28; letter-spacing: .07em; }
.seasonal-banner-copy p { margin: 0; color: var(--festival-cream); font-size: 14px; }
.seasonal-art { position: relative; flex: 0 0 158px; height: 130px; }

/* 中秋：圆月与两道云纹。 */
.seasonal-midautumn .seasonal-art::before {
  content: '';
  position: absolute;
  width: 112px;
  height: 112px;
  top: 3px;
  left: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 31%, #fff9de, #f5d58e 75%);
  box-shadow: 0 0 0 9px rgba(255, 237, 188, .09), 0 0 48px rgba(255, 222, 151, .40);
}
.seasonal-midautumn .seasonal-art span {
  position: absolute;
  z-index: 1;
  width: 89px;
  height: 13px;
  border-radius: 90px;
  border-top: 3px solid rgba(255, 247, 214, .85);
  transform: rotate(-9deg);
}
.seasonal-midautumn .seasonal-art span:nth-child(1) { left: 0; top: 74px; }
.seasonal-midautumn .seasonal-art span:nth-child(2) { left: 81px; top: 99px; width: 71px; }
.seasonal-midautumn .seasonal-art span:nth-child(3) { left: 37px; top: 123px; width: 55px; }

/* 国庆：金色星芒，避免使用会影响文字识别的大面积图案。 */
.seasonal-national .seasonal-art span { position: absolute; color: var(--festival-glow); line-height: 1; text-shadow: 0 0 24px rgba(255, 218, 139, .65); }
.seasonal-national .seasonal-art span::before { content: '✦'; }
.seasonal-national .seasonal-art span:nth-child(1) { left: 28px; top: 7px; font-size: 104px; }
.seasonal-national .seasonal-art span:nth-child(2) { left: 112px; top: 7px; font-size: 31px; }
.seasonal-national .seasonal-art span:nth-child(3) { left: 119px; top: 91px; font-size: 24px; }

/* 春节：两盏灯笼及穗饰。 */
.seasonal-spring .seasonal-art span:nth-child(1),
.seasonal-spring .seasonal-art span:nth-child(2) {
  position: absolute;
  display: block;
  width: 64px;
  height: 81px;
  top: 14px;
  border: 3px solid var(--festival-glow);
  border-radius: 45% 45% 43% 43%;
  background: repeating-linear-gradient(90deg, #bb3a35 0 12px, #d95543 12px 18px);
  box-shadow: inset 0 0 16px rgba(111, 22, 23, .45), 0 6px 24px rgba(248, 203, 125, .18);
}
.seasonal-spring .seasonal-art span:nth-child(1) { left: 8px; }
.seasonal-spring .seasonal-art span:nth-child(2) { left: 89px; top: 31px; transform: scale(.78); }
.seasonal-spring .seasonal-art span:nth-child(1)::after,
.seasonal-spring .seasonal-art span:nth-child(2)::after {
  content: '';
  position: absolute;
  left: 26px;
  bottom: -30px;
  width: 4px;
  height: 29px;
  background: var(--festival-glow);
  box-shadow: -6px 7px 0 -1px var(--festival-glow), 6px 7px 0 -1px var(--festival-glow);
}

.seasonal-login .login-layout {
  margin-top: 14px;
  border: 1px solid rgba(255, 235, 191, .65);
  box-shadow: 0 18px 48px rgba(18, 26, 41, .22);
}
.seasonal-login .login-roles { background: #fffaf0; }
.seasonal-login .login-role.active { background: var(--festival-deep); }

.seasonal-home .hero { min-height: 276px; padding-top: 28px; background-size: cover; background-position: center; }
.seasonal-midautumn.seasonal-home .hero {
  background-image: radial-gradient(circle at 86% 22%, rgba(255, 239, 188, .92) 0 42px, rgba(255, 237, 180, .10) 66px, transparent 96px),
    linear-gradient(105deg, rgba(14, 40, 73, .92), rgba(34, 62, 105, .78)), url('../assets/background.jpg');
}
.seasonal-national.seasonal-home .hero {
  background-image: radial-gradient(circle at 88% 20%, rgba(255, 222, 158, .35), transparent 21%),
    linear-gradient(105deg, rgba(108, 24, 35, .93), rgba(162, 47, 48, .78)), url('../assets/background.jpg');
}
.seasonal-spring.seasonal-home .hero {
  background-image: radial-gradient(circle at 88% 18%, rgba(255, 219, 140, .38), transparent 24%),
    linear-gradient(105deg, rgba(108, 21, 35, .94), rgba(165, 45, 42, .80)), url('../assets/background.jpg');
}
.seasonal-home .hero::after {
  content: '✦';
  position: absolute;
  right: 8%;
  top: 62px;
  color: rgba(255, 232, 178, .45);
  font-size: 94px;
  line-height: 1;
  pointer-events: none;
}
.seasonal-midautumn.seasonal-home .hero::after { content: '☾'; font-size: 110px; }
.seasonal-spring.seasonal-home .hero::after { content: '福'; font-family: serif; font-size: 108px; }
.seasonal-home .hero > .container { position: relative; z-index: 1; }
.festival-hero-badge {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin: 0 0 8px;
  padding: 3px 11px;
  border: 1px solid rgba(255, 236, 189, .52);
  border-radius: 99px;
  color: var(--festival-cream);
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  letter-spacing: .13em;
}
.festival-spark { color: var(--festival-glow); font-size: 11px; }
.festival-hero-greeting { margin-bottom: 13px; color: #fff8df; font-size: clamp(19px, 2.4vw, 26px); font-weight: 750; letter-spacing: .04em; line-height: 1.34; }
.festival-hero-greeting small { display: block; margin-top: 2px; color: rgba(255, 247, 222, .82); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.seasonal-home .hero h1 { font-size: 22px; }
.seasonal-home .hero p { margin-bottom: 17px; }

@media (max-width: 768px) {
  .seasonal-login-banner { min-height: 142px; gap: 14px; margin-top: 14px; padding: 17px 20px; border-radius: 16px; }
  .seasonal-art { order: 2; flex-basis: 78px; height: 90px; transform: scale(.62); transform-origin: left center; margin-right: -24px; }
  .seasonal-banner-copy { order: 1; }
  .seasonal-banner-copy h1 { font-size: 21px; letter-spacing: .025em; }
  .seasonal-banner-copy p { font-size: 12px; }
  .seasonal-eyebrow { font-size: 10px; }
  .seasonal-home .hero { min-height: 0; padding: 18px 0 25px; }
  .seasonal-home .hero::after { right: 4%; top: 24px; font-size: 62px; }
  .seasonal-home .hero h1 { font-size: 17px; }
  .festival-hero-greeting { font-size: 19px; margin-bottom: 8px; }
  .festival-hero-greeting small { font-size: 11px; }
}
@media (max-width: 420px) {
  .seasonal-login-banner { gap: 6px; padding: 14px 16px; }
  .seasonal-art { flex-basis: 59px; transform: scale(.48); margin-right: -12px; }
  .seasonal-banner-copy h1 { font-size: 18px; }
  .seasonal-banner-copy p { font-size: 11px; line-height: 1.5; }
}