/* Profile — Character Codex.
   The existing accessible archive becomes a calm in-game character record:
   an active sigil, page scan, resolving seal, and restrained idle resonance. */
.unified-interface .character-archive.character-codex-ready {
  --codex-accent: #f1d38e;
  --codex-hydro: #83ddec;
  --codex-depth-x: 0%;
  --codex-depth-y: 0%;
  isolation: isolate;
}

.unified-interface .character-codex-ready .archive-tabs,
.unified-interface .character-codex-ready .archive-panels {
  position: relative;
  z-index: 3;
}

.unified-interface .character-codex-ready .archive-panels {
  min-height: 214px;
  overflow: hidden;
}

.unified-interface .character-codex-ready .archive-tabs button {
  overflow: visible;
}

.unified-interface .codex-tab-sigil {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: -23px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(241, 211, 142, .68);
  background: #123747;
  box-shadow: inset 0 0 0 2px rgba(131, 221, 236, .05);
  opacity: 0;
  transform: translateY(-50%) rotate(45deg) scale(.45);
  transition: opacity .24s ease, transform .42s cubic-bezier(.18,.75,.2,1), box-shadow .36s ease;
  pointer-events: none;
}

.unified-interface .codex-tab-sigil::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 3px;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--codex-accent), rgba(131, 221, 236, .45), transparent);
  box-shadow: 0 0 7px rgba(131, 221, 236, .38);
  opacity: 0;
  transform: scaleX(.2);
  transform-origin: left;
}

.unified-interface .character-codex-ready .archive-tabs button[aria-selected='true'] .codex-tab-sigil {
  opacity: 1;
  transform: translateY(-50%) rotate(45deg) scale(1);
  box-shadow: inset 0 0 0 2px rgba(131, 221, 236, .08), 0 0 0 5px rgba(131, 221, 236, .035), 0 0 15px rgba(131, 221, 236, .46);
}

.unified-interface .character-codex-ready.codex-opening .archive-tabs button[aria-selected='true'] .codex-tab-sigil {
  animation: codex-sigil-awaken .78s cubic-bezier(.18,.75,.2,1) both;
}

.unified-interface .character-codex-ready.codex-opening .archive-tabs button[aria-selected='true'] .codex-tab-sigil::after {
  animation: codex-thread-draw .58s .08s cubic-bezier(.18,.75,.2,1) both;
}

.unified-interface .character-codex-ready.codex-resting.ambient-active .archive-tabs button[aria-selected='true'] .codex-tab-sigil {
  animation: codex-sigil-idle 5.8s ease-in-out infinite;
}

.unified-interface .codex-stage {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.unified-interface .codex-stage::before {
  content: '';
  position: absolute;
  inset: 12px;
  background:
    radial-gradient(circle at calc(76% + var(--codex-depth-x)) calc(52% + var(--codex-depth-y)), color-mix(in srgb, var(--codex-hydro) 9%, transparent), transparent 29%),
    linear-gradient(112deg, transparent 33%, rgba(244, 219, 157, .025) 51%, transparent 68%);
  opacity: .8;
}

.unified-interface .codex-orbit {
  position: absolute;
  right: 5.5%;
  bottom: -47%;
  width: 250px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--codex-accent) 22%, transparent);
  border-radius: 50%;
  opacity: .42;
  transform: translate(var(--codex-depth-x), var(--codex-depth-y));
  transition: border-color .4s ease, transform .65s ease-out;
}

.unified-interface .codex-orbit::before,
.unified-interface .codex-orbit::after {
  content: '';
  position: absolute;
  border-radius: inherit;
}

.unified-interface .codex-orbit::before {
  inset: 18px;
  border: 1px dashed rgba(131, 221, 236, .2);
}

.unified-interface .codex-orbit::after {
  inset: 46px;
  border: 1px solid rgba(242, 216, 151, .12);
  box-shadow: 0 0 28px rgba(131, 221, 236, .06);
}

.unified-interface .codex-star {
  position: absolute;
  right: calc(5.5% + 107px);
  bottom: 69px;
  width: 34px;
  height: 34px;
  opacity: .34;
  transform: rotate(45deg) translate(var(--codex-depth-x), var(--codex-depth-y));
}

.unified-interface .codex-star::before,
.unified-interface .codex-star::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--codex-accent), transparent);
  box-shadow: 0 0 8px var(--codex-accent);
}

.unified-interface .codex-star::after { transform: rotate(90deg); }

.unified-interface .codex-scan {
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: -24%;
  width: 18%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(125, 223, 240, .16), rgba(255, 232, 174, .48), rgba(125, 223, 240, .1), transparent);
  filter: blur(1px);
  transform: skewX(-7deg);
}

.unified-interface .codex-entry-meta {
  position: absolute;
  z-index: 5;
  top: 19px;
  right: 23px;
  display: grid;
  justify-items: end;
  gap: 4px;
  color: rgba(180, 208, 210, .54);
  text-align: right;
  text-transform: uppercase;
  pointer-events: none;
}

.unified-interface .codex-entry-meta small {
  color: var(--codex-accent);
  font: 600 6px/1 var(--sans);
  letter-spacing: .24em;
}

.unified-interface .codex-entry-meta strong {
  max-width: 190px;
  font: 500 7px/1.3 var(--sans);
  letter-spacing: .15em;
}

.unified-interface .character-codex-ready .archive-panel {
  position: relative;
  z-index: 4;
  padding-top: 43px;
}

.unified-interface .character-codex-ready .archive-panel > * {
  position: relative;
  z-index: 2;
}

.unified-interface .character-codex-ready .archive-panel.codex-entry-revealing > * {
  animation: codex-inscription-resolve .62s cubic-bezier(.18,.75,.2,1) both;
}

.unified-interface .character-codex-ready .archive-panel.codex-entry-revealing > :nth-child(2) { animation-delay: .1s; }
.unified-interface .character-codex-ready .archive-panel.codex-entry-revealing > :nth-child(3) { animation-delay: .18s; }

.unified-interface .character-codex-ready.codex-opening .codex-scan {
  animation: codex-page-scan .72s cubic-bezier(.18,.75,.2,1) both;
}

.unified-interface .character-codex-ready.codex-opening .codex-orbit {
  animation: codex-orbit-resolve .78s cubic-bezier(.18,.75,.2,1) both;
}

.unified-interface .character-codex-ready.codex-opening .codex-star {
  animation: codex-star-resolve .72s .08s cubic-bezier(.18,.75,.2,1) both;
}

.unified-interface .character-codex-ready.codex-resting.ambient-active .codex-orbit {
  animation: codex-orbit-idle 18s linear infinite;
}

.unified-interface .character-codex-ready.codex-resting.ambient-active .codex-star {
  animation: codex-star-idle 6.4s ease-in-out infinite;
}

body.is-scrolling .character-codex-ready * { animation-play-state: paused !important; }

@keyframes codex-sigil-awaken {
  0% { opacity: .2; transform: translateY(-50%) rotate(45deg) scale(.45); }
  52% { opacity: 1; transform: translateY(-50%) rotate(225deg) scale(1.36); box-shadow: 0 0 24px var(--codex-accent); }
  100% { opacity: 1; transform: translateY(-50%) rotate(405deg) scale(1); }
}
@keyframes codex-thread-draw {
  0% { opacity: 0; transform: scaleX(.1); }
  45%, 78% { opacity: .9; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes codex-sigil-idle {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(131,221,236,.08), 0 0 0 5px rgba(131,221,236,.03), 0 0 12px rgba(131,221,236,.3); }
  50% { box-shadow: inset 0 0 0 2px rgba(131,221,236,.12), 0 0 0 8px rgba(131,221,236,.045), 0 0 19px rgba(241,211,142,.4); }
}
@keyframes codex-page-scan {
  0% { left: -24%; opacity: 0; }
  18%, 72% { opacity: 1; }
  100% { left: 112%; opacity: 0; }
}
@keyframes codex-orbit-resolve {
  0% { opacity: 0; scale: .68; rotate: -24deg; filter: brightness(2); }
  64% { opacity: .68; }
  100% { opacity: .42; scale: 1; rotate: 0deg; filter: none; }
}
@keyframes codex-star-resolve {
  0% { opacity: 0; scale: .3; rotate: -80deg; }
  55% { opacity: .9; scale: 1.35; }
  100% { opacity: .34; scale: 1; rotate: 45deg; }
}
@keyframes codex-inscription-resolve {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(9px); filter: brightness(1.55); }
  100% { opacity: 1; clip-path: inset(0); transform: none; filter: none; }
}
@keyframes codex-orbit-idle { to { rotate: 360deg; } }
@keyframes codex-star-idle {
  0%, 100% { opacity: .24; filter: drop-shadow(0 0 2px var(--codex-accent)); }
  50% { opacity: .52; filter: drop-shadow(0 0 8px var(--codex-accent)); }
}

@media (max-width: 600px) {
  .unified-interface .character-codex-ready .archive-panels { min-height: 245px; }
  .unified-interface .codex-tab-sigil {
    top: auto;
    right: 50%;
    bottom: -13px;
    transform: translateX(50%) rotate(45deg) scale(.45);
  }
  .unified-interface .codex-tab-sigil::after { display: none; }
  .unified-interface .character-codex-ready .archive-tabs button[aria-selected='true'] .codex-tab-sigil {
    transform: translateX(50%) rotate(45deg) scale(.82);
  }
  .unified-interface .character-codex-ready.codex-opening .archive-tabs button[aria-selected='true'] .codex-tab-sigil {
    animation: codex-sigil-awaken-mobile .62s cubic-bezier(.18,.75,.2,1) both;
  }
  .unified-interface .codex-entry-meta { top: 10px; right: 5px; }
  .unified-interface .codex-entry-meta strong { max-width: 150px; font-size: 6px; }
  .unified-interface .character-codex-ready .archive-panel { padding-top: 39px; }
  .unified-interface .codex-orbit { right: -52px; bottom: -62px; width: 190px; opacity: .26; }
  .unified-interface .codex-star { right: 33px; bottom: 29px; opacity: .23; }
  .unified-interface .character-codex-ready.codex-resting.ambient-active .codex-orbit,
  .unified-interface .character-codex-ready.codex-resting.ambient-active .codex-star { animation: none; }
}

@keyframes codex-sigil-awaken-mobile {
  0% { opacity: .2; transform: translateX(50%) rotate(45deg) scale(.4); }
  55% { opacity: 1; transform: translateX(50%) rotate(225deg) scale(1.08); }
  100% { opacity: 1; transform: translateX(50%) rotate(405deg) scale(.82); }
}

@media (prefers-reduced-motion: reduce) {
  .unified-interface .codex-scan,
  .unified-interface .codex-star { display: none !important; }
  .unified-interface .character-codex-ready .archive-panel > *,
  .unified-interface .character-codex-ready .archive-panel.codex-entry-revealing > * {
    opacity: 1;
    clip-path: none;
    transform: none;
    filter: none;
    animation: none !important;
  }
  .unified-interface .codex-orbit { animation: none !important; opacity: .2; }
}