/* Only the five existing navigation links; no new routes or content. */
.site .sidebar nav>a { white-space:nowrap; }
.site .sidebar nav>a .nav-icon {
  display:inline-block;
  position:relative;
  vertical-align:middle;
}
/* Invisible original glyphs keep each label's exact inline advance. */
.site .sidebar nav>a[data-inspect-id="home.nav.home"] .nav-icon::before { content:'⌂'; visibility:hidden; }
.site .sidebar nav>a[data-inspect-id="home.nav.mushaf"] .nav-icon::before { content:'▣'; visibility:hidden; }
.site .sidebar nav>a[data-inspect-id="home.nav.favorites"] .nav-icon::before { content:'☆'; visibility:hidden; }
.site .sidebar nav>a[data-inspect-id="home.nav.search"] .nav-icon::before { content:'⌕'; visibility:hidden; }
.site .sidebar nav>a[data-inspect-id="home.nav.about"] .nav-icon::before { content:'ⓘ'; visibility:hidden; }
.site .sidebar nav>a .nav-icon svg {
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:28px;
  height:28px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgb(0 0 0 / .2));
}
.site .sidebar nav>a .nav-label {
  display:inline-block;
  vertical-align:middle;
  margin-inline-start:12px;
  animation:nav-label-arrive .72s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--nav-order) * .09s);
}
.site .sidebar nav>a:nth-child(1) { --nav-order:1; --nav-fall-x:0px; --nav-fall-y:-13px; --nav-tilt:0deg; }
.site .sidebar nav>a:nth-child(2) { --nav-order:2; --nav-fall-x:6px; --nav-fall-y:-10px; --nav-tilt:5deg; }
.site .sidebar nav>a:nth-child(3) { --nav-order:3; --nav-fall-x:-4px; --nav-fall-y:-15px; --nav-tilt:-5deg; }
.site .sidebar nav>a:nth-child(4) { --nav-order:4; --nav-fall-x:7px; --nav-fall-y:-8px; --nav-tilt:3deg; }
.site .sidebar nav>a:nth-child(5) { --nav-order:5; --nav-fall-x:0px; --nav-fall-y:-12px; --nav-tilt:0deg; }
.site .sidebar nav>a:is(:hover,:focus-visible) .nav-label {
  animation:nav-label-arrive .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes nav-label-arrive {
  from { opacity:.1; transform:translate(var(--nav-fall-x,0px),var(--nav-fall-y,-9px)) rotate(var(--nav-tilt,0deg)); filter:blur(3px); }
  65% { opacity:1; filter:blur(0); }
  to { opacity:1; transform:translateY(0); filter:blur(0); }
}

/* The house arrives in three tangible layers, then remains a complete house. */
.site .sidebar nav .home-foundation,
.site .sidebar nav .home-walls,
.site .sidebar nav .home-brick,
.site .sidebar nav .home-roof {
  transform-box:view-box;
  transform-origin:50% 85%;
  animation:home-build 8s cubic-bezier(.2,.8,.25,1) infinite;
}
.site .sidebar nav .home-walls { animation-delay:.18s; }
.site .sidebar nav .home-brick {
  fill:currentColor;
  fill-opacity:.38;
  stroke-width:.65;
  animation-delay:calc(.18s + var(--brick) * .14s);
}
.site .sidebar nav .home-roof { animation-delay:1s; stroke-width:2; }
@keyframes home-build {
  0%,2% { opacity:0; transform:translateY(8px) scale(.88); }
  11%,100% { opacity:1; transform:translateY(0) scale(1); }
}

/* A bound cover, ruled pages and a separate page hinged at the spine. */
.site .sidebar nav .mushaf-cover { fill:currentColor; fill-opacity:.16; stroke-width:2.2; }
.site .sidebar nav .mushaf-page { fill:currentColor; fill-opacity:.13; stroke-width:1.25; }
.site .sidebar nav .mushaf-leaf {
  fill:currentColor;
  fill-opacity:.22;
  stroke-width:1.3;
  transform-box:view-box;
  transform-origin:11px 16px;
  animation:mushaf-turn 7s cubic-bezier(.35,.05,.4,1) infinite;
}
.site .sidebar nav .mushaf-spine { stroke-width:2.2; }
@keyframes mushaf-turn {
  0%,9%,30%,100% { transform:perspective(80px) rotateY(0deg); }
  17% { transform:perspective(80px) rotateY(-155deg); }
  24% { transform:perspective(80px) rotateY(-155deg); }
}

/* A saved star glows while two small points twinkle. */
.site .sidebar nav .favorite-star {
  fill:currentColor;
  fill-opacity:.14;
  transform-box:fill-box;
  transform-origin:center;
  animation:favorite-pulse 6.5s ease-in-out infinite;
}
.site .sidebar nav .favorite-spark { animation:favorite-pulse 6.5s ease-in-out infinite; }
@keyframes favorite-pulse {
  0%,12%,32%,100% { opacity:1; transform:scale(1); }
  20% { opacity:.65; transform:scale(1.16); }
}

/* A lens crosses the search surface, leaving the handle anchored. */
.site .sidebar nav .search-lens { fill:currentColor; fill-opacity:.12; }
.site .sidebar nav .search-handle { stroke-width:2.6; }
.site .sidebar nav .search-sweep {
  transform-box:view-box;
  transform-origin:13px 13px;
  animation:search-scan 6s ease-in-out infinite;
}
@keyframes search-scan {
  0%,10%,37%,100% { opacity:.35; transform:rotate(-35deg); }
  22% { opacity:1; transform:rotate(95deg); }
}

/* An information seal catches the light without shaking the link. */
.site .sidebar nav .about-halo {
  stroke-dasharray:66 16;
  transform-box:view-box;
  transform-origin:center;
  animation:about-shine 7.5s ease-in-out infinite;
}
.site .sidebar nav .about-shine { stroke-width:2.4; }
.site .sidebar nav .about-dot { fill:currentColor; stroke:none; }
@keyframes about-shine {
  0%,9%,32%,100% { opacity:.8; transform:rotate(0); }
  20% { opacity:1; transform:rotate(24deg); }
}

/* An intentional gesture replays the story immediately, including on touch. */
.site .sidebar nav>a:is(:hover,:focus-visible,:active) .nav-icon :is(.home-foundation,.home-walls,.home-brick,.home-roof,.mushaf-leaf,.favorite-star,.favorite-spark,.search-sweep,.about-halo) {
  animation-duration:1.55s;
  animation-delay:0s;
  animation-iteration-count:1;
}
.site .sidebar nav>a:is(:hover,:focus-visible,:active) .nav-icon .home-walls { animation-delay:.12s; }
.site .sidebar nav>a:is(:hover,:focus-visible,:active) .nav-icon .home-brick { animation-delay:calc(.12s + var(--brick) * .13s); }
.site .sidebar nav>a:is(:hover,:focus-visible,:active) .nav-icon .home-roof { animation-delay:.86s; }
@media(max-width:600px) {
  /* The closed 34px rail has no room for text: animate only the artwork. */
  .site .sidebar:not(.open) nav>a .nav-label { display:none; }
  .site .sidebar.open nav>a .nav-label { display:inline-block; }
}
@media (prefers-reduced-motion:reduce) {
  .site .sidebar nav>a .nav-icon svg > *,
  .site .sidebar nav>a .nav-label { animation:none!important; opacity:1; filter:none; transform:none; }
}