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

html,
body{
  background:#070815;
}

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

.js-reveal{
  opacity:0;
  transform:translateY(26px) 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;
}

.studio-nav,
.btn,
.studio-btn,
.studio-nav-link,
.story-card,
.service-card,
.pricing-card,
.process-step,
.faq-card,
.contact-card,
.hero-panel,
.whatsapp-float{
  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;
}

.story-card:hover,
.service-card:hover,
.pricing-card:hover,
.process-step:hover,
.faq-card:hover,
.contact-card:hover,
.hero-panel:hover{
  transform:translateY(-3px);
}

.panel-card,
.floating-note,
.addon-pill,
.hero-proof span{
  transition:
    transform var(--motion-duration-fast) ease,
    background-color var(--motion-duration-fast) ease,
    border-color var(--motion-duration-fast) ease;
}

@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;
  }
}