/* ---------- Scroll behavior ----------
   scroll-snap was removed: with a proximity snap point on .work and no
   snap point after it, the browser could treat the (short) footer as
   still "in proximity" of .work's snap point and pull scroll back to
   it on every attempt, effectively freezing scroll before the footer.
   Plain smooth scrolling (still used by the "Work" nav link's anchor
   jump) has no such failure mode. */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: var(--color-bg);
  overflow: hidden;
}

.hero__dots {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 20;
}

.hero__greeting {
  font-size: clamp(1.75rem, 4vw + 1rem, 2.75rem);
  margin-bottom: var(--space-4);
}

.hero__bio {
  width: 100%;
  color: var(--color-text-secondary);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  line-height: 1.65;
}

/* ---------- Work / project grid ---------- */

.work {
  background: var(--color-bg-secondary);
  padding-block: var(--space-16) var(--space-24);
  overflow-x: hidden;
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16) var(--space-8);
}

.project-card {
  display: block;
}

.project-card__image-wrap {
  margin-bottom: var(--space-6);
}

.project-card__image-tilt {
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.project-card__image-tilt.is-active {
  box-shadow:
    0 24px 48px -12px rgba(0, 0, 0, 0.22),
    0 14px 24px -14px rgba(0, 0, 0, 0.18);
}

.project-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-card__title {
  font-size: 1.25rem;
  margin-bottom: var(--space-3);
}

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.project-card__description {
  color: var(--color-text-secondary);
  max-width: 34rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
}

.tag--orange {
  color: var(--color-orange);
  border-color: var(--color-orange);
}

.tag--neutral {
  color: var(--color-text);
  border-color: var(--color-text);
}

.tag--green {
  color: var(--color-green);
  border-color: var(--color-green);
}

.tag--black {
  color: #ffffff;
  background: var(--color-black);
  border-color: var(--color-black);
}

/* ---------- Footer ---------- */

.footer {
  background: var(--color-bg);
  padding-block: var(--space-16) var(--space-8);
  overflow-x: hidden;
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  padding-bottom: var(--space-8);
}

.footer__label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}

.footer__column ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__column a {
  color: var(--color-text);
}

.footer__column a:hover {
  color: var(--color-text-secondary);
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__signature {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

/* ---------- Breakpoints ---------- */

@media (min-width: 700px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-20) var(--space-8);
  }

  .footer__top {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .project-grid {
    gap: var(--space-24) var(--space-12);
  }
}