/* Premium smooth transitions — site-wide */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vtFadeOut 0.55s var(--ease-premium-out) both;
}

::view-transition-new(root) {
  animation: vtFadeIn 0.65s var(--ease-premium-out) 0.05s both;
}

@keyframes vtFadeOut {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes vtFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(1.01);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Scroll performance — instant native scroll, lighter paint while moving */
html {
  scroll-behavior: auto;
}

body {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

body.is-scrolling .site-header,
body.is-scrolling .btn,
body.is-scrolling .card,
body.is-scrolling .glass-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-scrolling .motion-particle {
  animation-play-state: paused;
}

body.is-scrolling .tilt-interactive,
body.is-scrolling .tilt-interactive.is-tilt-active {
  transform: none !important;
}

:root {
  --ease-premium-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-premium-in-out: cubic-bezier(0.45, 0, 0.15, 1);
  --ease-premium-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-smooth: 0.45s;
  --duration-reveal: 0.85s;
  --duration-page: 0.7s;
}

body.motion-ui {
  --transition: var(--duration-smooth) var(--ease-premium-out);
}

/* Page enter — premium timing (overrides interactive-motion) */
body.motion-ui.is-loading #main {
  transition: none;
}

body.motion-ui.is-loaded #main {
  animation: pageEnterPremium var(--duration-reveal) var(--ease-premium-out) forwards;
}

@keyframes pageEnterPremium {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(1.006);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

body.motion-ui.is-loaded .site-header {
  animation: headerSlide var(--duration-reveal) var(--ease-premium-out) 0.08s both;
}

@keyframes headerSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page leave (fallback when View Transitions unsupported) */
body.motion-ui.is-page-leaving #main {
  opacity: 0;
  transform: translateY(14px) scale(0.992);
  filter: blur(4px);
  transition:
    opacity var(--duration-page) var(--ease-premium-out),
    transform var(--duration-page) var(--ease-premium-out),
    filter var(--duration-page) var(--ease-premium-out);
}

.page-transition-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    165deg,
    rgba(var(--rgb-deep), 0.92) 0%,
    rgba(var(--rgb-teal), 0.88) 100%
  );
  transition: opacity 0.5s var(--ease-premium-out);
}

.page-transition-veil.is-active {
  opacity: 1;
}

/* Smoother global hovers */
body.motion-ui a:not(.btn) {
  transition: color 0.35s var(--ease-premium-out), opacity 0.35s var(--ease-premium-out);
}

body.motion-ui .btn {
  transition:
    background 0.4s var(--ease-premium-out),
    color 0.4s var(--ease-premium-out),
    border-color 0.4s var(--ease-premium-out),
    box-shadow 0.4s var(--ease-premium-out),
    transform 0.5s var(--ease-premium-out);
}

body.motion-ui .card,
body.motion-ui .team-card,
body.motion-ui .model-card,
body.motion-ui .icon-tile {
  transition:
    box-shadow 0.5s var(--ease-premium-out),
    border-color 0.45s var(--ease-premium-out),
    background 0.45s var(--ease-premium-out);
}

body.motion-ui .site-header {
  transition:
    background 0.5s var(--ease-premium-out),
    box-shadow 0.5s var(--ease-premium-out),
    backdrop-filter 0.5s var(--ease-premium-out);
}

body.motion-ui .site-footer a {
  transition: color 0.35s var(--ease-premium-out), transform 0.35s var(--ease-premium-out);
}

body.motion-ui .site-footer a:hover {
  transform: translateX(2px);
}

body.motion-ui .site-nav a,
body.motion-ui .breadcrumbs a,
body.motion-ui .products-subnav a {
  transition: color 0.35s var(--ease-premium-out), opacity 0.35s var(--ease-premium-out);
}

body.motion-ui input,
body.motion-ui select,
body.motion-ui textarea {
  transition:
    border-color 0.4s var(--ease-premium-out),
    box-shadow 0.45s var(--ease-premium-out),
    background 0.4s var(--ease-premium-out);
}

body.motion-ui input:focus-visible,
body.motion-ui select:focus-visible,
body.motion-ui textarea:focus-visible {
  transition:
    border-color 0.35s var(--ease-premium-out),
    box-shadow 0.4s var(--ease-premium-out);
}

body.motion-ui .card img,
body.motion-ui .model-card img,
body.motion-ui .team-card img {
  transition: transform 0.7s var(--ease-premium-out), filter 0.5s var(--ease-premium-out);
}

body.motion-ui .card:hover img,
body.motion-ui .model-card:hover img {
  transform: scale(1.03);
}

/* Section flow */
body.motion-ui:not(.is-scrolling) .section {
  transition: background 0.6s var(--ease-premium-out);
}

/* Accordion premium */
body.motion-ui .accordion-panel {
  transition: max-height 0.55s var(--ease-premium-out);
}

body.motion-ui .accordion-trigger svg {
  transition: transform 0.45s var(--ease-premium-out);
}

/* Nav dropdown */
body.motion-ui .nav-dropdown {
  transition:
    opacity 0.4s var(--ease-premium-out),
    transform 0.4s var(--ease-premium-out),
    visibility 0.4s;
}

body.motion-ui .nav-item--dropdown.is-open .nav-dropdown {
  animation: dropdownIn 0.45s var(--ease-premium-out) forwards;
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Back to top */
body.motion-ui .back-to-top {
  transition:
    opacity 0.4s var(--ease-premium-out),
    transform 0.45s var(--ease-premium-out),
    background 0.4s var(--ease-premium-out),
    box-shadow 0.4s var(--ease-premium-out);
}

body.motion-ui .back-to-top.is-visible {
  animation: softPop 0.5s var(--ease-premium-out);
}

@keyframes softPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

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

  body.motion-ui.is-page-leaving #main {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  body.motion-ui.is-loaded #main,
  body.motion-ui.is-loaded .site-header {
    animation: none !important;
  }
}

@import url("royal-theme.css");