.portal-emblem {
  position: relative;
  display: block;
  flex: none;
  width: 34px;
  height: 40px;
  color: #9aeff2;
}
.portal-emblem img,
.portal-emblem::before,
.portal-emblem::after { width: 100%; height: 100%; }
.portal-emblem img {
  display: block;
  filter: drop-shadow(0 0 3px #64e5ee36);
  transition: filter .35s ease;
}
.portal-emblem::before,
.portal-emblem::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: center / contain no-repeat url("icon.svg");
}
.portal-emblem::before { clip-path: inset(28% 0 57%); }
.portal-emblem::after { clip-path: inset(58% 0 32%); }
@media (prefers-reduced-motion: no-preference) {
  .site-header .portal-emblem::before { animation: portal-slip 13.7s steps(1,end) infinite; }
  .site-header .portal-emblem::after { animation: portal-return 13.7s steps(1,end) infinite; }
  .brand:is(:hover,:focus-visible) .portal-emblem::before { animation: portal-touch .28s steps(1,end) 1; }
  .brand:is(:hover,:focus-visible) .portal-emblem::after { animation: portal-touch .24s .06s steps(1,end) 1 reverse; }
  .brand:is(:hover,:focus-visible) .portal-emblem img { filter: drop-shadow(0 0 5px #60dae86b); }
  body:has(.hero[data-motion="paused"]) .portal-emblem::before,
  body:has(.hero[data-motion="paused"]) .portal-emblem::after { animation: none; }
}
@keyframes portal-touch {
  0%, 100% { opacity: 0; transform: none; }
  20% { opacity: .68; transform: translateX(2px); }
  48% { opacity: .3; transform: translateX(-1.3px); }
  72% { opacity: 0; }
}
@keyframes portal-slip {
  0%, 73%, 74.8%, 100% { opacity: 0; transform: none; }
  73.3% { opacity: .83; transform: translateX(2px); }
  73.9% { opacity: .36; transform: translateX(-1.4px); }
}
@keyframes portal-return {
  0%, 73.8%, 75.1%, 100% { opacity: 0; transform: none; }
  74% { opacity: .54; transform: translateX(-2px); }
  74.5% { opacity: .35; transform: translateX(.7px); }
}
.portal-trace {
  position: fixed;
  z-index: 80;
  left: max(18px,env(safe-area-inset-left));
  bottom: max(18px,env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-left: 2px solid #8de8eb;
  background: #031519f0;
  color: #d7eaeb;
  box-shadow: 0 5px 26px #00121766;
  font: 13px/1.4 var(--body, sans-serif);
  opacity: 0;
  pointer-events: none;
}
.portal-trace.visible { opacity: 1; }
.portal-trace b { font: 11px/1.4 Consolas,monospace; letter-spacing: .11em; color: #8ce5e8; }
@media (max-width: 740px) { .portal-emblem { width: 29px; height: 35px; } }