/* QC Devworks / Flow layer (2026-09-27)
 * Every effect sits behind .fl-on, which the flow script sets only when motion is
 * allowed. Motion uses individual transform properties (translate/scale) and
 * backwards-filled animations so the site's own transforms and transitions keep
 * working. Nothing here changes content, order or reading flow. */

/* ------------------------------------------------------------------ *
 * Page progress
 * ------------------------------------------------------------------ */

.fl-progress {
  position: fixed;
  inset: var(--qf-safe-top, 0px) 0 auto;
  z-index: 100001;
  height: 2px;
  pointer-events: none;
}

.fl-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--qf-blue, #2767ff), var(--qf-violet, #7957ff) 70%, var(--qf-cyan, #9ab8ef));
  transform: scaleX(var(--fl-page, 0));
  transform-origin: 0 50%;
  box-shadow: 0 0 12px rgba(39, 103, 255, .55);
}

html.fl-smooth {
  scroll-behavior: auto !important;
}

/* ------------------------------------------------------------------ *
 * Hero curtain
 * ------------------------------------------------------------------ */

.fl-on .fl-hero {
  position: sticky;
  top: var(--fl-pin, 0px);
  z-index: 0;
}

.fl-on .fl-hero > :not(.fl-hero__shade) {
  translate: 0 calc(var(--fl-cover, 0) * -7vh);
  scale: calc(1 - var(--fl-cover, 0) * .05);
  transform-origin: 50% 35%;
}

.fl-hero__shade {
  display: none;
}

.fl-on .fl-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: block;
  background: radial-gradient(120% 90% at 50% 100%, #01060e 0%, #020a16 70%);
  opacity: calc(var(--fl-cover, 0) * .78);
  pointer-events: none;
}

.fl-on .fl-hero.fl-covered {
  visibility: hidden;
}

.fl-on .fl-sheet--flow {
  position: relative;
}

.fl-on .fl-sheet {
  z-index: 1;
}

.fl-on .fl-sheet.qf-selected {
  z-index: 2;
}

.fl-on .fl-sheet--lead {
  border-radius: clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 34px) 0 0;
  box-shadow: 0 -34px 70px -28px rgba(1, 6, 14, .7);
}

/* The on-page index holds under the header on wide screens. */
.fl-on.fl-wide .qf-page-index {
  position: sticky;
  top: var(--fl-head, 78px);
  z-index: 4;
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

.fl-on.fl-wide .qf-page-index.fl-sheet--lead {
  border-radius: 0;
  box-shadow: 0 -34px 70px -28px rgba(1, 6, 14, .7), 0 12px 30px -24px rgba(7, 17, 31, .45);
}

.fl-on .qf-page-index a {
  position: relative;
}

.fl-on .qf-page-index a::after {
  content: "";
  position: absolute;
  inset: auto 0 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--qf-blue, #2767ff);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s var(--qf-ease, ease);
}

.fl-on .qf-page-index a.fl-here {
  color: #194ed6;
}

.fl-on .qf-page-index a.fl-here::after {
  transform: scaleX(1);
}

.fl-on.fl-wide main [id] {
  scroll-margin-top: calc(var(--fl-head, 78px) + var(--fl-index, 0px) + 12px);
}

/* ------------------------------------------------------------------ *
 * Headings: word rise
 * ------------------------------------------------------------------ */

.fl-on .fl-words .fl-w {
  display: inline-block;
}

.fl-on .fl-words.fl-r:not(.is-in) .fl-w {
  opacity: 0;
}

.fl-on .fl-words.fl-r.is-in:not(.fl-instant) .fl-w {
  animation: fl-word 1.05s var(--qf-ease, ease) backwards;
  animation-delay: calc(var(--fl-i, 0) * 55ms);
}

@keyframes fl-word {
  from {
    opacity: 0;
    translate: 0 .62em;
    filter: blur(10px);
  }
}

/* ------------------------------------------------------------------ *
 * Groups and intro copy
 * ------------------------------------------------------------------ */

.fl-on .fl-group.fl-r:not(.is-in) > *,
.fl-on .fl-lead.fl-r:not(.is-in) {
  opacity: 0;
}

.fl-on .fl-group.fl-r.is-in:not(.fl-instant) > * {
  animation: fl-rise .95s var(--qf-ease, ease) backwards;
  animation-delay: calc(var(--fl-i, 0) * 85ms + 60ms);
}

.fl-on .fl-lead.fl-r.is-in:not(.fl-instant) {
  animation: fl-rise .95s var(--qf-ease, ease) .18s backwards;
}

@keyframes fl-rise {
  from {
    opacity: 0;
    translate: 0 36px;
    filter: blur(6px);
  }
}

/* ------------------------------------------------------------------ *
 * Media opens from a rounded window
 * ------------------------------------------------------------------ */

.fl-on .fl-media {
  clip-path: inset(calc((1 - var(--fl-open, 1)) * 9%) calc((1 - var(--fl-open, 1)) * 7%) round calc(8px + (1 - var(--fl-open, 1)) * 28px));
}

.fl-on .fl-media img,
.fl-on .fl-media video {
  scale: calc(1 + (1 - var(--fl-open, 1)) * .16);
}

/* ------------------------------------------------------------------ *
 * Dark bands open from an inset card to full bleed
 * ------------------------------------------------------------------ */

.fl-on .fl-band {
  clip-path: inset(0 calc((1 - var(--fl-open, 1)) * 3.4vw) round calc((1 - var(--fl-open, 1)) * 48px));
}

/* ------------------------------------------------------------------ *
 * Sticky split scrollytelling
 * ------------------------------------------------------------------ */

.fl-on.fl-wide .fl-split .qf-content-section__grid,
.fl-on.fl-wide .fl-split .qf-split {
  align-items: start;
}

.fl-on.fl-wide .fl-split .qf-content-section__grid > header,
.fl-on.fl-wide .fl-split .qf-split > h2 {
  position: sticky;
  top: calc(var(--fl-head, 78px) + var(--fl-index, 0px) + 44px);
}

.fl-on.fl-wide .qf-content-section.fl-split .qf-content-list > article {
  transition: opacity .55s var(--qf-ease, ease);
}

.fl-on.fl-wide .qf-content-section.fl-split .qf-content-list > article:not(.fl-focus):not(:hover):not(:focus-within) {
  opacity: .36;
}

.fl-count {
  display: none;
}

.fl-on.fl-wide .fl-count {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 10px 12px;
  margin-top: clamp(28px, 3vw, 44px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fl-on.fl-wide .fl-count::before {
  content: attr(data-n);
  display: block;
  position: static;
  font-size: clamp(52px, 5vw, 76px);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--qf-blue, #2767ff);
}

.fl-on.fl-wide .fl-count::after {
  content: attr(data-of);
  display: block;
  position: static;
  grid-row: 1;
  grid-column: 2;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .08em;
  color: var(--qf-muted, #536579);
}

.fl-count i {
  grid-column: 1 / -1;
  display: block;
  width: min(220px, 100%);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--qf-blue, #2767ff), var(--qf-violet, #7957ff)) 0 0 / calc(var(--fl-through, 0) * 100%) 100% no-repeat, #d8e1ec;
}

.qf-dark .fl-count i {
  background-color: rgba(255, 255, 255, .16);
}

/* ------------------------------------------------------------------ *
 * Pinned stage scenes
 * ------------------------------------------------------------------ */

.fl-on .fl-pin {
  overflow: clip;
}

.fl-on .fl-pin > .qf-shell,
.fl-on .fl-pin .qf-playground__layout {
  position: sticky;
  top: var(--fl-pin-top, 0px);
}

.fl-on .fl-pin .qv-delivery__artifacts > li,
.fl-on .fl-pin [data-workflow-sheet] {
  transition-duration: .6s;
}

/* A slim track shows how far through the scene the reader is. */
.fl-pin__track {
  display: none;
}

/* Out of flow so it never changes the height the pin was measured at. */
.fl-on .fl-pin .fl-pin__track {
  position: absolute;
  inset: auto 0 -2px;
  display: block;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--qf-blue, #2767ff), var(--qf-cyan, #9ab8ef)) 0 0 / calc(var(--fl-pin-p, 0) * 100%) 100% no-repeat, rgba(255, 255, 255, .14);
}

/* ------------------------------------------------------------------ *
 * Footer uncover
 * ------------------------------------------------------------------ */

.fl-footer-reveal main#primary,
.fl-footer-reveal .fl-tail {
  position: relative;
  z-index: 1;
}

.fl-footer-reveal main#primary {
  background: #fff;
}

.fl-footer-reveal main#primary:last-of-type,
.fl-footer-reveal .fl-tail:last-of-type {
  box-shadow: 0 40px 80px -40px rgba(1, 6, 14, .55);
}

.fl-footer-reveal .qf-footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
}

.fl-footer-reveal .qf-footer > .qf-shell {
  opacity: calc(.35 + var(--fl-uncover, 1) * .65);
  translate: 0 calc((1 - var(--fl-uncover, 1)) * -70px);
}

/* ------------------------------------------------------------------ *
 * Pointer: spotlight cards, magnetic calls to action
 * ------------------------------------------------------------------ */

.fl-spot {
  isolation: isolate;
}

.fl-spot--rel {
  position: relative;
}

.fl-spot__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(300px circle at var(--fl-mx, 50%) var(--fl-my, 50%), rgba(39, 103, 255, .13), rgba(121, 87, 255, .05) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--qf-ease, ease);
}

.qf-dark .fl-spot__glow {
  background: radial-gradient(300px circle at var(--fl-mx, 50%) var(--fl-my, 50%), rgba(154, 184, 239, .2), rgba(39, 103, 255, .08) 45%, transparent 70%);
}

.fl-spot:hover > .fl-spot__glow {
  opacity: 1;
}

.fl-on .fl-magnet {
  translate: var(--fl-tx, 0px) var(--fl-ty, 0px);
}

/* ------------------------------------------------------------------ *
 * Page to page: cross-document view transitions
 * ------------------------------------------------------------------ */

@view-transition {
  navigation: auto;
}

.qf-header {
  view-transition-name: qf-header;
}

.fl-progress {
  view-transition-name: fl-progress;
}

::view-transition-old(root) {
  animation: fl-vt-out .32s var(--qf-ease, ease) both;
}

::view-transition-new(root) {
  animation: fl-vt-in .6s var(--qf-ease, ease) both;
}

@keyframes fl-vt-out {
  to {
    opacity: 0;
    translate: 0 -24px;
    filter: blur(6px);
  }
}

@keyframes fl-vt-in {
  from {
    opacity: 0;
    translate: 0 40px;
  }
}

/* ------------------------------------------------------------------ *
 * Safety nets
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

@media print {
  .fl-progress,
  .fl-hero__shade,
  .fl-count,
  .fl-spot__glow {
    display: none !important;
  }

  .fl-on .fl-hero,
  .fl-on .fl-pin > .qf-shell,
  .fl-footer-reveal .qf-footer {
    position: static !important;
  }

  .fl-on .fl-r,
  .fl-on .fl-r > *,
  .fl-on .fl-w {
    opacity: 1 !important;
    animation: none !important;
  }

  .fl-on .fl-media,
  .fl-on .fl-band {
    clip-path: none !important;
  }
}