/*
 * Home section "Un projet qui sort du cadre ?". Measurements from the Figma frame (1440px wide):
 * title 60px right under the wave, text 26px, button 580 × 79 18px below,
 * then 85px down to the footer line.
 */
.project {
  padding: 4px 20px clamp(56px, 5.9vw, 85px);
  background-color: var(--color-cream);
  color: var(--color-black);
  text-align: center;
}

.project__title {
  font-size: clamp(2rem, 4.17vw, 3.75rem);
  font-weight: 600;
  line-height: 1.364;
  text-wrap: balance;
}

.project__text {
  max-width: 23em;
  margin-inline: auto;
  font-size: clamp(1.125rem, 1.81vw, 1.625rem);
  font-weight: 300;
  line-height: 1.364;
}

.project__action {
  margin-top: 18px;
}

.project .project__button,
.project .project__button:focus-visible {
  border-radius: 0.93em;
}

.project .project__button {
  --btn-bg: var(--color-olive-tint);
  --btn-color: var(--color-olive-ink);
  --btn-border: var(--color-olive);
  --btn-hover-mix: var(--color-olive);
  --btn-focus: var(--color-olive);

  min-height: clamp(54px, 5.49vw, 79px);
  padding: 0.32em 1.6em;
  border-width: 3px;
  font-size: clamp(1.25rem, 2.5vw, 2.25rem);
  font-weight: 500;
}

/* Reveal: hidden only once JS is ready and motion is allowed, see reveal_controller.js. */
.project [data-reveal-target="item"] {
  transition:
    opacity 800ms var(--ease-out) var(--reveal-delay, 0ms),
    translate 800ms var(--ease-out) var(--reveal-delay, 0ms);
}

.project__text {
  --reveal-delay: 120ms;
}

.project__action {
  --reveal-delay: 240ms;
}

@media (prefers-reduced-motion: no-preference) {
  .project.is-reveal-ready [data-reveal-target="item"]:not(.is-revealed) {
    opacity: 0;
    translate: 0 24px;
  }
}