/* ==========================================================================
   PAGE TRANSITION SYSTEM — etaks.az
   Best-practice: CSS-only overlay + JS class toggling.
   Uses will-change & transform (GPU-composited) — no layout reflow.
   Respects prefers-reduced-motion for accessibility.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TRANSITION OVERLAY
   A full-screen element that slides in (exit) and fades out (entrance).
   -------------------------------------------------------------------------- */
#page-transition-overlay {
  position: fixed;
  inset: 0;                       /* top/right/bottom/left: 0 */
  z-index: 99999;
  pointer-events: none;           /* invisible while idle */
  display: grid;
  place-items: center;
  background: #0d0c1d;            /* matches site dark bg */
  opacity: 0;
  transform: translateY(-100%);
  will-change: transform, opacity;
  /* Entrance reveal keyframe — plays on every page load */
  animation: pt-page-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Logo / brand mark shown during transition */
#page-transition-overlay .pt-logo {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#page-transition-overlay.pt-exiting .pt-logo {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   2. ENTRANCE ANIMATION (page just loaded — overlay slides away upward)
   -------------------------------------------------------------------------- */
@keyframes pt-page-enter {
  0%   { transform: translateY(0%);    opacity: 1; pointer-events: all; }
  85%  { opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; pointer-events: none; }
}

/* --------------------------------------------------------------------------
   3. EXIT ANIMATION (user clicked a link — overlay slides in from bottom)
   -------------------------------------------------------------------------- */
#page-transition-overlay.pt-exiting {
  animation: pt-page-exit 0.45s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  pointer-events: all;
}

@keyframes pt-page-exit {
  0%   { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0%);   opacity: 1; }
}

/* --------------------------------------------------------------------------
   4. BODY FADE-UP — page content reveals smoothly after transition
   -------------------------------------------------------------------------- */
body {
  animation: pt-body-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

@keyframes pt-body-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   5. ACCESSIBILITY: honour reduced-motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #page-transition-overlay,
  #page-transition-overlay.pt-exiting {
    animation: none !important;
    transform: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body {
    animation: none !important;
  }
}