/* Quiet autumn decoration shared by the website and the calculator. */
.emg-autumn-scene {
  position: fixed;
  inset: 0;
  z-index: 35;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

.emg-autumn-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0 28%, rgb(198 130 43 / 4%), transparent 45%),
    radial-gradient(ellipse at 100% 75%, rgb(168 79 35 / 3%), transparent 42%);
}

.emg-autumn-leaf {
  position: absolute;
  top: -60px;
  left: var(--leaf-left);
  width: var(--leaf-size);
  height: calc(var(--leaf-size) * 1.3);
  color: var(--leaf-color);
  opacity: 0;
  animation: emg-autumn-fall var(--leaf-duration) var(--leaf-delay) linear infinite;
}

.emg-autumn-sway {
  width: 100%;
  height: 100%;
  animation: emg-autumn-sway var(--sway-duration) var(--leaf-delay) ease-in-out infinite alternate;
}

.emg-autumn-leaf[data-broken] {
  display: none;
}

.emg-autumn-fragment {
  position: absolute;
  pointer-events: none;
  animation: emg-autumn-scatter 1.2s ease-out both;
}

.emg-autumn-fragment svg {
  display: block;
  width: 100%;
  height: 100%;
}

.emg-autumn-turn {
  width: 100%;
  height: 100%;
  transform-origin: 50% 32%;
  animation: emg-autumn-turn var(--turn-duration) var(--leaf-delay) ease-in-out infinite alternate;
}

.emg-autumn-turn svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.emg-autumn-scene[data-paused] .emg-autumn-leaf,
.emg-autumn-scene[data-paused] .emg-autumn-sway,
.emg-autumn-scene[data-paused] .emg-autumn-turn,
.emg-autumn-scene[data-paused] .emg-autumn-fragment {
  animation-play-state: paused;
}

.emg-autumn-calculator {
  background:
    radial-gradient(ellipse at 0 0, #f7ecda 0, transparent 50%),
    radial-gradient(ellipse at 100% 80%, #f3e7d8 0, transparent 48%),
    #f8f6f2;
}

.emg-autumn-calculator header {
  border-color: #b69a70;
  box-shadow: 0 10px 24px rgb(100 65 28 / 8%);
}

.emg-autumn-calculator .eyebrow {
  color: #ffe0bf;
}

.emg-autumn-calculator .card {
  border-color: #e8ded1;
  box-shadow: 0 6px 20px rgb(100 65 28 / 4%);
}

@keyframes emg-autumn-fall {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: var(--leaf-opacity); }
  86% { opacity: var(--leaf-opacity); }
  100% { transform: translate3d(var(--leaf-drift), calc(100vh + 120px), 0); opacity: 0; }
}

@keyframes emg-autumn-sway {
  from { transform: translate3d(calc(var(--leaf-sway) * -1), 0, 0); }
  to { transform: translate3d(var(--leaf-sway), 0, 0); }
}

@keyframes emg-autumn-turn {
  from { transform: rotate(var(--leaf-angle)) rotateY(-25deg); }
  to { transform: rotate(calc(var(--leaf-angle) + 110deg)) rotateY(45deg); }
}

@keyframes emg-autumn-scatter {
  0% { opacity: .85; transform: translate3d(0, 0, 0) rotate(0); }
  35% {
    opacity: .9;
    transform: translate3d(calc(var(--fragment-x) * .7), var(--fragment-y), 0) rotate(calc(var(--fragment-turn) * .35));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--fragment-x), calc(var(--fragment-y) + var(--fragment-fall)), 0) rotate(var(--fragment-turn));
  }
}

@media (max-width: 640px) {
  .emg-autumn-leaf:nth-child(n + 8) { display: none; }
  .emg-autumn-leaf { width: calc(var(--leaf-size) * .8); height: calc(var(--leaf-size) * 1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .emg-autumn-scene { display: none; }
  .emg-autumn-leaf, .emg-autumn-sway, .emg-autumn-turn { animation: none; }
  .emg-autumn-fragment { display: none; animation: none; }
}

@media print {
  .emg-autumn-scene { display: none; }
  .emg-autumn-calculator { background: #fff; }
}