/* ============================================================================
   MEET DIGITAL FLOW — depth + motion. This section only.

   Scope note: the section has no separate "Diogo block" and "Michaela block" —
   both people are described in one shared paragraph, and the only card-like
   elements are the three principles. Splitting the paragraph into per-person
   cards would mean rewriting copy, which is out of scope, so the stagger runs
   across the real elements (heading -> intro -> supporting copy -> the three
   principles) and the card treatment goes where cards actually exist.

   No copy, names or roles are touched. Everything animates opacity / transform
   / filter / box-shadow only, so layout and spacing are untouched and CLS is
   unaffected. Card chrome is additive and does not move any text.
   ============================================================================ */

/* -------------------------------------------------------------- portrait --
   Base layout, not decoration. closing.css only ever styled `.people__portrait`
   (no -wrap/-img suffix); the actual figure prepared in index.html uses
   `.people__portrait-wrap` / `.people__portrait-img`, so nothing sized or
   constrained it. Without this the photo would render at its native 1600px
   width and break the two-column grid. This is the missing base rule the
   image needs to exist at all, not a redesign.

   Box ratio is 16/10, identical to the published master's own 1600x1000, so
   object-fit: cover crops nothing beyond what the file already is — the
   browser has zero extra pixels to remove. */
.people__portrait-wrap {
  position: relative;      /* explicitly in-flow: never absolute, never fixed */
  aspect-ratio: 16 / 10;   /* fixed, defined block — never stretches to the section */
  max-width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: none;        /* the photo is a grid item, never a section background */
}
.people__portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Desktop two-column placement, decoupled from source order.
   `.people__intro` now comes FIRST in the HTML so that mobile — where the
   grid collapses to one column and simply stacks children in source order —
   shows heading -> text -> photo -> cards with no extra CSS. On desktop that
   would put the photo on the right by default; these two lines put it back on
   the left (its previously approved position) using explicit grid placement
   instead of relying on source order, which is what let the two get out of
   sync in the first place. */
@media (min-width: 761px) {
  .people__portrait-wrap { grid-column: 1; grid-row: 1; }
  .people__intro         { grid-column: 2; grid-row: 1; }
}

/* ------------------------------------------------------------ background --
   Layered, not flat: a warm off-centre wash, a cool counter-wash, and a
   hairline that separates the section from Solutions above. Two large radials
   at low alpha read as depth; a single flat tint reads as a coloured box. */
.people {
  position: relative;
  isolation: isolate;
}
.people::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: none;
}
/* Hairline join to the section above — a seam, not a border. */
.people::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 48px));
  height: 1px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(242, 238, 230, .10) 18%, rgba(242, 238, 230, .10) 82%, transparent);
}

/* --------------------------------------------------------------- cards --
   The three principles become quiet raised surfaces. Padding is added to the
   card, not to the section, so the section's own spacing is unchanged. */
.principles li {
  position: relative;
  padding: 22px 22px 24px;
  border-radius: 16px;
  background: #222320;
  border: 1px solid rgba(242, 238, 230, .12);
  box-shadow:
    0 1px 2px rgba(16, 32, 25, .04),
    0 18px 34px -26px rgba(16, 32, 25, .30);
}
/* The accent rule is the visual tie between the people, their roles and the
   rest of the system: the same green that marks every other Digital Flow
   accent, drawn across the top of each card. */
.principles li::before {
  content: "";
  position: absolute;
  /* -1px so the rule covers the card's 1px border instead of floating a hair
     above it, which read as a detached tab. */
  top: -1px; left: 20px; right: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--df-signal-green, #B6FF2E);
  transform: scaleX(0);
  transform-origin: left center;
}

/* The names carry the same accent, so the sentence and the cards read as one
   system rather than two unrelated blocks. Underline only — no copy change. */
.people__names {
  background-image: linear-gradient(90deg, rgba(182, 255, 46, .8), transparent);
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 2px;
  padding-bottom: 1px;
}

@media (prefers-reduced-motion: no-preference) {

  /* ------------------------------------------------------------- entrance
     One-shot, fired by people-motion.js, which then disconnects. Cannot
     replay, cannot pin, never blocks scrolling. Fade + ~10px travel + a blur
     that resolves: the copy materialises rather than sliding. */
  .people #people-title,
  .people .people__intro p,
  .people .people__portrait-wrap,
  .people .principles li {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(5px);
    transition:
      opacity .95s cubic-bezier(.22, .61, .36, 1),
      transform 1.05s cubic-bezier(.22, .61, .36, 1),
      filter .95s cubic-bezier(.22, .61, .36, 1);
  }
  /* Cards sit slightly further back and come forward — a real Z move, small
     enough that it never reads as a zoom. */
  .people .principles {
    perspective: 900px;
    perspective-origin: 50% 40%;
  }
  .people .principles li {
    transform: translateY(14px) translateZ(-26px);
    transition:
      opacity 1.05s cubic-bezier(.22, .61, .36, 1),
      transform 1.2s cubic-bezier(.22, .61, .36, 1),
      filter 1.05s cubic-bezier(.22, .61, .36, 1),
      box-shadow .5s cubic-bezier(.22, .61, .36, 1),
      border-color .35s ease;
  }

  .people.is-revealed #people-title,
  .people.is-revealed .people__intro p,
  .people.is-revealed .people__portrait-wrap,
  .people.is-revealed .principles li {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }

  .people.is-revealed #people-title              { transition-delay: 240ms; }
  .people.is-revealed .people__intro p:nth-child(1) { transition-delay: 390ms; }
  .people.is-revealed .people__intro p:nth-child(2) { transition-delay: 540ms; }
  /* On desktop this sits beside the text (own grid column) so it reads as
     arriving together with it. On mobile it now sits below both paragraphs in
     source order, so its delay follows them for the same reason: the reveal
     order should match the order things actually appear on screen. */
  .people.is-revealed .people__portrait-wrap        { transition-delay: 660ms; }
  .people.is-revealed .principles li:nth-child(1)   { transition-delay: 800ms; }
  .people.is-revealed .principles li:nth-child(2)   { transition-delay: 950ms; }
  .people.is-revealed .principles li:nth-child(3)   { transition-delay: 1100ms; }

  /* accent rules draw in after their card has landed */
  .principles li::before {
    transition: transform .85s cubic-bezier(.22, .61, .36, 1);
  }
  .people.is-revealed .principles li::before { transform: scaleX(1); }
  .people.is-revealed .principles li:nth-child(1)::before { transition-delay: 1120ms; }
  .people.is-revealed .principles li:nth-child(2)::before { transition-delay: 1270ms; }
  .people.is-revealed .principles li:nth-child(3)::before { transition-delay: 1420ms; }

  .people__names { transition: background-size 1.1s cubic-bezier(.22, .61, .36, 1) .74s; }
  .people.is-revealed .people__names { background-size: 100% 2px; }

  /* --------------------------------------------------------------- hover
     A lift and a light change, nothing more. --tilt-x/--tilt-y are written by
     people-motion.js on fine pointers only and are clamped there to ~1.6deg,
     so the card leans toward the cursor instead of rotating. */
  .people .principles li {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
  }
  @media (hover: hover) and (pointer: fine) {
    .people.is-revealed .principles li:hover {
      transform:
        translateY(-3px)
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y));
      border-color: rgba(182, 255, 46, .3);
      box-shadow:
        0 1px 2px rgba(16, 32, 25, .05),
        0 28px 50px -28px rgba(16, 32, 25, .42),
        0 0 0 1px rgba(182, 255, 46, .08);
    }
    .people.is-revealed .principles li:hover::before {
      background: linear-gradient(90deg, #B6FF2E, rgba(182, 255, 46, .2));
    }
  }

  /* ------------------------------------------------------------- ambient
     One very slow, very small drift of the background wash. 48s, opacity and a
     few pixels only — at this speed it is felt rather than seen, and it never
     competes with reading. */
  .people::before {
    animation: peopleDrift 48s ease-in-out infinite alternate;
    will-change: opacity, transform;
  }
  @keyframes peopleDrift {
    from { opacity: .82; transform: translate3d(0, 0, 0); }
    to   { opacity: 1;   transform: translate3d(0, -10px, 0); }
  }
}

/* Keyboard parity with hover — never hover-only. */
.people .principles li:focus-within {
  border-color: rgba(182, 255, 46, .35);
  box-shadow:
    0 1px 2px rgba(16, 32, 25, .05),
    0 28px 50px -28px rgba(16, 32, 25, .42);
}

/* ------------------------------------------------------------- mobile --
   Cards keep their surface but drop the Z work: perspective on a narrow
   column reads as distortion, and tilt has no cursor to follow. */
@media (max-width: 760px) {
  .principles li { padding: 18px 18px 20px; }
  .people .principles { perspective: none; }
  .people .principles li { transform: translateY(14px); }
  .people.is-revealed .principles li { transform: none; }
}

/* --------------------------------------------------- reduced motion --
   No entrance, no drift, no tilt. The card surfaces, the accent rules and the
   underline are all present at their final state immediately. */
@media (prefers-reduced-motion: reduce) {
  .people #people-title,
  .people .people__intro p,
  .people .people__portrait-wrap,
  .people .principles li { opacity: 1; transform: none; filter: none; }
  .principles li::before { transform: scaleX(1); }
  .people__names { background-size: 100% 2px; }
  .people::before { animation: none; }
}