/**
 * Premium spring scroll — GPU-only motion layer.
 * Pairs with js/premium-scroll.js
 */

html.ps-init {
  --ps-spring-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ps-text-offset: 40px;
}

/* Disable native smooth scroll when spring engine drives position */
html.ps-spring-scroll {
  scroll-behavior: auto !important;
}

html.ps-active body {
  -webkit-overflow-scrolling: touch;
}

/* Reveal targets — will-change only while springs are running */
html.ps-active .ps-reveal {
  backface-visibility: hidden;
  transform-origin: center center;
  transition: none !important;
}

html.ps-active.ps-ticking .ps-reveal {
  will-change: transform, opacity;
}

html.ps-active .ps-reveal[data-ps-type='image'] {
  overflow: hidden;
  transform-origin: center center;
}

html.ps-active .ps-reveal[data-ps-type='image'] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.ps-active .ps-parallax {
  backface-visibility: hidden;
  pointer-events: none;
}

html.ps-active.ps-ticking .ps-parallax {
  will-change: transform;
}

/* Supersede CSS transition-based reveals when premium scroll is active */
html.ps-active .framer-reveal-prep,
html.ps-active .latest-projects-reveal-prep {
  transition: none !important;
}

html.ps-active.latest-projects-reveal-init .latest-projects:not(.latest-projects--inview) .latest-projects-reveal-prep,
html.ps-active.latest-projects-reveal-init .latest-projects--inview .latest-projects-reveal-prep {
  transition: none !important;
}

/* Project card hover — combine with JS transform via separate layer on frame */
html.ps-active .project-card.ps-reveal {
  pointer-events: auto;
}

html.ps-active .project-card.ps-reveal:hover {
  z-index: 4;
}

html.ps-active .project-card:hover {
  transform: none;
}

html.ps-active .project-card.ps-reveal .project-card__frame {
  transition: transform 0.45s var(--ps-spring-ease);
}

html.ps-active .project-card.ps-reveal:hover .project-card__frame {
  transform: translate3d(0, -4px, 0);
}

/* Section polish — subtle depth while scrolling */
html.ps-active main > section,
html.ps-active .latest-projects,
html.ps-active .trusted-section,
html.ps-active .services-section,
html.ps-active .plans-section,
html.ps-active .clients-section,
html.ps-active .faq-section,
html.ps-active .process-section,
html.ps-active .stats-section,
html.ps-active .news-section,
html.ps-active .contact-section {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html.ps-active .ps-reveal,
  html.ps-active .ps-parallax {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
    transition: none !important;
  }
}