/* Projects grid */
.projects { position: relative; isolation: isolate; }
.projects::before { content: ""; position: absolute; inset-inline-end: -120px; top: 20%; width: 380px; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); filter: blur(120px); opacity: 0.35; z-index: -1; }
.projects__grid { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .projects__grid { grid-template-columns: 1fr 1fr; } }
.project-card__link { display: block; color: inherit; text-decoration: none; }
.project-card__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 1.4; background: var(--color-surface); transition: box-shadow 0.6s var(--ease-out); }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
/* Hover: a soft brand-colored light rises from the bottom while the image slowly zooms */
.project-card__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(110% 55% at 50% 115%, color-mix(in srgb, var(--color-secondary) 28%, transparent), transparent 70%); opacity: 0; transform: translateY(30%); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); pointer-events: none; }
.project-card__link:hover .project-card__media::before { opacity: 1; transform: none; }
.project-card__media::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, color-mix(in srgb, var(--color-primary) 85%, transparent)); }
.project-card__link:hover .project-card__media { box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--color-secondary) 45%, transparent); }
.project-card__link:hover .project-card__media img { transform: scale(1.04); }
.project-card__tags { transition: transform 0.6s var(--ease-out); }
.project-card__link:hover .project-card__tags { transform: translateY(-6px); }
.project-card__tags { position: absolute; inset: auto var(--space-4) var(--space-4); z-index: 2; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.project-card__tags li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-bg) 16%, transparent); backdrop-filter: blur(8px); color: var(--color-bg); font-size: 0.8125rem; }
.project-card__tags img { width: 16px; height: 16px; flex: none; }
.project-card__info { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block-start: var(--space-4); }
.project-card__info > div { order: -1; }
.project-card__title { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-heavy, 900); }
.project-card__text { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.project-card__arrow { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(var(--color-primary), var(--color-primary)) padding-box, var(--gradient-brand) border-box; color: var(--color-bg); transition: transform 0.4s var(--ease-out), background 0.3s; }
.project-card__arrow svg { width: 16px; height: 16px; }
.project-card__link:hover .project-card__arrow { transform: rotate(-45deg); background: var(--gradient-brand) padding-box, var(--gradient-brand) border-box; color: var(--color-primary); }
.projects__more { margin-block-start: var(--space-7); }