/* ==========================================================================
   PROJETO — layout that only exists on this page. Text, boxes and images come from presets.css; the knob cards (.kcard), the roll buttons (.rollbtn),
   the pills, the pop-ups (lightbox for the tag, .sheet--article for the concept texts) and the reveals come from components.css.
   The page is built by assets/js/projeto.js from data/projeto.js. Proportions are measured on the sketch (canvas ≈ 690px, content ≈ 550px = the container).
   ========================================================================== */

.proj-section { margin-top: clamp(2.5rem, 6vw, 8rem); }

/* ---------- opening box: title + text on the left, the tag button on the right ---------- */
.proj-box { padding-block: clamp(1.1rem, 3.8vw, 5rem); }
.proj-hero { margin-inline: clamp(var(--edge), 2vw, 3rem); }
.proj-hero__inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--marquee-gap); }
.proj-hero__text { flex: 0 1 68%; display: grid; gap: clamp(0.75rem, 2vw, 2.5rem); }
.proj-hero__text h1, .proj-hero__text p { margin: 0; }
.proj-hero__text p { max-width: 34em; }
.proj-tag { flex: 0 0 auto; width: clamp(9.5rem, 15.5vw, 21rem); aspect-ratio: 1; padding: 0.55em 0.6em; }   /* + .kcard .pill-2 .fill-white .text-ui */
.proj-tag .kcard__body { display: block; }
@media (max-width: 639px) {   /* phones: the text stays on the left and the tag button on the right, side by side */
  .proj-hero__inner { flex-wrap: nowrap; align-items: flex-start; }
  .proj-hero__text { flex: 1 1 auto; min-width: 0; }
  .proj-tag { width: 7.6rem; }
}

/* ---------- Produção = ecologia: photo (5) + text (7), tops aligned ---------- */
.proj-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(1.5rem, 5vw, 6rem); align-items: start; }
.proj-split__media { aspect-ratio: 1.7; }
.proj-split__text { display: grid; gap: clamp(0.6rem, 1.4vw, 1.6rem); }
.proj-split__text h2, .proj-split__text p { margin: 0; }
.proj-split__text h2 { margin-top: -0.1em; }   /* the cap top lines up with the photo's top edge (§3) */
.proj-split__text p { max-width: 24em; }
@media (max-width: 639px) { .proj-split { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; } }

/* ---------- timeline: the section is tall and its content sticks to the screen while you scroll through it (assets/js/projeto.js: initTimeline) ---------- */
.timeline { --line: 0; height: calc(100svh + var(--tl-n, 5) * 55svh); }
.timeline__pin { position: sticky; top: 0; height: 100svh; box-sizing: border-box; display: grid; align-content: center; padding-top: clamp(5rem, calc(8vw + 12px), 13rem); padding-bottom: 1.25rem; }
.timeline__inner { display: grid; gap: clamp(1.25rem, 3.5vw, 4.5rem); }
.timeline__inner h2 { margin: 0; }
/* without motion, or when the window is too short for it: no pin, everything shown */
.timeline.is-static { height: auto; }
.timeline.is-static .timeline__pin { position: static; height: auto; padding-top: 0; }

/* the line with its five dots (year k is at k/(n−1) of the width); texts alternate above and below like the sketch; the last one is right-aligned */
.tl { --tl-dot: clamp(1rem, 1.7vw, 2.2rem); position: relative; container-type: inline-size; height: clamp(12rem, 27vw, 25rem); margin: 0; padding: 0; list-style: none; }
.tl__track { position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--rim) * 1.4); margin-top: calc(var(--rim) * -0.7); background: var(--blue-100); }
.tl__line { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--line, 0)) * 100%) 0 0); transition: clip-path 140ms linear; }   /* the liquid gradient, revealed as you scroll */
.tl__item { position: absolute; top: 50%; left: calc(var(--i) / (var(--tl-n) - 1) * 100%); width: 0; height: 0; }
.tl__dot {   /* an open ring that pops in, then fills with the liquid blue (a documented circle: .pill-circle) */
  position: absolute; left: 0; top: 0; width: var(--tl-dot); height: var(--tl-dot); margin: calc(var(--tl-dot) / -2) 0 0 calc(var(--tl-dot) / -2);
  box-sizing: border-box; border: calc(var(--rim) * 1.4) solid var(--blue-500); background: var(--color-white);
  transform: scale(0); transition: transform var(--dur-2) var(--ease-out);
}
.tl__fill { position: absolute; inset: calc(var(--rim) * 0.7); transform: scale(0); transition: transform var(--dur-2) var(--ease-out) 0.3s; }
.tl__text {
  position: absolute; left: calc(var(--tl-dot) * -0.5); width: 24cqw; opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out) 0.18s, transform var(--dur-3) var(--ease-out) 0.18s;
}
.tl__text > * { margin: 0; }
.tl__text p { margin-top: 0.3em; }
.tl__item.is-up .tl__text { bottom: calc(var(--tl-dot) * 0.5 + var(--marquee-gap)); transform: translateY(0.9rem); }
.tl__item.is-down .tl__text { top: calc(var(--tl-dot) * 0.5 + var(--marquee-gap)); transform: translateY(-0.9rem); }
.tl__item:last-child .tl__text { left: auto; right: calc(var(--tl-dot) * -0.5); text-align: right; }
.tl__item.is-on .tl__dot, .tl__item.is-on .tl__fill { transform: scale(1); }
.tl__item.is-on .tl__text { opacity: 1; transform: none; }

/* the box below the line (it stays on screen with the timeline): a short text and the white roll button that opens the PDF */
.tl__box { display: flex; align-items: center; justify-content: space-between; gap: var(--marquee-gap); padding: calc(var(--box-pad) * 0.7) var(--box-pad); }
.tl__box p { margin: 0; max-width: 32em; }
.tl__box .rollbtn { flex: 0 1 auto; }

/* phones: the line runs vertically, the dots on the left and the texts beside them */
@media (max-width: 639px) {
  .tl { height: auto; container-type: normal; display: grid; gap: 1.1rem; padding-left: calc(var(--tl-dot) + 1rem); }
  .tl__track { left: calc(var(--tl-dot) / 2 - var(--rim) * 0.7); right: auto; top: 0; bottom: 0; width: calc(var(--rim) * 1.4); height: auto; margin: 0; }
  .tl__line { clip-path: inset(0 0 calc((1 - var(--line, 0)) * 100%) 0); }
  .tl__item { position: relative; top: auto; left: auto; width: auto; height: auto; }
  .tl__dot { left: calc(-1 * (var(--tl-dot) + 1rem) + var(--tl-dot) / 2); top: 0.35em; }
  .tl__text, .tl__item:last-child .tl__text, .tl__item.is-up .tl__text, .tl__item.is-down .tl__text { position: static; width: auto; text-align: left; transform: translateY(0.6rem); }
  .tl__item.is-on .tl__text { transform: none; }
  .tl__box { flex-direction: column; align-items: stretch; }
}

/* ---------- Mundo: the giant word, the button, the sphere on top of the letters and the text at the bottom right ---------- */
.mundo { --mundo-fs: clamp(6rem, 22vw, 26rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--marquee-gap); align-items: start; }
.mundo__mark {   /* a graphic mark: one-off size outside the font tokens, weight 700 (§5) */
  grid-column: 1 / 9; grid-row: 1; position: relative; z-index: 1; margin: 0;
  font-size: var(--mundo-fs); font-weight: 700; line-height: var(--lh); letter-spacing: var(--tracking);
}
.mundo__btn { grid-column: 1 / 5; grid-row: 2; margin-top: calc(var(--marquee-gap) - 1rem); position: relative; z-index: 3; }
.sphere { grid-column: 4 / 10; grid-row: 1 / 4; position: relative; z-index: 2; container-type: inline-size; aspect-ratio: 1; margin-top: calc(var(--mundo-fs) * 0.62); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.sphere:active { cursor: grabbing; }
.sphere__flag { position: absolute; overflow: hidden;   /* + .pill-3: the smallest radius there is, and it does not follow the flag's size */ left: 50%; top: 50%; width: 12cqw; height: 12cqw; object-fit: contain; pointer-events: none; will-change: transform, opacity; }
.mundo__text { grid-column: 10 / 13; grid-row: 3; align-self: end; margin: 0; text-align: right; position: relative; z-index: 3; }
@media (max-width: 899px) {
  .mundo { display: block; }
  .mundo__btn { margin-top: 1rem; }
  .sphere { width: min(100%, 26rem); margin: 1.5rem auto 0; }
  .mundo__text { margin-top: 1.5rem; text-align: left; }
}

/* ---------- section heads: the gradient title on one side, the small text on the other ---------- */
.proj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--marquee-gap); margin-bottom: clamp(1.25rem, 4vw, 5rem); }
.proj-head h2 { margin: 0; flex: 0 1 auto; }
.proj-head p { flex: 0 1 36%; margin: 0; max-width: 30em; }
.proj-head--flip { flex-direction: row-reverse; }
@media (max-width: 639px) { .proj-head, .proj-head--flip { flex-direction: column; align-items: flex-start; } .proj-head p { flex-basis: auto; } }

/* ---------- concept texts: three knob cards (photo + title + short text; the knob is at the bottom right) ---------- */
.proj-cards, .proj-doclist { display: grid; gap: var(--marquee-gap); margin: 0; padding: 0; list-style: none; }
.proj-card { padding: calc(var(--btn-m) * 1.1); }   /* + .kcard .pill-2 .fill-liquid .text-ui */
.proj-card .kcard__body { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); gap: calc(var(--btn-m) * 1.6); align-items: stretch; }
.proj-card__fig { display: block; min-height: 100%; }
.proj-card__fig .img { height: 100%; }
.proj-card__text { display: grid; align-content: start; gap: 0.55em; padding: calc(var(--btn-m) * 0.4) calc(1.1em + 3 * var(--btn-m)) calc(var(--btn-m) * 0.4) 0; min-width: 0; }
.proj-card__text > * { display: block; }
.proj-card__blurb { max-width: 22em; }
@media (max-width: 639px) {
  .proj-card .kcard__body { grid-template-columns: minmax(0, 1fr); }
  .proj-card__fig { aspect-ratio: 2.2; min-height: 0; }
  .proj-card__text { padding-right: 0; padding-bottom: calc(1.1em + 2.4 * var(--btn-m)); }   /* room for the knob under the text */
}

/* ---------- documentation: three cards with a title and a white roll button at the bottom right ---------- */
.proj-doclist { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .proj-doclist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proj-doc { display: grid; align-content: space-between; gap: clamp(1.5rem, 4vw, 5rem); padding: calc(var(--box-pad) * 0.8) calc(var(--box-pad) * 0.8) calc(var(--btn-m) * 1.1); }
.proj-doc h3 { margin: 0; }
.proj-doc .rollbtn { justify-self: end; width: min(100%, 62%); text-align: right; }
@media (max-width: 639px) { .proj-doc .rollbtn { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .tl__dot, .tl__fill, .tl__text, .tl__line { transition: none; }
}


/* ---------- phones (< 640px): everything but the titles and the pop-ups reads one size up (the fine print becomes the small size, the small size the body size);
   the three documentation cards stay side by side ---------- */
@media (max-width: 639px) {
  .proj-hero__text p, .proj-split__text p, .tl__box p, .mundo__text, .proj-head p, .proj-card__blurb, .tl__year { font-size: var(--fs-2); }
  .tl__text p { font-size: var(--fs-2); }
  .proj-doclist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proj-doc { padding: 0.6rem 0.6rem 0.7rem; gap: 1rem; }
  .proj-doc h3 { font-size: var(--fs-1); }   /* three narrow columns: the longest word ("Certificação") has to fit */
  .proj-doc .rollbtn { width: 100%; padding-inline: 0.5em; text-align: center; font-size: var(--fs-1); }
}