/* Decorative layers stay behind the invitation and never intercept controls. */
.ornament-layer,
.snow-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}

.ornament-layer {
  --ornament-scale: 1;
  height: min(28svh, 230px);
  overflow: visible;
}

.ornament-layer[hidden],
.snow-layer[hidden] {
  display: none;
}

.ornament {
  position: absolute;
  top: -16px;
  left: var(--ornament-position);
  width: calc(var(--ornament-size) * var(--ornament-scale));
  transform: translateX(-50%);
}

.ornament__pendulum {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transform-origin: 50% 0;
}

.ornament__cord {
  display: block;
  flex: 0 0 auto;
  width: 1px;
  height: min(var(--cord-length), 17svh);
  background: linear-gradient(90deg, #614722, #dfc790 55%, #745529);
  opacity: 0.82;
}

.ornament__bauble {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  margin-top: calc(var(--ornament-size) * var(--ornament-scale) * -.056);
}

.snow-layer {
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -12px;
  left: var(--snow-x);
  width: var(--snow-size);
  height: var(--snow-size);
  border-radius: 50%;
  background: #fff4da;
  opacity: 0;
  animation: christmasSnowfall var(--snow-duration) linear var(--snow-delay) infinite;
}

@keyframes christmasSnowfall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  8% { opacity: 0.56; }
  86% { opacity: 0.45; }
  100% {
    opacity: 0;
    transform: translate3d(var(--snow-drift), calc(100svh + 24px), 0);
  }
}

body:not(.has-entered) .ornament-layer,
body:not(.has-entered) .snow-layer {
  visibility: hidden;
}

body:not(.has-entered) .snowflake,
.ambience-paused .snowflake {
  animation-play-state: paused;
}

.ambience-control {
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid #d9bd7655;
  border-radius: 12px;
  background: #dbb76c12;
  color: #f5e6c6;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.ambience-control:hover { background: #dbb76c22; }
.ambience-control:focus-visible { outline: 2px solid #e1c58b; outline-offset: 3px; }
.ambience-control:disabled { cursor: default; opacity: 0.65; }

@media (min-width: 800px) {
  .ornament-layer { --ornament-scale: 1.24; }
}

@media (max-width: 350px) {
  .ornament-layer { --ornament-scale: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .snow-layer { display: none; }
  .snowflake { animation: none; }
  .ornament__pendulum { transform: none !important; }
}