/* ── Hero floating tags ── */
.hero__tag {
	position: absolute;
	font-family: var(--font-body);
	font-size: clamp(0.8rem, 2vw, 1rem);
	font-weight: 500;
	padding: 0.5em 1.1em;
	border-radius: 30px;
	white-space: nowrap;
	pointer-events: none;
	color: #010101;
}

.hero__tag--1 {
	background: #FABF03;
	top: 18%;
	right: 8%;
	transform: rotate(-7deg);
}

.hero__tag--2 {
	background: #6db9ee;
	top: 38%;
	right: 20%;
	transform: rotate(5deg);
}

.hero__tag--3 {
	background: #CA8DD7;
	top: 28%;
	right: 38%;
	transform: rotate(-3deg);
}

.hero__tag--4 {
	background: #b4ffd6;
	top: 52%;
	right: 6%;
	transform: rotate(8deg);
}

/* ── Per-card image background colors (by project name) ── */
.projects li.project-nura          .image { background-color: #6db9ee; } /* muted blue   */
.projects li.project-iris          .image { background-color: #CA8DD7; } /* soft violet  */
.projects li.project-google-tasks  .image { background-color: #FABF03; } /* soft sand    */
.projects li.project-mirae         .image { background-color: #b4ffd6; } /* pale teal    */

/* ── Scroll-driven animations ── */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/* Hero statement: drifts up and fades as it exits the viewport */
		.hero .brand-stmnt {
			animation: hero-exit linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 55%;
		}

		/* Projects heading: fades up on scroll into view */
		.projects > .micro-text,
		.projects > h2 {
			animation: sda-fade-up linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 50%;
		}

		/* Project cards: slide up + fade on scroll into view */
		.project-card {
			animation: sda-card-enter linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 30%;
		}

		/* Card images: subtle parallax shift as the card scrolls through */
		.project-card__media img {
			animation: sda-img-parallax linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}

		@keyframes hero-exit {
			from { opacity: 1; transform: translateY(0) scale(1); }
			to   { opacity: 0; transform: translateY(-3rem) scale(0.93); }
		}

		@keyframes sda-fade-up {
			from { opacity: 0; transform: translateY(1.5rem); }
			to   { opacity: 1; transform: translateY(0); }
		}

		@keyframes sda-card-enter {
			from { opacity: 0; transform: translateY(5rem); }
			to   { opacity: 1; transform: translateY(0); }
		}

		@keyframes sda-img-parallax {
			from { object-position: center 30%; }
			to   { object-position: center 70%; }
		}
	}
}