/* ── Cover de entrada (html::before) ─────────────────────────────────────── */

html.page-transition-pending::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
  background: var(--page-transition-color, #0f0f0f);
  transform: translate3d(0, 0, 0) scaleY(1);
  transform-origin: top;
  backface-visibility: hidden;
  will-change: transform;
}

html.page-transition-pending:not(.page-transition-revealing),
html.page-transition-pending:not(.page-transition-revealing) body {
  background: var(--page-transition-color, #0f0f0f) !important;
}

html.page-transition-pending body > * {
  visibility: hidden !important;
}

html.page-transition-pending.page-transition-revealing body > * {
  visibility: visible !important;
}

/* Suprimir transición de background al quitar el cover */
html.page-transition-pending body,
html.page-transition-no-bg-transition body {
  transition: none !important;
}

/* Animación de reveal: el cover sube hacia arriba */
html.page-transition-pending.page-transition-revealing::before {
  animation: pageTransitionOut 0.50s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

/* ── Overlay de salida (.page-transition div) ─────────────────────────────── */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: var(--page-transition-color, #0f0f0f);
  contain: layout paint;
  transform: translate3d(0, 0, 0) scaleY(0);
  transform-origin: bottom;
  visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.page-transition.is-active {
  visibility: visible;
  animation: pageTransitionIn 0.50s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

/* ── Keyframes ────────────────────────────────────────────────────────────── */

@keyframes pageTransitionIn {
  from { transform: translate3d(0, 0, 0) scaleY(0); }
  to   { transform: translate3d(0, 0, 0) scaleY(1); }
}

@keyframes pageTransitionOut {
  from { transform: translate3d(0, 0, 0) scaleY(1); }
  to   { transform: translate3d(0, 0, 0) scaleY(0); }
}

/* ── Accesibilidad ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html.page-transition-pending::before,
  html.page-transition-pending.page-transition-revealing::before,
  .page-transition,
  .page-transition.is-active {
    animation: none;
    visibility: hidden;
  }
}

/* ── Móvil: desactivar transiciones ──────────────────────────────────────── */

@media (max-width: 768px) {
  html.page-transition-pending::before,
  html.page-transition-pending.page-transition-revealing::before,
  .page-transition,
  .page-transition.is-active {
    animation: none !important;
    visibility: hidden !important;
    display: none !important;
  }

  html.page-transition-pending body > * {
    visibility: visible !important;
  }

  html.page-transition-pending,
  html.page-transition-pending:not(.page-transition-revealing),
  html.page-transition-pending:not(.page-transition-revealing) body {
    background: unset !important;
  }
}