/* ============================================================
   ADOL — FLOW CAROUSEL
   Shared by the technology hub AND the one-page journey, which is why it
   lives in its own file: index.html cannot load css/tech.css, because both
   files define .chip for unrelated things.
   Requires the brand tokens from css/style.css.
   ============================================================ */

/* MOTION CONTRACT
   Ten top-rated articles on a drifting arc. js/tech-flow.js writes transform,
   opacity, filter and z-index on every frame, so NOTHING here may put a
   transition on those properties for .flow-card — a transition would fight the
   rAF loop and turn the drag into rubber. Hover styling therefore only touches
   properties the loop never writes (border, shadow, inner transform).
   ============================================================ */

.flow {
  /* Card box as variables so the compact variant (the one-page journey's
     #pageTech panel, which must fit exactly one viewport) can resize the whole
     carousel by overriding two values instead of four coupled rules. */
  --card-w: clamp(200px, 21vw, 272px);
  --card-h: clamp(240px, 30vh, 320px);
  --stage-h: clamp(258px, 33vh, 380px);
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1.4rem, 6vw, 6rem) clamp(1rem, 3vh, 2rem);
}
.flow[hidden] { display: none; }

.flow__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(0.6rem, 1.6vh, 1.1rem);
}
.flow__head .s-eyebrow { margin-bottom: 0; }
.flow__hint {
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 34%, transparent);
  transition: color 0.4s var(--ease-out);
}
.flow.is-held .flow__hint { color: var(--gold-bright); }

.flow-stage {
  position: relative;
  height: var(--stage-h);
  perspective: 1400px;
  perspective-origin: 50% 46%;
  cursor: grab;
  /* Vertical page scrolling must still work when a drag starts on the stage. */
  touch-action: pan-y;
  /* Cards fade out into the page edges instead of being cut off by the frame. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.flow-stage.is-dragging { cursor: grabbing; }

.flow-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.flow-card {
  --accent: hsl(var(--cat-hue, 42) 62% 60%);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-w);
  height: var(--card-h);
  margin: calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2);
  text-decoration: none;
  color: inherit;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  /* No transition here on purpose — see the block comment above. */
}
.flow-card:focus-visible { outline: none; }

.flow-card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* 900deg = two and a half turns landing on the back face. The curve is
     deliberately front-loaded and long-tailed so the card launches into the
     spin and coasts to rest rather than easing symmetrically.
     KEEP IN STEP with FLIP_MS / VEIL_AT / NAV_AT in js/tech-flow.js. */
  transition: transform 1.3s cubic-bezier(0.06, 0.86, 0.14, 1);
}

.flow-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: linear-gradient(168deg, color-mix(in srgb, var(--accent) 13%, var(--ink-2)), var(--ink) 62%);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 22px 50px -30px rgba(0, 0, 0, 0.9);
  transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.flow-card.is-centre .flow-card__front {
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  box-shadow: 0 30px 64px -28px color-mix(in srgb, var(--accent) 55%, transparent);
}
.flow-card:hover .flow-card__front {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
}

/* The IMAGE yields, never the text. Sized with flex rather than an
   aspect-ratio so that whatever height is left after the three text rows goes
   to the picture — a short card crops the photo instead of squeezing the
   title to zero height, which is exactly what a fixed ratio did here. */
.flow-card__media {
  display: block;
  flex: 1 1 auto;
  min-height: 48px;
  overflow: hidden;
  background: var(--ink-2);
}
.flow-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.flow-card__cat {
  flex: none;
  font-size: 0.53rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--cat-hue, 42) 70% 76%);
  padding: 0.7rem 0.9rem 0.28rem;
}
.flow-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.94rem;
  line-height: 1.28;
  color: var(--cream);
  flex: none;
  padding: 0 0.9rem;
  margin-bottom: 0.42rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flow-card__meta {
  flex: none;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-soft);
  padding: 0 0.9rem 0.8rem;
}

/* ---- back face: the text the flip carries into the article ---- */
.flow-card__back {
  transform: rotateY(180deg);
  justify-content: center;
  gap: 0.55rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: linear-gradient(168deg, color-mix(in srgb, var(--accent) 20%, var(--ink-2)), var(--ink) 70%);
}
.flow-card__line {
  opacity: 0;
  transform: translateY(14px);
}
.flow-card__back-cat {
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: hsl(var(--cat-hue, 42) 70% 78%);
}
.flow-card__back-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.26;
  color: var(--cream);
}
.flow-card__back-excerpt {
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--cream-soft);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flow-card__back-cta {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-top: 0.3rem;
}

/* ---- the flip ---- */
.flow-card.is-flipping .flow-card__inner {
  transform: rotateY(900deg) scale(1.18);
}
/* The four text rows arrive in sequence once the card is past edge-on, so the
   copy reads as being drawn out of the card rather than appearing with it. */
.flow-card.is-flipping .flow-card__line {
  animation: flow-line-in 0.42s var(--ease-out) forwards;
}
.flow-card.is-flipping .flow-card__back-cat { animation-delay: 0.86s; }
.flow-card.is-flipping .flow-card__back-title { animation-delay: 0.93s; }
.flow-card.is-flipping .flow-card__back-excerpt { animation-delay: 1.00s; }
.flow-card.is-flipping .flow-card__back-cta { animation-delay: 1.07s; }
@keyframes flow-line-in {
  to { opacity: 1; transform: none; }
}

/* Everything that is not the chosen card clears out of the way. */
.flow.is-leaving .flow-card:not(.is-flipping) {
  transition: opacity 0.4s var(--ease-out), transform 0.55s var(--ease-out);
  opacity: 0 !important;
  filter: blur(6px) !important;
}
.flow.is-leaving .flow__head,
.flow.is-leaving .flow-dots { transition: opacity 0.3s; opacity: 0; }
.flow.is-leaving .flow-stage {
  -webkit-mask-image: none;
  mask-image: none;
  cursor: default;
}

/* Cream wipe matching the article page's reading surface, so the hand-off
   between the two documents is a continuation rather than a flash. */
.flow-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #f7f2e8;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.flow-veil.is-on { opacity: 1; transform: none; pointer-events: all; }

/* ---- position dots ---- */
.flow-dots {
  display: flex;
  justify-content: center;
  gap: 0.42rem;
  margin-top: clamp(0.6rem, 1.6vh, 1rem);
}
.flow-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 22%, transparent);
  transition: background 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.flow-dot.is-on {
  background: var(--gold-bright);
  transform: scale(1.7);
}

@media (max-width: 720px) {
  .flow-stage {
    height: clamp(270px, 40vh, 330px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .flow__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Drift is disabled in JS; the flip is reduced to a fade so clicking a card
     still reads as a deliberate hand-off rather than a jump cut. */
  .flow-card__inner { transition: none; }
  .flow-card.is-flipping .flow-card__inner { transform: none; }
  .flow-card.is-flipping .flow-card__line { animation: none; opacity: 1; transform: none; }
  .flow-card.is-flipping .flow-card__back { display: none; }
}



/* ---- compact variant: the #pageTech panel on the one-page journey ----
   That panel is a conductor STOP, so everything in it has to sit inside one
   viewport or its lower half becomes unreachable. */
.flow--compact {
  --card-w: clamp(164px, 16vw, 212px);
  --card-h: clamp(196px, 24vh, 248px);
  --stage-h: clamp(212px, 26vh, 268px);
  max-width: none;
  padding: 0;
}
.flow--compact .flow__head { margin-bottom: 0.5rem; }
.flow--compact .flow-card__title { font-size: 0.82rem; -webkit-line-clamp: 2; line-clamp: 2; }
.flow--compact .flow-card__cat { padding: 0.55rem 0.75rem 0.22rem; }
.flow--compact .flow-card__meta { padding: 0 0.75rem 0.62rem; }
.flow--compact .flow-card__title { padding: 0 0.75rem; }
.flow--compact .flow-dots { margin-top: 0.55rem; }