/* =============================================================
   flow.css — styles for the stacked-panel scroll effect
   Pairs with js/flow.js. Uses the site's design tokens.
   ============================================================= */

.flow { width: 100%; }

/* Each panel pins to the top of the viewport (the "stack"). */
.flow-section {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;          /* clip the rotated inner */
}

/* The inner panel is what rotates. It must be fully opaque so it
   covers the panel beneath it once it settles. */
.flow-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(5rem, 11vh, 8rem) var(--gutter) clamp(2rem, 5vw, 4rem);
  transform-origin: bottom left;   /* the hinge */
  will-change: transform;
  background: var(--paper);
  color: var(--ink);
}

/* Panel colour variants — alternate light/dark so the rotate-in
   reveal reads clearly as each panel swings over the last. */
.flow-inner--paper  { background: var(--paper);   color: var(--ink); }
.flow-inner--panel  { background: var(--paper-2);  color: var(--ink); }
.flow-inner--ink    { background: var(--ink);      color: var(--paper); }
.flow-inner--ink .label,
.flow-inner--ink .flow__teaser { color: rgba(244,241,234,0.7); }

/* Top row of a panel — small label / index */
.flow__top { display: flex; justify-content: space-between; gap: var(--space-md); }

/* Body: image + big type */
.flow__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: end;
}

/* Work panels (those with an image + name): keep the label at the top,
   then let the image+name fill the space below it and sit CENTRED —
   instead of space-between dropping the content to the very bottom. */
.flow-inner:has(.flow__body) { justify-content: flex-start; }
.flow-inner:has(.flow__body) .flow__body {
  flex: 1 1 auto;       /* fill the space under the label   */
  align-content: center; /* centre the row(s) vertically     */
}

.flow__media {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  margin: 0;
}
.flow__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

.flow__name {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}
.flow__teaser {
  font-size: var(--step-md);
  color: var(--ink-soft);
  max-width: 40ch;
  margin-top: var(--space-sm);
}
.flow__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-md);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: gap 0.3s var(--ease);
}
.flow__cta:hover, .flow__cta:focus-visible { gap: 1.4rem; }

/* Big centred statement panel (intro / outro) */
.flow__statement {
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  max-width: 18ch;
}

@media (min-width: 48rem) {
  .flow__body {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
  }
  .flow__media { aspect-ratio: 4 / 3; }
}


/* =============================================================
   TILT-IN REVEAL — readable pages (About + case studies)
   Same swing-up motion, as a scroll reveal. No pinning.
   ============================================================= */
.tilt-in {
  opacity: 0;
  transform: rotate(6deg) translateY(46px);
  transform-origin: bottom left;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: transform, opacity;
}
.tilt-in.is-in { opacity: 1; transform: none; }

/* No-JS safety net: never hide content. */
.no-js .tilt-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tilt-in { opacity: 1; transform: none; transition: none; }
}


/* =============================================================
   MOBILE — same pin-and-rotate reveal as desktop.
   Phones used to get a flat scroll-snap (panels un-pinned, rotation
   killed). Kerry wanted the full swing-up impact on mobile too, so
   we no longer override anything here: the panels stay sticky-pinned
   and js/flow.js rotates each one in, exactly like the desktop.
   ============================================================= */
@media (max-width: 768px) {
  /* Title panels: centre the heading + intro line in the space below
     the top label (instead of pinning the intro to the very bottom),
     so the next panel's rotating corner doesn't cover the text before
     it's been read. Tester feedback, June 2026. */
  .flow-inner:has(> .hero__sub) > .hero__lines,
  .flow-inner:has(> .hero__sub) > .flow__statement { margin-top: auto; }
  .flow-inner > .hero__sub { margin-bottom: auto; }
}