/*
 * Home section "Et si on allait plus loin ?". Measurements from the Figma frame (1440px wide):
 * title 40px at the top, text 702px wide 55px below, button 347 × 50 127px below,
 * then the cream wave whose left edge starts 139px below the title.
 */
.beyond {
  --wave-height: 14.53vw;

  position: relative;
  margin-top: -16px;
  padding: 0 20px max(11.9vw, 72px);
  overflow: hidden;
  background-color: var(--color-olive-deep);
  color: var(--color-white);
  text-align: center;
}

.beyond__content {
  position: relative;
  z-index: 1;
  max-width: 702px;
  margin-inline: auto;
}

.beyond__title {
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  font-weight: 300;
  line-height: 1.36;
}

.beyond__text {
  margin-top: 0.15em;
  font-size: clamp(1rem, 1.39vw, 1.25rem);
  font-weight: 300;
  line-height: 1.35;
}

.beyond__action {
  margin-top: 18px;
}

/* Scoped under .beyond so it wins over .btn, which loads after this file. */
.beyond .beyond__button {
  --btn-bg: var(--color-cream);
  --btn-color: var(--color-brown);
  --btn-border: var(--color-cream);
  --btn-hover-mix: var(--color-brown);
  --btn-focus: var(--color-cream);

  min-height: 50px;
  padding: 0.55em 1.25em;
  font-size: clamp(1rem, 1.39vw, 1.25rem);
  font-weight: 700;
}

/* The wave is the cream background of the next section rising into the olive one. */
.beyond__wave {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: calc(var(--wave-height) + 1px);
  fill: var(--color-cream);
}

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

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

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

/* On small screens the wave keeps a minimum height so its curve stays visible. */
@media (max-width: 639.98px) {
  .beyond {
    --wave-height: 96px;

    padding-bottom: calc(var(--wave-height) + 12px);
  }
}

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