:root {
  --signage-background: #05050a;
  --fade-duration: 1000ms;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--signage-background);
}

body {
  cursor: none;
  font-family: Arial, Helvetica, sans-serif;
}

#signage,
#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--signage-background);
}

.slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade-duration) ease-in-out, visibility 0s linear var(--fade-duration);
}

.slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.slide img,
.slide iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.slide img {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .slide { transition-duration: 0ms; }
}

.celebration { position:fixed; inset:0; z-index:100; display:grid; place-items:center; overflow:hidden; color:#fff; text-align:center; opacity:0; transform:scale(1.035); background:radial-gradient(circle at 50% 42%,rgba(105,240,255,.22),transparent 25%),radial-gradient(circle at 20% 20%,rgba(255,79,216,.28),transparent 32%),radial-gradient(circle at 80% 80%,rgba(124,92,255,.32),transparent 34%),linear-gradient(135deg,#05050a 0%,#0c1027 48%,#080712 100%); transition:opacity .65s ease,transform .8s cubic-bezier(.2,.8,.2,1) }
.celebration.is-visible { opacity:1; transform:scale(1) }
.celebration-glow { position:absolute; width:66vw; aspect-ratio:1; border-radius:50%; border:1px solid rgba(105,240,255,.22); box-shadow:0 0 90px rgba(105,240,255,.13),inset 0 0 90px rgba(124,92,255,.12); animation:celebration-pulse 2.8s ease-in-out infinite }
.celebration-content { position:relative; z-index:2; width:min(84vw,1400px) }
.celebration-mark { width:clamp(76px,8vw,132px); aspect-ratio:1; margin:0 auto clamp(18px,2.2vh,34px); display:grid; place-items:center; border-radius:50%; color:#05050a; font-size:clamp(42px,4.8vw,76px); font-weight:900; background:linear-gradient(135deg,#fff 0%,#69f0ff 45%,#7c5cff 100%); box-shadow:0 0 0 12px rgba(105,240,255,.08),0 0 60px rgba(105,240,255,.5); animation:celebration-pop .8s cubic-bezier(.2,1.5,.45,1) both .3s }
.celebration-eyebrow { margin:0 0 1.6vh; color:#69f0ff; font-size:clamp(18px,1.65vw,30px); font-weight:800; letter-spacing:.3em }
.celebration-title { margin:0; font-size:clamp(58px,7.7vw,146px); line-height:.98; letter-spacing:-.055em; text-wrap:balance; text-shadow:0 10px 50px rgba(0,0,0,.35) }
.celebration-detail { margin:2vh 0 0; color:rgba(255,255,255,.72); font-size:clamp(22px,2.1vw,38px) }
.celebration-value { margin-top:2.6vh; font-size:clamp(54px,6vw,112px); line-height:1; font-weight:900; letter-spacing:-.05em; background:linear-gradient(90deg,#69f0ff,#fff 45%,#ff4fd8); -webkit-background-clip:text; background-clip:text; color:transparent }
.celebration-owner { margin:1.6vh 0 0; color:rgba(255,255,255,.78); font-size:clamp(18px,1.55vw,28px) }
.celebration-rule { width:min(22vw,340px); height:2px; margin:3vh auto 2vh; background:linear-gradient(90deg,transparent,#69f0ff,transparent) }
.celebration-footer { margin:0; color:rgba(255,255,255,.54); font-size:clamp(16px,1.2vw,22px); letter-spacing:.14em; text-transform:uppercase }
.confetti { position:absolute; inset:0; pointer-events:none }
.confetti-piece { position:absolute; top:-8vh; left:var(--x); width:clamp(8px,.7vw,14px); height:clamp(14px,1.4vw,26px); border-radius:2px; opacity:.9; animation:confetti-fall var(--fall) linear var(--delay) infinite,confetti-spin var(--spin) linear infinite }
@keyframes celebration-pop { from { opacity:0; transform:scale(.35) rotate(-18deg) } to { opacity:1; transform:scale(1) rotate(0) } }
@keyframes celebration-pulse { 50% { transform:scale(1.08); opacity:.65 } }
@keyframes confetti-fall { to { translate:var(--drift) 116vh } }
@keyframes confetti-spin { to { rotate:720deg } }
@media (prefers-reduced-motion:reduce) { .celebration,.celebration-mark,.celebration-glow,.confetti-piece { animation:none; transition-duration:.01ms } }