/* ==========================================================================
   Figurative artwork. Inline SVG, so it inherits the theme's currentColor and
   works in light and dark without a second asset. Every piece here is a
   DESIGN placeholder: when real photography arrives it replaces these
   wholesale — see assets/img/README.md for the swap.
   ========================================================================== */

/* --- Hero: two-column, art beside the copy ------------------------------ */
.hero--split .hero__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .hero--split .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-8);
  }
}

/* --- The art frame ------------------------------------------------------- */
.art {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(130% 110% at 20% 12%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 62%),
    linear-gradient(160deg, var(--bg-raised), var(--bg-sunk));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.art svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Colour roles inside the artwork. */
.art .a-line   { stroke: var(--accent); fill: none; }
.art .a-faint  { stroke: var(--accent); fill: none; opacity: 0.28; }
.art .a-dot    { fill: var(--accent); }
.art .a-dot-hi { fill: var(--highlight); }
.art .a-wash   { fill: var(--accent); opacity: 0.07; }
.art .a-panel  {
  fill: var(--bg-raised);
  stroke: var(--line-strong);
  opacity: 0.55;
}

/* Slow drift, so the page feels alive without anything bouncing. */
@media (prefers-reduced-motion: no-preference) {
  .a-drift  { animation: art-drift 18s var(--ease-in-out) infinite alternate; }
  .a-drift2 { animation: art-drift 24s var(--ease-in-out) infinite alternate-reverse; }
  .a-pulse  { animation: art-pulse 6s var(--ease-in-out) infinite; }
}
@keyframes art-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -14px, 0); }
}
@keyframes art-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.85; }
}

/* --- Full-bleed texture band -------------------------------------------- */
.band-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;
}
.band-art svg { width: 100%; height: 100%; }
.has-band-art { position: relative; isolation: isolate; }
.has-band-art > .container { position: relative; z-index: 1; }

/* --- Figure slot: where a real photograph drops in ----------------------- */
.media-slot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  aspect-ratio: 3 / 2;
}
.media-slot img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Motion pass. Everything here sits inside prefers-reduced-motion:
   no-preference, and is scoped to .js so nothing depends on it to be legible.
   ========================================================================== */

/* --- Scroll progress bar ------------------------------------------------ */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--navy-500), var(--orange-500));
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .progress { display: none; } }

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

  /* --- Hero photograph drifts slowly in ---------------------------------- */
  .js .hero__media img {
    animation: ken-burns 28s var(--ease-in-out) both;
    transform-origin: 58% 45%;
  }

  /* --- Header condenses once the page scrolls ---------------------------- */
  .site-header__inner,
  .brand__img {
    transition: min-height var(--dur) var(--ease-out),
                height var(--dur) var(--ease-out);
  }
  .site-header.is-stuck .site-header__inner { min-height: 4.1rem; }
  .site-header.is-stuck .brand__img { height: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); }

  /* --- Eyebrow rule draws itself in -------------------------------------- */
  .js [data-reveal] .eyebrow::before {
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  .js [data-reveal].is-visible .eyebrow::before {
    transform: scaleX(1);
    transition: transform 620ms var(--ease-out) 120ms;
  }

  /* --- "Why work with" rows arrive from the left ------------------------- */
  .js .reasons[data-reveal] > li { transform: translate3d(-22px, 0, 0); }
  .js .reasons[data-reveal].is-visible > li { transform: none; }
  .js .reasons[data-reveal] > li::before {
    transform: scale(0.6);
    opacity: 0;
    transition: transform 620ms var(--ease-out), opacity 460ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms + 140ms);
  }
  .js .reasons[data-reveal].is-visible > li::before { transform: none; opacity: 1; }

  /* --- Questions arrive from the left, rule growing downward ------------- */
  .js .question-list[data-reveal] > li { transform: translate3d(-26px, 0, 0); }
  .js .question-list[data-reveal].is-visible > li { transform: none; }

  /* --- People pop in ------------------------------------------------------ */
  .js .team-grid[data-reveal] > * { transform: translate3d(0, 20px, 0) scale(0.94); }
  .js .team-grid[data-reveal].is-visible > * { transform: none; }
  .js .team-grid[data-reveal] > * { transition-timing-function: cubic-bezier(0.34, 1.4, 0.5, 1); }

  /* --- Bullets pop as their row lands ------------------------------------ */
  .js [data-reveal] .list-bullet li::before {
    transform: scale(0);
    transition: transform 420ms cubic-bezier(0.34, 1.6, 0.5, 1);
  }
  .js [data-reveal].is-visible .list-bullet li::before { transform: none; }
  .js [data-reveal] .list-bullet li:nth-child(n)::before { transition-delay: 220ms; }
  .js [data-reveal] .list-bullet li:nth-child(2)::before { transition-delay: 280ms; }
  .js [data-reveal] .list-bullet li:nth-child(3)::before { transition-delay: 340ms; }
  .js [data-reveal] .list-bullet li:nth-child(4)::before { transition-delay: 400ms; }
  .js [data-reveal] .list-bullet li:nth-child(5)::before { transition-delay: 460ms; }
  .js [data-reveal] .list-bullet li:nth-child(6)::before { transition-delay: 520ms; }
  .js [data-reveal] .list-bullet li:nth-child(7)::before { transition-delay: 580ms; }

  /* --- Column rules sweep out from the left ------------------------------ */
  .js [data-reveal] .col-heading { border-bottom-color: transparent; }
  .js [data-reveal].is-visible .col-heading {
    border-bottom-color: var(--highlight);
    transition: border-bottom-color 520ms var(--ease-out) 240ms;
  }

  /* --- Logo lifts on hover ------------------------------------------------ */
  .brand { transition: transform var(--dur) var(--ease-out); }
  .brand:hover { transform: translateY(-2px); }

  /* --- Nav underline already grows; add a gentle lift --------------------- */
  .nav__link { transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
  .nav__link:hover { transform: translateY(-1px); }

  /* --- Theme control rotates as it cycles --------------------------------- */
  .theme-toggle svg { transition: transform 420ms var(--ease-out); }
  .theme-toggle:hover svg { transform: rotate(18deg) scale(1.08); }
}

@keyframes ken-burns {
  from { transform: scale(1.001); }
  to   { transform: scale(1.085); }
}

/* ==========================================================================
   Motion pass 2. Same rules: inside prefers-reduced-motion: no-preference,
   scoped to .js, nothing load-bearing for legibility.
   ========================================================================== */

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

  /* --- Headings assemble word by word ------------------------------------ */
  .js .split { perspective: 800px; }
  .js .split .w {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.5em, 0) rotateX(-55deg);
    transform-origin: 50% 100%;
    transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out);
    transition-delay: calc(var(--w, 0) * 65ms);
  }
  .js .split.is-visible .w { opacity: 1; transform: none; }

  /* --- Buttons catch a sweep of light ------------------------------------ */
  .btn { position: relative; overflow: hidden; }
  .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.42) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 720ms var(--ease-out);
    pointer-events: none;
  }
  .btn:hover::after { transform: translateX(120%); }
  .btn--secondary::after,
  .btn--ghost::after { background: linear-gradient(105deg, transparent 35%, rgba(40,50,130,0.14) 50%, transparent 65%); }

  /* --- Footer links draw an underline ------------------------------------ */
  .site-footer a, .footer__list a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size 380ms var(--ease-out), color var(--dur-fast) var(--ease-out);
    text-decoration: none;
  }
  .site-footer a:hover, .footer__list a:hover {
    background-size: 100% 1px;
    text-decoration: none;
  }

  /* --- The question rules grow downward ----------------------------------- */
  .js .question-list[data-reveal] > li {
    border-left-color: transparent;
    background-image: linear-gradient(var(--highlight), var(--highlight));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 2px 0%;
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out),
                background-size 620ms var(--ease-out);
  }
  .js .question-list[data-reveal].is-visible > li {
    background-size: 2px 100%;
    transition-delay: calc(var(--i, 0) * 80ms);
  }

  /* --- Portraits tilt toward the pointer ---------------------------------- */
  .team-card { perspective: 700px; }
  .team-card__avatar {
    transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
    transition: transform 240ms var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
    will-change: transform;
  }
  .team-card:hover .team-card__avatar { transition-duration: 90ms; }

  /* --- The measurement grid twinkles -------------------------------------- */
  .band-art circle { animation: twinkle 5.5s var(--ease-in-out) infinite; }
  .band-art circle:nth-child(3n)  { animation-duration: 7.5s; animation-delay: -1.2s; }
  .band-art circle:nth-child(4n)  { animation-duration: 9s;   animation-delay: -2.6s; }
  .band-art circle:nth-child(5n)  { animation-duration: 6.5s; animation-delay: -3.9s; }
  .band-art circle:nth-child(7n)  { animation-duration: 11s;  animation-delay: -0.6s; }

  /* --- Hero parallax, driven from JS -------------------------------------- */
  .js .hero__media { transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }
  .js .hero__body  { opacity: var(--heroFade, 1); }

  /* --- Theme control pops when it changes --------------------------------- */
  .theme-toggle.is-changing svg { animation: icon-pop 420ms var(--ease-out); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
@keyframes icon-pop {
  0%   { transform: rotate(-90deg) scale(0.4); opacity: 0; }
  60%  { transform: rotate(8deg) scale(1.12); opacity: 1; }
  100% { transform: none; opacity: 1; }
}