/* ==========================================================================
   10-FEATURES.CSS  —  "Why EverInvites", the seven feature cards
   --------------------------------------------------------------------------
   This section sits on --cream-deep while How It Works above it sits on plain
   --cream. That small change of tone is the only thing separating them, and
   it also lets the white cards lift off the page. No borders, no dividers,
   no decoration.

   The cards themselves use the shared `.card` look from 03-layout.css — the
   very same surface, corners, border, shadow and hover lift as the template
   cards in Section 2. Only what is unique to a feature card is below.

   The cards are built by js/features.js from the `features` list in
   js/data/site-config.js.
   ========================================================================== */

.features {
  background-color: var(--cream-deep);
}

/* ==========================================================================
   HEADING BLOCK
   Treated exactly like the How It Works heading so the two read as siblings:
   the heading rises up from behind a hidden edge instead of simply fading.
   ========================================================================== */
.features__heading {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  color: var(--ink);
  text-align: center;
  overflow: hidden;
  /* room so letter tails are never clipped by the mask */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.js .features__heading[data-reveal] {
  opacity: 1;
  transform: none;
}

.js .features__heading .features__heading-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.js .features__heading[data-reveal].is-visible .features__heading-inner {
  transform: translateY(0);
}

.features__lead {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  text-align: center;
  text-wrap: pretty;
}


/* ==========================================================================
   THE GRID
   One column on a phone. Two columns from 720px up — see 99-responsive.css.
   ========================================================================== */
.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);

  max-width: var(--features-max);
  margin-top: var(--space-6);
  margin-inline: auto;
}


/* ==========================================================================
   ONE FEATURE CARD
   `height: 100%` is what keeps two cards in the same row the same height,
   however much longer one card's paragraph happens to be.
   ========================================================================== */
.feature {
  height: 100%;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}

/* Holds the title and the paragraph together, so that when the wide card
   turns horizontal they move as one block beside the icon. */
.feature__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- the icon tile ------------------------------------------------------ */
.feature__icon {
  width: var(--tile-size);
  height: var(--tile-size);
  flex: none;
  align-self: flex-start;   /* never stretches to the card's full width */
  border-radius: var(--radius-sm);
  background-color: var(--amber-wash);
  /* The drawing inside inherits this colour, which is how all seven icons
     recolour from a single line in 01-tokens.css. */
  color: var(--orange);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-base) var(--ease-out);
}

.feature__icon svg {
  width: var(--tile-icon);
  height: var(--tile-icon);
}

/* --- the words ---------------------------------------------------------- */
.feature__title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-feature-title);
  line-height: 1.3;
  color: var(--ink);
}

.feature__body {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-feature-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- hover -------------------------------------------------------------- */
/* The lift, shadow and border come from the shared `.card` rule, so a
   feature card and a template card behave identically. The only addition
   here is the icon tile deepening. */
@media (hover: hover) {

  .feature:hover .feature__icon {
    background-color: var(--amber-wash-deep);
  }
}


/* ==========================================================================
   THE ARRIVAL
   Each card fades up on its own as it scrolls into view, handled by the
   shared observer in js/animations.js. The icon tile then settles into place
   80ms behind its own card — one clean scale, no bounce.

   --reveal-delay is set on the card by that observer, so the icon simply
   adds its own 80ms on top of whatever its card was given.
   ========================================================================== */
.js .feature .feature__icon {
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity   var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--stagger-icon));
}

.js .feature.is-visible .feature__icon {
  opacity: 1;
  transform: scale(1);
}


/* ==========================================================================
   CLOSING BUTTON
   ========================================================================== */
.features__cta {
  margin-top: var(--space-7);
  text-align: center;
}


/* ==========================================================================
   REDUCED MOTION
   Every card and every icon is simply present, at full size, straight away.
   Nothing here waits to be scrolled to and nothing moves.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  .js .feature[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js .feature .feature__icon,
  .js .feature.is-visible .feature__icon {
    opacity: 1;
    transform: none;
  }

  .js .features__heading .features__heading-inner {
    transform: none;
  }
}