/* Festival artwork only; the original profile and content layout remain intact. */
:root {
  --festival-art: none;
  --festival-fireworks: none;
  --festival-crackers: none;
  --festival-snow: none;
  --festival-ground: none;
  --festival-band-height: 220px;
  --festival-effect-width: 180px;
}
:root[data-festival-holiday="midautumn"] { --festival-art: url('../assets/festivals/midautumn-a.webp'); }
:root[data-festival-holiday="national"] { --festival-art: url('../assets/festivals/national-selected.webp'); }
:root[data-festival-holiday="spring"] { --festival-art: url('../assets/festivals/spring-a.webp'); }
:root[data-festival-holiday="lantern"] { --festival-art: url('../assets/festivals/lantern-a.webp'); }
:root[data-festival-holiday="qingming"] { --festival-art: url('../assets/festivals/qingming-selected.webp'); }
:root[data-festival-holiday="dragonboat"] { --festival-art: url('../assets/festivals/dragonboat-b.webp'); }
:root[data-festival-holiday="qixi"] { --festival-art: url('../assets/festivals/qixi-b.webp'); }
:root[data-festival-active="true"][data-festival-holiday="spring"] {
  --festival-snow: url('../assets/festivals/snow.webp');
}
:root[data-festival-active="true"][data-festival-holiday="lantern"] {
  --festival-snow: url('../assets/festivals/snow.webp');
}
:root[data-festival-active="true"][data-festival-holiday="spring"],
:root[data-festival-active="true"][data-festival-holiday="lantern"] { --festival-ground: linear-gradient(to top,rgba(239,246,251,.98),rgba(239,246,251,.5) 16px,transparent 49px); }
:root[data-festival-active="true"][data-festival-holiday="qingming"],
:root[data-festival-active="true"][data-festival-holiday="dragonboat"] { --festival-ground: linear-gradient(to top,rgba(192,216,175,.38),rgba(207,225,191,.18) 22px,transparent 50px); }
:root[data-festival-active="true"][data-festival-holiday="qixi"] { --festival-ground: linear-gradient(to top,rgba(193,185,216,.26),transparent 48px); }
:root[data-festival-active="true"][data-festival-holiday="midautumn"] { --festival-ground: linear-gradient(to top,rgba(212,225,239,.4),transparent 48px); }
:root[data-festival-active="true"][data-festival-holiday="national"] { --festival-ground: linear-gradient(to top,rgba(226,201,158,.32),transparent 48px); }
:root[data-festival-active="true"][data-festival-scope="header"] .page-shell::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto;
  height: var(--festival-band-height);
  z-index: 0;
  pointer-events: none;
  background-image:
    var(--festival-ground),
    linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.85) 29%,rgba(255,255,255,.12) 48%,rgba(255,255,255,.12) 62%,rgba(255,255,255,.87) 84%,rgba(255,255,255,.97)),
    var(--festival-art);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% auto;
  background-position: center, center, center 34%;
}
:root[data-festival-active="true"][data-festival-scope="header"][data-festival-holiday="midautumn"] .page-shell::before {
  background-position: center, center, center 23%;
}
:root[data-festival-active="true"][data-festival-scope="header"][data-festival-holiday="national"] .page-shell::before {
  background-image:
    var(--festival-ground),
    linear-gradient(90deg,rgba(255,255,255,.84),rgba(255,255,255,.5) 28%,rgba(255,255,255,.08) 48%,rgba(255,255,255,.12) 63%,rgba(255,255,255,.88) 86%,rgba(255,255,255,.98)),
    var(--festival-art);
  background-position: center, center, center 78%;
}
:root[data-festival-active="true"][data-festival-scope="header"][data-festival-holiday="qingming"] .page-shell::before {
  background-position: center, center, center 51%;
}
:root[data-festival-active="true"][data-festival-scope="header"] .page-shell::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto;
  height: var(--festival-band-height);
  z-index: 0;
  pointer-events: none;
  background-image: var(--festival-snow);
  background-repeat: no-repeat;
  background-size: auto 300px;
  background-position: center top -70px;
  opacity: .2;
  mask-image: linear-gradient(90deg, transparent 22%, #000 58%);
}
:root[data-festival-active="true"][data-festival-scope="header"][data-festival-holiday="qingming"] .page-shell::after {
  background-image: repeating-linear-gradient(105deg,transparent 0 24px,rgba(77,120,146,.20) 25px 26px,transparent 27px 48px);
  background-size: 130px 170px;
  opacity: .22;
  animation: festival-rain 8s linear infinite;
}
:root[data-festival-active="true"][data-festival-scope="page"] body {
  background-image: linear-gradient(90deg, #f6f8fc 0%, rgba(246,248,252,.96) 16%, rgba(246,248,252,.52) 32%, rgba(255,255,255,.16) 65%), var(--festival-art);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  background-attachment: fixed;
}
:root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="midautumn"] body {
  background-image:
    linear-gradient(90deg, #f6f8fc 0%, rgba(246,248,252,.96) 16%, rgba(246,248,252,.52) 32%, rgba(255,255,255,.16) 65%),
    var(--festival-art),
    linear-gradient(180deg,#dceaf7,#f7fafc 70%,#fff);
  background-size: cover, cover, cover;
  background-position: center, right -600px center, center;
}
:root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="midautumn"]::before,
:root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="national"]::before {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  background-image: var(--festival-art);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
:root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="midautumn"]::before {
  width: 720px;
  height: 300px;
  right: calc(40vw - 510px);
  top: 18vh;
  mask-image: linear-gradient(to right, transparent, #000 28%, #000 70%, transparent 100%), linear-gradient(to bottom, transparent, #000 24%, #000 56%, transparent 100%);
  mask-composite: intersect;
}
:root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="national"]::before {
  width: 1320px;
  height: 550px;
  right: calc(48vw - 791px);
  top: 16vh;
  mask-image: radial-gradient(ellipse at 76% 34%, #000 14%, transparent 57%), linear-gradient(to bottom, transparent, #000 21%, #000 62%, transparent 100%);
  mask-composite: intersect;
}
:root[data-festival-active="true"][data-festival-scope="page"] .page-shell {
  z-index: 1;
}
:root[data-festival-active="true"][data-festival-scope="page"] body::before {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--festival-crackers);
  background-size: auto 150px;
  background-repeat: no-repeat;
  background-position: right 18px top 20px;
  opacity: .72;
}
:root[data-festival-active="true"][data-festival-scope="page"] body::after {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--festival-fireworks);
  background-repeat: no-repeat;
  background-size: var(--festival-effect-width) auto;
  background-position: right -30px top 30vh;
  opacity: .85;
}
:root[data-festival-active="true"][data-festival-scope="header"][data-festival-holiday="spring"] .page-shell::after,
:root[data-festival-active="true"][data-festival-scope="header"][data-festival-holiday="lantern"] .page-shell::after,
:root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="spring"] body::after,
:root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="national"] body::after {
  animation: festival-light 6.8s ease-in-out infinite;
}
:root[data-festival-active="true"][data-festival-scope="header"][data-festival-holiday="spring"] .page-shell::after,
:root[data-festival-active="true"][data-festival-scope="header"][data-festival-holiday="lantern"] .page-shell::after {
  background-image: var(--festival-snow);
  background-size: auto 300px;
  background-position: center top -70px;
  background-repeat: repeat-x;
  opacity: .22;
  mask-image: linear-gradient(90deg, transparent 18%, #000 52%);
  animation: festival-snow 16s linear infinite;
}
:root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="spring"] body::after {
  background-image: var(--festival-snow);
  background-size: 460px auto;
  background-position: center top -90px;
  background-repeat: repeat;
  opacity: .2;
  mask-image: linear-gradient(to right, transparent 28%, #000 78%);
  animation: festival-snow 20s linear infinite;
}
@keyframes festival-snow {
  from { background-position: center top -90px; }
  to { background-position: calc(50% + 38px) top 80px; }
}
@keyframes festival-rain {
  from { background-position: 0 -170px; }
  to { background-position: 42px 170px; }
}
@keyframes festival-light {
  0%,100% { opacity: .52; }
  30% { opacity: .95; }
  52% { opacity: .68; }
  75% { opacity: 1; }
}
@media (max-width: 640px) {
  :root[data-festival-active="true"][data-festival-scope="header"] .page-shell::before {
    background-image:
      linear-gradient(to bottom,transparent 24%,rgba(255,255,255,.87) 51%,#fff 70%),
      var(--festival-art);
    background-size: 100% 100%, auto 66%;
    background-position: center, center top;
    opacity: 1;
  }
  :root[data-festival-active="true"][data-festival-scope="header"][data-festival-holiday="national"] .page-shell::before {
    background-image:
      var(--festival-ground),
      linear-gradient(to bottom,rgba(255,255,255,.08) 8%,rgba(255,255,255,.8) 36%,#fff 68%),
      var(--festival-art);
    background-size: 100% 100%, 100% 100%, auto 50%;
    background-position: center, center, center top;
  }
  :root[data-festival-active="true"][data-festival-scope="header"] .page-shell::after {
    opacity: .14;
  }
  :root[data-festival-active="true"][data-festival-scope="page"] body {
    background-image: linear-gradient(90deg,rgba(246,248,252,.52),rgba(255,255,255,.18)), var(--festival-art);
  }
  :root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="midautumn"] body {
    background-image:
      linear-gradient(90deg,rgba(246,248,252,.52),rgba(255,255,255,.18)),
      var(--festival-art),
      linear-gradient(180deg,#dceaf7,#f7fafc 70%,#fff);
    background-size: cover, cover, cover;
    background-position: center, right -180px center, center;
  }
  :root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="midautumn"]::before,
  :root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="national"]::before { display: none; }
  :root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="midautumn"] .page-shell::before,
  :root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="national"] .page-shell::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    width: 185px;
    height: 150px;
    top: 0;
    right: 0;
    pointer-events: none;
    background-image: var(--festival-art);
    background-repeat: no-repeat;
    background-size: auto 150px;
    mask-image: radial-gradient(ellipse at 70% 35%, #000 24%, transparent 76%);
    opacity: .75;
  }
  :root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="midautumn"] .page-shell::before { background-position: right -10px top; }
  :root[data-festival-active="true"][data-festival-scope="page"][data-festival-holiday="national"] .page-shell::before { background-position: right -50px top; }
  :root[data-festival-active="true"][data-festival-scope="page"] body::before {
    background-size: auto 84px;
    background-position: right 3px top 8px;
    opacity: .4;
  }
  :root[data-festival-active="true"][data-festival-scope="page"] body::after {
    background-size: 110px auto;
    animation: none;
    opacity: .52;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-festival-active="true"][data-festival-scope][data-festival-holiday] .page-shell::after,
  :root[data-festival-active="true"][data-festival-scope][data-festival-holiday] body::after { animation: none; }
}
@media print {
  :root[data-festival-active="true"]::before,
  :root[data-festival-active="true"] .page-shell::before,
  :root[data-festival-active="true"] .page-shell::after,
  :root[data-festival-active="true"] body::before,
  :root[data-festival-active="true"] body::after { display: none; }
  :root[data-festival-active="true"][data-festival-scope="page"] body { background: #fff; }
}