/* Page transition shared by every page: a black panel sweeps across with the three cores
   (brown, blue, green/yellow) glowing along its edges. transition.js adds the classes. */

html.nb-leaving::after,
html.nb-entering::after {
  content: "";
  /* --m: extra width each side, so the skewed panel covers the corners of tall screens and the
     glowing edges sit just off screen once it has covered the page */
  --m: calc(20vh + 40px);
  position: fixed; top: 0; bottom: 0; left: calc(-1 * var(--m)); width: calc(100vw + 2 * var(--m)); z-index: 9999;
  pointer-events: none;
  /* black panel, with the three cores glowing down both edges */
  background: linear-gradient(90deg,
    #c46a2c 0 8px, #04060b 8px 11px, #2f7bff 11px 19px, #04060b 19px 22px, #1fd655 22px 30px,
    #04060b 30px calc(100% - 30px),
    #1fd655 calc(100% - 30px) calc(100% - 22px), #04060b calc(100% - 22px) calc(100% - 19px),
    #2f7bff calc(100% - 19px) calc(100% - 11px), #04060b calc(100% - 11px) calc(100% - 8px),
    #c46a2c calc(100% - 8px) 100%);
  filter: drop-shadow(0 0 14px rgba(216, 243, 26, 0.35));
  transform: skewX(-10deg) translateX(-112%);
}

/* Leaving: sweep in from the left to cover the page */
html.nb-leaving::after { animation: nb-wipe-in 0.42s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
/* Arriving: start covered, then sweep off to the right */
html.nb-entering::after { transform: skewX(-10deg) translateX(0); }
html.nb-entering.nb-entered::after { animation: nb-wipe-out 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards; }

@keyframes nb-wipe-in { from { transform: skewX(-10deg) translateX(-112%); } to { transform: skewX(-10deg) translateX(0); } }
@keyframes nb-wipe-out { from { transform: skewX(-10deg) translateX(0); } to { transform: skewX(-10deg) translateX(112%); } }

@media (prefers-reduced-motion: reduce) {
  html.nb-leaving::after, html.nb-entering::after { background: #04060b; filter: none; transform: none; opacity: 0; }
  html.nb-leaving::after { animation: nb-fade-in 0.15s linear forwards !important; }
  html.nb-entering::after { opacity: 1; }
  html.nb-entering.nb-entered::after { animation: nb-fade-out 0.2s linear forwards !important; }
  @keyframes nb-fade-in { to { opacity: 1; } }
  @keyframes nb-fade-out { from { opacity: 1; } to { opacity: 0; } }
}

/* ---------- Card-to-page morph (cross-document view transitions) ----------
   Browsers that support it morph the element named nb-head (a homepage card, or a page's header
   panel) into the matching one on the next page, with the title (nb-title) and icon (nb-icon)
   travelling separately. Others fall back to the wipe above (transition.js decides). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

::view-transition-group(*) {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.25, 1);
}
/* The page being left dims and blurs away behind the growing card */
::view-transition-old(root) { animation: nb-vt-old 0.6s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: nb-vt-new 0.45s ease-out 0.2s both; }
@keyframes nb-vt-old { to { opacity: 0; filter: blur(10px) brightness(0.4); transform: scale(0.97); } }
@keyframes nb-vt-new { from { opacity: 0; } }

/* The card's edge surges hi-vis as it grows */
::view-transition-group(nb-head) { border-radius: 14px; }
::view-transition-old(nb-head) { animation: nb-vt-fade-out 0.3s ease-in both; }
::view-transition-new(nb-head) { animation: nb-vt-surge 0.6s ease-out both; }
@keyframes nb-vt-fade-out { to { opacity: 0; } }
@keyframes nb-vt-surge {
  0% { opacity: 0; filter: drop-shadow(0 0 0 rgba(216, 243, 26, 0)); }
  35% { opacity: 1; filter: drop-shadow(0 0 3px rgba(216, 243, 26, 1)) drop-shadow(0 0 22px rgba(216, 243, 26, 0.75)); }
  100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(216, 243, 26, 0)); }
}