/* ══════════════════════════════════════════════════════════════════
   OWASP Agentic Top 10 — triangular-prism cards.
   3 faces, colour-keyed via a per-face --glow (r,g,b):
     attack = red · detection = yellow · control = blue.
   Click right half → rotate forward (attack → detection → control),
   left half → back. Inherits tokens from style.css.
   ══════════════════════════════════════════════════════════════════ */

.owasp-intro { max-width: 68ch; }
.owasp-intro .section-label { font-family: var(--mono); font-size: 0.82rem; color: var(--acc); margin-bottom: 0.9rem; }
.owasp-title {
	font-family: var(--mono);
	font-weight: 700;
	font-size: clamp(1.8rem, 5vw, 2.7rem);
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin-bottom: 1.1rem;
}
.owasp-lede { color: var(--ink); font-size: 1.12rem; margin-bottom: 0.9rem; }
.owasp-intro p { color: var(--ink-dim); margin-bottom: 0.9rem; }
.owasp-intro a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.owasp-intro a:hover { text-decoration-color: var(--acc); }
.owasp-hint { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-faint); }
.owasp-hint .k-risk { color: var(--bad); }
.owasp-hint .k-detect { color: var(--warn); }
.owasp-hint .k-control { color: var(--acc-2); }

/* grid: intro stays in the 760px column; the card row breaks out wider, centered */
.asi-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.1rem;
	width: min(960px, 92vw);
	margin: 2.5rem 0 1rem;
	margin-left: 50%;
	transform: translateX(-50%);
}
@media (max-width: 680px) {
	.asi-grid { width: 100%; margin-left: 0; transform: none; }
}

/* card = a keyboard-operable button holding the 3D prism */
.asi-card {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	text-align: left;
	position: relative;
	width: 300px;
	height: 352px;
	max-width: 100%;
	perspective: 1200px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;   /* no blue tap flash on mobile */
	-webkit-user-select: none;
	user-select: none;                           /* no text-selection on tap */
	touch-action: manipulation;                  /* no double-tap zoom delay */
}
/* entrance — only hide when JS is present, else cards stay visible */
.js .asi-card {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js .asi-card.in { opacity: 1; transform: none; }

/* left/right rotation affordance */
.asi-card::before,
.asi-card::after {
	position: absolute;
	bottom: 1rem;
	z-index: 4;
	font-family: var(--mono);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ink);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s var(--ease);
}
.asi-card::before { content: "‹"; left: 1.4rem; }
.asi-card::after { content: "›"; right: 1.4rem; }
.asi-card:hover::before,
.asi-card:hover::after,
.asi-card:focus-visible::before,
.asi-card:focus-visible::after { opacity: 0.5; }

.asi-prism {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.7s var(--ease);
	transform: translateZ(-86.6px) rotateY(0deg);
}

.asi-face {
	position: absolute;
	inset: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border: 1px solid var(--line-soft);
	border-radius: 12px;
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* three faces of the prism, 120° apart, pushed out by the apothem (≈86.6px), each colour-keyed */
.face-risk    { --glow: 255, 107, 107; transform: rotateY(0deg)   translateZ(86.6px); background: linear-gradient(150deg, rgba(255, 107, 107, 0.07) 0%, var(--panel) 55%); }
.face-detect  { --glow: 245, 181, 68;  transform: rotateY(120deg) translateZ(86.6px); background: linear-gradient(150deg, rgba(245, 181, 68, 0.08) 0%, var(--bg-2) 55%); }
.face-control { --glow: 76, 201, 240;  transform: rotateY(240deg) translateZ(86.6px); background: linear-gradient(150deg, rgba(76, 201, 240, 0.08) 0%, var(--bg-2) 55%); }

.asi-card:hover .asi-face,
.asi-card:focus-visible .asi-face {
	border-color: rgba(var(--glow), 0.7);
	box-shadow: 0 0 0 1px rgba(var(--glow), 0.25), 0 22px 55px -34px rgba(0, 0, 0, 0.9);
}

.asi-code { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: rgb(var(--glow)); }
.asi-name {
	font-family: var(--mono);
	font-weight: 600;
	font-size: 1.14rem;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0.55rem 0;
	color: var(--ink);
	/* reserve two lines so the label + body align across all cards */
	min-height: 2.5em;
}
.asi-label {
	font-family: var(--mono);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-bottom: 0.45rem;
	color: rgb(var(--glow));
}
.asi-attack { color: var(--ink-dim); font-size: 0.95rem; line-height: 1.5; }
.asi-body { color: var(--ink-dim); font-size: 0.88rem; line-height: 1.55; }
.asi-body strong { color: var(--ink); font-weight: 600; }

.asi-foot {
	margin-top: auto;
	padding-top: 0.9rem;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--ink-faint);
	display: flex;
	justify-content: space-between;
}
.asi-foot .step { color: rgb(var(--glow)); }

/* ── VFX ─────────────────────────────────────────────────────────── */
/* cursor-tracking spotlight, tinted to the face colour */
.asi-face::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--glow), 0.15), transparent 62%);
	opacity: 0;
	transition: opacity 0.35s var(--ease);
	pointer-events: none;
}
.asi-card:hover .asi-face::after,
.asi-card:focus-visible .asi-face::after { opacity: 1; }

/* accent pulse on each rotation, in the face colour */
@keyframes asi-pulse {
	0%   { box-shadow: 0 0 0 1px rgba(var(--glow), 0.55), 0 0 30px -2px rgba(var(--glow), 0.5); }
	100% { box-shadow: 0 0 0 1px rgba(var(--glow), 0),    0 0 30px -2px rgba(var(--glow), 0); }
}
.asi-card.spin .asi-face { animation: asi-pulse 0.65s var(--ease); }

@media (prefers-reduced-motion: reduce) {
	.asi-prism { transition: none; }
	.asi-card { opacity: 1; transform: none; transition: none; }
	.asi-face::after { display: none; }
	.asi-card.spin .asi-face { animation: none; }
}