/* Property Ecosystem: the "Featuring 200+ projects" reel (markup in property-ecosystem.html, motion in
   src/js/project-reel.js).
   Default (no JavaScript, reduced motion): every project card flows in one wrapped group inside the page
   width, so every name is visible. With motion on, the script adds .is-live: each list becomes one full-bleed
   row, the stage pins under the header (when the screen is tall enough) and the rows slide sideways in
   alternating directions as the visitor scrolls. Only transforms change while scrolling. */

.preel { --preel-gap: 10px; }

/* "200+" in the heading: gold, with a gold underline that draws in as the section arrives. The digits are
   tabular; project-reel.js holds them at the width of the final "200", so the count-up from site.js never
   re-wraps the heading. */
.preel__n { position: relative; display: inline-block; color: var(--accent-text); white-space: nowrap; }
.preel__d { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.preel__ul { position: absolute; left: 0.04em; right: 0.04em; bottom: -0.02em; height: 0.085em; border-radius: 0.1em; background: var(--gold-grad); transform-origin: 0 50%; }

/* ---------- Static cards (default) */
.preel__rows { display: flex; flex-wrap: wrap; gap: var(--preel-gap); max-width: calc(var(--wrap) + 32px); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.preel__row { display: contents; margin: 0; padding: 0; list-style: none; }
.preel__card { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 18px; border-radius: 18px; background: var(--panel); color: var(--ink); font: 600 15.5px/1.2 var(--font-body); letter-spacing: -0.012em; }
.preel__card b { font-weight: inherit; }
.preel__card--line { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gold-line); color: var(--accent-text); }
.preel__card--gold { background: var(--gold-grad); color: var(--gold-ink); font-weight: 700; }
.preel__card--shot { padding-block: 7px; padding-left: 7px; }
.preel__ph { position: relative; flex: none; width: 36px; height: 36px; border-radius: 11px; overflow: hidden; background: var(--chip); }
.preel__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); transform: scale(calc(var(--zoom, 1) * 1.6)); transform-origin: var(--origin, 50% 50%); }

.preel__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.preel__more { margin: 0; display: inline-flex; align-items: center; gap: 12px; font: 600 16px/1.35 var(--font-body); letter-spacing: -0.012em; color: var(--ink-2); }
.preel__more::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--gold-grad); flex: none; }
.preel__bar { display: none; }

/* ---------- Live reel (motion on) */
.preel.is-live { --preel-h: clamp(104px, min(15.5vh, 12.5vw), 164px); --preel-gap: clamp(10px, 1.1vw, 16px); --preel-pin: 170vh; }
.preel.is-live .preel__stage { display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 4vh, 44px); overflow: hidden; overflow: clip; }
.preel.is-live .preel__stage > .wrap { width: 100%; }
.preel.is-live .preel__head { margin-bottom: 0; max-width: 880px; }
.preel.is-live .preel__head .h-sec { font-size: clamp(30px, 3.9vw, 56px); line-height: 1.06; letter-spacing: -0.034em; }
.preel.is-live .preel__ul { transform: scaleX(0); will-change: transform; }

.preel.is-live .preel__rows { position: relative; display: grid; width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; overflow: clip; }
/* Soft edges in the page colour, so cards slide in and out rather than being cut. */
.preel.is-live .preel__rows::before, .preel.is-live .preel__rows::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: clamp(24px, 7vw, 132px); pointer-events: none; background: linear-gradient(90deg, var(--bg), rgba(0, 0, 0, 0)); }
.preel.is-live .preel__rows::before { left: 0; }
.preel.is-live .preel__rows::after { right: 0; transform: scaleX(-1); }
.preel.is-live .preel__row { display: flex; flex-wrap: nowrap; gap: var(--preel-gap); width: max-content; padding-left: var(--preel-gap); will-change: transform; backface-visibility: hidden; }

.preel.is-live .preel__card { flex: none; height: var(--preel-h); min-width: calc(var(--preel-h) * 1.45); max-width: calc(var(--preel-h) * 2.6); flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; padding: clamp(16px, 1.6vw, 24px); font-size: clamp(17px, 1.45vw, 22px); line-height: 1.12; letter-spacing: -0.022em; }
.preel.is-live .preel__card::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--gold-grad); flex: none; }
.preel.is-live .preel__card--xl { min-width: calc(var(--preel-h) * 1.8); max-width: calc(var(--preel-h) * 3); font-size: clamp(24px, 2.5vw, 40px); font-weight: 700; line-height: 1.02; letter-spacing: -0.036em; }
.preel.is-live .preel__card--xl::before { width: 36px; }
.preel.is-live .preel__card--line { justify-content: flex-end; font-weight: 500; }
.preel.is-live .preel__card--line::before, .preel.is-live .preel__card--gold::before, .preel.is-live .preel__card--shot::before { content: none; }
.preel.is-live .preel__card--gold { justify-content: flex-end; }

/* Project website cards: a photo from the real ProjectSG-built page, name on a panel pill. */
.preel.is-live .preel__card--shot { width: calc(var(--preel-h) * 2.15); max-width: none; padding: 0; overflow: hidden; justify-content: flex-end; background: var(--chip); }
.preel.is-live .preel__ph { position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; }
.preel.is-live .preel__ph img { transform: scale(var(--zoom, 1)); }
.preel.is-live .preel__card--shot b { position: relative; margin: 0 0 12px 12px; padding: 8px 14px; border-radius: 9999px; background: var(--panel); color: var(--ink); font: 600 15px/1.15 var(--font-body); letter-spacing: -0.01em; }

.preel.is-live .preel__foot { margin-top: 0; }
.preel.is-live .preel__bar { display: block; flex: none; width: min(220px, 34vw); height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.preel.is-live .preel__bar i { display: block; height: 100%; background: var(--gold-grad); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }

/* Pin only when the screen is tall enough to hold the whole stage; shorter screens keep the sliding rows
   without the pin. Stage height = screen minus the sticky header; the track adds the pinned scroll length. */
@media (min-height: 560px) {
  .preel.is-live .preel__track { height: calc(100vh - var(--head-h) + var(--preel-pin)); height: calc(100svh - var(--head-h) + var(--preel-pin)); }
  .preel.is-live .preel__stage { position: sticky; top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--head-h)); height: calc(100svh - var(--head-h)); }
}

@media (max-width: 640px) {
  .preel { --preel-gap: 8px; }
  .preel__card { min-height: 44px; padding: 10px 14px; font-size: 14.5px; border-radius: 16px; }
  .preel__card--shot { padding-block: 6px; padding-left: 6px; }
  .preel__ph { width: 32px; height: 32px; border-radius: 10px; }
  .preel__foot { margin-top: 16px; }
  .preel.is-live { --preel-h: clamp(92px, min(13.5vh, 30vw), 120px); --preel-gap: 10px; --preel-pin: 110vh; }
  .preel.is-live .preel__card { padding: 14px 16px; font-size: 17px; border-radius: 18px; }
  .preel.is-live .preel__card--xl { font-size: 25px; }
  .preel.is-live .preel__card--shot { padding: 0; }
  .preel.is-live .preel__card--shot b { margin: 0 0 10px 10px; padding: 7px 12px; font-size: 13.5px; }
  .preel.is-live .preel__head .h-sec { font-size: clamp(28px, 7.6vw, 34px); }
  .preel.is-live .preel__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .preel.is-live .preel__bar { width: 100%; }
}
/* The phone bottom bar (projection + WhatsApp) sits over the bottom of the pinned stage. */
@media (max-width: 640px) and (min-height: 560px) {
  .preel.is-live .preel__stage { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Dark theme: a hairline keeps the plain cards distinct on the dark page. */
:root[data-theme="dark"] .preel__card:not(.preel__card--line):not(.preel__card--gold):not(.preel__card--shot) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }