/* Scroll-driven feature panels used on the homepage ("A quiet concierge").

   Default (no JS, reduced motion, or any viewport up to 880px): the three
   panels render in normal flow, stacked vertically, text first then the
   phone on its backdrop card, centred.

   Enhanced (scroll-features.js ran, the viewport is at least 881px, the
   desktop header without the burger, and motion is not reduced): the track
   is four viewports tall and wraps a sticky stage pinned under the site
   header. The panels are stacked absolutely inside the stage on one shared
   grid: text | card | text, with the card always in the centre column and
   the text in column 1 or 3 by panel parity. The cards therefore sit on top
   of each other and form a deck; scroll-features.js scrubs it with the
   scroll position (front card slides up and away, the next grows from
   behind, the text fades and slides in step). Every enhanced rule lives
   under the 881px media query AND behind .scroll-features.is-enhanced so
   the stacked fallback is what renders otherwise.

   Inactive panels are visually hidden only (opacity, transforms,
   pointer-events none), never aria-hidden or visibility:hidden, so screen
   readers and find-in-page still read all three steps in order. */

.scroll-features {
  --sf-top: 72px; /* sticky header height; scroll-features.js measures it */
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
}

.scroll-features-stage {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.scroll-features-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2.5rem;
  min-width: 0;
  align-items: center;
  justify-items: center;
}

.scroll-features-text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  max-width: 50ch;
  align-items: center;
  text-align: center;
}

.feature-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.scroll-features-panel:nth-child(1) .feature-icon { color: var(--brand-primary); }
.scroll-features-panel:nth-child(2) .feature-icon { color: var(--accent-green); }
.scroll-features-panel:nth-child(3) .feature-icon { color: var(--accent-sky); }

.feature-icon svg,
.feature-icon img {
  width: 1.625rem;
  height: 1.625rem;
  display: block;
}

.scroll-features-panel h3 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: clamp(1.5rem, 1.38rem + 0.8vw, 1.875rem);
  font-weight: 700;
  color: var(--dark);
  margin: 0;
  line-height: 1.2;
  text-wrap: balance;
}

.scroll-features-panel p {
  font-size: clamp(1.125rem, 1.08rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--grey);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

/* The card: a padded box around the phone whose ::before/::after paint the
   backdrop. Fixed-ratio frame on the phone so the 688x1413 third screenshot
   fills the same box as the two 602x1360 ones and the deck never jumps. */
.scroll-features-image {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  width: 100%;
  position: relative;
  isolation: isolate;
  padding: 2rem clamp(1.5rem, 8vw, 7.25rem);
  box-sizing: border-box; /* /intro has no global border-box reset */
}

.scroll-features-image img {
  aspect-ratio: 602 / 1360;
  height: min(70vh, 640px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  /* The screenshots are transparent phone mockups with their own bezel, so
     the shadow must follow the alpha (drop-shadow), not the element box. */
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.12));
}

/* Painterly backdrop: near-vertical soft colour streaks tinted per step, a
   faint vertical light falloff, and a film-grain overlay from an inline SVG
   turbulence filter. No image assets. ::before paints the colour, ::after
   the grain; both sit under the phone via the wrapper's isolated stacking
   context. */
.scroll-features-image::before,
.scroll-features-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2.5rem;
  z-index: -1;
  pointer-events: none;
}

.scroll-features-image::before {
  /* Top to bottom: light falloff, two soft colour blooms, two streak passes
     at slightly different angles and periods. The blooms and the upper
     streak pass are blended in, so the two periods interfere instead of
     tiling and the result reads as brushed rather than striped. */
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.05)),
    radial-gradient(55% 45% at 28% 30%, var(--sf-c3) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(50% 55% at 76% 72%, var(--sf-c4) 0%, rgba(255, 255, 255, 0) 72%),
    repeating-linear-gradient(94deg,
      var(--sf-c1) 0%, var(--sf-c3) 5%, var(--sf-c2) 11%, var(--sf-c5) 16%,
      var(--sf-c4) 22%, var(--sf-c1) 29%, var(--sf-c3) 37%),
    repeating-linear-gradient(99deg,
      var(--sf-c1) 0%, var(--sf-c2) 4%, var(--sf-c3) 9%, var(--sf-c4) 13%,
      var(--sf-c2) 18%, var(--sf-c5) 24%, var(--sf-c1) 29%, var(--sf-c4) 35%,
      var(--sf-c3) 41%, var(--sf-c5) 46%, var(--sf-c1) 52%);
  background-blend-mode: normal, soft-light, soft-light, soft-light, normal;
}

.scroll-features-image::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.45 0 0 0 0 0.45 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.5;
  mix-blend-mode: multiply;
}

/* Per-step palettes, each a family around the step's accent colour with a
   warm sand note so the three cards read as one series. */
.scroll-features-panel:nth-child(1) .scroll-features-image {
  --sf-c1: #ECE9FF; --sf-c2: #C9C4F4; --sf-c3: #F4EFDF; --sf-c4: #B4AEE8; --sf-c5: #DFDAFB;
}
.scroll-features-panel:nth-child(2) .scroll-features-image {
  --sf-c1: #E3F2E8; --sf-c2: #BBDBC8; --sf-c3: #F1F3E3; --sf-c4: #9FC9B2; --sf-c5: #D6EBDD;
}
.scroll-features-panel:nth-child(3) .scroll-features-image {
  --sf-c1: #E2F0FA; --sf-c2: #BAD8EE; --sf-c3: #F2ECDF; --sf-c4: #9EC6E4; --sf-c5: #D3E7F5;
}

@media (min-width: 881px) {
  /* Desktop without the enhancement: side-by-side rows, alternating. */
  .scroll-features-panel {
    grid-template-columns: 1fr auto;
    justify-items: stretch;
  }
  .scroll-features-panel:nth-child(even) { grid-template-columns: auto 1fr; }
  .scroll-features-panel:nth-child(even) .scroll-features-image { order: -1; }

  .scroll-features-text {
    align-items: flex-start;
    text-align: left;
  }

  /* Enhanced mode: pinned stage, one shared three-column grid per panel.
     Four viewports of track: one per card plus one more, so each hand-over
     gets enough scroll distance to be followed rather than flicked. */
  .scroll-features.is-enhanced {
    height: 400vh;
    max-width: none;
  }

  .scroll-features.is-enhanced .scroll-features-stage {
    position: sticky;
    top: var(--sf-top);
    height: calc(100vh - var(--sf-top));
    overflow: clip; /* the departing card leaves through the top edge */
  }

  .scroll-features.is-enhanced .scroll-features-panel {
    position: absolute;
    inset: 0;
    pointer-events: none;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2.5rem;
    align-content: center;
    padding: 0 1rem;
  }

  /* First card on top: the deck is read front to back in DOM order. */
  .scroll-features.is-enhanced .scroll-features-panel:nth-child(1) { z-index: 3; }
  .scroll-features.is-enhanced .scroll-features-panel:nth-child(2) { z-index: 2; }
  .scroll-features.is-enhanced .scroll-features-panel:nth-child(3) { z-index: 1; }

  /* The card always sits in the centre column so the three cards overlap
     exactly and read as one deck. Text alternates: odd panels left, even
     panels right. */
  .scroll-features.is-enhanced .scroll-features-image {
    grid-column: 2;
    grid-row: 1;
    will-change: transform, opacity;
  }
  .scroll-features.is-enhanced .scroll-features-text {
    grid-column: 1;
    grid-row: 1;
    max-width: 36ch;
    gap: 0.625rem;
    will-change: transform, opacity;
  }
  .scroll-features.is-enhanced .scroll-features-panel:nth-child(even) .scroll-features-text {
    grid-column: 3;
  }

  /* Side text in Lassie proportions: a modest heading over small, quiet
     body copy, so the card carries the section and the text annotates it. */
  .scroll-features.is-enhanced .scroll-features-panel h3 {
    font-size: 1.5rem;
    line-height: 1.25;
  }
  .scroll-features.is-enhanced .scroll-features-panel p {
    font-size: 0.9375rem;
    line-height: 1.55;
    text-wrap: pretty;
  }
  .scroll-features.is-enhanced .feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.25rem;
  }
  .scroll-features.is-enhanced .feature-icon img,
  .scroll-features.is-enhanced .feature-icon svg {
    width: 1.375rem;
    height: 1.375rem;
  }
}