/* ============================================================
   AGENT SWARM LAYER — add-on to the original CV design.
   Cursors + a particle swarm assemble each block as it scrolls in.
   Toggle: the "Agent swarm" button in the sidebar.
   ============================================================ */

/* Swarm off → this whole layer disappears and the original reveals run. */
html:not(.swarm) .ag-layer,
html:not(.swarm) .ag-swarm,
html:not(.swarm) .ag-log { display: none; }

/* While the swarm is on, it does the revealing, so the original fade-ins are neutralised. */
.swarm .has-motion .section-header,
.swarm .has-motion .press-card,
.swarm .has-motion .timeline-item,
.swarm .has-motion .edu-item,
.swarm .has-motion .pub-item,
.swarm .has-motion .patent-card,
.swarm .has-motion .achievement-card,
.swarm .has-motion .map-chapter { opacity: 1; transform: none; transition-delay: 0ms; }

/* Before the first frame: hide what the agents will build (no flash of content). */
.swarm:not(.swarm-ready) .hero-content > *,
.swarm:not(.swarm-ready) .hero-atlas,
.swarm:not(.swarm-ready) .stat-item { opacity: 0; }

.swarm .ag-pending { opacity: 0 !important; }
.swarm .ag-building { opacity: 1 !important; transition: none !important; }
.swarm .ag-ch { opacity: 0; }
.swarm .ag-ch.on { opacity: 1; }
.swarm .ag-pop > * { opacity: 0; transform: translateY(8px) scale(.85); }
.swarm .ag-pop > .on { opacity: 1; transform: none; transition: opacity .3s, transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.ag-caret { display: inline-block; width: 3px; height: .9em; margin-left: 3px; background: #15b8d0; vertical-align: -.08em; animation: agBlink 1s steps(1) infinite; }
@keyframes agBlink { 50% { opacity: 0; } }

/* Particle swarm + cursors */
.ag-swarm { position: fixed; inset: 0; z-index: 140; width: 100%; height: 100%; pointer-events: none; }
.ag-layer { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
.ag { position: absolute; left: 0; top: 0; will-change: transform; transform: translate3d(-200px, -200px, 0); }
.ag svg { display: block; width: 20px; height: 24px; transform-origin: 3px 3px; transition: transform .15s; filter: drop-shadow(0 3px 6px rgba(7, 23, 38, .45)); }
.ag svg path { fill: var(--c); stroke: #071726; stroke-width: 1.4; stroke-linejoin: round; }
.ag.is-press svg { transform: scale(.8); }
.ag-tag { position: absolute; left: 16px; top: 20px; display: inline-flex; gap: 6px; align-items: center; padding: 4px 9px 4px 7px; border-radius: 4px 999px 999px 999px; background: var(--c); color: #071726; font: 700 .68rem/1.15 'Sora', sans-serif; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(7, 23, 38, .55); transition: opacity .3s, transform .3s; transform-origin: 0 0; }
.ag-tag i { font-style: normal; font-weight: 500; opacity: .8; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
.ag-tag i:empty { display: none; }
.ag.is-idle .ag-tag { opacity: 0; transform: scale(.6); }
.ag-ring { position: absolute; left: -13px; top: -13px; width: 28px; height: 28px; border: 2px solid var(--c); border-radius: 50%; opacity: 0; }
.ag.is-click .ag-ring { animation: agRing .5s cubic-bezier(.2, .7, .1, 1); }
@keyframes agRing { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.7); } }

/* Selection box the agents drag over each block */
.ag-ghost { position: fixed; z-index: 145; left: 0; top: 0; pointer-events: none; border: 1.5px dashed var(--c); border-radius: 6px; background: color-mix(in srgb, var(--c) 8%, transparent); transition: opacity .45s; }
.ag-ghost::before, .ag-ghost::after { content: ""; position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid var(--c); border-radius: 2px; }
.ag-ghost::before { left: -5px; top: -5px; }
.ag-ghost::after { right: -5px; bottom: -5px; }
.ag-ghost b { position: absolute; right: 0; top: -21px; padding: 2px 6px; border-radius: 3px; background: var(--c); color: #071726; font: 600 .62rem/1.3 'JetBrains Mono', monospace; white-space: nowrap; }
.ag-ghost.is-done { border-style: solid; opacity: 0; }

/* Agent log (desktop) */
.ag-log { position: fixed; z-index: 130; right: 16px; bottom: 16px; width: 320px; padding: 10px 12px 8px; border: 1px solid rgba(125, 215, 230, .25); border-radius: 8px; background: rgba(7, 23, 38, .9); color: #a9c4ce; font: 400 .68rem/1.55 'JetBrains Mono', monospace; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ag-log.is-on { opacity: 1; transform: none; }
.ag-log p { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: #e9f6fa; font: 600 .74rem 'Sora', sans-serif; }
.ag-log p i { width: 7px; height: 7px; border-radius: 50%; background: #32d9ca; box-shadow: 0 0 10px #32d9ca; }
.ag-log ol { margin: 0; padding: 0; list-style: none; }
.ag-log li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ag-log li b { color: var(--c); font-weight: 600; }

/* Sidebar toggle */
.swarm-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 10px; border: 1px dashed rgba(255, 255, 255, .32); border-radius: 6px; background: transparent; color: #c9dfe6; font: 600 .7rem/1 var(--body); cursor: pointer; }
.swarm-toggle:hover { color: #fff; border-color: var(--blue-bright); }
.swarm-toggle i { width: 7px; height: 7px; border-radius: 50%; background: #59717f; }
.swarm-toggle[aria-pressed="true"] i { background: #32d9ca; box-shadow: 0 0 9px #32d9ca; }
.profile-ring { position: relative; overflow: hidden; }
.ag-scan { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, rgba(21, 184, 208, 0), rgba(21, 184, 208, .5) 90%, #9ff3fb); transform: translateY(-105%); pointer-events: none; }
.ag-scan.run { animation: agScan 1.3s cubic-bezier(.2, .7, .1, 1); }
@keyframes agScan { to { transform: translateY(105%); } }

@media (max-width: 1100px) { .ag-log { display: none; } }
@media (max-width: 960px) { .swarm-toggle { align-self: flex-start; } }
@media (max-width: 700px) { .ag-tag i { display: none; } .ag.is-idle { opacity: .55; } }
@media print { .ag-layer, .ag-swarm, .ag-log, .swarm-toggle { display: none !important; } }