/* Standalone homepage celebration art direction. */
.celebration-overlay,
.celebration-overlay * { box-sizing: border-box; }

body.celebration-open { overflow: hidden; }

.celebration-overlay {
  --celebration-pink: #ee777c;
  --celebration-pink-hover: #f1878c;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(38px,6vh,90px) 0;
  overflow: auto;
  color: #fff;
  background: rgba(38,38,40,.88);
  backdrop-filter: blur(8px) saturate(.78);
  isolation: isolate;
}

.celebration-overlay[hidden] { display: none; }

.celebration-fireworks {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .88;
}

.celebration-panel {
  --gravity-bg-x: 0px;
  --gravity-bg-y: 0px;
  --gravity-photo-x: 0px;
  --gravity-photo-y: 0px;
  position: relative;
  z-index: 1;
  width: calc(100vw - clamp(32px,4.4vw,92px));
  min-height: clamp(300px,40vh,400px);
  padding: clamp(50px,5.5vh,72px) clamp(26px,5vw,105px) clamp(48px,5vh,64px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background:
    radial-gradient(circle at 84% 5%,rgba(255,220,220,.17),transparent 24%),
    linear-gradient(105deg,#ef797d 0%,var(--celebration-pink) 55%,#eb727d 100%);
  box-shadow: 0 40px 100px rgba(12,8,11,.3),0 14px 34px rgba(94,29,49,.16);
  perspective: 1000px;
  transform-style: preserve-3d;
  animation: celebration-panel-in .8s cubic-bezier(.16,1,.3,1) both;
}

.celebration-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),transparent 24%,transparent 76%,rgba(123,31,61,.06)),
    radial-gradient(ellipse at 52% 118%,rgba(255,207,197,.17),transparent 42%);
}

.celebration-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 7% 62%,transparent 0 92px,rgba(255,255,255,.11) 93px 94px,transparent 95px),
    radial-gradient(circle at 7% 62%,transparent 0 135px,rgba(255,255,255,.07) 136px 137px,transparent 138px),
    radial-gradient(circle at 46% -45%,transparent 0 190px,rgba(255,255,255,.075) 191px 192px,transparent 193px),
    radial-gradient(circle at 76% 118%,transparent 0 172px,rgba(255,255,255,.09) 173px 174px,transparent 175px);
}

.celebration-fill::before {
  content: "";
  position: absolute;
  left: 17%;
  top: -55%;
  width: 43vw;
  min-width: 420px;
  height: 120%;
  border-radius: 50%;
  background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(168,42,86,.025));
  border: 1px solid rgba(255,255,255,.08);
  transform: rotate(-9deg);
}

.celebration-fill-year {
  position: absolute;
  left: -1rem;
  bottom: -4.1rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.14);
  font: 900 clamp(8rem,18vw,18rem)/1 Arial Black,sans-serif;
  letter-spacing: -.1em;
  user-select: none;
}

.celebration-fill-ring {
  position: absolute;
  right: clamp(175px,17vw,360px);
  top: 50%;
  width: clamp(210px,24vw,430px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.035),0 0 0 66px rgba(255,255,255,.022);
  transform: translateY(-50%);
  animation: celebration-fill-pulse 6s ease-in-out infinite alternate;
}

.celebration-ornaments {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform: translate3d(var(--gravity-bg-x),var(--gravity-bg-y),38px);
  transform-style: preserve-3d;
  will-change: transform;
}

.celebration-corner,
.celebration-bar {
  position: absolute;
  display: block;
  color: #fff;
  filter: drop-shadow(0 13px 20px rgba(87,23,47,.14));
}

.celebration-corner {
  width: clamp(88px,7vw,138px);
  height: clamp(88px,7vw,138px);
}

.celebration-corner--top {
  top: clamp(-52px,-2.7vw,-34px);
  left: clamp(30px,3vw,62px);
  border-top: 12px solid currentColor;
  border-left: 12px solid currentColor;
}

.celebration-corner--bottom {
  right: clamp(30px,3vw,62px);
  bottom: clamp(-52px,-2.7vw,-34px);
  border-right: 12px solid currentColor;
  border-bottom: 12px solid currentColor;
}

.celebration-bar {
  left: clamp(32px,3.2vw,68px);
  height: 12px;
  background: #fff;
}

.celebration-bar--long {
  bottom: clamp(34px,4vh,52px);
  width: clamp(240px,28vw,560px);
}

.celebration-bar--short {
  bottom: clamp(-23px,-1.25vw,-14px);
  width: clamp(185px,19vw,380px);
}

.celebration-portrait {
  position: absolute;
  z-index: 4;
  top: clamp(-220px,-11vw,-145px);
  right: clamp(25px,4vw,76px);
  width: clamp(215px,17vw,330px);
  pointer-events: none;
  animation: celebration-portrait-in 1s .06s cubic-bezier(.16,1,.3,1) both;
}

.celebration-portrait::before {
  content: "";
  position: absolute;
  inset: 16% -9% -2%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse,rgba(255,215,216,.34),rgba(219,83,112,.1) 53%,transparent 72%);
  filter: blur(20px);
}

.celebration-portrait img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .97;
  filter: saturate(.88) contrast(1.035) drop-shadow(0 22px 28px rgba(68,25,40,.23));
  transform: translate3d(var(--gravity-photo-x),var(--gravity-photo-y),0);
  will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.84) 82%,transparent 100%);
  mask-image: linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.84) 82%,transparent 100%);
}

.celebration-title {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  color: #fff;
  font-family: SimHei,"黑体","Heiti SC","Noto Sans SC",sans-serif;
  font-size: clamp(3rem,7.2vw,8rem);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.07em;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 1px currentColor;
  text-shadow: 0 8px 30px rgba(100,30,54,.2);
  animation: celebration-title-in .95s .06s cubic-bezier(.16,1,.3,1) both;
}

.celebration-actions {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 0;
  width: min(330px,72vw);
  transform: translate(-50%,50%);
}

.celebration-action {
  width: 100%;
  min-height: 72px;
  padding: 8px 18px 8px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #fff;
  background: var(--celebration-pink);
  border: 5px solid #fff;
  border-radius: 999px;
  box-shadow: 0 18px 38px rgba(75,22,43,.28);
  font: 800 .78rem/1 SimHei,"黑体","Heiti SC","Noto Sans SC",sans-serif;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .3s,background .3s,box-shadow .3s,transform .3s cubic-bezier(.16,1,.3,1);
}

.celebration-action-arrow {
  display: inline-grid;
  place-items: center;
  color: #fff;
  font: 400 1.2rem/1 Arial,sans-serif;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}

.celebration-action:hover {
  color: #fff;
  background: var(--celebration-pink-hover);
  box-shadow: 0 24px 52px rgba(75,22,43,.34);
  transform: translateY(-4px);
}

.celebration-action:hover .celebration-action-arrow { transform: translate(3px,-3px); }

.celebration-action:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 6px;
}

@keyframes celebration-panel-in {
  from { opacity: 0; transform: translateY(28px) scaleX(.96); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes celebration-title-in {
  from { opacity: 0; transform: translateY(25px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes celebration-portrait-in {
  from { opacity: 0; transform: translate(22px,32px); }
  to { opacity: 1; transform: none; }
}

@keyframes celebration-fill-pulse {
  to { opacity: .7; transform: translateY(-50%) scale(1.035); }
}

@media (max-width: 760px) {
  .celebration-overlay { padding: 34px 0; }
  .celebration-panel { width: calc(100vw - 20px); min-height: 360px; padding: 70px 14px 58px; }
  .celebration-fill-year { bottom: -1.4rem; font-size: 8rem; }
  .celebration-fill-ring { right: -60px; width: 230px; }
  .celebration-fill::before { left: -15%; min-width: 340px; }
  .celebration-corner { width: 72px; height: 72px; }
  .celebration-corner--top { top: -27px; left: 21px; border-width: 12px 0 0 12px; }
  .celebration-corner--bottom { right: 21px; bottom: -27px; border-width: 0 12px 12px 0; }
  .celebration-bar { left: 20px; height: 12px; }
  .celebration-bar--long { bottom: 48px; width: 48vw; }
  .celebration-bar--short { bottom: -12px; width: 34vw; }
  .celebration-portrait { top: -103px; right: 9px; width: 155px; opacity: .94; }
  .celebration-title { max-width: 8em; font-size: clamp(2.7rem,13.8vw,4.7rem); line-height: 1.03; white-space: normal; }
  .celebration-actions { width: min(280px,74vw); }
  .celebration-action { min-height: 62px; border-width: 4px; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-panel,
  .celebration-title,
  .celebration-portrait,
  .celebration-fill-ring { animation: none; }
}