/* Homepage: Hero/Statement, collage, project rows */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-5xl) var(--container-padding-x) var(--spacing-4xl);
  text-align: center;
}
.hero__title {
  max-width: var(--reading-max);
  font-size: var(--font-size-6xl);
  line-height: var(--line-height-6xl);
  letter-spacing: -0.02em;
}
.hero__lede {
  max-width: 640px;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
  color: var(--color-text-secondary);
}

/* Collage: slots placed on a 900 × 520 canvas and scaled as one unit */
.collage {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 900 / 520;
}
.collage__slot { position: absolute; overflow: hidden; margin: 0; }
.collage__slot img { width: 100%; height: 100%; object-fit: cover; }
.collage__slot--left {
  left: 0; top: 28.08%; width: 28.89%; height: 71.92%;
  background: var(--color-background-blush);
  border-radius: var(--radius-2xl);
}
.collage__slot--left img { object-position: 66% 79%; }
.collage__slot--center {
  left: 33.33%; top: 0; width: 33.33%; height: 100%;
  background: var(--color-background-sky);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
}
.collage__slot--center img { object-position: 50% 0; }
.collage__slot--right {
  left: 71.11%; top: 0; width: 28.89%; height: 71.92%;
  background: var(--color-background-butter);
  border-radius: var(--radius-full);
}
.collage__slot--right img { object-position: 50% 100%; }
.collage__sticker { position: absolute; pointer-events: none; }
.collage__sticker--flower { left: 25.37%; top: 7.75%; width: 15.03%; }
.collage__sticker--sparkle { left: 64.44%; top: 55%; width: 12.44%; }
@media (prefers-reduced-motion: no-preference) {
  .collage__sticker--flower { animation: sticker-spin 24s linear infinite; }
  .collage__sticker--sparkle { animation: sticker-pulse 3s var(--ease-in-out) infinite; }
}
@keyframes sticker-spin { to { transform: rotate(360deg); } }
@keyframes sticker-pulse { 50% { transform: scale(1.12) rotate(8deg); } }

/* Project rows */
.projects { scroll-margin-top: 80px; }
.project {
  display: flex;
  align-items: center;
  gap: var(--spacing-3xl);
  padding-block: var(--spacing-lg);
}
.project__media { flex: 0 0 674px; display: flex; justify-content: center; margin: 0; }
.project__media img { width: 100%; height: auto; }
.project__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
}
.project__tag { font-size: var(--font-size-sm); line-height: var(--line-height-sm); color: var(--color-text-secondary); }
.project__title { font-size: var(--font-size-4xl); line-height: var(--line-height-4xl); }
.project__desc { font-size: var(--font-size-lg); line-height: var(--line-height-lg); color: var(--color-text-secondary); }

/* ================= Tablet ================= */
@media (max-width: 1199px) {
  .hero { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-3xl); }
  .hero__title { font-size: var(--font-size-5xl); line-height: var(--line-height-5xl); max-width: 100%; }
  .project { flex-direction: column; align-items: stretch; gap: var(--spacing-xl); }
  .project__media { flex: none; display: flex; justify-content: center; }
  .project__media img { max-width: 674px; }
  .project__title { font-size: var(--font-size-3xl); line-height: var(--line-height-3xl); }
}

/* ================= Mobile ================= */
@media (max-width: 767px) {
  .hero { padding: var(--spacing-3xl) var(--container-padding-x) var(--spacing-2xl); gap: var(--spacing-lg); }
  .hero__title { font-size: var(--font-size-4xl); line-height: var(--line-height-4xl); }
  .hero__lede { font-size: var(--font-size-lg); line-height: var(--line-height-lg); }
  .project { gap: var(--spacing-lg); padding-block: var(--spacing-xl); }
  .project__media img { max-width: 100%; }
  .project__title { font-size: var(--font-size-2xl); line-height: var(--line-height-2xl); }
  .project__desc { font-size: var(--font-size-base); line-height: var(--line-height-base); }
}

/* ---------- Motion ---------- */
/* Project shots lift toward you on hover */
.project__media img { transition: translate var(--motion-medium) var(--ease-out), rotate var(--motion-medium) var(--ease-out), box-shadow var(--motion-medium) var(--ease-out); }
@media (hover: hover) {
  .project:hover .project__media img { translate: 0 -6px; box-shadow: 0 20px 48px rgb(21 23 13 / 0.14); }
  .collage__slot img { transition: scale var(--motion-slow) var(--ease-out); }
  .collage__slot:hover img { scale: 1.04; }
}