/* ═══════════════════════════════════════════════════════════
   The Akashic Directory — full-screen portal menu (≤900px)
   ═══════════════════════════════════════════════════════════ */

.akashic {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(75, 0, 130, 0.38), transparent 60%),
    radial-gradient(90% 70% at 85% 105%, rgba(34, 139, 34, 0.16), transparent 60%),
    rgba(6, 6, 10, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  overflow-y: auto; overscroll-behavior: contain;
  padding: max(1rem, env(safe-area-inset-top)) 8vw max(2rem, env(safe-area-inset-bottom));
}
.akashic.open {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity 0.45s ease;
}

/* rotating flower-of-life behind the records */
.akashic::before {
  content: ""; position: fixed; left: 50%; top: 50%;
  width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='242' viewBox='0 0 140 242'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='70'/%3E%3Ccircle cx='140' cy='0' r='70'/%3E%3Ccircle cx='70' cy='121' r='70'/%3E%3Ccircle cx='0' cy='242' r='70'/%3E%3Ccircle cx='140' cy='242' r='70'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.05; pointer-events: none;
  animation: akashic-wheel 180s linear infinite;
}
@keyframes akashic-wheel { to { transform: rotate(360deg); } }

/* portal ring that blooms on open */
.akashic::after {
  content: ""; position: fixed; left: 50%; top: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border: 1px solid rgba(212, 175, 55, 0.55); border-radius: 50%;
  pointer-events: none; opacity: 0;
}
.akashic.open::after { animation: akashic-portal 1.1s ease-out forwards; }
@keyframes akashic-portal {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(90); }
}

/* header row */
.akashic__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.4rem 0 1.6rem;
}
.akashic__brand { font-family: 'Cinzel', serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--off-white); font-size: 1rem; text-decoration: none; }
.akashic__brand span { color: var(--gold); }
.akashic__close {
  background: none; border: 1px solid rgba(212, 175, 55, 0.55); border-radius: 50%;
  width: 46px; height: 46px; color: var(--gold); font-size: 1.15rem; cursor: pointer;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}
.akashic.open .akashic__close { transform: rotate(360deg); }
.akashic__close:hover { box-shadow: 0 0 18px rgba(212, 175, 55, 0.4); }

/* eyebrow */
.akashic__eyebrow {
  text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.68rem;
  color: #58c878; margin-bottom: 0.4rem; font-family: 'Cinzel', serif;
}
.akashic__title {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  color: rgba(250, 250, 250, 0.65); font-size: 1.05rem; margin-bottom: 1.8rem;
}

/* the records */
.akashic__list { list-style: none; margin: 0; padding: 0; flex: 1; }
.akashic__item {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--i) * 70ms + 150ms);
}
.akashic.open .akashic__item { opacity: 1; transform: none; }
.akashic__link {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding: 0.85rem 0.2rem; text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
  position: relative;
}
.akashic__num {
  font-family: 'Cinzel', serif; font-size: 0.72rem; color: rgba(212, 175, 55, 0.55);
  min-width: 2rem; letter-spacing: 0.1em;
}
.akashic__name {
  font-family: 'Cinzel', serif; font-size: clamp(1.15rem, 5.4vw, 1.5rem);
  color: var(--off-white); letter-spacing: 0.06em;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
}
.akashic__link::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--gold), rgba(212, 175, 55, 0));
  transition: width 0.45s ease;
}
.akashic__link:hover .akashic__name,
.akashic__link:focus-visible .akashic__name { color: var(--gold); letter-spacing: 0.09em; }
.akashic__link:hover::after, .akashic__link:focus-visible::after { width: 100%; }
.akashic.open .akashic__item .akashic__link::after { width: 34%; transition-delay: calc(var(--i) * 70ms + 500ms); }

/* foot: CTA + socials */
.akashic__foot {
  margin-top: 2rem; display: grid; gap: 1.2rem; justify-items: center; text-align: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s ease 0.75s, transform 0.5s ease 0.75s;
}
.akashic.open .akashic__foot { opacity: 1; transform: none; }
.akashic__foot .btn { width: 100%; max-width: 22rem; }
.akashic__socials { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.akashic__socials a {
  color: rgba(250, 250, 250, 0.6); text-decoration: none; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 0.7rem 0.6rem; display: inline-block;
}
.akashic__socials a:hover { color: var(--gold); }
.akashic__seal {
  color: rgba(212, 175, 55, 0.5); font-size: 0.72rem; letter-spacing: 0.3em;
  text-transform: uppercase; font-family: 'Cinzel', serif;
}

/* the sigil toggle replaces the plain hamburger */
.nav__toggle {
  font-family: 'Cinzel', serif;
  border-color: rgba(212, 175, 55, 0.55) !important;
  border-radius: 50% !important;
  width: 46px; height: 46px; padding: 0 !important;
  line-height: 1; font-size: 1.05rem !important;
  box-shadow: inset 0 0 10px rgba(212, 175, 55, 0.12);
}

/* only a portal on portal-sized screens */
@media (min-width: 901px) { .akashic { display: none; } }

/* stillness for those who ask for it */
@media (prefers-reduced-motion: reduce) {
  .akashic, .akashic__item, .akashic__foot, .akashic__close { transition: none; }
  .akashic::before { animation: none; }
  .akashic.open::after { animation: none; opacity: 0; }
  .akashic__item { transition-delay: 0s; }
}
body.motion-paused .akashic::before { animation-play-state: paused; }