/* ============================================================
   SANCTUARY — Codex (characters) page
   Builds on styles.css. Game-driven hero selector + legend wall.
   ============================================================ */

/* ---------- page header ---------- */
.codex-hero {
  position: relative; z-index: 5;
  min-height: 56vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(7rem, 16vh, 12rem) clamp(1.2rem, 6vw, 6rem) clamp(2rem, 5vh, 4rem);
  overflow: hidden;
}
.codex-hero__glow {
  position: absolute; inset: -20% 0 auto 0; height: 90%; z-index: -1;
  background: radial-gradient(50% 60% at 50% 30%, rgba(193,18,31,.32), transparent 65%);
  animation: breathe 7s ease-in-out infinite;
}
.codex-hero__eyebrow {
  font-family: var(--display); letter-spacing: .5em; font-size: clamp(.6rem,1.4vw,.82rem);
  text-transform: uppercase; color: var(--ember-soft);
}
.codex-hero__title {
  font-family: var(--decor); font-weight: 900; font-size: clamp(3rem, 10vw, 7rem);
  line-height: .9; margin: 1rem 0;
  color: transparent;
  background: linear-gradient(180deg, var(--bone), var(--blood-lit) 92%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 6px 30px rgba(193,18,31,.4));
}
.codex-hero__sub { max-width: 56ch; color: var(--bone-dim); font-weight: 300; font-size: clamp(1rem,1.6vw,1.25rem); }

/* ---------- section heads ---------- */
.sec { position: relative; z-index: 5; padding: clamp(4rem,9vh,7rem) clamp(1.2rem,6vw,6rem); }
.sec + .sec { border-top: 1px solid rgba(255,90,31,.08); }
.sec-head { margin-bottom: clamp(2rem,5vh,3.5rem); max-width: 60ch; }
.sec-head__i {
  font-family: var(--display); letter-spacing: .4em; font-size: .72rem; text-transform: uppercase;
  color: var(--accent, var(--ember)); display: block; margin-bottom: .7rem; transition: color .5s var(--ease);
}
.sec-head h2 { font-family: var(--decor); font-weight: 900; font-size: clamp(2rem,5vw,3.4rem); color: var(--bone); line-height: 1; }
.sec-head p { margin-top: .8rem; color: var(--bone-dim); font-weight: 300; }

/* ============================================================
   HEROES — game selector drives the stage
   ============================================================ */
.heroes { --accent: #c1121f; --accent-rgb: 193,18,31; }

/* the game bar */
.gamebar {
  display: flex; gap: clamp(.4rem,1.5vw,1rem); flex-wrap: wrap;
  margin-bottom: clamp(2rem,5vh,3.5rem);
  border-bottom: 1px solid rgba(216,203,184,.1);
}
.gamebar__btn {
  position: relative; background: none; border: 0; cursor: none;
  color: var(--bone-dim); text-align: left;
  padding: .8rem clamp(.8rem,2vw,1.6rem) 1.1rem;
  display: flex; flex-direction: column; gap: .15rem;
  transition: color .35s;
}
.gamebar__btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--g, var(--ember)); transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 16px var(--g, var(--ember));
  transition: transform .4s var(--ease);
}
.gamebar__btn:hover { color: var(--bone); }
.gamebar__btn.is-active { color: var(--bone); }
.gamebar__btn.is-active::after { transform: scaleX(1); }
.gamebar__num {
  font-family: var(--decor); font-weight: 900; font-size: clamp(1.4rem,3.4vw,2.4rem);
  line-height: .9; color: var(--g, var(--ember));
}
.gamebar__name { font-family: var(--display); letter-spacing: .12em; font-size: clamp(.62rem,1.3vw,.8rem); text-transform: uppercase; }
.gamebar__year { font-family: var(--display); font-size: .6rem; letter-spacing: .2em; color: var(--bone-dim); opacity: .7; }

/* the big stage */
.stage2 {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  gap: clamp(1.5rem,4vw,4rem);
  min-height: 60vh; overflow: hidden;
}
.stage2__ghost {
  position: absolute; left: -3vw; bottom: -6%; z-index: 0;
  font-family: var(--decor); font-weight: 900; line-height: .7;
  font-size: clamp(5rem,20vw,18rem); white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb), .18);
  pointer-events: none; opacity: .6; transition: -webkit-text-stroke .5s;
}
.stage2__info { position: relative; z-index: 2; max-width: 50ch; }
.stage2__role {
  font-family: var(--display); letter-spacing: .3em; font-size: .72rem; text-transform: uppercase;
  color: var(--accent); transition: color .5s;
}
.stage2__name {
  font-family: var(--decor); font-weight: 900; font-size: clamp(2.6rem,7vw,5rem); line-height: .95;
  color: var(--bone); margin: .35rem 0 .2rem;
}
.stage2__desc { margin-top: 1.2rem; color: var(--bone-dim); font-weight: 300; font-size: 1.06rem; line-height: 1.7; }
.stage2__game {
  margin-top: 1.6rem; font-family: var(--display); letter-spacing: .2em; font-size: .72rem;
  text-transform: uppercase; color: var(--bone-dim);
}
.stage2__game b { color: var(--accent); font-weight: 400; transition: color .5s; }

/* portrait art with an angled, bleeding edge */
.stage2__art {
  position: relative; z-index: 1; align-self: stretch;
  min-height: 420px; margin-right: clamp(-6vw, -4vw, 0px);
}
.stage2__art::after {  /* accent wash bleeding from the figure */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(70% 60% at 65% 35%, rgba(var(--accent-rgb), .28), transparent 70%),
    linear-gradient(90deg, var(--black) 0%, transparent 22%, transparent 78%, rgba(7,6,10,.4) 100%),
    linear-gradient(0deg, var(--black) 2%, transparent 30%);
  transition: background .6s var(--ease);
}
.stage2__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  filter: saturate(1.05) contrast(1.03);
}
.stage2__img.is-swapping { opacity: 0; }
.stage2__img { transition: opacity .35s var(--ease); }

/* roster filmstrip */
.rosters { margin-top: clamp(1.5rem,4vh,2.5rem); }
.roster2 { display: none; gap: .8rem; flex-wrap: wrap; }
.roster2.is-active { display: flex; animation: charIn .5s var(--ease); }
.film {
  position: relative; background: none; border: 1px solid rgba(216,203,184,.1);
  padding: 0; cursor: none; overflow: hidden;
  width: clamp(82px, 12vw, 128px); aspect-ratio: 3 / 4;
  filter: grayscale(.6) brightness(.7); transition: filter .35s, border-color .35s, transform .35s var(--ease);
}
.film img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.film__name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem .4rem .35rem;
  font-family: var(--display); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; color: var(--bone);
  background: linear-gradient(0deg, rgba(7,6,10,.92), transparent);
}
.film:hover { filter: grayscale(0) brightness(1); transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .5); }
.film.is-active {
  filter: grayscale(0) brightness(1.05);
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), .5);
}

@keyframes charIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ============================================================
   LEGENDS — image-forward mosaic wall
   ============================================================ */
.legend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: clamp(.6rem, 1.4vw, 1rem);
}
.legend {
  position: relative; overflow: hidden; margin: 0;
  border: 1px solid rgba(216,203,184,.08);
  --accent: #c1121f; --accent-rgb: 193,18,31;
}
.legend[data-size="tall"] { grid-row: span 2; }
.legend[data-size="big"] { grid-row: span 2; grid-column: span 2; }
.legend img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  filter: grayscale(.45) contrast(1.05) brightness(.72);
  transition: transform .8s var(--ease), filter .6s;
}
.legend::before {  /* base darkening + accent floor */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(7,6,10,.95) 4%, rgba(var(--accent-rgb), .12) 45%, transparent 75%);
  transition: background .5s;
}
.legend figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(1rem, 2vw, 1.6rem);
}
.legend__role {
  font-family: var(--display); letter-spacing: .22em; font-size: .6rem; text-transform: uppercase;
  color: var(--accent);
}
.legend__name {
  font-family: var(--decor); font-weight: 900; line-height: .95;
  font-size: clamp(1.3rem, 2.4vw, 2.2rem); color: var(--bone); margin: .25rem 0 0;
  text-shadow: 0 2px 16px rgba(0,0,0,.8);
}
.legend__desc {
  margin-top: .7rem; max-width: 46ch;
  color: var(--bone-dim); font-weight: 300; font-size: .92rem; line-height: 1.6;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .55s var(--ease), opacity .45s var(--ease), margin .4s;
}
.legend:hover { border-color: rgba(var(--accent-rgb), .55); }
.legend:hover img { transform: scale(1.06); filter: grayscale(0) contrast(1.05) brightness(.92); }
.legend:hover::before { background: linear-gradient(0deg, rgba(7,6,10,.96) 8%, rgba(var(--accent-rgb), .35) 55%, transparent 90%); }
.legend:hover .legend__desc { max-height: 12rem; opacity: 1; margin-top: .7rem; }
.legend:hover .legend__name { text-shadow: 0 2px 18px rgba(var(--accent-rgb), .6); }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .stage2 { grid-template-columns: 1fr; min-height: 0; }
  .stage2__art { order: -1; min-height: 360px; margin-right: 0; }
  .stage2__img { clip-path: none; }
  .stage2__ghost { display: none; }
  .legend-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .legend[data-size="big"] { grid-column: span 2; }
  .legend__desc { max-height: 12rem; opacity: 1; } /* always show on touch */
}
@media (max-width: 520px) {
  .legend-grid { grid-template-columns: 1fr; }
  .legend[data-size="big"], .legend[data-size="tall"] { grid-column: span 1; grid-row: span 1; }
  .gamebar { flex-wrap: nowrap; overflow-x: auto; }
  .gamebar__btn { flex: 0 0 auto; }
}

/* ============================================================
   EXPERIMENTAL LAYER — themed wash, cinematic entrances, parallax
   ============================================================ */

/* game-themed ambient wash behind the heroes section */
.heroes { position: relative; isolation: isolate; }
.heroes__wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 75% at 88% -5%, rgba(var(--accent-rgb), .20), transparent 60%),
    radial-gradient(50% 70% at -5% 105%, rgba(var(--accent-rgb), .12), transparent 60%);
  transition: background .8s var(--ease);
}
.heroes > *:not(.heroes__wash) { position: relative; z-index: 1; }

/* cinematic portrait entrance (re-triggered on every hero swap) */
@keyframes portraitIn {
  0%   { opacity: 0; transform: translateX(46px) scale(1.09); filter: blur(10px); }
  100% { opacity: 1; transform: none; filter: saturate(1.05) contrast(1.03); }
}
.stage2__img.is-entering { animation: portraitIn .75s var(--ease); }

/* ghost class-name sweeps in */
@keyframes ghostIn { from { opacity: 0; transform: translateX(-34px); } to { opacity: .6; transform: none; } }
.stage2__ghost.is-entering { animation: ghostIn .85s var(--ease); }

/* staggered text entrance */
@keyframes infoIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.stage2__info.is-entering > * { animation: infoIn .6s var(--ease) backwards; }
.stage2__info.is-entering > *:nth-child(1) { animation-delay: .04s; }
.stage2__info.is-entering > *:nth-child(2) { animation-delay: .11s; }
.stage2__info.is-entering > *:nth-child(3) { animation-delay: .19s; }
.stage2__info.is-entering > *:nth-child(4) { animation-delay: .27s; }

/* parallax layers get a little smoothing */
.stage2__art, .stage2__ghost { transition: transform .25s var(--ease); will-change: transform; }

/* legend tiles rise in on scroll (JS adds .pre then .in; no-JS shows them) */
.legend { transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .35s; }
.legend.pre { opacity: 0; transform: translateY(30px) scale(.97); }
.legend.pre.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .stage2__img.is-entering, .stage2__ghost.is-entering, .stage2__info.is-entering > * { animation: none !important; }
  .legend.pre { opacity: 1; transform: none; }
  .stage2__art, .stage2__ghost { transition: none; }
}

/* ---------- floating sound toggle ---------- */
.soundtoggle {
  position: fixed; right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: 120; cursor: none;
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem 1rem;
  background: rgba(7,6,10,.62); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,90,31,.25); border-radius: 999px;
  color: var(--bone-dim);
  font-family: var(--display); letter-spacing: .18em; font-size: .6rem; text-transform: uppercase;
  transition: color .3s, border-color .3s, background .3s;
}
.soundtoggle:hover { color: var(--bone); border-color: var(--ember); }
.soundtoggle.is-on { color: var(--bone); border-color: var(--ember); box-shadow: 0 0 22px rgba(255,90,31,.3); }
.soundtoggle__wave { display: flex; align-items: center; gap: 2px; height: 14px; }
.soundtoggle__wave i {
  width: 2px; height: 4px; background: var(--ember-soft); border-radius: 1px;
  transition: height .2s;
}
.soundtoggle.is-on .soundtoggle__wave i { animation: eq 1s ease-in-out infinite; }
.soundtoggle.is-on .soundtoggle__wave i:nth-child(2) { animation-delay: .15s; }
.soundtoggle.is-on .soundtoggle__wave i:nth-child(3) { animation-delay: .3s; }
.soundtoggle.is-on .soundtoggle__wave i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 13px; } }
@media (prefers-reduced-motion: reduce) { .soundtoggle.is-on .soundtoggle__wave i { animation: none; height: 9px; } }

/* ---------- Codex -> Tome cross-link ---------- */
.legend__more {
  display: inline-block; margin-top: .9rem;
  font-family: var(--display); letter-spacing: .18em; font-size: .62rem; text-transform: uppercase;
  color: var(--accent); text-decoration: none; cursor: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), .55);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), color .3s;
}
.legend:hover .legend__more { opacity: 1; transform: none; }
.legend__more:hover { color: var(--bone); border-color: var(--bone); }
@media (max-width: 760px) { .legend__more { opacity: 1; transform: none; } }

/* ---------- animated class sigil over the hero portrait ---------- */
.stage2__sigil {
  position: absolute; top: clamp(.8rem,2vw,1.6rem); right: clamp(.8rem,2vw,1.6rem); z-index: 3;
  width: clamp(58px, 9vw, 112px); aspect-ratio: 1; pointer-events: none;
  color: var(--accent);
  filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), .8));
  opacity: .9; transition: color .5s var(--ease);
  animation: sigilFloat 6s ease-in-out infinite;
}
.stage2__sigil svg { width: 100%; height: 100%; display: block; }
.stage2__sigil.is-in { animation: sigilFloat 6s ease-in-out infinite, sigilPop .6s var(--ease); }
@keyframes sigilFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(2.5deg); } }
@keyframes sigilPop { 0% { opacity: 0; transform: scale(.5) rotate(-12deg); } 100% { opacity: .9; transform: none; } }

/* ---------- deep-linked legend pulse ---------- */
.legend.is-target { animation: legendTarget 2.4s var(--ease); }
@keyframes legendTarget {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); border-color: rgba(216,203,184,.08); }
  15%      { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .9), 0 0 40px rgba(var(--accent-rgb), .6); border-color: var(--accent); }
  60%      { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .5), 0 0 26px rgba(var(--accent-rgb), .35); }
}
@media (prefers-reduced-motion: reduce) {
  .stage2__sigil { animation: none; }
  .stage2__sigil.is-in { animation: none; }
  .legend.is-target { animation: none; }
}

/* ---------- class sigil badge on filmstrip thumbnails ---------- */
.film__sigil {
  position: absolute; top: 5px; right: 5px; z-index: 2; width: 22px; height: 22px;
  color: var(--bone); opacity: .55; pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.8)); transition: color .35s, opacity .35s;
}
.film__sigil svg { width: 100%; height: 100%; display: block; }
.film:hover .film__sigil { opacity: .9; }
.film.is-active .film__sigil { color: var(--accent); opacity: 1; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .8)); }