/* 
  HyperOS-style Page Transitions (Clean + Premium)
  - Sidebar/header MUST stay fixed (no VT name, no transforms)
  - Only the content shell transitions, giving "only content changes" feeling
  - Token-driven timing/easing (matches hyper-motion.css)
*/

@view-transition { navigation: auto; }

/* Opt-out stable chrome */
aside, nav, header, footer,
.drawer-side, .sidebar, #sidebar,
.navbar, .topbar, .app-sidebar {
  view-transition-name: none !important;
}

/* Content container (support both old + new nav controllers) */
.ww-page-shell { view-transition-name: none; }
#page-content  { view-transition-name: page; }

:root{
  /* Single source of truth */
  --vt-dur: var(--hyper-vt-dur, 520ms);
  --vt-ease: var(--hyper-ease, cubic-bezier(0.32, 0, 0, 1));

  /* Micro depth (keep subtle to stay professional) */
  --vt-shift: 10px;
  --vt-scale-in: 0.996;
  --vt-scale-out: 0.998;
  --vt-blur-in: 6px;
  --vt-blur-out: 2px;
}

/* Core VT hooks (named: page) */
::view-transition-old(page),
::view-transition-new(page){
  animation-duration: var(--vt-dur) !important;
  animation-timing-function: var(--vt-ease) !important;
  will-change: transform, opacity, filter;
}

::view-transition-old(page){ animation-name: ww-vt-old !important; }
::view-transition-new(page){ animation-name: ww-vt-new !important; }

@keyframes ww-vt-old{
  from { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); }
  to   { opacity: 0; filter: blur(var(--vt-blur-out)); transform: translate3d(0, calc(var(--vt-shift) * -0.35), 0) scale(var(--vt-scale-out)); }
}

@keyframes ww-vt-new{
  from { opacity: 0; filter: blur(var(--vt-blur-in)); transform: translate3d(0, var(--vt-shift), 0) scale(var(--vt-scale-in)); }
  to   { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); }
}

/* Ultra-subtle premium sweep (kept clean) */
#vt-sweep{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--vt-ease);
  mix-blend-mode: screen;
}

#vt-sweep::before{
  content:"";
  position:absolute;
  inset:-20% -40%;
  transform: translate3d(-40%, 0, 0) rotate(-8deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(139, 92, 246, 0.10) 35%,
    rgba(232, 121, 249, 0.12) 55%,
    transparent 100%
  );
  filter: blur(2px);
}

body.vt-sweep #vt-sweep{ opacity: 1; }
body.vt-sweep #vt-sweep::before{
  animation: ww-vt-sweep var(--vt-dur) var(--vt-ease) both;
}

@keyframes ww-vt-sweep{
  0%   { transform: translate3d(-55%, 0, 0) rotate(-8deg); opacity: .0; }
  15%  { opacity: .9; }
  85%  { opacity: .9; }
  100% { transform: translate3d(55%, 0, 0) rotate(-8deg); opacity: .0; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  :root{ --vt-dur: 1ms; }
  #vt-sweep{ display:none !important; }
  ::view-transition-old(page),
  ::view-transition-new(page){
    animation-duration: 1ms !important;
  }
}