/* ===========================================================================
   DeutschMaak — "3D Depth Slide + Neon Flow" page transition.

   Pairs with page-transition.js, which is emitted once by the canonical navbar
   (includes/page_transition.php, required from includes/unified_nav.php) so no
   page needs its own copy. Admin pages reach it through the same navbar, so the
   behaviour is identical across public, learning and back-office pages.

   Only transform / opacity / filter are animated (cheap, GPU friendly). The
   themed veil is what fades the page out and back in, which keeps the canvas
   colour correct: a dark theme never flashes white and a light theme never
   flashes black. Nothing here changes an existing colour, layout or content.
   =========================================================================== */

:root{
  --dmpt-dur: 400ms;
  --dmpt-ease: cubic-bezier(.22,.61,.36,1);
}

/* The veil + neon halo. The JS creates it before the first paint of the
   incoming page (inline style already covers the screen); these rules only
   refine it and drive the fade. pointer-events:none always. */
.dm-pt-cover{
  position: fixed;
  inset: 0;
  z-index: 2147483002;
  pointer-events: none;
  background: #f4f6f8;
  opacity: 0;
  will-change: opacity;
}
html.dark .dm-pt-cover{ background: #101318; }

/* Diffuse red halo, purely decorative, removed with the veil. */
.dm-pt-cover::before{
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(40% 36% at 24% 32%, rgba(225,29,46,.30), transparent 68%),
    radial-gradient(42% 40% at 78% 68%, rgba(225,29,46,.18), transparent 72%);
  opacity: 0;
  animation: dmPtGlow var(--dmpt-dur) var(--dmpt-ease) both;
}

html.dm-pt-active body{ will-change: transform, opacity, filter; }

html.dm-pt-enter .dm-pt-cover{ opacity: 1; animation: dmPtCoverOut var(--dmpt-dur) var(--dmpt-ease) both; }
html.dm-pt-exit  .dm-pt-cover{ animation: dmPtCoverIn  var(--dmpt-dur) var(--dmpt-ease) both; }

html.dm-pt-enter body{ animation: dmPtEnter var(--dmpt-dur) var(--dmpt-ease) both; }
html.dm-pt-exit  body{ animation: dmPtExit  var(--dmpt-dur) var(--dmpt-ease) both; }

/* The sliding body would otherwise widen the scroll area for a few frames. */
html.dm-pt-active{ overflow-x: hidden; }

@keyframes dmPtEnter{
  from{ transform: perspective(1200px) translate3d(4%,0,-60px) scale(.985); opacity: .35; filter: blur(2px); }
  to  { transform: perspective(1200px) translate3d(0,0,0) scale(1); opacity: 1; filter: blur(0); }
}
@keyframes dmPtExit{
  from{ transform: perspective(1200px) translate3d(0,0,0) scale(1); opacity: 1; filter: blur(0); }
  to  { transform: perspective(1200px) translate3d(-3.5%,0,-70px) scale(.97); opacity: .2; filter: blur(2px); }
}
@keyframes dmPtCoverOut{ from{ opacity: 1; } to{ opacity: 0; } }
@keyframes dmPtCoverIn { from{ opacity: 0; } to{ opacity: 1; } }
@keyframes dmPtGlow{ 0%{ opacity: 0; } 42%{ opacity: 1; } 100%{ opacity: 0; } }

/* Mobile: lighter, shorter, no blur (cheaper on mobile GPUs). */
@media (max-width: 768px){
  html.dm-pt-enter body{ animation-name: dmPtEnterMobile; }
  html.dm-pt-exit  body{ animation-name: dmPtExitMobile; }
  .dm-pt-cover::before{ opacity: .75; }
}
@keyframes dmPtEnterMobile{
  from{ transform: translate3d(6%,0,0); opacity: .5; }
  to  { transform: translate3d(0,0,0); opacity: 1; }
}
@keyframes dmPtExitMobile{
  from{ transform: translate3d(0,0,0); opacity: 1; }
  to  { transform: translate3d(-6%,0,0); opacity: .25; }
}

/* Respect the user's motion preference. The JS already skips the effect, this
   is the belt-and-braces guarantee if a class is ever left behind. */
@media (prefers-reduced-motion: reduce){
  html.dm-pt-active body{ animation: none !important; }
  .dm-pt-cover, .dm-pt-cover::before{ animation-duration: 1ms !important; }
}