/* ============================================================================
   Getting found — THE WALK DOWN THE STREET.  Loaded by found.html only.

   An outcome page, so it stays quieter than the module pages (MOTION-CHARTER
   §3). Its one idea: no grids, no ladders, no pins. The page is three
   full-width photographs of real trades, one after another, like walking a
   street — and on each one, a small card with the question a customer types
   and what was found. The photo moves against the scroll (the shared
   parallax) and comes up to full light as it reaches the middle of the
   screen; the rows that are "you" light with it. js/fx-found.js writes --lit
   as a pure function of scroll.

   Without JS (or under reduced motion) every band is fully lit and still.
   ========================================================================== */

/* ---------------------------------------------------------------- hero ---- */
.gf-hero{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:center; }
/* the headline shares the screen with the questions card, so it sits a size down */
.gf-hero .t-display{ font-size:clamp(2.5rem,4.8vw,4.4rem); max-width:15ch; }
.gf-ask{
  padding:22px 24px 20px; border-radius:16px;
  background:linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border:1px solid rgba(var(--accent-rgb),.16); box-shadow:0 24px 50px -26px rgba(0,0,0,.75);
}
.gf-ask-h{ margin:0 0 14px; font:600 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(191,238,255,.62); }
.gf-ask ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.gf-ask li span{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px;
  background:rgba(4,18,28,.45); border:1px solid rgba(var(--accent-rgb),.14);
  font-size:15.5px; color:#eaf4fa;
}
.gf-ask li span::before{
  content:""; flex:none; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(var(--accent-rgb),.6); box-shadow:2px 2px 0 -1px rgba(var(--accent-rgb),.6);
}
.gf-ask-f{ margin:16px 0 0; font-size:13.5px; color:#8fb0c4; }

/* ============================================================== THE BANDS == */
.gf-band{
  --lit: 1;                                    /* the default is full light */
  position:relative; min-height:min(82vh, 760px); display:grid; align-items:center;
  overflow:clip; background:var(--abyss); color:#eaf4fa;
  padding:clamp(56px,7vw,96px) 0;
}
.gf-photo{
  position:absolute; left:0; right:0; top:-12%; bottom:-12%;
  background-size:cover; background-position:center; will-change:transform;
  /* dim and slightly cool until the band is reached; lit is written on scroll */
  filter:brightness(calc(.55 + .45 * var(--lit))) saturate(calc(.7 + .3 * var(--lit)));
}
.gf-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,18,28,.9) 0%, rgba(4,18,28,.72) 38%, rgba(4,18,28,.28) 70%, rgba(4,18,28,.5) 100%),
    linear-gradient(180deg, rgba(4,18,28,.6), transparent 22%, transparent 78%, rgba(4,18,28,.7));
}
.gf-band--flip .gf-veil{
  background:
    linear-gradient(270deg, rgba(4,18,28,.9) 0%, rgba(4,18,28,.72) 38%, rgba(4,18,28,.28) 70%, rgba(4,18,28,.5) 100%),
    linear-gradient(180deg, rgba(4,18,28,.6), transparent 22%, transparent 78%, rgba(4,18,28,.7));
}
.gf-band-in{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(32px,5vw,80px); align-items:center; }
.gf-band--flip .gf-band-in > .gf-plate{ order:2; }
.gf-plate{ max-width:520px; }
.gf-plate .copy a{ color:var(--accent); }
.gf-band .t-h2{ font-size:clamp(1.9rem,3.6vw,3rem); text-wrap:balance; }

/* the card: what was found, for an invented business */
.gf-card{
  justify-self:end; width:100%; max-width:420px; padding:18px 20px 16px; border-radius:14px;
  background:rgba(4,18,28,.66); backdrop-filter:blur(10px);
  border:1px solid rgba(var(--accent-rgb),.18); box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.gf-band--flip .gf-card{ justify-self:start; }
.gf-card-h{ display:flex; justify-content:space-between; gap:14px; align-items:baseline; margin:0 0 12px; }
.gf-card-h span{ font-size:14.5px; font-weight:600; color:#eaf4fa; }
.gf-card-h i{ flex:none; font:600 9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(191,238,255,.55); }
.gf-rows{ list-style:none; margin:0; padding:0; }
.gf-rows li{
  display:flex; justify-content:space-between; gap:14px; padding:10px 12px; border-radius:8px;
  font-size:14px; color:#a8c4d5; border:1px solid transparent;
}
.gf-rows li + li{ margin-top:4px; }
.gf-rows li b{ font-weight:600; color:#eaf4fa; }
.gf-rows li span{ text-align:right; }
/* the rows that are you: they light with the band */
.gf-rows li.you{
  color:var(--accent);
  background:rgba(var(--accent-rgb), calc(.10 * var(--lit)));
  border-color:rgba(var(--accent-rgb), calc(.34 * var(--lit)));
}
.gf-rows li.you span{ font-weight:600; }
.gf-rows li.you span::before{ content:"\25CF\00a0"; opacity:calc(.35 + .65 * var(--lit)); }

/* --------------------------------------------------------- two columns --- */
.gf-two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:900px){
  .gf-hero{ grid-template-columns:1fr; gap:34px; }
  .gf-band{ min-height:0; padding:clamp(48px,10vw,72px) 0; }
  .gf-photo{ top:-8%; bottom:-8%; }
  .gf-veil, .gf-band--flip .gf-veil{
    background:linear-gradient(180deg, rgba(4,18,28,.86) 0%, rgba(4,18,28,.72) 55%, rgba(4,18,28,.86) 100%);
  }
  .gf-band-in{ grid-template-columns:1fr; gap:26px; }
  .gf-band--flip .gf-band-in > .gf-plate{ order:0; }
  .gf-card, .gf-band--flip .gf-card{ justify-self:start; max-width:none; }
  .gf-two{ grid-template-columns:1fr; gap:32px; }
}
@media (prefers-reduced-motion: reduce){
  .gf-band{ --lit:1 !important; }
  .gf-photo{ transform:none !important; }
}