:root {
  --motion-gold: #d9a64d;
  --motion-cream: #fff0c5;
  --motion-blue: #2f79aa;
}

html {
  scroll-behavior: smooth;
}

.cosmic-particles {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .78;
  mix-blend-mode: screen;
}

.home-header,
.section-dots {
  z-index: 30;
}

.home-panel {
  --motion-opacity: 1;
  --motion-y: 0px;
  --motion-scale: 1;
  --visual-y: 0px;
  --visual-scale: 1;
}

.home-panel::after {
  content: "";
  position: absolute;
  z-index: 8;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  opacity: var(--divider-opacity, .66);
  background: linear-gradient(90deg, transparent, rgba(217, 166, 77, .22) 18%, rgba(255, 232, 170, .9) 50%, rgba(217, 166, 77, .22) 82%, transparent);
  box-shadow: 0 0 18px rgba(217, 166, 77, .22);
  transform: scaleX(var(--divider-scale, 1));
  transform-origin: center;
}

.motion-ready .panel-copy {
  opacity: var(--motion-opacity);
  transform: translate3d(0, var(--motion-y), 0) scale(var(--motion-scale));
  filter: blur(var(--motion-blur, 0px));
  transform-origin: center left;
  will-change: transform, opacity, filter;
}

.motion-ready .panel-copy-right {
  transform-origin: center right;
}

.motion-ready .double-visual,
.motion-ready .love-visual,
.motion-ready .business-visual,
.motion-ready .past-moon,
.motion-ready .past-clouds,
.motion-ready .past-figure {
  transform: translate3d(0, var(--visual-y), 0) scale(var(--visual-scale));
  will-change: transform, opacity;
}

.home-panel.is-motion-active .panel-action {
  box-shadow: 0 0 0 1px rgba(255, 228, 164, .13), 0 16px 46px rgba(0, 0, 0, .28), 0 0 34px rgba(217, 166, 77, .08);
}

.home-panel.is-motion-active .title-ornament,
.home-panel.is-motion-active .scroll-cue i {
  animation: ornament-breathe 2.8s ease-in-out infinite;
}

.section-dots a {
  transition: transform .35s ease, background-color .35s ease, box-shadow .35s ease;
}

.section-dots a.is-active {
  transform: scale(1.45);
  box-shadow: 0 0 18px rgba(217, 166, 77, .72);
}

@keyframes ornament-breathe {
  0%, 100% { opacity: .5; filter: drop-shadow(0 0 0 rgba(217, 166, 77, 0)); }
  50% { opacity: 1; filter: drop-shadow(0 0 9px rgba(217, 166, 77, .65)); }
}

@media (max-width: 720px) {
  .cosmic-particles { opacity: .58; }
  .home-panel::after { left: 14%; right: 14%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cosmic-particles { display: none; }
  .motion-ready .panel-copy,
  .motion-ready .double-visual,
  .motion-ready .love-visual,
  .motion-ready .business-visual,
  .motion-ready .past-moon,
  .motion-ready .past-clouds,
  .motion-ready .past-figure {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .home-panel.is-motion-active .title-ornament,
  .home-panel.is-motion-active .scroll-cue i { animation: none; }
}