/* ==================================================
   Oribu Motion & Animation Engine 2026
   GPU-Accelerated, Spring-Physics Driven Design System
   Instant Load - Zero Preloader, Zero Blur, Clean Performance
   ================================================== */

:root {
  /* 2026 Spring & Fluid Timing Curves */
  --motion-ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
      0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
      1.001 83.5%, 1);
  --motion-ease-bounce: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 20.2%,
      1.049 23.6%, 1.052 27.3%, 1.019 35.6%, 0.998 44.4%, 1.001 55%, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Durations */
  --motion-duration-instant: 120ms;
  --motion-duration-fast: 200ms;
  --motion-duration-base: 360ms;
  --motion-duration-medium: 520ms;
  --motion-duration-enter: 720ms;

  /* Spatial */
  --motion-distance: clamp(18px, 2.2vw, 32px);
}

/* --------------------------------------------------
   1. Scroll Progress Bar
   -------------------------------------------------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 2400;
  height: 3px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-out);
  view-transition-name: none;
}

.scroll-progress__bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand), #9aa5f2);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-enhanced {
    scroll-behavior: smooth;
  }
}

.motion-ready.has-scrolled .scroll-progress,
.is-navigating .scroll-progress {
  opacity: 1;
}

.is-navigating .scroll-progress__bar {
  animation: motion-navigation-progress 850ms var(--motion-ease-spring) both;
}

/* --------------------------------------------------
   2. Header Transitions
   -------------------------------------------------- */
.header-wrapper {
  transition:
    transform 260ms var(--motion-ease-out),
    background-color 200ms ease;
  backface-visibility: hidden;
}

.header-wrapper.is-hidden-by-scroll {
  transform: translate3d(0, calc(-100% - 1px), 0);
}

.header-wrapper:focus-within,
.menu-open .header-wrapper {
  transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------
   3. Floating Actions
   -------------------------------------------------- */
.motion-enhanced .floating-actions {
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(0.94);
  transition:
    opacity 400ms var(--motion-ease-out),
    transform 400ms var(--motion-ease-spring);
}

.motion-ready.has-scrolled .floating-actions {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* --------------------------------------------------
   4. Entrances (Crisp & Sharp - No Blur)
   -------------------------------------------------- */
.motion-enhanced [data-motion],
.motion-enhanced [data-motion-group]>* {
  --motion-x: 0px;
  --motion-y: var(--motion-distance);
  --motion-scale: 0.97;

  transition-property: opacity, transform;
  transition-duration: var(--motion-duration-enter);
  transition-delay: var(--motion-delay, 0ms);
  transition-timing-function: var(--motion-ease-spring);
}

.motion-enhanced [data-motion="left"],
.motion-enhanced [data-motion-group="left"]>* {
  --motion-x: calc(var(--motion-distance) * -1);
  --motion-y: 0px;
  --motion-scale: 0.98;
}

.motion-enhanced [data-motion="right"],
.motion-enhanced [data-motion-group="right"]>* {
  --motion-x: var(--motion-distance);
  --motion-y: 0px;
  --motion-scale: 0.98;
}

.motion-enhanced [data-motion="scale"],
.motion-enhanced [data-motion-group="scale"]>* {
  --motion-scale: 0.95;
  --motion-y: 12px;
}

/* Hidden state before in view (Clean opacity and transform, zero blur) */
.motion-enhanced [data-motion]:not(.is-motion-visible),
.motion-enhanced [data-motion-group]> :not(.is-motion-visible) {
  opacity: 0;
  transform: translate3d(var(--motion-x), var(--motion-y), 0) scale(var(--motion-scale));
  will-change: opacity, transform;
}

/* Revealed in view */
.motion-enhanced [data-motion].is-motion-visible,
.motion-enhanced [data-motion-group]>.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* --------------------------------------------------
   5. Card Motion & Flat Elevation
   -------------------------------------------------- */
.product-card,
.news-featured,
.ref-list-item,
.testi-card {
  position: relative;
  box-shadow: none !important;
}

/* Giriş bitmeden will-change tut, bittikten sonra kaldır */
.motion-enhanced .product-card:not(.is-motion-visible),
.motion-enhanced .news-featured:not(.is-motion-visible),
.motion-enhanced .ref-list-item:not(.is-motion-visible),
.motion-enhanced .testi-card:not(.is-motion-visible) {
  will-change: opacity, transform;
}

.product-card.is-motion-visible,
.news-featured.is-motion-visible,
.ref-list-item.is-motion-visible,
.testi-card.is-motion-visible,
.has-tilt {
  box-shadow: none !important;
  will-change: auto;
}

/* --------------------------------------------------
   6. Standard Interactive Elements Transition Group
   -------------------------------------------------- */
:where(.btn,
  .text-link,
  .nav-link,
  .site-logo,
  .mobile-menu-btn,
  .mobile-menu-close,
  .floating-action-btn,
  .footer-direct-link,
  .footer-social-pill,
  .footer-nav-anchor,
  .footer-top-btn,
  .filter-btn,
  .search-clear,
  .sector-tab,
  .sector-image,
  .thumb-item,
  .product-detail-tabs__tab,
  .product-detail-tabs__tab::after,
  .ref-list-item,
  .ref-card-btn,
  .icon-expand,
  .ref-list-img,
  .blog-share-btn,
  .blog-back-link,
  .blog-back-link svg,
  .sidebar-all-link,
  .sidebar-all-link svg,
  .legal-nav-item,
  .legal-nav-item svg,
  .not-found-brand) {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--motion-duration-fast);
  transition-timing-function: var(--motion-ease-out);
}

/* Subtle standard active state */
.filter-btn:active,
.floating-action-btn:active {
  transform: scale(0.98);
}

/* --------------------------------------------------
   7. Mobile Menu Choreography
   -------------------------------------------------- */
@media (max-width: 960px) {
  .mobile-menu-overlay {
    transition:
      opacity var(--motion-duration-base) var(--motion-ease-standard),
      visibility 0s linear var(--motion-duration-base);
  }

  .mobile-menu-overlay.is-open {
    transition-delay: 0s;
  }

  .mobile-menu-panel {
    transition: transform 440ms var(--motion-ease-spring);
  }

  .mobile-nav-link {
    transition:
      color var(--motion-duration-fast) ease,
      opacity var(--motion-duration-base) var(--motion-ease-spring),
      transform var(--motion-duration-base) var(--motion-ease-spring);
  }

  .mobile-menu-overlay.is-open .mobile-nav-link:nth-child(1) {
    transition-delay: 60ms;
  }

  .mobile-menu-overlay.is-open .mobile-nav-link:nth-child(2) {
    transition-delay: 95ms;
  }

  .mobile-menu-overlay.is-open .mobile-nav-link:nth-child(3) {
    transition-delay: 130ms;
  }

  .mobile-menu-overlay.is-open .mobile-nav-link:nth-child(4) {
    transition-delay: 165ms;
  }

  .mobile-menu-overlay.is-open .mobile-nav-link:nth-child(5) {
    transition-delay: 200ms;
  }

  .mobile-menu-overlay.is-open .mobile-nav-link:nth-child(6) {
    transition-delay: 235ms;
  }
}

/* Loading button spinner */
.btn.is-loading {
  cursor: wait;
  opacity: 0.85;
  pointer-events: none;
}

.btn.is-loading::after {
  width: 16px;
  height: 16px;
  margin-left: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: motion-spin 680ms linear infinite;
}

/* --------------------------------------------------
   8. View Transitions API (No Blur)
   -------------------------------------------------- */


.motion-transition-surface {
  view-transition-name: motion-surface;
}

::view-transition-old(root) {
  animation: motion-page-fade-out 180ms var(--motion-ease-exit) both;
}

::view-transition-new(root) {
  animation: motion-page-fade-in 340ms var(--motion-ease-spring) both;
}

::view-transition-group(motion-surface) {
  animation-duration: var(--motion-duration-base);
  animation-timing-function: var(--motion-ease-spring);
}

::view-transition-old(motion-surface) {
  animation: motion-surface-out var(--motion-duration-fast) var(--motion-ease-exit) both;
}

::view-transition-new(motion-surface) {
  animation: motion-surface-in var(--motion-duration-base) var(--motion-ease-spring) both;
}

/* --------------------------------------------------
   Keyframe Animations
   -------------------------------------------------- */
@keyframes motion-navigation-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(0.88);
  }
}

@keyframes motion-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes motion-page-fade-out {
  to {
    opacity: 0;
    transform: scale(0.995);
  }
}

@keyframes motion-page-fade-in {
  from {
    opacity: 0;
    transform: scale(1.008) translate3d(0, 6px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes motion-surface-out {
  to {
    opacity: 0;
    transform: scale(0.99);
  }
}

@keyframes motion-surface-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.99);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------
   9. Accessibility (Reduced Motion)
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(motion-surface),
  ::view-transition-new(motion-surface) {
    animation: none !important;
  }

  .motion-enhanced [data-motion],
  .motion-enhanced [data-motion-group]>* {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .header-wrapper,
  .header-wrapper.is-hidden-by-scroll,
  .motion-enhanced .floating-actions,
  .motion-ready.has-scrolled .floating-actions,
  .filter-glider,
  .product-card,
  .news-featured,
  .ref-list-item,
  .testi-card {
    transform: none !important;
    transition: none !important;
  }

  .btn.is-loading::after,
  .is-navigating .scroll-progress__bar {
    animation: none !important;
  }
}