/* Public-site motion. Every repeating animation starts paused, then resumes
   only while the page and (for previews) its own section are visible. */
#publicLanding.vl-site {
  --vl-ease-in-out: cubic-bezier(.42, 0, .58, 1);
  position: relative;
  isolation: isolate;
  background: #fbfdf8;
}

#publicLanding > .vl-nav,
#publicLanding > section,
#publicLanding > .vl-footer {
  position: relative;
  z-index: 1;
}

#publicLanding .vl-motion-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

#publicLanding .vl-motion-backdrop > * {
  position: absolute;
  display: block;
  pointer-events: none;
  animation-play-state: paused;
}

#publicLanding .vl-flow-a {
  width: 155vw;
  height: 150vh;
  left: -28vw;
  top: -30vh;
  background:
    radial-gradient(ellipse 38% 26% at 31% 35%, #bcf14647 0%, #d3f79526 32%, #e4f8cb0d 58%, #e4f8cb00 80%),
    radial-gradient(ellipse 40% 22% at 66% 62%, #c5ed7b33 0%, #d6f3a018 38%, #e0f6ba00 78%),
    radial-gradient(ellipse 24% 34% at 47% 48%, #d7efb325 0%, #e5f4ce0d 42%, #e5f4ce00 80%);
  opacity: .8;
  transform: translate3d(0, 0, 0) rotate(-6deg);
  animation: vl91-flow-a 42s var(--vl-ease-in-out) infinite alternate paused;
}

#publicLanding .vl-flow-b {
  width: 150vw;
  height: 155vh;
  right: -32vw;
  top: -14vh;
  background:
    radial-gradient(ellipse 31% 38% at 65% 48%, #bddf803b 0%, #d6edb51c 35%, #e8f4d809 60%, #e8f4d800 80%),
    radial-gradient(ellipse 40% 20% at 36% 66%, #c9ef8f2e 0%, #ddf2bc14 38%, #e7f6d400 80%),
    radial-gradient(ellipse 27% 20% at 47% 28%, #d6edb324 0%, #e3f2c90d 40%, #e3f2c900 78%);
  opacity: .72;
  transform: translate3d(0, 0, 0) rotate(5deg);
  animation: vl91-flow-b 48s var(--vl-ease-in-out) infinite alternate paused;
  animation-delay: -19s;
}

#publicLanding[data-motion="running"] .vl-motion-backdrop > * {
  animation-play-state: running;
}

/* The image remains the same neutral product capture throughout the pan. */
#publicLanding .vl-product-shot {
  position: relative;
  animation: none;
  background: #e9f2e2ed;
}

#publicLanding .vl-shot-crop img {
  transform: scale(1.01) translate3d(-3px, 0, 0);
  animation: vl91-studio-pan 16s var(--vl-ease-in-out) infinite alternate paused;
}

#publicLanding .vl-window-dots i {
  animation: vl91-window-dot 9s var(--vl-ease-in-out) infinite paused;
}

#publicLanding .vl-window-dots i:nth-child(2) { animation-delay: 180ms; }
#publicLanding .vl-window-dots i:nth-child(3) { animation-delay: 360ms; }

#publicLanding[data-motion="running"] .vl-product-shot.vl-in-view .vl-shot-crop img,
#publicLanding[data-motion="running"] .vl-product-shot.vl-in-view .vl-window-dots i {
  animation-play-state: running;
}

/* Accent the saved positions without suggesting that their values change. */
#publicLanding .vl-demo-slider i::before {
  transform-origin: left center;
  animation: vl91-slider-light 10s var(--vl-ease-in-out) infinite paused;
}

#publicLanding .vl-demo-slider i::after {
  transform-origin: center;
  animation: vl91-slider-thumb 10s var(--vl-ease-in-out) infinite paused;
}

#publicLanding .vl-demo-slider:nth-of-type(4) i::before,
#publicLanding .vl-demo-slider:nth-of-type(4) i::after {
  animation-delay: 800ms;
}

#publicLanding .vl-demo-palette i {
  position: relative;
  animation: vl91-swatch 11s var(--vl-ease-in-out) infinite paused;
}

#publicLanding .vl-demo-palette i::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid #5f873b;
  border-radius: inherit;
  opacity: 0;
  transform: scale(.98);
  animation: vl91-swatch-ring 11s var(--vl-ease-in-out) infinite paused;
}

#publicLanding .vl-demo-palette i:nth-child(2),
#publicLanding .vl-demo-palette i:nth-child(2)::after { animation-delay: 350ms; }
#publicLanding .vl-demo-palette i:nth-child(3),
#publicLanding .vl-demo-palette i:nth-child(3)::after { animation-delay: 700ms; }
#publicLanding .vl-demo-palette i:nth-child(4),
#publicLanding .vl-demo-palette i:nth-child(4)::after { animation-delay: 1050ms; }

#publicLanding[data-motion="running"] .vl-settings-visual.vl-in-view .vl-demo-slider i::before,
#publicLanding[data-motion="running"] .vl-settings-visual.vl-in-view .vl-demo-slider i::after,
#publicLanding[data-motion="running"] .vl-settings-visual.vl-in-view .vl-demo-palette i,
#publicLanding[data-motion="running"] .vl-settings-visual.vl-in-view .vl-demo-palette i::after {
  animation-play-state: running;
}

/* The moving calendar layers sit behind the stationary day labels and totals. */
#publicLanding .vl-week > div {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#publicLanding .vl-week > div::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #bcf146;
  opacity: 0;
  animation: vl91-calendar-light 12s var(--vl-ease-in-out) infinite paused;
}

#publicLanding .vl-week > div:nth-child(2)::before { animation-delay: 250ms; }
#publicLanding .vl-week > div:nth-child(3)::before { animation-delay: 500ms; }
#publicLanding .vl-week > div:nth-child(4)::before { animation-delay: 750ms; }
#publicLanding .vl-week > div:nth-child(5)::before { animation-delay: 1000ms; }
#publicLanding .vl-week > div:nth-child(6)::before { animation-delay: 1250ms; }
#publicLanding .vl-week > div:nth-child(7)::before { animation-delay: 1500ms; }

#publicLanding[data-motion="running"] .vl-calendar-visual.vl-in-view .vl-week > div::before {
  animation-play-state: running;
}

#publicLanding .vl-calendar-total strong,
#publicLanding .vl-week b,
#publicLanding .vl-price,
#publicLanding .vl-demo-slider b {
  font-variant-numeric: tabular-nums;
}

#publicLanding .vl-final {
  overflow: hidden;
  isolation: isolate;
}

#publicLanding .vl-final::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -35% -25%;
  background: linear-gradient(118deg, #f0f8dd00 20%, #f0f8dd10 38%, #f0f8dd38 51%, #f0f8dd12 65%, #f0f8dd00 82%);
  transform: translate3d(-5%, 0, 0);
  pointer-events: none;
  animation: vl91-final-light 28s var(--vl-ease-in-out) infinite alternate paused;
}

#publicLanding[data-motion="running"] .vl-final.vl-in-view::before {
  animation-play-state: running;
}

/* The controller changes only the automatic motion, never authentication. */
#publicLanding .vl-auth-actions .vl-motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid #b4c7a9;
  border-radius: 50%;
  background: #fbfdf8d9;
  color: var(--ink);
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease, transform 240ms var(--vl-ease-out);
}

#publicLanding .vl-motion-toggle svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#publicLanding .vl-motion-toggle[aria-pressed="true"] {
  background: #e5eddf;
  border-color: #99b387;
}

#publicLanding .vl-motion-toggle .vl-play-icon,
#publicLanding .vl-motion-toggle[aria-pressed="true"] .vl-pause-icon {
  display: none;
}

#publicLanding .vl-motion-toggle[aria-pressed="true"] .vl-play-icon {
  display: block;
}

#publicLanding .vl-motion-toggle:disabled {
  cursor: default;
  opacity: .6;
}

#publicLanding .vl-motion-toggle:active {
  transform: scale(.98);
}

#publicLanding .vl-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#publicLanding .vl-ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
}

#publicLanding .vl-button::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -25% auto -25% -45%;
  width: 42%;
  background: linear-gradient(105deg, transparent 15%, #ffffff1c 50%, transparent 85%);
  transform: translate3d(0, 0, 0) skewX(-15deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 800ms var(--vl-ease-in-out), opacity 300ms ease;
}

#publicLanding .vl-nav-links a,
#publicLanding .vl-footer nav a {
  position: relative;
}

#publicLanding .vl-nav-links a::after,
#publicLanding .vl-footer nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: #6e9a35;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--vl-ease-out);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  #publicLanding .vl-nav-links a:hover::after,
  #publicLanding .vl-footer nav a:hover::after { transform: scaleX(1); }
  #publicLanding .vl-button:hover::after {
    opacity: 1;
    transform: translate3d(420%, 0, 0) skewX(-15deg);
  }
  #publicLanding .vl-auth-actions .vl-motion-toggle:hover {
    background: #e5eddf;
    border-color: #7e9c64;
    transform: translateY(-1px);
  }
  #publicLanding.vl-keyboard-navigation .vl-button:hover,
  #publicLanding.vl-keyboard-navigation .vl-button:hover svg,
  #publicLanding.vl-keyboard-navigation .vl-price-grid article:hover,
  #publicLanding.vl-keyboard-navigation .vl-text-link:hover svg,
  #publicLanding.vl-keyboard-navigation .vl-motion-toggle:hover { transform: none; }
  #publicLanding.vl-keyboard-navigation .vl-button:hover::after { opacity: 0; }
}

@keyframes vl91-flow-a {
  from { transform: translate3d(0, 0, 0) rotate(-6deg); }
  to { transform: translate3d(8vw, 5vh, 0) rotate(4deg); }
}
@keyframes vl91-flow-b {
  from { transform: translate3d(0, 0, 0) rotate(5deg); }
  to { transform: translate3d(-7vw, -6vh, 0) rotate(-4deg); }
}
@keyframes vl91-studio-pan {
  from { transform: scale(1.01) translate3d(-3px, 0, 0); }
  to { transform: scale(1.01) translate3d(3px, -2px, 0); }
}
@keyframes vl91-window-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .86; }
}
@keyframes vl91-slider-light {
  0%, 100% { opacity: 1; }
  50% { opacity: .8; }
}
@keyframes vl91-slider-thumb {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes vl91-swatch {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -1px, 0); }
}
@keyframes vl91-swatch-ring {
  0%, 100% { opacity: 0; transform: scale(.98); }
  50% { opacity: .22; transform: scale(1); }
}
@keyframes vl91-calendar-light {
  0%, 100% { opacity: 0; }
  50% { opacity: .18; }
}
@keyframes vl91-final-light {
  from { transform: translate3d(-5%, 0, 0); }
  to { transform: translate3d(5%, 0, 0); }
}

@media (max-width: 1000px) {
  #publicLanding .vl-nav { gap: 20px; }
  #publicLanding .vl-auth-actions { gap: 8px; }
}

@media (max-width: 700px) {
  #publicLanding .vl-nav { gap: 12px; }
  #publicLanding .vl-auth-actions { gap: 6px; }
  #publicLanding .vl-flow-a {
    width: 210vw;
    height: 140vh;
    left: -62vw;
    top: -30vh;
  }
  #publicLanding .vl-flow-b {
    width: 210vw;
    height: 150vh;
    right: -68vw;
    top: -8vh;
  }
  #publicLanding .vl-auth-actions .vl-motion-toggle {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
}

/* Respect both explicit pause and the OS motion preference. A paused page
   keeps all real content visible; reduced motion also removes decoration. */
#publicLanding[data-motion="paused"] .vl-motion-backdrop > *,
#publicLanding[data-motion="paused"] .vl-shot-crop img,
#publicLanding[data-motion="paused"] .vl-window-dots i,
#publicLanding[data-motion="paused"] .vl-demo-slider i::before,
#publicLanding[data-motion="paused"] .vl-demo-slider i::after,
#publicLanding[data-motion="paused"] .vl-demo-palette i,
#publicLanding[data-motion="paused"] .vl-demo-palette i::after,
#publicLanding[data-motion="paused"] .vl-week > div::before,
#publicLanding[data-motion="paused"] .vl-final::before {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #publicLanding *,
  #publicLanding *::before,
  #publicLanding *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  #publicLanding .vl-motion-backdrop,
  #publicLanding .vl-ripple,
  #publicLanding .vl-button::after { display: none; }
  #publicLanding .vl-shot-crop img,
  #publicLanding .vl-demo-palette i,
  #publicLanding .vl-demo-slider i::after,
  #publicLanding .vl-button,
  #publicLanding .vl-button svg,
  #publicLanding .vl-motion-toggle,
  #publicLanding .vl-price-grid article,
  #publicLanding .vl-text-link svg,
  #publicLanding .vl-final::before { transform: none !important; }
  #publicLanding .vl-demo-palette i::after,
  #publicLanding .vl-week > div::before { opacity: 0; }
}