/* AJS -- Academy animation & UI extensions */

@keyframes ajs-fadeInUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes ajs-glitch {
  0%  {clip-path:inset(0 0 95% 0);transform:translateX(-4px)}
  20% {clip-path:inset(40% 0 40% 0);transform:translateX(4px)}
  40% {clip-path:inset(70% 0 10% 0);transform:translateX(-2px)}
  60% {clip-path:inset(20% 0 65% 0);transform:translateX(3px)}
  80% {clip-path:inset(55% 0 30% 0);transform:translateX(-3px)}
  100%{clip-path:inset(0 0 95% 0);transform:translateX(0)}
}
@keyframes ajs-blink  { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes ajs-spin   { to{transform:rotate(360deg)} }
@keyframes ajs-page-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Scroll reveal ──────────────────────────────────────────────── */
.reveal       { opacity:0; transform:translateY(28px); transition:opacity .55s ease,transform .55s ease; }
.reveal.revealed { opacity:1; transform:none; }
.reveal-left  { opacity:0; transform:translateX(-32px); transition:opacity .55s ease,transform .55s ease; }
.reveal-left.revealed { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }

/* ── Page-in & nav ─────────────────────────────────────────────── */
.ajs-page-loaded main { animation:ajs-page-in .4s ease; }
.site-nav a.nav-active { color:var(--text); background:var(--card); }

/* ── Animated hero ─────────────────────────────────────────────── */
.hero-animated { position:relative; overflow:hidden; }
.hero-animated::before {
  content:''; position:absolute; inset:-50%;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(37,99,235,.08) 0deg, rgba(124,58,237,.06) 90deg,
    rgba(0,255,65,.04) 180deg, rgba(37,99,235,.08) 270deg);
  animation:ajs-spin 20s linear infinite;
  pointer-events:none; z-index:0;
}
.hero-animated > * { position:relative; z-index:1; }

/* ── Glitch hover ──────────────────────────────────────────────── */
.glitch-hover { display:inline-block; }

/* ── Terminal component ────────────────────────────────────────────── */
.terminal { background:#050e06; border:1px solid #00ff41; border-radius:12px; font-family:var(--mono); overflow:hidden; }
.terminal-bar { display:flex; align-items:center; gap:6px; padding:8px 12px; background:#0a1a0b; border-bottom:1px solid #1a3d1e; }
.terminal-dot { width:12px; height:12px; border-radius:50%; }
.terminal-dot.red    { background:#ff5f57; }
.terminal-dot.yellow { background:#febc2e; }
.terminal-dot.green  { background:#28c840; }
.terminal-title { margin-left:6px; color:#5cb85c; font-size:.78rem; }
.terminal-body  { color:#00ff41; line-height:1.7; padding:12px 16px; }
.terminal-body .cmd::before { content:'$ '; color:#5cb85c; }
.terminal-body .out { color:#86efac; }

/* ── Hack terminal simulator ───────────────────────────────────────────── */
.hack-terminal { background:#050e06; border:1px solid #1a3d1e; border-radius:12px; margin:16px 0; overflow:hidden; }
.hack-terminal-bar { padding:6px 12px; background:#0a1a0b; border-bottom:1px solid #1a3d1e; display:flex; align-items:center; justify-content:space-between; }
.hack-terminal-label { color:#5cb85c; font-family:var(--mono); font-size:.78rem; }
.hack-run-btn { margin:0; }
.hack-terminal-out { padding:10px 14px 14px; max-height:280px; overflow-y:auto; }
.ht-line { font-family:var(--mono); font-size:.84rem; line-height:1.6; white-space:pre-wrap; color:#c8f5c8; }
.ht-cmd  { color:#00ff41; }
.ht-ok   { color:#86efac; }
.ht-warn { color:#ffd700; }
.ht-err  { color:#ff6b6b; }
.ht-info { color:#93c5fd; }

/* ── Matrix canvas ──────────────────────────────────────────────── */
.matrix-canvas-wrap { position:relative; height:180px; border-radius:12px; overflow:hidden; background:#000; }
.matrix-canvas { width:100%; height:100%; display:block; }

/* ── Toast notifications ─────────────────────────────────────────────── */
#ajs-toast-container { position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.ajs-toast { padding:12px 18px; border-radius:10px; font-weight:600; font-size:.9rem; opacity:0; transform:translateX(20px); transition:opacity .28s ease,transform .28s ease; max-width:320px; }
.ajs-toast.ajs-toast-visible { opacity:1; transform:translateX(0); }
.ajs-toast-success { background:rgba(22,163,74,.18);  border:1px solid var(--good);   color:#86efac; }
.ajs-toast-error   { background:rgba(220,38,38,.18);  border:1px solid var(--bad);    color:#fca5a5; }
.ajs-toast-info    { background:rgba(37,99,235,.18);  border:1px solid var(--accent); color:#93c5fd; }
.ajs-toast-warn    { background:rgba(245,158,11,.18); border:1px solid #f59e0b;       color:#fcd34d; }

/* ── Progress bar ──────────────────────────────────────────────── */
.ajs-progress-bar { height:8px; border-radius:999px; background:var(--card-2); overflow:hidden; margin:6px 0; }
.ajs-bar-fill { height:100%; width:0; background:var(--accent); transition:width .8s cubic-bezier(.16,1,.3,1); border-radius:999px; }

/* ── Red/Blue badges ──────────────────────────────────────────────── */
.hack-badge-red  { background:rgba(220,38,38,.18); border:1px solid #dc2626; color:#fca5a5; padding:2px 10px; border-radius:999px; font-size:.78rem; font-weight:700; }
.hack-badge-blue { background:rgba(37,99,235,.18); border:1px solid #2563eb; color:#93c5fd; padding:2px 10px; border-radius:999px; font-size:.78rem; font-weight:700; }

/* ── CTF challenge box ─────────────────────────────────────────────── */
.ctf-box { background:#050e06; border:1px solid #00ff41; border-radius:12px; padding:20px 18px 14px; position:relative; margin:14px 0; }
.ctf-box::before { content:'CTF CHALLENGE'; position:absolute; top:0; left:14px; transform:translateY(-50%); background:#00ff41; color:#050e06; font-family:var(--mono); font-size:.7rem; font-weight:800; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }

/* ── Warning / Tip boxes ─────────────────────────────────────────────── */
.warning-box { background:rgba(245,158,11,.1); border:1px solid #f59e0b; border-left:4px solid #f59e0b; border-radius:10px; padding:12px 16px; margin:14px 0; }
.warning-box strong { color:#fcd34d; display:block; margin-bottom:4px; }
.tip-box     { background:rgba(37,99,235,.1);  border:1px solid #2563eb; border-left:4px solid #2563eb; border-radius:10px; padding:12px 16px; margin:14px 0; }
.tip-box strong     { color:#93c5fd; display:block; margin-bottom:4px; }

/* ── Red/Blue team split ─────────────────────────────────────────────── */
.rb-split { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0; }
@media(max-width:600px){ .rb-split { grid-template-columns:1fr; } }
.rb-red  { background:rgba(220,38,38,.07); border:1px solid rgba(220,38,38,.4); border-radius:10px; padding:12px 14px; }
.rb-blue { background:rgba(37,99,235,.07); border:1px solid rgba(37,99,235,.4); border-radius:10px; padding:12px 14px; }
.rb-red  h4 { color:#fca5a5; margin:0 0 8px; }
.rb-blue h4 { color:#93c5fd; margin:0 0 8px; }

/* ── Skill tags ────────────────────────────────────────────────────── */
.skill-tags { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.skill-tag  { font-size:.75rem; font-weight:700; font-family:var(--mono); background:var(--card-2); border:1px solid var(--border); color:var(--muted); padding:3px 10px; border-radius:6px; }
.skill-tag.red   { color:#fca5a5; border-color:#dc2626; background:rgba(220,38,38,.1); }
.skill-tag.blue  { color:#93c5fd; border-color:#2563eb; background:rgba(37,99,235,.1); }
.skill-tag.green { color:#86efac; border-color:#16a34a; background:rgba(22,163,74,.1); }

/* ── Typewriter cursor ─────────────────────────────────────────────── */
[data-typewriter].typewriter-active::after { content:'▋'; animation:ajs-blink .7s step-end infinite; color:var(--accent); }

/* ── Lesson gate message ────────────────────────────────────────────── */
.lesson-gate-msg { margin:.5rem 0 0; font-size:.85rem; color:var(--muted,#888); }