/* Hover surface corrected; source artwork is still opaque. Existing motion retained until approved transparent type assets arrive. */
.type-grid>a{position:relative;overflow:hidden;isolation:isolate;transition:border-color .28s ease,background .28s ease,box-shadow .28s ease,transform .28s ease}
.type-grid>a::before,.type-grid>a::after{position:absolute;z-index:3;pointer-events:none;opacity:0}
.type-grid>a::before{content:"";inset:0;background:radial-gradient(circle at 78% 25%,var(--type-glow,#d9b777) 0 2px,transparent 3px),radial-gradient(circle at 86% 18%,var(--type-glow,#d9b777) 0 1px,transparent 2px),linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--type-glow,#d9b777) 18%,transparent) 50%,transparent 58%);transform:translateX(-35%)}
.type-grid>a::after{right:14px;top:12px;width:9px;height:9px;border:2px solid var(--type-glow,#d9b777);border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--type-glow,#d9b777) 52%,transparent)}
.type-grid>a[data-temperament="analyst"]{--type-glow:#d7ff3f}
.type-grid>a[data-temperament="diplomat"]{--type-glow:#e9a989}
.type-grid>a[data-temperament="sentinel"]{--type-glow:#e9c78e}
.type-grid>a[data-temperament="explorer"]{--type-glow:#78d9df}
.type-grid>a:is(:hover,:focus-visible,.is-touched){border-color:color-mix(in srgb,var(--type-glow) 72%,#d9b777);background:transparent;box-shadow:none;transform:translateY(-4px)}
.type-grid>a:is(:hover,:focus-visible,.is-touched)::before{animation:type-card-glint .9s ease-out both}
.type-grid>a:is(:hover,:focus-visible,.is-touched)::after{animation:type-card-ping .8s ease-out both}
.type-grid>a[data-temperament="analyst"]:is(:hover,:focus-visible,.is-touched) img{animation:type-dog-focus .72s cubic-bezier(.2,.8,.2,1) both}
.type-grid>a[data-temperament="diplomat"]:is(:hover,:focus-visible,.is-touched) img{animation:type-dog-heart .92s cubic-bezier(.2,.8,.2,1) both}
.type-grid>a[data-temperament="sentinel"]:is(:hover,:focus-visible,.is-touched) img{animation:type-dog-nod .78s cubic-bezier(.2,.8,.2,1) both}
.type-grid>a[data-temperament="explorer"]:is(:hover,:focus-visible,.is-touched) img{animation:type-dog-play .72s cubic-bezier(.2,.8,.2,1) both}
@keyframes type-card-glint{0%{opacity:0;transform:translateX(-35%)}35%{opacity:1}100%{opacity:0;transform:translateX(35%)}}
@keyframes type-card-ping{0%{opacity:0;transform:scale(.55);box-shadow:0 0 0 0 color-mix(in srgb,var(--type-glow) 52%,transparent)}35%{opacity:1}100%{opacity:0;transform:scale(1.35);box-shadow:0 0 0 16px transparent}}
@keyframes type-dog-focus{0%{transform:none;filter:none}48%{transform:translateY(-7px) rotate(-1.4deg) scale(1.045);filter:drop-shadow(0 0 13px color-mix(in srgb,var(--type-glow) 54%,transparent))}100%{transform:translateY(-4px) rotate(-.5deg) scale(1.025);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--type-glow) 34%,transparent))}}
@keyframes type-dog-heart{0%{transform:none}42%{transform:translateY(-8px) rotate(1.8deg) scale(1.04)}66%{transform:translateY(-5px) rotate(-.8deg) scale(1.025)}100%{transform:translateY(-4px) rotate(.3deg) scale(1.02)}}
@keyframes type-dog-nod{0%{transform:none}30%{transform:translateY(-3px) rotate(-1deg)}56%{transform:translateY(1px) rotate(1.1deg)}100%{transform:translateY(-3px) rotate(0) scale(1.018)}}
@keyframes type-dog-play{0%{transform:none}38%{transform:translateY(-10px) rotate(-2.4deg) scale(1.045)}62%{transform:translateY(0) rotate(1.5deg) scale(.99,1.02)}100%{transform:translateY(-4px) rotate(-.5deg) scale(1.025)}}
@media(hover:none),(pointer:coarse){.type-grid>a:hover{transform:none}.type-grid>a.is-touched{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.type-grid>a,.type-grid>a img,.type-grid>a::before,.type-grid>a::after{animation:none!important;transition:none!important;transform:none!important}}