/* Project cards (js/main.js renderProjects): a flat card with a hairline
   border, the logo beside the title and date, the stack as small chips, and a
   thin accent line that lights across the top on hover. Every colour is a
   site token, so the cards keep the site's look in both themes, and the
   border and fill on hover are the generic .card:hover ones from styles.css.
   The tilt on hover comes from js/effects.js, so nothing here sets transform. */
.card.project { padding: 22px; border-radius: 12px; }

/* The line across the top, lit on hover and on keyboard focus. */
.card.project::after {
  content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), var(--teal), transparent); opacity: 0; transition: opacity 0.25s;
}
.card.project:hover::after, .card.project:focus-within::after { opacity: 1; }

.card.project .project-logo { width: 46px; height: 46px; border-radius: 12px; }
.project-heading { display: grid; gap: 3px; min-width: 0; }
.card.project h3 { font-size: 1.06rem; line-height: 1.3; }
.project-date { font-size: 0.76rem; color: var(--muted); }
.card.project .bullets { font-size: 0.92rem; line-height: 1.55; }

.stack { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.stack li {
  font-size: 0.74rem; padding: 4px 10px; border-radius: 6px; color: var(--chip-text);
  background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The repo link: the GitHub mark and a label, in the accent like the site's other links. */
.repo-link { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font: 500 0.8rem var(--font); text-decoration: none; transition: color 0.2s; }
.repo-link:hover { color: var(--accent-2); }
.repo-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.repo-icon { display: grid; }
/* The live app link sits before the code link, in the same style. */
.project-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.app-link { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font: 500 0.8rem var(--font); text-decoration: none; transition: color 0.2s; }
.app-link:hover { color: var(--accent-2); }
.app-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.app-arrow { transition: translate 0.2s; }
.app-link:hover .app-arrow { translate: 2px -2px; }
.repo-icon svg { width: 15px; height: 15px; }

/* The scene (js/project-scenes.js): a drawing of what the project does across
   the top of the card, in the logo's own dark tile so it reads the same in
   both themes. It animates only on the card being looked at: hovered,
   keyboard-focused, or on a touch screen while on screen (.is-live). */
.project-scene {
  container-type: inline-size;
  margin: -22px -22px 2px; aspect-ratio: 520 / 150; border-radius: 11px 11px 0 0; overflow: hidden; border-bottom: 1px solid var(--border);
  background: radial-gradient(60% 110% at 10% 0%, color-mix(in srgb, var(--c1) 22%, transparent), transparent 70%),
              radial-gradient(55% 100% at 95% 100%, color-mix(in srgb, var(--c2) 14%, transparent), transparent 70%),
              radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 0.8px, transparent 1.2px) 0 0 / 10px 10px, #0b0d14;
}
.project-scene svg { display: block; width: 100%; height: 100%; }
.sc-cap { font: 600 8.5px var(--font); letter-spacing: 0.14em; fill: #9a9cab; }
.sc-t { font: 500 10px ui-monospace, "SF Mono", Menlo, monospace; fill: #d4d4de; }
.sc-t.sc-sm { font-size: 8.5px; }
.sc-s { font: 500 8px ui-monospace, "SF Mono", Menlo, monospace; fill: #9a9cab; }
.sc-greek { font: 600 12px var(--font); }
.sc-box { fill: #15161d; stroke: #2c2d36; }
.sc-hot { stroke: color-mix(in srgb, var(--c1) 55%, transparent); }
.sc-safe { stroke: #5eead4; }
.sc-line, .sc-axis { fill: none; stroke: #3a3b44; stroke-width: 1; }
.sc-wire { fill: none; stroke: color-mix(in srgb, var(--c2) 70%, transparent); stroke-width: 1.5; stroke-dasharray: 3 4; }
.sc-pkt { fill: var(--c1); opacity: 0; }
.sc-c1, .sc-c1-ink { fill: var(--c1); }
.sc-c2, .sc-c2-ink { fill: var(--c2); }
.sc-c1s { fill: none; stroke: var(--c1); stroke-width: 2; stroke-linecap: round; }
.sc-ok { fill: #5eead4; }
.sc-bad, .sc-bad-ink, .sc-fruit { fill: #fb7185; }
.sc-mark { fill: none; stroke: #0b0d14; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-flag { fill: #fb7185; }
.sc-on-flag { fill: #0b0d14; font-weight: 700; }
.sc-on-tier { fill: #ececf1; }
.sc-chip1 { fill: color-mix(in srgb, var(--c1) 25%, transparent); }
.sc-chip2 { fill: color-mix(in srgb, var(--c2) 28%, transparent); }
.sc-route { stroke: var(--c2); stroke-width: 3; stroke-linecap: round; opacity: 0.6; }
.sc-stop { fill: #0b0d14; stroke: var(--c2); stroke-width: 1.5; }
.sc-trend { fill: none; stroke: var(--c1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; }
.sc-trace { fill: none; stroke: #5b5d6b; stroke-width: 1.2; }
.sc-trace-hot { stroke: var(--c1); }
.sc-scalp { fill: #15161d; stroke: #2c2d36; }
.sc-link { stroke: var(--c2); stroke-width: 1; opacity: 0.45; }
.sc-stem { stroke: var(--c1); stroke-width: 2; stroke-linecap: round; }
.sc-leaf { fill: var(--c1); opacity: 0.85; }
.sc-pot { fill: #2a2b33; stroke: #3a3b44; }
.sc-scan { fill: color-mix(in srgb, var(--c1) 30%, transparent); opacity: 0; }
.sc-pop, .sc-grow, .sc-spin, .sc-light { transform-box: fill-box; transform-origin: center; }
.sc-grow { transform-origin: bottom; }

/* On a phone-width card the drawing is a thumbnail at about two thirds size:
   its layout has no room for bigger text, so it drops the footer line, which
   the card's bullets say in full. */
@container (max-width: 420px) {
  .sc-foot { display: none; }
}

/* What moves while the scene is live. */
.card.project:is(:hover, :has(:focus-visible), .is-live) .sc-wire { animation: sc-dash 0.9s linear infinite; }
.card.project:is(:hover, :has(:focus-visible), .is-live) .sc-pkt { animation: sc-pkt 1.2s linear infinite; animation-delay: calc(var(--i, 0) * 0.25s); }
.card.project:is(:hover, :has(:focus-visible), .is-live) .sc-pop { animation: sc-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.2s + var(--i, 0) * 0.18s); }
.card.project:is(:hover, :has(:focus-visible), .is-live) .sc-light { animation: sc-light 0.6s ease-out both; animation-delay: calc(var(--i, 0) * 0.15s); }
.card.project:is(:hover, :has(:focus-visible), .is-live) .sc-grow { animation: sc-grow 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.3s + var(--i, 0) * 0.08s); }
.card.project:is(:hover, :has(:focus-visible), .is-live) .sc-blink { animation: sc-blink 1.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.12s); }
.card.project:is(:hover, :has(:focus-visible), .is-live) .sc-scan { animation: sc-scan 1.8s ease-in-out infinite; }
.card.project:is(:hover, :has(:focus-visible), .is-live) .sc-move { animation: sc-move 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -0.8s); }
.card.project:is(:hover, :has(:focus-visible), .is-live) .sc-scroll { animation: sc-scroll 3s linear infinite; }
.card.project:is(:hover, :has(:focus-visible), .is-live) .sc-trend { animation: sc-draw 1.2s ease-out both; }
.card.project:is(:hover, :has(:focus-visible), .is-live) .sc-spin { animation: sc-spin 2.4s linear infinite; }
.card.project:is(:hover, :has(:focus-visible), .is-live) .sc-converge { animation: sc-converge 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 0.02s); }
@keyframes sc-dash { to { stroke-dashoffset: -14; } }
@keyframes sc-pkt { 0% { opacity: 0; transform: translate(0, 0); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes sc-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes sc-light { from { opacity: 0.25; } }
@keyframes sc-grow { from { transform: scaleY(0.3); } }
@keyframes sc-blink { 50% { opacity: 0.3; } }
@keyframes sc-scan { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(var(--dy)); } }
@keyframes sc-move { to { transform: translateX(var(--dx)); } }
@keyframes sc-scroll { to { transform: translateX(var(--dx)); } }
@keyframes sc-draw { from { stroke-dashoffset: 160; } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-converge { from { opacity: 0.25; transform: translate(var(--x), var(--y)); } }

@media (prefers-reduced-motion: reduce) {
  .card.project::after, .repo-link, .app-link, .app-arrow { transition: none; }
  .project-scene * { animation: none !important; }
}