/* ==========================================================================
   HOME — heyamychen.com
   Homepage-specific layout and section styles.
   ========================================================================== */


/* --------------------------------------------------------------------------
   PAGE LOAD ANIMATIONS
   -------------------------------------------------------------------------- */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


.nav--home {
  animation: fade-up 0.5s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .nav--home { animation: none; }
}


/* --------------------------------------------------------------------------
   PAGE FOLD — full-viewport wrapper for nav + hero
   Header takes its natural height; hero fills the rest, h1 at bottom.
   -------------------------------------------------------------------------- */

.page-fold {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}


/* --------------------------------------------------------------------------
   HERO — only h1 inside; tagline lives below the page fold
   -------------------------------------------------------------------------- */

.hero {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--grid-margin) 4rem;
}

.hero__headline {
  opacity: 0;
  font-family: var(--font-primary);
  font-size: var(--text-hero);
  font-weight: var(--weight-regular);
  line-height: calc(var(--leading-hero) * 0.9);   /* 10% tighter */
  letter-spacing: var(--tracking);
  color: var(--color-moss);
  max-width: 100%;
}


/* Tagline — outside page-fold, fades in after typing */
.hero__tagline {
  padding: 0 var(--grid-margin);
  margin-top: 2.875rem;   /* 46px */
  font-family: var(--font-primary);
  font-size: var(--text-tagline);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking);
  color: var(--color-forest);
  max-width: 68.25rem;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.hero__tagline.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero__tagline {
    opacity: 1;
    transition: none;
  }
}

@media (max-width: 1023px) {
  .hero {
    padding-bottom: 3rem;
  }

  .hero__tagline {
    margin-top: 2.5rem;
  }
}

@media (max-width: 639px) {
  .page-fold {
    min-height: 70svh;
  }

  .hero {
    padding-bottom: 2.5rem;
  }

  .hero__headline {
    font-size: clamp(2.5rem, 12vw, 10rem);
  }

  .hero__tagline {
    margin-top: 1.75rem;
    font-size: var(--text-body-lg);
  }
}


/* --------------------------------------------------------------------------
   FEATURED WORK
   -------------------------------------------------------------------------- */

.section-work {
  margin-top: 5rem;
  padding: 0 var(--grid-margin);
}

.work-header {
  display: flex;
  flex-direction: column;
  padding-top: 3rem;
  padding-bottom: 0;
  margin-bottom: 2.5rem;
}

.work-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-bottom: 0.75rem;
}

.work-meta__services,
.work-meta__role {
  font-family: var(--font-mono);
  font-size: var(--text-caption);   /* 16px */
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking);
  line-height: var(--leading-mono);
  color: var(--color-forest);
}

.work-body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--grid-gutter);
  margin-top: 0.75rem;
  align-items: start;
}

.work-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.work-client {
  font-family: var(--font-primary);
  font-size: var(--text-project);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  letter-spacing: var(--tracking);
  color: var(--color-forest);
}

.work-client__sub {
  display: block;
}

.work-client a {
  text-decoration: none;
  color: inherit;
  transition: color var(--duration-base) var(--easing-default);
}

.work-client a:hover {
  color: var(--color-clay);
}

.work-desc p {
  font-family: var(--font-primary);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking);
  color: var(--color-forest);
  max-width: 100%;
}

.work-desc p + p {
  margin-top: 1em;
}


/* --------------------------------------------------------------------------
   WORK IMAGE SCROLL STRIP
   Desktop: image 1 fully visible, image 2 ~30% peek, image 3 hidden
   until scroll. Scrolls horizontally.
   -------------------------------------------------------------------------- */

.work-images {
  overflow: hidden;   /* clipping container — no scrollbar visible here */
}

.work-images__track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}

.work-images__track:active {
  cursor: grabbing;
}

.work-images__track::-webkit-scrollbar {
  display: none;
}

.work-images__item {
  flex: 0 0 calc((100% - 1.5rem) / 1.2);   /* image 1 full + 20% peek of image 2 */
  scroll-snap-align: start;
}

.work-images__img,
.work-images__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--color-placeholder);
  display: block;
}

/* Responsive: full-width single column below tablet */
@media (max-width: 1023px) {
  .work-body {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .work-meta {
    align-items: flex-start;
  }

  .work-images__item {
    flex: 0 0 75vw;
  }
}

@media (max-width: 639px) {
  .work-meta {
    flex-direction: column;
    gap: 0;
  }

  .work-images__item {
    flex: 0 0 85vw;
  }
}


/* --------------------------------------------------------------------------
   SERVICES
   -------------------------------------------------------------------------- */

.section-services {
  padding: 0 var(--grid-margin);
  margin-top: 5rem;
}

.section-services .section-heading {
  padding-top: 3rem;
  margin-bottom: 2.5rem;
}

.services-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

.service-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1.125rem;    /* 18px — matches Figma gap */
}

.service-card:first-child {
  padding-left: 0;
}

.service-card:last-child {
  padding-right: 0;
}

.service-number {
  font-family: var(--font-mono);
  font-size: var(--text-caption);   /* 16px */
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking);
  line-height: var(--leading-mono);
  color: var(--color-forest);
}

.service-name {
  font-family: var(--font-primary);
  font-size: var(--text-tagline);    /* 32px */
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking);
  color: var(--color-forest);
}

.service-desc {
  font-family: var(--font-primary);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking);
  color: var(--color-forest);
  max-width: 100%;
}

/* Grass vertical dividers between cards */
.service-divider {
  width: 1px;
  align-self: stretch;
  background-color: var(--color-grass);
  flex-shrink: 0;
}

/* Tablet: 2×2 */
@media (max-width: 1023px) {
  .services-grid {
    flex-wrap: wrap;
  }

  .service-card {
    flex: 1 1 calc(50% - 1px);
    padding: 1.5rem 1rem;
  }

  .service-card:first-child {
    padding-left: 1rem;
  }

  .service-card:last-child {
    padding-right: 1rem;
  }

  /* Show horizontal rules between rows on tablet, hide vertical dividers */
  .service-divider {
    display: none;
  }

  .service-card:nth-child(odd) {
    border-right: 1px solid var(--color-grass);
  }

  .service-card:nth-child(n+3) {
    border-top: 1px solid var(--color-grass);
  }
}

/* Mobile: 1 column */
@media (max-width: 639px) {
  .services-grid {
    flex-direction: column;
  }

  .service-card {
    flex: none;
    padding: 1.5rem 0;
    border-right: none !important;
    border-top: 1px solid var(--color-grass);
  }

  .service-card:first-child {
    border-top: none;
    padding-left: 0;
  }

  .service-divider {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   THINKING
   -------------------------------------------------------------------------- */

.section-thinking {
  margin-top: 5rem;
  padding: 0 var(--grid-margin);
  margin-bottom: 5rem;
}

.section-thinking .section-heading {
  padding-top: 3rem;
  margin-bottom: 2.5rem;
}

.thinking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gutter);
}

.thinking-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-forest);
}

.thinking-card__label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);   /* 16px */
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking);
  line-height: var(--leading-mono);
  color: var(--color-forest);
  margin-bottom: 0.9375rem;  /* 15px — matches Figma gap */
}

.thinking-card__title {
  font-family: var(--font-primary);
  font-size: var(--text-card-title);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking);
  color: var(--color-forest);
  margin-bottom: 0.9375rem;
  transition: color var(--duration-base) var(--easing-default);
}

.thinking-card__link:hover .thinking-card__title {
  color: var(--color-clay);
}

.thinking-card__desc {
  font-family: var(--font-primary);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking);
  color: var(--color-forest);
  margin-bottom: 0.9375rem;
  max-width: 100%;
}

.thinking-card__image {
  width: 100%;
  aspect-ratio: 2 / 1;
  background-color: var(--color-placeholder);
  overflow: hidden;
  margin-bottom: 1.5rem;   /* image is now at top — space below it */
}

.thinking-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tablet + mobile: stack, first card on top */
@media (max-width: 1023px) {
  .thinking-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;   /* more breathing room when stacked */
  }
}


/* --------------------------------------------------------------------------
   ABOUT / PULLQUOTE
   -------------------------------------------------------------------------- */

.section-about {
  margin-top: 5rem;
  padding: 0 var(--grid-margin);
  min-height: 70svh;
  display: flex;
  flex-direction: column;   /* hr at top; pullquote auto-centers below */
}

.section-about .about-pullquote {
  margin-top: auto;
  margin-bottom: auto;
}

.about-pullquote {
  font-family: var(--font-primary);
  font-size: var(--text-pullquote);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking);
  color: var(--color-forest);
  text-align: center;
  padding: 3rem 10.75rem;
  quotes: none;
  max-width: var(--grid-max);
  margin: 0 auto;
}

.about-pullquote__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-section);   /* 36px — smaller than the main pullquote */
  line-height: var(--leading-mono);
  margin-top: 1.75rem;
}

@media (max-width: 1023px) {
  .about-pullquote {
    padding: 2rem 4rem;
  }
}

@media (max-width: 639px) {
  .section-about {
    min-height: 60svh;   /* slightly smaller on mobile */
  }

  .about-pullquote {
    padding: 2rem 0;
    text-align: left;    /* left-align below 600px — approved */
    font-size: var(--text-tagline);
  }

  .about-pullquote__sub {
    font-size: var(--text-body-lg);
  }
}