/* Progressive enhancement: no attribute is present until page-entry.js runs.
   Load after site.css; keep all photo masks and header/navigation independent. */
html {
  --page-entry-ready: 1;
}

/* No permanent opacity: 0 rule. This hold reveals itself after 1.4 seconds
   even if JavaScript fails between marking targets and starting the entrance. */
[data-page-entry][data-page-entry-state="pending"] {
  animation: page-entry-safety 1400ms steps(1, end) both;
}

[data-page-entry][data-page-entry-state="running"] {
  animation: page-entry-rise 650ms cubic-bezier(0.16, 1, 0.3, 1)
    var(--page-entry-stagger, 0ms) both;
  will-change: opacity, transform;
}

@keyframes page-entry-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes page-entry-safety {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* CSS fallbacks work even before JavaScript receives the corresponding event.
   Do not change display, visibility, focusability, layout, or text sharpness. */
[data-page-entry]:focus,
[data-page-entry]:focus-within,
[data-page-entry]:target,
:target [data-page-entry] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
}

@media (prefers-reduced-motion: reduce), print {
  [data-page-entry] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
}