/*
 * performance.css - drawfinn
 * Fast, smooth, GPU-accelerated UI
 */

/* ================================================
   1. SMOOTH SCROLL (native CSS)
================================================ */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ================================================
   2. GLOBAL BOX-SIZING & PAINT OPTIMIZATION
================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Avoid layout shifts */
img, video, iframe, embed, object {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ================================================
   3. GPU COMPOSITING — push animated elements to own layer
================================================ */
.navbar,
.preloader,
.banner-image img,
.about-image img,
.screenshot-slider,
.testimonial-slides,
.default-shape .shape-2.rotateme {
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ================================================
   4. SMOOTHER TRANSITIONS — all interactive elements
================================================ */
a,
button,
.default-btn,
.nav-link,
.navbar,
.go-top,
.footer-links a,
.accordion-title,
.tab ul.tabs li a,
.owl-prev, .owl-next,
.slick-prev, .slick-next {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -webkit-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ================================================
   5. SMOOTH HOVER LIFT — cards, images, features
================================================ */
.single-features-box,
.single-team-box,
.single-blog-post,
.screenshot-preview-image,
.about-image,
.banner-image {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -webkit-transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.single-features-box:hover,
.single-team-box:hover,
.single-blog-post:hover {
  transform: translateY(-6px) translateZ(0);
  -webkit-transform: translateY(-6px) translateZ(0);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* ================================================
   6. STICKY NAVBAR — instant hardware-accelerated
================================================ */
.navbar.is-sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
  -webkit-animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@-webkit-keyframes slideDown {
  from { -webkit-transform: translateY(-100%); }
  to   { -webkit-transform: translateY(0); }
}

/* ================================================
   7. PRELOADER — fade out silky smooth
================================================ */
.preloader {
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* ================================================
   8. WOW / ANIMATION — smoother easing
================================================ */
.wow {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ================================================
   9. SCROLL PADDING — so sticky nav doesn't cover sections
================================================ */
:target,
[id] {
  scroll-margin-top: 100px;
}

/* ================================================
   10. BUTTON — ripple effect faster & smoother
================================================ */
.default-btn {
  transform: translateZ(0);
  transition: color 0.25s ease, background-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.2s ease !important;
}

.default-btn:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow: 0 8px 24px rgba(255, 122, 26, 0.4);
}

.default-btn:active {
  transform: translateY(0) translateZ(0);
  box-shadow: 0 2px 8px rgba(255, 122, 26, 0.3);
}

/* ================================================
   11. GO TOP BUTTON — smooth appear
================================================ */
.go-top {
  transition: opacity 0.3s ease, transform 0.3s ease,
              background-color 0.25s ease !important;
}

.go-top:hover {
  transform: translateY(-4px);
}

/* ================================================
   12. IMAGES — prevent layout shift (aspect ratio)
================================================ */
.banner-image img,
.about-image img,
.screenshot-preview-image img {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ================================================
   13. FONT RENDERING — crisp on all screens
================================================ */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ================================================
   14. FOCUS — accessibility + smooth outline
================================================ */
:focus-visible {
  outline: 3px solid #ff7a1a;
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-offset 0.15s ease;
}

/* ================================================
   15. REDUCE MOTION — respect user preference
================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}