/*
 * Premium holiday art direction.
 * The layer keeps the original document order and content intact. It adds
 * canvas motion, typographic treatment, surface material, and quiet 3D depth.
 */
body[data-holiday] {
  --holiday-primary: var(--color-primary, #d9232e);
  --holiday-secondary: #f6c453;
  --holiday-deep: #4f1118;
  --holiday-soft: rgba(217, 35, 46, .10);
  --holiday-glow: rgba(246, 196, 83, .36);
  --holiday-paper: rgba(255, 252, 244, .72);
  --holiday-name: "";
  --holiday-line: "SINE MICROECOLOGY";
  --holiday-symbol: "";
  --holiday-pattern-a: rgba(255,255,255,.08);
  --holiday-pattern-b: rgba(255,255,255,.04);
}

body[data-holiday="new-year"] {
  --holiday-primary: #c71f35;
  --holiday-secondary: #f0d36a;
  --holiday-deep: #10243d;
  --holiday-soft: rgba(199,31,53,.13);
  --holiday-glow: rgba(240,211,106,.44);
  --holiday-name: "元宵";
  --holiday-symbol: "元宵";
  --holiday-line: "LANTERN FESTIVAL";
}

body[data-holiday="spring-festival"] {
  --holiday-primary: #d9232e;
  --holiday-secondary: #ffd36a;
  --holiday-deep: #551015;
  --holiday-soft: rgba(217,35,46,.15);
  --holiday-glow: rgba(255,211,106,.48);
  --holiday-name: "春节";
  --holiday-symbol: "春";
  --holiday-line: "SPRING FESTIVAL";
}

body[data-holiday="dragon-boat"] {
  --holiday-primary: #087a64;
  --holiday-secondary: #d8b45a;
  --holiday-deep: #113b36;
  --holiday-soft: rgba(8,122,100,.13);
  --holiday-glow: rgba(216,180,90,.38);
  --holiday-name: "端午";
  --holiday-symbol: "安";
  --holiday-line: "DRAGON BOAT";
}

body[data-holiday="mid-autumn"] {
  --holiday-primary: #9c621b;
  --holiday-secondary: #f2cd76;
  --holiday-deep: #2d2545;
  --holiday-soft: rgba(156,98,27,.14);
  --holiday-glow: rgba(242,205,118,.46);
  --holiday-name: "中秋";
  --holiday-symbol: "月";
  --holiday-line: "MID AUTUMN";
}

body[data-holiday="national-day"] {
  --holiday-primary: #c7192f;
  --holiday-secondary: #ffd447;
  --holiday-deep: #4f0d18;
  --holiday-soft: rgba(199,25,47,.15);
  --holiday-glow: rgba(255,212,71,.48);
  --holiday-name: "国庆";
  --holiday-symbol: "华";
  --holiday-line: "NATIONAL DAY";
}

body[data-holiday]:not([data-holiday="none"]) {
  --color-primary: var(--holiday-primary);
  --color-accent: var(--holiday-primary);
  --color-accent-rgb: 217,35,46;
  background:
    radial-gradient(circle at 12% 12%, var(--holiday-soft), transparent 28vw),
    radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--holiday-secondary) 18%, transparent), transparent 24vw),
    var(--bg, #f7fbfd);
}

body[data-holiday="none"] #holiday-canvas,
body[data-holiday="none"] .holiday-stage {
  display: none;
}

body[data-holiday] .site-header {
  z-index: 1500;
}

body[data-holiday] .site-header.on-hero {
  background: transparent;
  color: #fff;
  backdrop-filter: none;
  box-shadow: none;
}

body[data-holiday] .site-header.on-hero .logo-sine-main {
  fill: var(--holiday-primary);
}

body[data-holiday] .site-header.on-hero .logo-sine-sub {
  fill: #5f6f82;
}

body[data-holiday] .site-header .header-inner {
  display: grid;
  grid-template-columns: minmax(168px, 1fr) auto minmax(168px, 1fr);
  align-items: center;
  gap: 16px;
}

body[data-holiday] .site-header .logo {
  justify-self: start;
  min-width: 120px;
}

body[data-holiday] .site-header .nav-desktop {
  grid-column: 2;
  justify-self: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

body[data-holiday] .site-header .header-tools {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 120px;
}

#holiday-canvas {
  position: fixed;
  inset: 0;
  z-index: 850;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .48;
}

.holiday-stage {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  overflow: hidden;
  perspective: 1400px;
}

.holiday-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 44%, color-mix(in srgb, var(--holiday-secondary) 14%, transparent) 44% 45%, transparent 46%),
    radial-gradient(circle at 16% 78%, var(--holiday-soft), transparent 240px),
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--holiday-secondary) 16%, transparent), transparent 210px);
  opacity: .84;
}

.holiday-stage::after {
  content: var(--holiday-line);
  position: absolute;
  right: clamp(18px, 4vw, 58px);
  top: calc(var(--header-h, 76px) + 20px);
  writing-mode: vertical-rl;
  color: color-mix(in srgb, var(--holiday-secondary) 64%, #fff);
  font: 700 11px/1.2 "Noto Serif SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .22em;
  opacity: .74;
  text-shadow: 0 8px 26px color-mix(in srgb, var(--holiday-primary) 34%, transparent);
}

.holiday-sigil {
  position: fixed;
  right: clamp(18px, 4vw, 58px);
  bottom: max(clamp(28px, 8vh, 92px), calc(env(safe-area-inset-bottom, 0px) + 28px));
  z-index: 1800;
  width: clamp(82px, 8vw, 118px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-family: "Ma Shan Zheng", "Noto Serif SC", "Microsoft YaHei", serif;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.05;
  text-align: center;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.44), transparent 20%),
    conic-gradient(from 20deg, var(--holiday-secondary), var(--holiday-primary), var(--holiday-deep), var(--holiday-secondary));
  box-shadow:
    0 24px 70px color-mix(in srgb, var(--holiday-primary) 24%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.32),
    inset 0 0 34px rgba(255,255,255,.12);
  transform-style: preserve-3d;
  animation: holidaySigilFloat 6s ease-in-out infinite;
}

.holiday-sigil::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid color-mix(in srgb, var(--holiday-secondary) 58%, transparent);
  border-radius: 50%;
}

.holiday-sigil::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.24);
  transform: translateZ(22px);
}

.holiday-motif {
  position: fixed;
  z-index: 4;
  width: var(--motif-size, 84px);
  height: var(--motif-size, 84px);
  left: var(--motif-x, 12%);
  top: var(--motif-y, 18%);
  opacity: var(--motif-opacity, .34);
  transform: rotate(var(--motif-rotate, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 34px var(--holiday-soft));
  animation: holidayMotifDrift var(--motif-speed, 12s) ease-in-out infinite alternate;
}

.holiday-motif::before,
.holiday-motif::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--holiday-secondary) 48%, transparent);
  background:
    radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--holiday-secondary) 50%, transparent), transparent 22%),
    linear-gradient(135deg, color-mix(in srgb, var(--holiday-primary) 34%, transparent), transparent);
}

.holiday-motif::after {
  inset: 24%;
  transform: translateZ(24px) rotate(45deg);
  border-color: color-mix(in srgb, var(--holiday-primary) 46%, transparent);
}

body[data-holiday="spring-festival"] .holiday-motif::before {
  border-radius: 44% 44% 52% 52%;
  background:
    linear-gradient(90deg, transparent 47%, color-mix(in srgb, var(--holiday-secondary) 62%, transparent) 47% 53%, transparent 53%),
    radial-gradient(circle at 50% 22%, var(--holiday-secondary), transparent 18%),
    linear-gradient(180deg, var(--holiday-primary), var(--holiday-deep));
}

body[data-holiday="spring-festival"] .holiday-motif {
  display: none;
}

body[data-holiday="dragon-boat"] .holiday-motif::before {
  border-radius: 80% 18% 82% 18% / 58% 26% 74% 42%;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--holiday-secondary) 55%, transparent), transparent 28%),
    linear-gradient(145deg, var(--holiday-primary), color-mix(in srgb, var(--holiday-primary) 38%, transparent));
}

body[data-holiday="mid-autumn"] .holiday-motif::before {
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, rgba(255,255,255,.62), transparent 18%),
    radial-gradient(circle, var(--holiday-secondary), color-mix(in srgb, var(--holiday-primary) 26%, transparent) 62%, transparent 68%);
  border: 0;
}

body[data-holiday="national-day"] .holiday-motif::before {
  border-radius: 0;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 70%, 21% 92%, 32% 57%, 2% 35%, 39% 35%);
  background: linear-gradient(135deg, var(--holiday-secondary), var(--holiday-primary));
  border: 0;
}

body[data-holiday="national-day"] .holiday-motif {
  display: none;
}

body[data-holiday]:not([data-holiday="none"]) .site-footer,
body[data-holiday]:not([data-holiday="none"]) .section,
body[data-holiday]:not([data-holiday="none"]) .section-alt {
  position: relative;
  z-index: 5;
}

body[data-holiday]:not([data-holiday="none"]) .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1500;
}

body[data-holiday]:not([data-holiday="none"]) .site-header.scrolled,
body[data-holiday]:not([data-holiday="none"]) .site-header:not(.on-hero) {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96), color-mix(in srgb, var(--holiday-paper) 72%, #fff));
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--holiday-primary) 18%, transparent),
    0 18px 44px var(--holiday-soft);
}

body[data-holiday]:not([data-holiday="none"]) .logo {
  filter: drop-shadow(0 8px 18px var(--holiday-soft));
}

body[data-holiday]:not([data-holiday="none"]) .btn-primary {
  background:
    linear-gradient(135deg, var(--holiday-primary), var(--holiday-secondary));
  box-shadow:
    0 14px 34px color-mix(in srgb, var(--holiday-primary) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.24);
}

body[data-holiday]:not([data-holiday="none"]) .nav-cta,
body[data-holiday]:not([data-holiday="none"]) .nav-cta.active,
body[data-holiday]:not([data-holiday="none"]) .nav-cta:hover,
body[data-holiday]:not([data-holiday="none"]) .nav-item:hover > .nav-cta,
body[data-holiday]:not([data-holiday="none"]) .nav-item:focus-within > .nav-cta {
  background: linear-gradient(135deg, #EF4A54 0%, #D9232E 58%, #B81822 100%) !important;
  color: #fff !important;
}

body[data-holiday]:not([data-holiday="none"]) .nav-desktop a:not(.nav-cta).active,
body[data-holiday]:not([data-holiday="none"]) .nav-desktop a:not(.nav-cta):hover,
body[data-holiday]:not([data-holiday="none"]) .site-search-trigger:hover {
  background: color-mix(in srgb, var(--holiday-primary) 11%, #fff);
  color: var(--holiday-primary);
}

body[data-holiday]:not([data-holiday="none"]) .hero,
body[data-holiday]:not([data-holiday="none"]) .page-hero,
body[data-holiday]:not([data-holiday="none"]) .article-hero {
  isolation: isolate;
}

body[data-holiday]:not([data-holiday="none"]) .hero-overlay,
body[data-holiday]:not([data-holiday="none"]) .page-hero__overlay,
body[data-holiday]:not([data-holiday="none"]) .page-hero-overlay,
body[data-holiday]:not([data-holiday="none"]) .article-hero__overlay {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--holiday-deep) 74%, rgba(33,9,12,.72)), rgba(18,10,13,.34)),
    radial-gradient(circle at 74% 18%, color-mix(in srgb, var(--holiday-secondary) 38%, transparent), transparent 270px),
    radial-gradient(circle at 14% 84%, color-mix(in srgb, var(--holiday-primary) 28%, transparent), transparent 300px);
}

body[data-holiday]:not([data-holiday="none"]) .hero::after,
body[data-holiday]:not([data-holiday="none"]) .page-hero::after,
body[data-holiday]:not([data-holiday="none"]) .article-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--holiday-secondary) 42%, transparent), transparent),
    repeating-linear-gradient(90deg, transparent 0 42px, color-mix(in srgb, var(--holiday-secondary) 13%, transparent) 42px 43px);
  opacity: .68;
  mask-image: linear-gradient(180deg, transparent, #000);
}

body[data-holiday]:not([data-holiday="none"]) .hero-badge {
  font-family: "Noto Serif SC", "Microsoft YaHei", serif;
  border: 1px solid color-mix(in srgb, var(--holiday-secondary) 42%, transparent);
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), color-mix(in srgb, var(--holiday-primary) 30%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

body[data-holiday]:not([data-holiday="none"]) .hero-badge::after {
  content: " · " var(--holiday-name);
  color: color-mix(in srgb, var(--holiday-secondary) 84%, #fff);
}

body[data-holiday]:not([data-holiday="none"]) .hero-title,
body[data-holiday]:not([data-holiday="none"]) .page-hero h1,
body[data-holiday]:not([data-holiday="none"]) .article-hero h1,
body[data-holiday]:not([data-holiday="none"]) .section-title {
  font-family: "Noto Serif SC", "Microsoft YaHei", serif;
  letter-spacing: 0;
  text-wrap: balance;
}

body[data-holiday]:not([data-holiday="none"]) .hero-title {
  text-shadow:
    0 12px 36px rgba(0,0,0,.38),
    0 0 34px color-mix(in srgb, var(--holiday-secondary) 32%, transparent);
}

body[data-holiday]:not([data-holiday="none"]) .section-label {
  font-family: "Noto Serif SC", "Microsoft YaHei", serif;
}

body[data-holiday]:not([data-holiday="none"]) .section-label::before {
  background: linear-gradient(90deg, var(--holiday-primary), var(--holiday-secondary));
  box-shadow: 0 0 18px var(--holiday-glow);
}

body[data-holiday]:not([data-holiday="none"]) .product-card,
body[data-holiday]:not([data-holiday="none"]) .news-card,
body[data-holiday]:not([data-holiday="none"]) .research-card,
body[data-holiday]:not([data-holiday="none"]) .timeline-item,
body[data-holiday]:not([data-holiday="none"]) .official-store-link {
  position: relative;
  transform-style: preserve-3d;
  border-color: color-mix(in srgb, var(--holiday-primary) 20%, #e6eef4);
  background:
    linear-gradient(145deg, rgba(255,255,255,.97), color-mix(in srgb, var(--holiday-paper) 48%, #fff));
  box-shadow:
    0 12px 34px rgba(28,57,90,.06),
    0 0 0 1px color-mix(in srgb, var(--holiday-secondary) 12%, transparent);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

body[data-holiday]:not([data-holiday="none"]) .product-card::before,
body[data-holiday]:not([data-holiday="none"]) .news-card::before,
body[data-holiday]:not([data-holiday="none"]) .research-card::before,
body[data-holiday]:not([data-holiday="none"]) .timeline-item::before,
body[data-holiday]:not([data-holiday="none"]) .official-store-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 0 44%, color-mix(in srgb, var(--holiday-secondary) 20%, transparent) 45%, transparent 52%),
    radial-gradient(circle at 88% 12%, var(--holiday-soft), transparent 96px);
  opacity: .72;
}

body[data-holiday]:not([data-holiday="none"]) .product-card > *,
body[data-holiday]:not([data-holiday="none"]) .news-card > *,
body[data-holiday]:not([data-holiday="none"]) .research-card > *,
body[data-holiday]:not([data-holiday="none"]) .timeline-item > *,
body[data-holiday]:not([data-holiday="none"]) .official-store-link > * {
  position: relative;
  z-index: 2;
}

body[data-holiday]:not([data-holiday="none"]) .product-card:hover,
body[data-holiday]:not([data-holiday="none"]) .news-card:hover,
body[data-holiday]:not([data-holiday="none"]) .research-card:hover,
body[data-holiday]:not([data-holiday="none"]) .official-store-link:hover {
  transform: perspective(1100px) rotateX(2deg) rotateY(-3deg) translateY(-5px);
  border-color: color-mix(in srgb, var(--holiday-primary) 44%, #e6eef4);
  box-shadow:
    0 28px 74px color-mix(in srgb, var(--holiday-primary) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--holiday-secondary) 22%, transparent);
}

body[data-holiday]:not([data-holiday="none"]) .product-card-img,
body[data-holiday]:not([data-holiday="none"]) .modal-product-img {
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--holiday-secondary) 22%, transparent), transparent 52%),
    linear-gradient(145deg, #fff, color-mix(in srgb, var(--holiday-soft) 80%, #eef8fb));
}

body[data-holiday]:not([data-holiday="none"]) .tag,
body[data-holiday]:not([data-holiday="none"]) .spec-badge,
body[data-holiday]:not([data-holiday="none"]) .news-tag {
  border-color: color-mix(in srgb, var(--holiday-primary) 30%, transparent);
  background-color: var(--holiday-soft);
  color: var(--holiday-primary);
}

body[data-holiday]:not([data-holiday="none"]) .site-footer {
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--holiday-secondary) 20%, transparent), transparent 220px),
    linear-gradient(135deg, var(--holiday-deep), var(--holiday-primary) 64%, color-mix(in srgb, var(--holiday-secondary) 36%, var(--holiday-primary)));
}

body[data-holiday="dragon-boat"] .site-footer,
body[data-holiday="dragon-boat"] .hero-overlay {
  background-blend-mode: normal;
}

body[data-holiday="mid-autumn"] .holiday-sigil {
  background:
    radial-gradient(circle at 42% 34%, #fff8d7, var(--holiday-secondary) 35%, var(--holiday-primary) 68%, var(--holiday-deep));
}

.holiday-banner {
  position: absolute;
  left: clamp(48px, 7vw, 112px);
  right: clamp(48px, 7vw, 112px);
  top: calc(var(--header-h, 76px) + 4px);
  z-index: 6;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--holiday-secondary) 46%, transparent) 16%, color-mix(in srgb, #fff 42%, var(--holiday-secondary)) 50%, color-mix(in srgb, var(--holiday-secondary) 46%, transparent) 84%, transparent),
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.16) 54px 55px, transparent 55px 108px);
  background-size: 180% 100%, auto;
  opacity: .64;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--holiday-secondary) 24%, transparent);
  animation: holidayBannerFlow 12s linear infinite;
}

.holiday-banner::before,
.holiday-banner::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--holiday-secondary) 66%, #fff);
  box-shadow: 0 0 12px color-mix(in srgb, var(--holiday-secondary) 34%, transparent);
  transform: translateY(-50%);
  opacity: .62;
}

.holiday-banner::before { left: 0; }

.holiday-banner::after { right: 0; }

.holiday-plaque {
  display: none;
}

.holiday-plaque::before {
  content: attr(data-label);
  writing-mode: vertical-rl;
  font: 400 clamp(28px, 3.1vw, 46px)/1 "Ma Shan Zheng", "Noto Serif SC", serif;
  letter-spacing: .12em;
  text-shadow:
    0 8px 22px rgba(0,0,0,.24),
    0 0 22px color-mix(in srgb, var(--holiday-secondary) 46%, transparent);
  transform: translateZ(26px);
}

.holiday-plaque::after {
  content: attr(data-subtitle);
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateZ(34px);
  color: color-mix(in srgb, var(--holiday-secondary) 82%, #fff);
  font: 800 9px/1 "Noto Serif SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .16em;
  white-space: nowrap;
  opacity: .86;
}

.holiday-strand {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
  height: clamp(82px, 10vw, 126px);
  pointer-events: none;
  transform-style: preserve-3d;
}

body:not([data-page="home"]) .holiday-banner,
body:not([data-page="home"]) .holiday-strand {
  display: none;
}

.holiday-strand::before {
  content: "";
  position: absolute;
  left: clamp(48px, 7vw, 112px);
  right: clamp(48px, 7vw, 112px);
  top: calc(var(--header-h, 76px) + 4px);
  height: 1px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--holiday-secondary) 42%, transparent), color-mix(in srgb, #fff 44%, var(--holiday-secondary)), color-mix(in srgb, var(--holiday-secondary) 42%, transparent), transparent);
  opacity: .54;
  box-shadow: 0 5px 18px color-mix(in srgb, var(--holiday-secondary) 22%, transparent);
}

.holiday-drop {
  position: absolute;
  left: var(--drop-left);
  top: calc(var(--header-h, 76px) + var(--drop-top, 0px));
  width: var(--drop-size, 42px);
  height: calc(var(--drop-size, 42px) * 1.36);
  transform-origin: 50% -26px;
  transform-style: preserve-3d;
  animation: holidayDropSwing var(--drop-speed, 5.8s) ease-in-out infinite;
  animation-delay: var(--drop-delay, 0s);
  opacity: .96;
}

.holiday-drop::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, color-mix(in srgb, #fff 56%, var(--holiday-secondary)) 0 36%, color-mix(in srgb, var(--holiday-secondary) 48%, transparent) 38% 64%, transparent 66%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--holiday-secondary) 26%, transparent);
  opacity: .62;
}

.holiday-drop::after {
  display: none;
}

.holiday-drop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 16px 24px color-mix(in srgb, var(--holiday-primary) 22%, transparent))
    drop-shadow(0 0 12px color-mix(in srgb, var(--holiday-secondary) 26%, transparent));
  transform: translateZ(24px);
}

.holiday-wave {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: clamp(92px, 13vw, 168px);
  pointer-events: none;
  opacity: .78;
  transform: translateZ(0);
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--holiday-primary) 10%, transparent) 74%),
    repeating-radial-gradient(ellipse at 20% 100%, color-mix(in srgb, var(--holiday-secondary) 22%, transparent) 0 2px, transparent 3px 28px);
  mask-image: linear-gradient(180deg, transparent, #000 44%);
}

body[data-holiday="dragon-boat"] .holiday-wave {
  opacity: .92;
  background:
    linear-gradient(180deg, transparent, rgba(255,255,255,.16)),
    repeating-radial-gradient(ellipse at 12% 112%, rgba(255,255,255,.30) 0 2px, transparent 3px 34px),
    linear-gradient(100deg, transparent 0 12%, color-mix(in srgb, var(--holiday-primary) 26%, transparent) 13% 18%, transparent 19% 100%);
}

body[data-holiday="mid-autumn"] .holiday-wave {
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--holiday-secondary) 16%, transparent)),
    radial-gradient(ellipse at 18% 96%, rgba(255,255,255,.30), transparent 34%),
    radial-gradient(ellipse at 52% 104%, rgba(255,255,255,.22), transparent 38%),
    radial-gradient(ellipse at 82% 96%, rgba(255,255,255,.26), transparent 34%);
}

.holiday-ring {
  position: fixed;
  right: clamp(86px, 12vw, 178px);
  top: clamp(110px, 18vh, 190px);
  z-index: 4;
  width: clamp(170px, 19vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  transform-style: preserve-3d;
  transform: rotateX(68deg) rotateZ(-12deg);
  border: 1px solid color-mix(in srgb, var(--holiday-secondary) 42%, transparent);
  box-shadow:
    inset 0 0 38px color-mix(in srgb, var(--holiday-secondary) 18%, transparent),
    0 0 52px color-mix(in srgb, var(--holiday-primary) 12%, transparent);
  animation: holidayRingSpin 18s linear infinite;
}

.holiday-ring::before,
.holiday-ring::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--holiday-secondary) 46%, transparent);
}

.holiday-ring::after {
  inset: 30%;
  border-style: solid;
  transform: translateZ(28px);
}

body[data-page="home"] #hero .hero-actions .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 30px rgba(0,0,0,.14);
}

body[data-page="home"] #hero .hero-actions .btn-outline:hover {
  color: #fff;
  border-color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.20);
}

body[data-page="home"][data-holiday]:not([data-holiday="none"]) #hero .hero-scroll {
  right: clamp(220px, 20vw, 360px);
  bottom: max(36px, calc(env(safe-area-inset-bottom, 0px) + 32px));
}

body[data-page="home"][data-holiday-section-art="true"][data-holiday]:not([data-holiday="none"]) .section > .container {
  position: relative;
  z-index: 2;
}

body[data-page="home"][data-holiday-section-art="true"][data-holiday]:not([data-holiday="none"]) .section::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: clamp(170px, 22vw, 360px);
  aspect-ratio: 1;
  right: clamp(26px, 9vw, 150px);
  bottom: clamp(18px, 7vh, 96px);
  opacity: .16;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:
    drop-shadow(0 24px 60px color-mix(in srgb, var(--holiday-primary) 18%, transparent))
    saturate(1.04);
  transform-origin: 50% 18%;
}

body[data-page="home"][data-holiday-section-art="true"][data-holiday="new-year"]:not([data-holiday="none"]) .section::after {
  background-image: url("../assets/holiday/lantern.svg");
  animation: holidaySectionSway 9s ease-in-out infinite;
  opacity: .14;
}

body[data-page="home"][data-holiday-section-art="true"][data-holiday="spring-festival"]:not([data-holiday="none"]) .section::after {
  width: clamp(210px, 25vw, 420px);
  right: clamp(18px, 8vw, 132px);
  top: clamp(92px, 14vh, 150px);
  bottom: auto;
  border-radius: 50%;
  opacity: .18;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,211,106,.54) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(255,211,106,.30) 23% 24%, transparent 25%),
    radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(255,122,102,.20) 39% 40%, transparent 41%),
    conic-gradient(from 12deg, transparent 0 7%, rgba(255,211,106,.42) 8% 9%, transparent 10% 18%, rgba(255,255,255,.28) 19% 20%, transparent 21% 100%);
  animation: holidayFireworkBloom 7.6s ease-in-out infinite;
  mix-blend-mode: screen;
}

body[data-page="home"][data-holiday-section-art="true"][data-holiday="dragon-boat"]:not([data-holiday="none"]) .section::after {
  width: clamp(220px, 28vw, 460px);
  aspect-ratio: 2.5 / 1;
  right: auto;
  left: clamp(18px, 7vw, 118px);
  bottom: clamp(18px, 8vh, 110px);
  opacity: .17;
  border-radius: 42% 58% 46% 54% / 62% 44% 56% 38%;
  clip-path: polygon(3% 62%, 66% 62%, 78% 44%, 93% 52%, 86% 72%, 70% 86%, 14% 86%);
  background:
    radial-gradient(circle at 88% 38%, rgba(255,255,255,.78) 0 2px, transparent 3px),
    linear-gradient(90deg, color-mix(in srgb, var(--holiday-secondary) 70%, transparent), transparent 18%),
    linear-gradient(145deg, color-mix(in srgb, var(--holiday-primary) 82%, #fff), var(--holiday-deep));
  animation: holidayDragonBoatGlide 12s ease-in-out infinite;
}

body[data-page="home"][data-holiday-section-art="true"][data-holiday="mid-autumn"]:not([data-holiday="none"]) .section::after {
  width: clamp(150px, 18vw, 300px);
  right: clamp(38px, 11vw, 176px);
  top: clamp(92px, 14vh, 158px);
  bottom: auto;
  opacity: .18;
  background-image: url("../assets/holiday/half_moon.svg");
  animation: holidaySectionSway 10s ease-in-out infinite;
}

body[data-page="home"][data-holiday-section-art="true"][data-holiday="national-day"]:not([data-holiday="none"]) .section::after {
  display: none;
}

body[data-holiday]:not([data-holiday="none"]) .hero .container,
body[data-holiday]:not([data-holiday="none"]) .page-hero .container,
body[data-holiday]:not([data-holiday="none"]) .article-hero .container {
  transform-style: preserve-3d;
}

body[data-holiday]:not([data-holiday="none"]) .hero-title,
body[data-holiday]:not([data-holiday="none"]) .page-hero h1,
body[data-holiday]:not([data-holiday="none"]) .article-hero h1 {
  transform: translateZ(18px);
}

body[data-holiday]:not([data-holiday="none"]) .section::before,
body[data-holiday]:not([data-holiday="none"]) .section-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .54;
  background:
    linear-gradient(115deg, transparent 0 46%, color-mix(in srgb, var(--holiday-secondary) 10%, transparent) 47% 48%, transparent 49%),
    repeating-linear-gradient(135deg, transparent 0 28px, color-mix(in srgb, var(--holiday-primary) 5%, transparent) 28px 29px);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

body[data-holiday="spring-festival"] .page-hero::before,
body[data-holiday="spring-festival"] .hero::before {
  display: none;
}

body[data-holiday="national-day"] .page-hero::before,
body[data-holiday="national-day"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 360'%3E%3Cg fill='%23ffd447' opacity='.42'%3E%3Cpolygon points='50,0 61,35 98,35 68,57 79,92 50,70 21,92 32,57 2,35 39,35' transform='translate(50 84) scale(1.42) rotate(-10 50 50)'/%3E%3Cpolygon points='50,0 61,35 98,35 68,57 79,92 50,70 21,92 32,57 2,35 39,35' transform='translate(184 74) scale(.34) rotate(18 50 50)'/%3E%3Cpolygon points='50,0 61,35 98,35 68,57 79,92 50,70 21,92 32,57 2,35 39,35' transform='translate(222 126) scale(.30) rotate(-12 50 50)'/%3E%3Cpolygon points='50,0 61,35 98,35 68,57 79,92 50,70 21,92 32,57 2,35 39,35' transform='translate(202 182) scale(.32) rotate(25 50 50)'/%3E%3Cpolygon points='50,0 61,35 98,35 68,57 79,92 50,70 21,92 32,57 2,35 39,35' transform='translate(148 218) scale(.28) rotate(-22 50 50)'/%3E%3C/g%3E%3Cg fill='%23fff4a8' opacity='.14'%3E%3Ccircle cx='112' cy='78' r='16'/%3E%3Ccircle cx='274' cy='236' r='18'/%3E%3C/g%3E%3C/svg%3E") left clamp(70px, 12vh, 128px) top clamp(76px, 13vh, 142px) / clamp(230px, 34vw, 520px) auto no-repeat,
    linear-gradient(102deg, color-mix(in srgb, var(--holiday-primary) 30%, transparent) 0 18%, transparent 19% 100%),
    repeating-linear-gradient(112deg, transparent 0 54px, color-mix(in srgb, var(--holiday-secondary) 18%, transparent) 54px 56px, transparent 56px 108px);
  opacity: .78;
}

body[data-holiday="dragon-boat"] .page-hero::before,
body[data-holiday="dragon-boat"] .hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  z-index: 4;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 14% 100%, rgba(255,255,255,.30) 0 2px, transparent 3px 42px),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--holiday-primary) 34%, transparent));
}

body[data-holiday="mid-autumn"] .page-hero::before,
body[data-holiday="mid-autumn"] .hero::before {
  content: "";
  position: absolute;
  right: clamp(26px, 10vw, 150px);
  top: clamp(96px, 18vh, 172px);
  z-index: 4;
  width: clamp(118px, 16vw, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.72), transparent 16%),
    radial-gradient(circle, rgba(255,244,195,.90), color-mix(in srgb, var(--holiday-secondary) 70%, transparent) 58%, transparent 64%);
  filter: drop-shadow(0 0 42px color-mix(in srgb, var(--holiday-secondary) 42%, transparent));
}

.holiday-year-mark {
  position: fixed;
  left: clamp(20px, 5vw, 76px);
  top: clamp(104px, 18vh, 188px);
  z-index: 4;
  pointer-events: none;
  color: color-mix(in srgb, var(--holiday-secondary) 68%, #fff);
  font: 900 clamp(72px, 13vw, 188px)/.82 "Noto Serif SC", Georgia, serif;
  letter-spacing: 0;
  opacity: .18;
  text-shadow:
    0 0 34px color-mix(in srgb, var(--holiday-secondary) 34%, transparent),
    0 18px 70px color-mix(in srgb, var(--holiday-primary) 22%, transparent);
  transform: rotate(-7deg) translateZ(0);
}

.holiday-national-stars {
  display: none;
  position: fixed;
  left: clamp(20px, 5vw, 86px);
  top: clamp(100px, 16vh, 172px);
  z-index: 4;
  width: clamp(150px, 18vw, 268px);
  aspect-ratio: 1;
  pointer-events: none;
  filter: drop-shadow(0 18px 34px color-mix(in srgb, var(--holiday-primary) 22%, transparent));
}

.holiday-national-stars span {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  width: var(--star-size, 28px);
  left: var(--star-x, 0);
  top: var(--star-y, 0);
  background: linear-gradient(135deg, #fff4a8, var(--holiday-secondary) 48%, #ffbf24);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 70%, 21% 92%, 32% 57%, 2% 35%, 39% 35%);
  transform: rotate(var(--star-r, 0deg)) translateZ(0);
}

.holiday-national-stars span:first-child {
  --star-size: clamp(72px, 9vw, 132px);
  --star-x: 0;
  --star-y: 22%;
}

@keyframes holidaySigilFloat {
  0%, 100% { transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg); }
  50% { transform: translate3d(0,-10px,0) rotateX(7deg) rotateY(-8deg); }
}

@keyframes holidayMotifDrift {
  from { transform: rotate(var(--motif-rotate, 0deg)) translate3d(0,0,0); }
  to { transform: rotate(calc(var(--motif-rotate, 0deg) + 10deg)) translate3d(18px,-18px,30px); }
}

@keyframes holidayBannerFlow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 220% 0, 0 0; }
}

@keyframes holidayPlaqueLift {
  0%, 100% { transform: rotateX(0deg) rotateY(10deg) translate3d(0,0,0); }
  50% { transform: rotateX(4deg) rotateY(16deg) translate3d(0,-8px,28px); }
}

@keyframes holidayDropSwing {
  0%, 100% { transform: rotateZ(-4deg) rotateY(0deg); }
  50% { transform: rotateZ(5deg) rotateY(18deg); }
}

@keyframes holidayRingSpin {
  from { transform: rotateX(68deg) rotateZ(0deg); }
  to { transform: rotateX(68deg) rotateZ(360deg); }
}

@keyframes holidaySectionSway {
  0%, 100% { transform: rotate(-3deg) translate3d(0,0,0); }
  50% { transform: rotate(3.5deg) translate3d(8px,-8px,0); }
}

@keyframes holidayFireworkBloom {
  0% { transform: scale(.72) rotate(0deg); opacity: .05; filter: blur(.1px); }
  42% { transform: scale(1.04) rotate(10deg); opacity: .20; filter: blur(0); }
  100% { transform: scale(1.28) rotate(18deg); opacity: .03; filter: blur(1px); }
}

@keyframes holidayDragonBoatGlide {
  0%, 100% { transform: translate3d(-18px,0,0) rotate(-1.2deg); }
  50% { transform: translate3d(42px,-6px,0) rotate(1.2deg); }
}

@keyframes holidayFlagWave {
  0%, 100% {
    transform: perspective(900px) rotateY(-8deg) skewY(-1deg) translate3d(0,0,0);
    border-radius: 9px 22px 16px 9px;
  }
  50% {
    transform: perspective(900px) rotateY(7deg) skewY(1.4deg) translate3d(8px,-5px,0);
    border-radius: 22px 8px 22px 14px;
  }
}

@media (max-width: 768px) {
  #holiday-canvas { opacity: .5; }
  body[data-holiday] .site-header .header-inner {
    display: flex;
    width: 100%;
    gap: 10px;
  }
  body[data-holiday] .site-header .nav-desktop {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }
  body[data-holiday] .site-header .header-tools {
    margin-left: auto;
    min-width: auto;
  }
  .holiday-stage::after { display: none; }
  .holiday-plaque {
    left: 10px;
    top: 104px;
    width: 52px;
    min-height: 118px;
    padding: 16px 8px;
  }
  .holiday-plaque::before { font-size: 24px; }
  .holiday-plaque::after,
  .holiday-ring,
  .holiday-strand { display: none; }
  .holiday-year-mark {
    left: 14px;
    top: 132px;
    font-size: 74px;
    opacity: .14;
  }
  .holiday-national-stars {
    left: 12px;
    top: 126px;
    width: 116px;
    opacity: .58;
  }
  .holiday-sigil {
    width: 64px;
    right: 12px;
    bottom: 12px;
    font-size: 20px;
  }
  .holiday-sigil::before { display: none; }
  .holiday-motif { opacity: .18; }
}

@media (prefers-reduced-motion: reduce) {
  #holiday-canvas { display: none; }
  .holiday-sigil,
  .holiday-motif,
  .holiday-banner,
  .holiday-plaque,
  .holiday-drop,
  .holiday-ring,
  body[data-page="home"] .section::after { animation: none; }
  body[data-holiday]:not([data-holiday="none"]) .product-card:hover,
  body[data-holiday]:not([data-holiday="none"]) .news-card:hover,
  body[data-holiday]:not([data-holiday="none"]) .research-card:hover,
  body[data-holiday]:not([data-holiday="none"]) .official-store-link:hover {
    transform: translateY(-2px);
  }
}