/*
  O que fazemos · "Uma folha. Qualquer forma." (round 2)
  Section layout + the stage chrome for modules/o-que-fazemos.js. Load after gami.css and site.css.
  Desktop ≥ 1024: text 5 cols, sticky stage 7 cols. Below: stage (square) above the stacked blocks.
*/

.oqf {
  position: relative; padding-block: clamp(96px, 11vw, 160px);
  /* the stage's height on desktop; the first and last text blocks share it so the stage is whole when they are centred */
  --oqf-stage-h: clamp(520px, calc(100vh - var(--header-h) - 48px), 920px);
  /* text tones for this section: the brand light's warm floor sits behind the text column, so body and labels run
     one step brighter than the site defaults, with a soft ink halo (≥ 4.5:1 body, ≥ 3:1 labels on the brightest floor) */
  --oqf-t2: #DDD8CE;
  --oqf-t3: #C2BCB1;
  --oqf-halo: 0 0 2px rgba(11,13,16,.45), 0 1px 10px rgba(11,13,16,.6), 0 2px 26px rgba(11,13,16,.5);
}
@supports (height: 100svh) { .oqf { --oqf-stage-h: clamp(520px, calc(100svh - var(--header-h) - 48px), 920px); } }
.oqf .s-head__title .g-h2 { max-width: 14ch; }

.oqf__body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter);
  align-items: start;
}

/* ---------- the four text blocks ---------- */
/* the text sits on the column line (same left edge as the eyebrow and H2); the crease hangs in the page margin */
.oqf__steps { grid-column: 1 / span 5; position: relative; margin: 0; padding: 0; list-style: none; }
.oqf__steps::before { /* the crease the blocks hang on */
  content: ""; position: absolute; left: calc(var(--margin) * -.5); top: 0; bottom: 0; width: 1px; background: var(--edge);
}
.oqf__step {
  position: relative; isolation: isolate;
  min-height: 70vh; min-height: 70svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 40px;
  text-shadow: var(--oqf-halo);
}
/* a soft ink pool under each block: the text stays legible wherever the brand light's warm floor lands */
.oqf__step::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 calc(var(--margin) * -1) 0 calc(var(--margin) * -1);
  background: radial-gradient(closest-side, rgba(11,13,16,.5), rgba(11,13,16,.34) 62%, rgba(11,13,16,0));
}
.oqf__step::before { /* TALLY on the crease: snaps, never fades */
  content: ""; position: absolute; left: calc(var(--margin) * -.5 - 1px); top: 50%; width: 3px; height: 0; background: var(--signal);
  transform: translateY(-50%);
}
.oqf__step.is-active::before { height: 96px; }

/* round 3, less noise: the H3 names the service and the stage index carries 01–04, so the kicker is not shown */
.oqf__kicker { display: none; }
.oqf__title {
  font-family: var(--f-display); font-weight: 600; color: var(--text);
  font-size: clamp(1.75rem, 1.05rem + 1.35vw, 2.5rem); line-height: 1.02; letter-spacing: -.028em;
  font-variation-settings: "SHRP" 100; text-wrap: balance; max-width: 16ch; margin: 0;
}
/* FOCO: the title of the block on stage sharpens into place */
@media (min-width: 1024px) {
  .oqf__title { font-variation-settings: "SHRP" 0; transition: font-variation-settings 600ms var(--ease-out); }
  .oqf__step.is-active .oqf__title { font-variation-settings: "SHRP" 100; }
}
.oqf__title .g-pending { font-size: .36em; vertical-align: .55em; margin-left: .5em; letter-spacing: 0; text-shadow: none; }
.oqf__desc { margin: 18px 0 0; max-width: 42ch; font-size: 1.125rem; line-height: 1.5; color: var(--oqf-t2); text-wrap: pretty; }
.oqf__desc .g-pending { text-shadow: none; margin-left: .25em; vertical-align: .12em; white-space: nowrap; }
.oqf__done { margin: 22px 0 0; max-width: 46ch; font-size: .9375rem; line-height: 1.6; color: var(--oqf-t2); text-wrap: pretty; }
.oqf__done-k { /* a plain lead-in, not a micro-label */
  display: block; margin-bottom: 2px;
  font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--oqf-t3);
}
.oqf__done a {
  color: var(--text); white-space: nowrap; /* short project names never break ("LIGA x Awards") */
  text-decoration: underline; text-decoration-color: rgba(250,239,239,.34); text-decoration-thickness: 1px; text-underline-offset: .22em;
  transition: color var(--d-ui) var(--ease-out), text-decoration-color var(--d-ui) var(--ease-out);
}
.oqf__done a:hover { color: var(--text); text-decoration-color: var(--gold); }

@media (min-width: 1024px) {
  /* round 11 pacing: each form gets more than a viewport of scroll. A block's text rides sticky on the fold line
     (the stage's centre) for most of its block, so the text being read holds beside its form, then the next one
     arrives from below and takes over. The first block starts under the stage's top edge; the last one runs on under
     its text, so the laptop holds for a while before the section moves on. */
  .oqf__step { min-height: max(115vh, 1050px); min-height: max(115svh, 1050px); justify-content: flex-start; } /* px floor: short viewports get the same scroll per form */
  .oqf__step:first-child { min-height: calc(var(--oqf-stage-h) + max(60vh, 560px)); }
  .oqf__step:last-child {
    min-height: calc(var(--oqf-stage-h) + 50vh);
    /* the last text lets go of the fold line as the stage lets go of the header: they leave together */
    padding-bottom: max(40px, calc(var(--header-h) / 2 + 24px + var(--oqf-stage-h) - 50vh - var(--oqf-in-half-last, 140px)));
  }
  .oqf__step-in {
    position: sticky; isolation: isolate;
    top: calc((100vh + var(--header-h)) / 2 - var(--oqf-in-half, 140px));
  }
  @supports (height: 100svh) { .oqf__step-in { top: calc((100svh + var(--header-h)) / 2 - var(--oqf-in-half, 140px)); } }
  /* the ink pool and the tally follow the text, not the (now tall) block */
  .oqf__step::after, .oqf__step::before { display: none; }
  .oqf__step-in::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: -56px calc(var(--margin) * -1);
    background: radial-gradient(closest-side, rgba(11,13,16,.5), rgba(11,13,16,.34) 62%, rgba(11,13,16,0));
  }
  .oqf__step-in::before {
    content: ""; position: absolute; left: calc(var(--margin) * -.5 - 1px); top: 50%; width: 3px; height: 0; background: var(--signal);
    transform: translateY(-50%);
  }
  .oqf__step.is-active .oqf__step-in::before { height: 96px; }
  /* blocks that are not on stage step back (still readable: ≥ 3:1 on the brightest floor) */
  .oqf__step > * { transition: opacity 420ms var(--ease-out); }
  .oqf__step:not(.is-active) > * { opacity: .62; }
}

/* ---------- the stage ---------- */
.oqf__stage {
  grid-column: 6 / span 7;
  position: sticky; top: calc(var(--header-h) + 24px);
  height: var(--oqf-stage-h);
}
.oqf-stage__frame { position: relative; width: 100%; height: 100%; isolation: isolate; }
@media (min-width: 1024px) {
  .oqf-stage__frame { container-type: inline-size; container-name: oqf-stage; }
  /* a narrow stage keeps the index to its numbers; the H3 beside it names the form */
  @container oqf-stage (max-width: 660px) {
    .oqf-stage__btn-t { display: none; }
    .oqf-stage__btn { padding: 12px 16px; min-width: 52px; justify-content: center; }
  }
}
.oqf-stage__gl {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 700ms linear;
  touch-action: pan-y;
  /* the floor light fades out before the canvas edge: no visible stage box */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}
.oqf-stage.is-gl .oqf-stage__gl { opacity: 1; }
.oqf-stage__gl[hidden] { display: none; }
.oqf-stage__frame.is-playing .oqf-stage__gl { cursor: pointer; }

.oqf-stage__label {
  position: absolute; top: 18px; margin: 0; z-index: 2;
  font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
  display: flex; align-items: center; gap: 10px;
}
.oqf-stage__label { left: 28px; }
.oqf-stage__label .g-tally { width: 6px; height: 6px; }

.oqf-stage__foot {
  position: absolute; left: 28px; right: 28px; bottom: 22px; z-index: 2;
  display: grid; gap: 12px; justify-items: start;
}
.oqf-stage__index { display: flex; gap: 6px; }
.oqf-stage__btn {
  --ch: 8px;
  position: relative; display: inline-flex; align-items: baseline; gap: 8px;
  min-height: 44px; padding: 12px 14px 12px 12px;
  background: rgba(11,13,16,.55); border: 0; cursor: pointer; color: var(--text-3);
  clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: color var(--d-ui) var(--ease-out), background var(--d-ui) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.oqf-stage__btn:hover { color: var(--text); background: rgba(23,25,30,.8); }
.oqf-stage__btn[aria-pressed="true"] { color: var(--paper-ink); background: var(--paper); box-shadow: none; }
.oqf-stage__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); color: var(--text); }
.oqf-stage__btn[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 2px var(--signal); color: var(--paper-ink); }
.oqf-stage__btn-n { font-family: var(--f-mono); font-stretch: 87.5%; font-size: .75rem; font-variant-numeric: tabular-nums; }
.oqf-stage__btn-t { font-family: var(--f-label); font-stretch: 130%; font-weight: 600; font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; }
.oqf-stage__btn-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--signal); }

.oqf-stage__caption {
  margin: 0; font-size: .6875rem; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
  display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 2px;
  /* one line: the hint (how the pieces connect, or how to play) — reserved so the index never moves */
  min-height: 1.5em; align-content: flex-end;
}
.oqf-stage__hint { color: var(--gold); }
.oqf-stage__hint::before { content: "→ "; }
.oqf-stage__hint[hidden] { display: none; }

/* ---------- static fallback (no WebGL2) ---------- */
/* each illustration's viewBox is cropped to its object, so it fills ~75% of the stage height */
.oqf-stage__fallback { position: absolute; inset: 0; }
/* the illustration box leaves room for the label (top) and the caption + index (bottom) */
.oqf-fb { position: absolute; inset: 60px 24px 136px; margin: 0; opacity: 0; visibility: hidden; }
.oqf-fb.is-on { opacity: 1; visibility: visible; }
.oqf-fb svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- below 1024: stage first, square, then the four blocks ---------- */
@media (max-width: 1023px) {
  .oqf__body { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .oqf__stage {
    order: -1; position: relative; top: auto; height: auto; min-height: 0; max-height: none;
    width: 100%; max-width: 640px; margin: 0 auto 8px;
  }
  .oqf__stage:not(.oqf-stage) { min-height: calc(min(100vw - 2 * var(--margin), 640px) + 92px); } /* reserved before the module mounts: square + caption line + index */
  .oqf-stage__frame { height: auto; display: flex; flex-direction: column; }
  /* the canvas is a true square; caption and segmented control sit below it, never over the object */
  .oqf-stage__gl { position: relative; inset: auto; height: auto; aspect-ratio: 1 / 1; }
  .oqf-stage.is-fallback .oqf-stage__fallback { position: relative; inset: auto; aspect-ratio: 1 / 1; }
  .oqf-fb { inset: 44px 12px 10px; }
  .oqf-stage__label { left: 12px; top: 12px; }
  .oqf-stage__foot { position: static; justify-items: stretch; gap: 12px; margin-top: 4px; }
  .oqf-stage__caption { font-size: .625rem; line-height: 1.5; min-height: 1.5em; align-content: start; } /* one line reserved: the hint never moves the blocks below */
  .oqf-stage__index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; box-shadow: inset 0 0 0 1px var(--edge); }
  .oqf-stage__btn { clip-path: none; box-shadow: none; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 10px; min-height: 52px; background: rgba(11,13,16,.72); }
  .oqf-stage__btn + .oqf-stage__btn { box-shadow: inset 1px 0 0 var(--edge); }
  .oqf-stage__btn-t { font-family: var(--f-display); font-stretch: 100%; letter-spacing: -.005em; text-transform: none; font-size: .8125rem; font-weight: 520; }
  .oqf-stage.is-auto .oqf-stage__btn[aria-pressed="true"] .oqf-stage__btn-bar { animation: oqf-auto 8500ms linear forwards; }

  .oqf__steps { padding: 0; margin-top: 40px; }
  .oqf__steps::before { display: none; }
  .oqf__step { min-height: 0; padding: 32px 0; border-top: 1px solid var(--edge); }
  /* full-width blocks: a wider pool, so line ends over the warm floor stay legible too */
  .oqf__step::after { background: radial-gradient(ellipse 80% 76% at 50% 50%, rgba(11,13,16,.52), rgba(11,13,16,.4) 60%, rgba(11,13,16,0)); }
  .oqf__step::before { left: 0; top: -1px; transform: none; width: 0; height: 2px; }
  .oqf__step.is-active::before { width: 56px; height: 2px; }
  .oqf__desc { font-size: 1.0625rem; }
}
@keyframes oqf-auto { from { width: 0; } to { width: 100%; } }

@media (max-width: 1023px) and (min-width: 700px) {
  .oqf__stage { max-width: none; }
  .oqf__stage:not(.oqf-stage) { min-height: calc((100vw - 2 * var(--margin)) * .625 + 92px); } /* same 16:10 box as mounted */
  .oqf-stage__gl { aspect-ratio: 16 / 10; }
  .oqf-stage.is-fallback .oqf-stage__fallback { aspect-ratio: 16 / 10; }
}

/* reduced motion: hard cuts */
.oqf--still .oqf__step > *, .oqf--still .oqf-stage__gl { transition: none !important; }
.oqf--still .oqf-stage__btn-bar { animation: none !important; }