/* Learning Hub, Foundational Security cards: layered 3D tilt cards (driven by assets/js/fd-cards.js) */
#foundations { --fd-orange: 255 145 77; }
html.light #foundations { --fd-orange: 194 65 12; }
.fd-deck { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); perspective:1200px; }
@property --fd-ang { syntax:'<angle>'; initial-value:0deg; inherits:false; }

.fd-card {
    --fd: var(--c-primary); --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
    position:relative; display:flex; flex-direction:column; gap:.85rem; padding:1.5rem; min-height:17.5rem;
    border-radius:1.25rem; color:rgb(var(--c-ink)); outline:none;
    transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry));
    transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
    box-shadow:0 10px 30px -18px rgb(var(--c-shade) / .6);
}
.fd-card.is-on { transition:transform .1s ease-out, box-shadow .4s ease; }
.fd-card:hover, .fd-card:focus-visible { box-shadow:0 30px 60px -25px rgb(var(--fd) / .45), 0 0 0 1px rgb(var(--fd) / .25); }
.fd-card:focus-visible { --rx: 4deg; }

/* rotating light ring on the border */
.fd-card::before {
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:1; pointer-events:none;
    background:conic-gradient(from var(--fd-ang), rgb(var(--fd) / .15), rgb(var(--fd)) 12%, rgb(var(--fd) / .15) 30%, rgb(var(--fd) / .15) 70%, rgb(var(--fd) / .8) 85%, rgb(var(--fd) / .15));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:.45; transition:opacity .4s; animation:fd-spin 6s linear infinite paused;
}
.fd-card:hover::before, .fd-card:focus-visible::before { opacity:1; animation-play-state:running; }
@keyframes fd-spin { to { --fd-ang: 360deg; } }

/* background layer (clipped separately so the card itself can keep preserve-3d) */
.fd-bg { position:absolute; inset:0; border-radius:inherit; overflow:hidden; background:linear-gradient(160deg, rgb(var(--fd) / .12), rgb(var(--c-surface) / .85) 45%), rgb(var(--c-surface)); }
.fd-grid {
    position:absolute; inset:-1px; background-size:22px 22px;
    background-image:linear-gradient(rgb(var(--fd) / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--fd) / .08) 1px, transparent 1px);
    -webkit-mask:radial-gradient(circle at 85% 0%, #000, transparent 70%); mask:radial-gradient(circle at 85% 0%, #000, transparent 70%);
}
.fd-spot { position:absolute; inset:0; background:radial-gradient(260px circle at var(--mx) var(--my), rgb(var(--fd) / .22), transparent 60%); opacity:0; transition:opacity .4s; }
.fd-card:hover .fd-spot, .fd-card:focus-visible .fd-spot { opacity:1; }
.fd-num { position:absolute; right:.75rem; top:-.9rem; font:800 5.5rem/1 'Space Grotesk', sans-serif; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px rgb(var(--fd) / .25); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.fd-card:hover .fd-num { transform:translate(-6px, 6px); }

/* content */
.fd-card > :not(.fd-bg) { position:relative; z-index:2; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.fd-icon { width:3.25rem; height:3.25rem; display:grid; place-items:center; border-radius:.95rem; color:rgb(var(--fd)); background:linear-gradient(145deg, rgb(var(--fd) / .28), rgb(var(--fd) / .06)); border:1px solid rgb(var(--fd) / .35); box-shadow:0 10px 24px -10px rgb(var(--fd) / .7), inset 0 1px 0 rgb(255 255 255 / .18); }
.fd-icon .material-symbols-outlined { font-size:1.65rem; font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.fd-title { font-weight:700; font-size:1.15rem; line-height:1.2; }
.fd-desc { font-size:.8rem; line-height:1.55; color:rgb(var(--c-osv) / var(--a-osv)); }
.fd-chips { display:flex; flex-wrap:wrap; gap:.35rem; }
.fd-chips li { font:500 .64rem/1 'JetBrains Mono', monospace; padding:.35rem .5rem; border-radius:9999px; color:rgb(var(--fd)); background:rgb(var(--fd) / .08); border:1px solid rgb(var(--fd) / .22); }
.fd-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-top:.85rem; border-top:1px dashed rgb(var(--fd) / .22); }
.fd-meta { font:500 .62rem/1 'JetBrains Mono', monospace; letter-spacing:.08em; text-transform:uppercase; color:rgb(var(--c-osv) / var(--a-osv)); }
.fd-go { display:inline-flex; align-items:center; gap:.2rem; font:700 .72rem/1 'Space Grotesk', sans-serif; letter-spacing:.06em; text-transform:uppercase; color:rgb(var(--fd)); }
.fd-go .material-symbols-outlined { font-size:1rem; transition:transform .3s ease; }
.fd-card:hover .fd-go .material-symbols-outlined, .fd-card:focus-visible .fd-go .material-symbols-outlined { transform:translateX(4px); }

/* depth: layers float at different heights while the card tilts */
.fd-card:hover .fd-icon, .fd-card:focus-visible .fd-icon { transform:translateZ(60px); }
.fd-card:hover .fd-title, .fd-card:focus-visible .fd-title { transform:translateZ(40px); }
.fd-card:hover .fd-desc, .fd-card:hover .fd-chips, .fd-card:focus-visible .fd-desc, .fd-card:focus-visible .fd-chips { transform:translateZ(25px); }
.fd-card:hover .fd-foot, .fd-card:focus-visible .fd-foot { transform:translateZ(30px); }

html.light .fd-card { box-shadow:0 12px 30px -20px rgb(var(--c-shade) / .55); }
html.light .fd-card:hover, html.light .fd-card:focus-visible { box-shadow:0 30px 50px -25px rgb(var(--fd) / .4), 0 0 0 1px rgb(var(--fd) / .25); }
html.light .fd-bg { background:linear-gradient(160deg, rgb(var(--fd) / .1), rgb(var(--c-surface)) 50%), rgb(var(--c-surface)); }
html.light .fd-icon { box-shadow:0 10px 20px -12px rgb(var(--fd) / .6), inset 0 1px 0 rgb(255 255 255 / .6); }

/* entrance */
.fd-deck.fd-armed .fd-card { opacity:0; transform:translateY(24px) rotateX(10deg); }
.fd-deck.fd-armed.fd-in .fd-card { opacity:1; transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:opacity .6s ease var(--fd-d, 0s), transform .8s cubic-bezier(.2,.8,.2,1) var(--fd-d, 0s); }

@media (prefers-reduced-motion: reduce) {
    .fd-card, .fd-card > *, .fd-num { transition:none !important; transform:none !important; }
    .fd-card::before { animation:none; }
}