@layer components{.directory-canvas:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(at 50% 0,#b8ed8b0c,#0000 45%),radial-gradient(#c5ccb116 .7px,#0000 .7px) 0 0/26px 26px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#000 70%,#0000);mask-image:linear-gradient(#000,#000 70%,#0000)}.directory-arrival{animation:directory-arrive .65s var(--ease-landing) both}.directory-card{background-color:var(--color-paper);rotate:var(--card-angle);transition:transform .35s var(--ease-landing), box-shadow .35s var(--ease-landing), background-color .35s ease;box-shadow:0 8px 30px #0005}.directory-portrait{transition:transform .55s var(--ease-landing)}.directory-greeting{opacity:0;transition:opacity .22s ease, transform .35s var(--ease-landing);transform:translateY(10px)}.directory-card:focus-visible{background-color:var(--card-accent);box-shadow:0 20px 45px #0006, 0 0 45px var(--card-glow);transform:translateY(-6px)}.directory-card:focus-visible .directory-greeting{opacity:1;transform:translateY(0)}@media (hover:hover) and (pointer:fine){.directory-card:hover{background-color:var(--card-accent);box-shadow:0 20px 45px #0006, 0 0 45px var(--card-glow);transform:translateY(-8px)}.directory-card:hover .directory-portrait{transform:scale(1.035)}.directory-card:hover .directory-greeting{opacity:1;transform:translateY(0)}}}@keyframes directory-arrive{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.directory-arrival{animation:none}.directory-card,.directory-portrait,.directory-greeting{transition:none;transform:none}.directory-card:hover,.directory-card:focus-visible,.directory-card:hover .directory-portrait{transform:none}}