/* ==========================================================================
   Kilnwork — section: core capability bento (#features)
   Every selector is scoped under .s-features.
   ========================================================================== */

.s-features {
  --f-well-min: 10rem;
  --f-art-inset: var(--space-4);
  overflow: clip;
}

/* ---- Decorative light ---------------------------------------------------- */

.s-features__orb {
  --orb-opacity: 0.22;
  --orb-blur: 90px;
}

.s-features__orb--a {
  --orb-size: 34rem;
  inset-block-start: -8rem;
  inset-inline-start: -12rem;
}

.s-features__orb--b {
  --orb-size: 28rem;
  --orb-opacity: 0.16;
  inset-block-end: -6rem;
  inset-inline-end: -10rem;
}

/* ---- Section head -------------------------------------------------------- */

.s-features__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--container-narrow);
  margin-block-end: clamp(var(--space-8), 5vw, var(--space-11));
}

.s-features__title {
  font-size: var(--step-6);
  letter-spacing: var(--tracking-tight);
}

.s-features__lede {
  max-width: 52ch;
}

/* ---- Bento grid ---------------------------------------------------------- */

.s-features__grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 768 — two columns, the lead and the wide card break out */
@media (width >= 48rem) {
  .s-features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(15rem, auto);
  }

  .s-features__card--storefront,
  .s-features__card--customers { grid-column: span 2; }
}

/* 1024 — the real bento: 12 columns, a tall lead, an uneven bottom row */
@media (width >= 64rem) {
  .s-features {
    --f-well-min: 11.5rem;
  }

  .s-features__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(13.5rem, auto);
  }

  .s-features__card--storefront { grid-column: 1 / 8;   grid-row: span 2; }
  .s-features__card--payments   { grid-column: 8 / 13; }
  .s-features__card--inventory  { grid-column: 8 / 13; }
  .s-features__card--shipping   { grid-column: 1 / 5; }
  .s-features__card--analytics  { grid-column: 5 / 10; }
  .s-features__card--customers  { grid-column: 10 / 13; }
}

@media (width >= 90rem) {
  .s-features {
    --f-well-min: 13rem;
  }

  .s-features__grid { grid-auto-rows: minmax(15rem, auto); }
}

/* ---- Card ---------------------------------------------------------------- */

.s-features__card {
  --card-pad: var(--space-5);
  gap: var(--space-5);
  overflow: clip;
}

@media (width >= 48rem) {
  .s-features__card { --card-pad: var(--space-6); }
}

@media (width >= 90rem) {
  .s-features__card { --card-pad: var(--space-7); }
}

.s-features__card:hover,
.s-features__card:focus-within {
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-lift);
}

.s-features__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: auto;
}

.s-features__kicker {
  margin: 0;
  color: var(--ink-subtle);
  font-size: var(--step--2);
  font-weight: var(--weight-semi);
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.s-features__name {
  font-size: var(--step-2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.s-features__text {
  max-width: 34ch;
  color: var(--ink-muted);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}

.s-features__card--lead .s-features__name { font-size: var(--step-4); }
.s-features__card--lead .s-features__text {
  max-width: 46ch;
  font-size: var(--step-1);
}

/* ---- Illustration well --------------------------------------------------- */

.s-features__well {
  position: relative;
  flex: 1 1 auto;
  min-height: var(--f-well-min);
  border-radius: var(--radius-md);
  background-color: var(--surface-sunken);
  background-image: linear-gradient(
    155deg,
    color-mix(in oklab, var(--brand) 9%, var(--surface-sunken)),
    var(--surface-sunken) 62%
  );
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: clip;
}

.s-features__card--lead .s-features__well { min-height: calc(var(--f-well-min) * 1.55); }

/* Absolute so the drawing has a definite box to letterbox inside — a
   percentage height on an auto-height flex parent would resolve to the SVG's
   own aspect ratio and blow the card out. */
.s-features__art {
  position: absolute;
  inset-block-start: var(--f-art-inset);
  inset-inline-start: var(--f-art-inset);
  width: calc(100% - var(--f-art-inset) * 2);
  height: calc(100% - var(--f-art-inset) * 2);
  color: var(--brand);
  fill: currentColor;
}

/* Accent-toned illustration parts. fill="currentColor" resolves per element. */
.s-features .f-accent,
.s-features .f-drop,
.s-features .f-pin { color: var(--accent); }

.s-features .f-stamp { color: var(--brand); }

/* ---- Illustration resting state ------------------------------------------ */

.s-features .f-drop { translate: 20px -50px; rotate: -6deg; transform-origin: 168px 147px; }
.s-features .f-stamp { opacity: 0; scale: 0.7; transform-origin: 150px 100px; transform-box: fill-box; }
.s-features .f-card { translate: 6px 0; }
.s-features .f-col  { scale: 1 0.62; transform-origin: bottom; transform-box: fill-box; }
.s-features .f-trend,
.s-features .f-trend-dot { opacity: 0; }
.s-features .f-trend { stroke-dasharray: 190; stroke-dashoffset: 190; }
.s-features .f-bar { scale: 0.34 1; transform-origin: left center; transform-box: fill-box; }
.s-features .f-bar--1 { scale: 0.72 1; }
.s-features .f-bar--3 { scale: 0.52 1; }
.s-features .f-next { opacity: 0; scale: 0.4; transform-origin: center; transform-box: fill-box; }
.s-features .f-route { stroke-dashoffset: 0; }

/* Everything that reacts shares one transition contract. */
.s-features .f-drop,
.s-features .f-slot,
.s-features .f-stamp,
.s-features .f-card,
.s-features .f-wave,
.s-features .f-col,
.s-features .f-trend,
.s-features .f-trend-dot,
.s-features .f-bar,
.s-features .f-next,
.s-features .f-box,
.s-features .f-shadow,
.s-features .f-route,
.s-features .f-chip,
.s-features .f-face,
.s-features .f-pin {
  transition:
    translate var(--dur-5) var(--ease-out-expo),
    rotate var(--dur-5) var(--ease-out-expo),
    scale var(--dur-5) var(--ease-out-expo),
    opacity var(--dur-3) var(--ease-standard),
    stroke-dashoffset var(--dur-6) var(--ease-out-quart);
}

/* ---- Illustration reactions ---------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .s-features__card {
    transition:
      box-shadow var(--dur-3) var(--ease-out-quart),
      translate var(--dur-3) var(--ease-out-quart);
  }

  .s-features__card:hover,
  .s-features__card:focus-within { translate: 0 -4px; }

  /* Storefront — the dragged block snaps into the empty slot */
  .s-features__card--storefront:hover .f-drop,
  .s-features__card--storefront:focus-within .f-drop { translate: 0 0; rotate: 0deg; }

  .s-features__card--storefront:hover .f-slot,
  .s-features__card--storefront:focus-within .f-slot { opacity: 0; }

  .s-features__card--storefront:hover .f-chip--2,
  .s-features__card--storefront:focus-within .f-chip--2 { opacity: 0.30; translate: 0 -2px; }

  /* Payments — the card meets the reader, the waves land, the sale clears */
  .s-features__card--payments:hover .f-card,
  .s-features__card--payments:focus-within .f-card { translate: -5px 3px; }

  .s-features__card--payments:hover .f-wave--1,
  .s-features__card--payments:focus-within .f-wave--1 { opacity: 0.85; }

  .s-features__card--payments:hover .f-wave--2,
  .s-features__card--payments:focus-within .f-wave--2 { opacity: 0.6; }

  .s-features__card--payments:hover .f-wave--3,
  .s-features__card--payments:focus-within .f-wave--3 { opacity: 0.38; }

  .s-features__card--payments:hover .f-stamp,
  .s-features__card--payments:focus-within .f-stamp { opacity: 1; scale: 1; }

  /* Inventory — the count fills in */
  .s-features__card--inventory:hover .f-bar,
  .s-features__card--inventory:focus-within .f-bar { scale: 1 1; }

  .s-features__card--inventory:hover .f-bar--1,
  .s-features__card--inventory:focus-within .f-bar--1 { transition-delay: 40ms; }

  .s-features__card--inventory:hover .f-bar--3,
  .s-features__card--inventory:focus-within .f-bar--3 { transition-delay: 120ms; }

  /* Shipping — the parcel lifts and the route runs */
  .s-features__card--shipping:hover .f-box,
  .s-features__card--shipping:focus-within .f-box { translate: 0 -6px; }

  .s-features__card--shipping:hover .f-shadow,
  .s-features__card--shipping:focus-within .f-shadow { scale: 0.82 1; opacity: 0.08; }

  .s-features__card--shipping:hover .f-route,
  .s-features__card--shipping:focus-within .f-route { stroke-dashoffset: -64; }

  .s-features__card--shipping:hover .f-pin,
  .s-features__card--shipping:focus-within .f-pin { translate: 0 -3px; }

  /* Analytics — the bars grow and the trend draws itself */
  .s-features__card--analytics:hover .f-col,
  .s-features__card--analytics:focus-within .f-col { scale: 1 1; }

  .s-features__card--analytics:hover .f-col:nth-child(2),
  .s-features__card--analytics:focus-within .f-col:nth-child(2) { transition-delay: 40ms; }
  .s-features__card--analytics:hover .f-col:nth-child(3),
  .s-features__card--analytics:focus-within .f-col:nth-child(3) { transition-delay: 80ms; }
  .s-features__card--analytics:hover .f-col:nth-child(4),
  .s-features__card--analytics:focus-within .f-col:nth-child(4) { transition-delay: 120ms; }
  .s-features__card--analytics:hover .f-col:nth-child(5),
  .s-features__card--analytics:focus-within .f-col:nth-child(5) { transition-delay: 160ms; }
  .s-features__card--analytics:hover .f-col:nth-child(6),
  .s-features__card--analytics:focus-within .f-col:nth-child(6) { transition-delay: 200ms; }

  .s-features__card--analytics:hover .f-trend,
  .s-features__card--analytics:focus-within .f-trend { opacity: 0.9; stroke-dashoffset: 0; }

  .s-features__card--analytics:hover .f-trend-dot,
  .s-features__card--analytics:focus-within .f-trend-dot { opacity: 0.9; transition-delay: 320ms; }

  /* Customers — the fifth order lands on the card */
  .s-features__card--customers:hover .f-next,
  .s-features__card--customers:focus-within .f-next { opacity: 0.9; scale: 1; }

  .s-features__card--customers:hover .f-face,
  .s-features__card--customers:focus-within .f-face { translate: 0 -2px; }
}

/* ---- Reduced motion ------------------------------------------------------ */
/* No transforms, no draw-on. Show every illustration in its finished state so
   nothing reads as half-rendered. */

@media (prefers-reduced-motion: reduce) {
  .s-features .f-drop { translate: 0 0; rotate: 0deg; }
  .s-features .f-slot { opacity: 0; }
  .s-features .f-card { translate: 0 0; }
  .s-features .f-stamp { opacity: 1; scale: 1; }
  .s-features .f-wave--1 { opacity: 0.7; }
  .s-features .f-wave--2 { opacity: 0.5; }
  .s-features .f-wave--3 { opacity: 0.3; }
  .s-features .f-col { scale: 1 1; }
  .s-features .f-bar { scale: 1 1; }
  .s-features .f-trend { opacity: 0.9; stroke-dasharray: none; stroke-dashoffset: 0; }
  .s-features .f-trend-dot { opacity: 0.9; }
  .s-features .f-next { opacity: 0.9; scale: 1; }

  .s-features__card:hover,
  .s-features__card:focus-within { translate: none; }
}

/* ---- Forced colours ------------------------------------------------------ */

@media (forced-colors: active) {
  .s-features__card,
  .s-features__well { border: 1px solid CanvasText; }
}