/*
 * Page-load transition effect for avtomatik.org.
 *
 * Pure CSS, no JS dependency, no flash-of-unstyled-content risk:
 * the overlay is painted by CSS the instant the stylesheet loads
 * (before JS even runs), and fades itself out automatically once
 * its own animation completes -- so it works even if JS is slow,
 * blocked, or disabled.
 *
 * Composition:
 *   1. A full-screen black overlay sits on top of everything at
 *      opacity 1 the instant the page starts rendering.
 *   2. It animates to opacity 0 and pointer-events: none over a
 *      short duration, then stays invisible and non-interactive.
 *   3. The actual page content fades + lifts in slightly underneath,
 *      timed to start as the overlay clears, so the reveal feels
 *      like one continuous motion rather than two separate effects.
 *
 * IMPORTANT CAVEAT: pure-CSS "on load" timing is approximate -- the
 * animation starts when the BROWSER PARSES this CSS rule, which on a
 * fast connection is very close to navigation start, but isn't a true
 * `window.onload` event (which would also wait for images/fonts).
 * For a guaranteed wait-for-everything version, this would need a
 * small JS snippet that removes a class once `window.onload` fires --
 * the CSS-only version below is simpler and has zero failure modes,
 * at the cost of not perfectly syncing with slow image loads.
 */

html.has-page-transition body {
  animation: avtomatik-page-overlay-fade 0.6s ease-out forwards;
}

@keyframes avtomatik-page-overlay-fade {
  0%   { background-color: #000; }
  100% { background-color: transparent; }
}

/*
 * The overlay itself: a fixed full-screen element, present in the DOM
 * (added once via functions.php, see instructions below), that covers
 * everything and fades out. Using a real element rather than relying
 * on body background alone gives more control over timing and avoids
 * fighting with the theme's own background-color rules.
 */
.avtomatik-page-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: #000;
  pointer-events: none;
  animation: avtomatik-overlay-out 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes avtomatik-overlay-out {
  0%   { opacity: 1; }
  60%  { opacity: 1; } /* hold briefly so it's perceptible, not just a flicker */
  100% { opacity: 0; visibility: hidden; }
}

/*
 * Content reveal underneath -- a gentle fade + upward drift, timed to
 * start slightly before the overlay fully clears so the two motions
 * blend into one continuous reveal instead of "overlay gone, THEN
 * content appears" which feels like two separate steps.
 */
.avtomatik-page-reveal {
  animation: avtomatik-content-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

@keyframes avtomatik-content-in {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Respect users who've asked for reduced motion -- skip straight to
   the end state, no animation, no overlay delay. */
@media (prefers-reduced-motion: reduce) {
  .avtomatik-page-overlay { display: none; }
  .avtomatik-page-reveal  { animation: none; opacity: 1; transform: none; }
}