:root{
  --motion-ease:cubic-bezier(.22, 1, .36, 1);
  --motion-duration-fast:.28s;
  --motion-duration-base:.6s;
  --motion-duration-slow:.78s;
}

html,
body{
  background:#f8f5f0;
}

.site-main{
  min-height:calc(100vh - 88px);
}

.js-reveal{
  opacity:0;
  transform:translateY(24px) scale(.985);
  filter:saturate(.96);
  transition:
    opacity var(--motion-duration-base) var(--motion-ease),
    transform var(--motion-duration-slow) var(--motion-ease),
    filter var(--motion-duration-slow) var(--motion-ease);
  transition-delay:calc(var(--motion-index, 0) * 45ms);
  will-change:opacity, transform;
}

.js-reveal.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

.navbar-photo,
.btn,
.nav-link,
.dropdown-menu,
.listing-card,
.browse-card,
.plan-card,
.why-card,
.account-card,
.account-anchor-card,
.dashboard-stat-card,
.dashboard-section-card,
.dashboard-side-card,
.create-side-card,
.create-form-card,
.plans-info-box,
.plans-business-card,
.account-overview-card,
.detail-gallery-card,
.detail-features-card,
.detail-description-card,
.detail-sidebar-card,
.auth-showcase-card,
.auth-form-card,
.auth-support-card{
  transition:
    transform var(--motion-duration-fast) ease,
    box-shadow var(--motion-duration-fast) ease,
    border-color var(--motion-duration-fast) ease,
    background-color var(--motion-duration-fast) ease;
}

.listing-card:hover,
.browse-card:hover,
.plan-card:hover,
.why-card:hover,
.account-anchor-card:hover,
.dashboard-stat-card:hover,
.plans-info-box:hover,
.plans-business-card:hover,
.detail-feature-item:hover,
.auth-support-card:hover{
  transform:translateY(-3px);
}

.hero-bg-img,
.browse-hero-bg,
.plans-hero-bg,
.create-hero-bg{
  transition:transform 1.8s var(--motion-ease), filter 1.2s ease;
}

body.site-ready .hero-bg-img,
body.site-ready .browse-hero-bg,
body.site-ready .plans-hero-bg,
body.site-ready .create-hero-bg{
  filter:saturate(1.02);
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  .js-reveal,
  .js-reveal.is-visible{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}