@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}.familiar-stage{position:relative}.familiar-moon{object-fit:cover;object-position:center 35%;pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;inset:0}.familiar-cards{z-index:1;grid-template-columns:1fr;gap:2.75rem;display:grid;position:relative}@media (min-width:768px){.familiar-cards{grid-template-columns:1fr 1fr;gap:3rem 3.5rem}}.familiar-card{--animation-duration:8s;--border-width:5px;--glow-offset:-20px;--border-radius:0px;isolation:isolate;border:solid var(--border-width) transparent;border-radius:var(--border-radius);color:#f8fafc;background-color:#0000;height:100%;position:relative}@media not (max-width:600px){.familiar-card{min-height:350px}}.familiar-cards>:first-child{--moon-clr:#010101}.familiar-cards>:nth-child(2){--moon-clr:#a65f00;--animation-duration:9s}.familiar-cards>:nth-child(3){--moon-clr:#9f0712;--animation-duration:7.5s}.familiar-cards>:nth-child(4){--moon-clr:#00598a;--animation-duration:10s}.familiar-card__body{z-index:2;grid-template-rows:auto 1fr auto;gap:1rem;height:100%;padding:1.15rem 1.2rem 1.2rem;display:grid;position:relative}.familiar-card__body:before{content:"";background:linear-gradient(to bottom, color-mix(in srgb, var(--moon-clr) 84%, black), color-mix(in srgb, var(--moon-clr) 48%, black));opacity:.84;z-index:-1;position:absolute;inset:0}.familiar-card h2{font-family:var(--font-cinzel), serif;letter-spacing:.03em;text-shadow:1px 1px var(--moon-clr);margin:0;font-size:1.4rem;font-weight:500;line-height:1.25}.familiar-card p{text-shadow:0 0 2px #000;margin:0;font-size:.95rem;line-height:1.55}.familiar-card a{background-color:var(--moon-clr);color:#fff;border:1px solid #ffffff80;justify-self:start;width:max-content;max-width:100%;padding:.4rem .7rem;font-size:.8rem;line-height:1.3;text-decoration:none;transition:width .15s ease-in-out,background-color .15s ease-in-out}.familiar-card a:hover,.familiar-card a:focus-visible{width:100%}.familiar-card:before{content:"";inset:calc(var(--border-width) * -1);border:inherit;border-radius:inherit;background:conic-gradient(from var(--angle), var(--moon-clr) 40%, transparent, var(--moon-clr) 60%) border-box;-webkit-mask-composite:xor;opacity:.75;z-index:1;pointer-events:none;animation:familiar-neon-rotate var(--animation-duration) linear infinite;position:absolute;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:padding-box,border-box;mask-origin:padding-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.familiar-card:after{content:"";inset:var(--glow-offset);z-index:-1;background:conic-gradient(from var(--angle), var(--moon-clr), transparent, var(--moon-clr));filter:blur(12px);opacity:.75;animation:familiar-neon-rotate var(--animation-duration) linear infinite;border-radius:15px;position:absolute}@keyframes familiar-neon-rotate{0%{--angle:0deg}to{--angle:360deg}}@media (prefers-reduced-motion:reduce){.familiar-card:before,.familiar-card:after,.familiar-card a{transition:none;animation:none}}