/* Character directory v2.0 */
body.hf-directory{margin:0;background:#07080b;color:#eee;min-height:100vh;font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
.hf-directory nav{position:relative;z-index:30;background:rgba(6,7,10,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.1)}
.hf-directory .directory-shell{position:relative;isolation:isolate;min-height:100vh;overflow:hidden}
.directory-stars{position:absolute;inset:0;z-index:-5;background:radial-gradient(circle at 18% 22%,rgba(45,209,222,.08),transparent 25rem),radial-gradient(circle at 83% 48%,rgba(214,117,180,.07),transparent 28rem),#07080b}
.directory-stars::after{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff .7px,transparent .8px);background-size:91px 91px;opacity:.12}
.directory-fx{position:fixed;inset:70px 0 0;z-index:-3;opacity:0;transition:opacity .45s;pointer-events:none;overflow:hidden}
body[data-focus="bertozzi"] .fx-bertozzi,body[data-focus="natasha"] .fx-natasha,body[data-focus="nolan"] .fx-nolan,body[data-focus="wren"] .fx-wren,body[data-focus="sabrina"] .fx-sabrina,body[data-focus="jarrett"] .fx-jarrett{opacity:1}
.fx-bertozzi{background-image:linear-gradient(90deg,transparent 0 8%,rgba(44,211,240,.18) 8.2% 8.45%,transparent 8.7% 24%,rgba(44,211,240,.13) 24.2% 24.45%,transparent 24.7%),linear-gradient(0deg,transparent 0 14%,rgba(44,211,240,.13) 14.2% 14.45%,transparent 14.7% 36%,rgba(44,211,240,.12) 36.2% 36.45%,transparent 36.7%);background-size:260px 260px;animation:circuitFlow 8s linear infinite;mask-image:radial-gradient(circle at 24% 42%,#000 0 12%,rgba(0,0,0,.9) 25%,transparent 76%)}
.fx-bertozzi::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 24% 42%,rgba(52,224,247,.24),transparent 32rem)}
@keyframes circuitFlow{to{background-position:260px 130px,-130px 260px}}
.fx-natasha{background:radial-gradient(circle at 22% 42%,rgba(183,80,163,.24),transparent 30rem),repeating-radial-gradient(circle at 22% 42%,transparent 0 52px,rgba(234,125,207,.05) 53px 55px,transparent 56px 92px);animation:pulseFx 3.8s ease-in-out infinite}
.fx-nolan{background:repeating-linear-gradient(90deg,transparent 0 34px,rgba(229,181,90,.08) 35px 37px,transparent 38px 70px);transform:skewY(-7deg);animation:waveSlide 7s linear infinite}
.fx-wren{background:repeating-radial-gradient(circle at 76% 42%,transparent 0 70px,rgba(103,222,186,.09) 72px 74px,transparent 76px 118px);animation:pulseFx 3s ease-in-out infinite}
.fx-sabrina{background-image:radial-gradient(circle at 20% 20%,rgba(76,212,164,.1) 0 5px,transparent 6px),radial-gradient(circle at 76% 58%,rgba(155,120,230,.1) 0 5px,transparent 6px);background-size:90px 90px,130px 130px;animation:moleculeDrift 12s linear infinite}
.fx-jarrett{background:linear-gradient(115deg,transparent 0 20%,rgba(116,81,187,.08) 20.5% 28%,transparent 28.5% 48%,rgba(52,193,225,.08) 48.5% 56%,transparent 56.5%);animation:brushShift 7s ease-in-out infinite alternate}
@keyframes pulseFx{50%{filter:brightness(1.35);transform:scale(1.03)}}@keyframes waveSlide{to{background-position:300px 0}}@keyframes moleculeDrift{to{background-position:360px 180px,-260px 260px}}@keyframes brushShift{to{transform:translateX(4%) skewX(-5deg)}}
.directory-head{max-width:1180px;margin:auto;padding:74px 5% 36px}.directory-kicker{font:800 10px/1 ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;color:#b7a171}.directory-head h1{font:500 clamp(56px,9vw,112px)/.86 Georgia,serif;letter-spacing:-.055em;margin:12px 0 22px;color:#f0e6d3}.directory-head p{max-width:68ch;color:#aab0bd;line-height:1.7}.directory-grid{max-width:1180px;margin:auto;padding:14px 5% 90px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.prota-card{--accent:#8cc;grid-column:span 4;position:relative;min-height:470px;border:1px solid rgba(255,255,255,.14);border-radius:28px;background:linear-gradient(180deg,rgba(24,26,32,.9),rgba(8,9,12,.97));padding:18px;text-decoration:none;color:#eee;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.25);transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.prota-card:hover,.prota-card:focus-visible{transform:translateY(-14px);border-color:color-mix(in srgb,var(--accent),#fff 20%);box-shadow:0 44px 110px rgba(0,0,0,.48)}
.prota-card::before{content:"";position:absolute;inset:auto -30% -45%;height:70%;background:radial-gradient(circle,var(--accent),transparent 67%);opacity:.15;filter:blur(14px)}
.prota-card[data-character="bertozzi"]{--accent:#45dcef}.prota-card[data-character="natasha"]{--accent:#d477bc}.prota-card[data-character="nolan"]{--accent:#d2a75e}.prota-card[data-character="wren"]{--accent:#6fd9bd}.prota-card[data-character="sabrina"]{--accent:#8fd0aa}.prota-card[data-character="jarrett"]{--accent:#8765c8}
.prota-portrait{height:320px;border-radius:21px;overflow:hidden;position:relative;background:#11141a;border:1px solid rgba(255,255,255,.11);transform:translateY(0);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.prota-card:hover .prota-portrait{transform:translateY(-8px)}.prota-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;transition:transform .65s,filter .4s}.prota-card:hover img{transform:scale(1.05);filter:saturate(1.08)}
.prota-meta{padding:18px 5px 4px;position:relative}.prota-role{font:800 9px/1 ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}.prota-meta h2{font:600 27px/1.05 Georgia,serif;margin:0 0 7px;color:#f4eee5}.prota-meta p{font-size:13px;color:#9097a5;margin:0}.prota-arrow{position:absolute;right:22px;bottom:21px;width:34px;height:34px;border:1px solid rgba(255,255,255,.17);border-radius:50%;display:grid;place-items:center;color:#d9c9ad}
.directory-footer-card{max-width:1060px;margin:0 auto 70px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.025);padding:24px;color:#939aa7}.directory-footer-card a{color:#dbc393}
@media(max-width:920px){.prota-card{grid-column:span 6}.directory-grid{gap:16px}}@media(max-width:600px){.prota-card{grid-column:1/-1;min-height:410px}.prota-portrait{height:270px}.directory-head{padding-top:54px}}
