/* Same floating menu on every Enimates page. */
.site-header {
  --cream: #FFFCF6;
  --cream-2: #F8F0DD;
  --plum: #2E2440;
  --plum-soft: #55496b;
  --plum-line: rgba(46, 36, 64, 0.16);
  --teal-mist: rgba(163, 214, 209, 0.38);
  --orange: #EF7D22;
  --orange-dark: #773C0A;
  --emotion: var(--orange);
  --radius-lg: 2rem;
  --radius-md: 1.25rem;
  --radius-sm: 0.75rem;
  --shadow-soft: 0 18px 40px -24px rgba(46, 36, 64, 0.35);
  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --header-h: 4.25rem;
}

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(0.9rem, 3vw, 1.75rem);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.header-left { display: flex; align-items: center; }

#menuToggle {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 44px; padding: 0.5rem 1rem 0.5rem 0.8rem;
  background: rgba(255, 252, 246, 0.92);
  border: 1px solid var(--plum-line);
  border-radius: 999px;
  color: var(--plum);
  font-weight: 800; font-size: 0.92rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
#menuToggle:hover, #menuToggle:focus-visible { color: var(--orange-dark); border-color: var(--orange); }
#menuToggle:active { transform: translateY(1px); }

.menu-icon { display: inline-flex; flex-direction: column; gap: 3px; width: 18px; }
.menu-icon span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.menu-icon span:nth-child(2) { width: 70%; }

.header-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.wordmark {
  font-weight: 900; font-size: 1.05rem; letter-spacing: 0.02em;
  color: var(--plum);
}

.header-right {
  display: flex; align-items: center; gap: 0.85rem;
}
.concept-tag {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--plum-soft);
}
.concept-link {
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: 0.82rem; font-weight: 800; text-decoration: none;
  color: var(--plum-soft); border-bottom: 1px solid var(--plum-line);
  padding: 0.2rem 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.concept-link:hover, .concept-link:focus-visible { color: var(--orange-dark); border-color: var(--orange); }

/* ---------- world menu ---------- */
#worldMenu {
  position: fixed; z-index: 65;
  top: calc(var(--header-h) - 0.25rem); left: 1.1rem;
  width: min(360px, calc(100vw - 2.2rem));
  max-height: calc(100svh - var(--header-h) - 1.5rem);
  overflow-y: auto;
  background: var(--cream);
  border: 1px solid var(--plum-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1.25rem 1.1rem 1.4rem;
}
#worldMenu h2 {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
}

#navShell {
  --menu-ease: cubic-bezier(.22, 1, .36, 1);
  --menu-reveal-delay: 320ms;
  --menu-close-duration: 360ms;
  position: absolute;
  left: clamp(0.9rem, 3vw, 1.75rem);
  top: 12px;
  z-index: 3;
  display: inline-block;
}

#navShell #menuToggle {
  width: 110px;
  max-width: min(360px, calc(100vw - 32px));
  overflow: hidden;
  white-space: nowrap;
  justify-content: flex-start;
  transition: width 560ms var(--menu-ease), max-width 560ms var(--menu-ease);
}

#navShell.is-expanded #menuToggle {
  width: min(360px, calc(100vw - 32px));
}

#menuExpansion {
  position: absolute;
  left: 109px;
  display: inline-block;
  font-weight: 700;
  color: var(--plum-soft);
  opacity: 0;
  transition: opacity 320ms ease;
  transition-delay: 0s;
}

#navShell.is-expanded #menuExpansion {
  opacity: 1;
  transition-delay: 180ms;
}

.menu-chevron {
  display: none;
  margin-left: auto;
  padding-left: 0.4rem;
  font-weight: 900;
  color: var(--plum-soft);
  flex: 0 0 auto;
}

/* ---------- dropdown panel ---------- */
/* Overrides globe.css's fixed #worldMenu placement so the panel hangs
   directly off the shell (top:100%, no gap) for a clean pointer bridge. */
#navShell #worldMenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  width: 100%;
  min-width: 280px;
  max-height: calc(100svh - 90px);
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  pointer-events: none;
  transition: clip-path var(--menu-close-duration) var(--menu-ease), opacity 240ms ease;
}

#navShell.is-open #worldMenu {
  clip-path: inset(0 0 0% 0);
  opacity: 1;
  pointer-events: auto;
  transition-duration: 640ms, 420ms;
}

#navShell #worldMenu * {
  pointer-events: inherit;
}

/* ---------- route list ---------- */
#menuDrop {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}

.menu-group-label {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plum-soft);
  opacity: 0.75;
}

.menu-route {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--plum);
  font-weight: 700;
  font-size: 0.94rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    transform 520ms var(--menu-ease), opacity 400ms ease;
}
.menu-route:hover,
.menu-route:focus-visible {
  background: var(--cream-2);
  border-color: var(--plum-line);
  color: var(--orange-dark);
  outline: none;
}
.menu-route:focus-visible {
  outline: 2px solid var(--orange-dark);
  outline-offset: 2px;
}

.menu-route-index {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--plum-soft);
  opacity: 0.65;
  min-width: 1.4em;
}

.menu-route-label {
  min-width: 0;
  overflow-wrap: break-word;
}

/* reveal state: root adds .is-open when the panel is unhidden and ready */
.menu-route {
  transform: translateY(20px);
  opacity: 0;
}
#navShell.is-open .menu-route {
  transform: translateY(0);
  opacity: 1;
}

/* Float each label up after the shell begins to unfold. Hover colours stay immediate. */
#navShell.is-open .menu-group:nth-of-type(1) .menu-route:nth-of-type(1) { --reveal-delay: 50ms; }
#navShell.is-open .menu-group:nth-of-type(1) .menu-route:nth-of-type(2) { --reveal-delay: 95ms; }
#navShell.is-open .menu-group:nth-of-type(2) .menu-route:nth-of-type(1) { --reveal-delay: 140ms; }
#navShell.is-open .menu-group:nth-of-type(2) .menu-route:nth-of-type(2) { --reveal-delay: 185ms; }
#navShell.is-open .menu-group:nth-of-type(2) .menu-route:nth-of-type(3) { --reveal-delay: 230ms; }
#navShell.is-open .menu-group:nth-of-type(2) .menu-route:nth-of-type(4) { --reveal-delay: 275ms; }
#navShell.is-open .menu-group:nth-of-type(3) .menu-route:nth-of-type(1) { --reveal-delay: 320ms; }
#navShell.is-open .menu-route { transition-delay: 0ms, 0ms, 0ms, var(--reveal-delay), var(--reveal-delay); }
#worldMenu h2, .menu-group-label, .motion-setting, .menu-earlier-link {
  opacity: 0; transform: translateY(12px);
  transition: opacity 400ms ease, transform 520ms var(--menu-ease);
}
#navShell.is-open :is(h2, .menu-group-label, .motion-setting, .menu-earlier-link) {
  opacity: 1; transform: translateY(0); transition-delay: 100ms;
}
#navShell.is-open :is(.motion-setting, .menu-earlier-link) { transition-delay: 340ms; }

.motion-setting {display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 0 0;border-top:1px solid var(--plum-line);font-size:.85rem;font-weight:700;cursor:pointer;position:relative}
#motionValue {margin-left:auto;font-size:.75rem;color:var(--plum-soft)}
#motionToggle {position:absolute;right:0;width:40px;height:26px;opacity:0;cursor:pointer}
.motion-switch {width:40px;height:24px;border:1px solid var(--plum-line);border-radius:99px;background:var(--cream-2);pointer-events:none}
.motion-switch::after {content:'';display:block;width:16px;height:16px;margin:3px;background:var(--plum-soft);border-radius:50%;transition:transform 240ms var(--menu-ease),background 240ms ease}
#motionToggle:checked + .motion-switch {background:var(--plum)}
#motionToggle:checked + .motion-switch::after {transform:translateX(16px);background:var(--cream)}
#motionToggle:focus-visible + .motion-switch {outline:2px solid var(--orange-dark);outline-offset:4px}


.site-header,.site-header *{box-sizing:border-box}
.site-header{font-family:var(--font);line-height:1.5}
.site-header button{font-family:inherit}
#worldMenu{display:block;gap:0;font-size:1rem;text-align:left}
#worldMenu[hidden]{display:none!important}
#worldMenu h2{font:800 1.05rem/1.4 var(--font);letter-spacing:normal}
.menu-icon,.menu-label{flex-shrink:0}
#navShell #worldMenu{overscroll-behavior:contain;min-width:0}
.header-center .wordmark{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.menu-route[aria-current='page'] .menu-route-label{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.menu-utility{display:flex;flex-wrap:wrap;gap:1rem;padding-top:.85rem;font-size:.75rem;color:var(--plum-soft)}
.menu-utility a{min-height:32px;display:inline-flex;align-items:center;text-underline-offset:3px}
.site-header a:focus-visible,.site-header button:focus-visible{outline:2px solid var(--orange-dark);outline-offset:3px;box-shadow:none}
html[data-motion='reduced'] .site-header *,html[data-motion='reduced'] .site-header *::after{transition:none!important;animation:none!important;transform:none!important}
html[data-motion='reduced'] .site-header .header-center{transform:translate(-50%,-50%)!important}
html[data-motion='reduced'] #motionToggle:checked+.motion-switch::after{transform:translateX(16px)!important}
@media(max-width:640px){.site-header .header-center{left:auto;right:20px;transform:translateY(-50%)}html[data-motion='reduced'] .site-header .header-center{transform:translateY(-50%)!important}}
@media print{.site-header{display:none!important}}