/* ==========================================================================
   acquisitions.css
   Everything new for /acquisitions. Loaded after product-pages.css so it can
   extend the shared vocabulary without editing it. Tokens are inherited, not
   redefined. brain.html never loads this file.

   The page is deliberately small: hero, the city model, the five-step
   sequence, proof, where-you-come-in, CTA. Overrides of shared values live
   in the restyle section at the end.
   ========================================================================== */

/* ---------- hero: the record over the world ------------------------------ */

/* The shared entrance holds .enter at opacity 0 until product-pages.js adds
   body.revealed, so the hero copy, which is the largest thing on the first
   screen, could not paint until a script had run. Above the fold that put
   largest-contentful-paint at 1.6s on a throttled phone for text that was
   already in the HTML. The hero runs the same entrance as a CSS animation
   instead, which starts as soon as the stylesheet applies and needs no script.
   Everything below the fold keeps the observer-driven reveal.
   The copy only, never the plate: a filling animation sits above inline styles
   in the cascade, so putting one on .acq-frame pins its transform and kills
   the pointer lean that heroPhoto writes there. The plate keeps the shared
   transition, which inline styles can still beat. */
@media(prefers-reduced-motion:no-preference){
  .acq-hero .hero-copy .enter{animation:acqEnter .82s cubic-bezier(.2,.7,.2,1) both}
  .acq-hero .hero-copy .enter.d1{animation-delay:.05s}
  .acq-hero .hero-copy .enter.d2{animation-delay:.11s}
  .acq-hero .hero-copy .enter.d3{animation-delay:.17s}
}
@keyframes acqEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.acq-hero{overflow:visible;padding-bottom:0;min-height:94svh}
.acq-hero-grid{align-items:center}
.acq-hero-grid{grid-template-columns:minmax(300px,.72fr) minmax(560px,1.28fr)}

.acq-frame{
  position:relative;
  min-height:clamp(560px,82vh,920px);
  border:1px solid rgba(22,24,28,.3);
  background:var(--paper3);
  box-shadow:0 44px 100px -64px rgba(22,24,28,.95),inset 0 0 0 8px rgba(233,234,236,.22);
  overflow:hidden;
  isolation:isolate;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);
  touch-action:pan-y;
  transform-style:preserve-3d;
  will-change:transform;
}
/* the plate runs off the right edge of the viewport: the market does not stop
   at the margin. The copy answers it on the other side, pulled out of the
   centred wrap so it sits against the left edge of the screen rather than on
   the grid's margin. Below 1200px the wrap is already edge to edge, so the
   pull resolves to zero and the normal gutter is kept. */
@media(min-width:1051px){
  .acq-frame{margin-right:calc(-1 * max(24px,(100vw - 1200px) / 2))}
  .acq-hero-grid .hero-copy{margin-left:calc(-1 * max(0px,(100vw - 1200px) / 2 - 34px))}
}
.acq-frame-photo{position:absolute;inset:0;z-index:1}
.acq-frame-photo iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  pointer-events:none; /* the parent owns the pointer for the parallax */
}
.acq-frame::after{
  content:"";
  position:absolute;inset:0;z-index:6;pointer-events:none;
  box-shadow:inset 0 0 80px rgba(22,24,28,.24),inset 0 0 0 1px rgba(255,255,255,.42);
}

.acq-frame .plate-readout{z-index:7}
.acq-frame .corner{z-index:7}
/* the dithered plate can run very light behind these, so they carry their own
   ground rather than relying on the image underneath */
.acq-frame .plate-label{
  z-index:7;
  padding:5px 9px;
  border:1px solid rgba(22,24,28,.32);
  background:rgba(236,238,241,.82);
  color:var(--ink2);
}
.acq-frame .plate-axis{z-index:7;color:rgba(22,24,28,.72)}
.plate-readout .live-dot{position:relative;padding-left:12px}
.plate-readout .live-dot::before{
  content:"";position:absolute;left:0;top:50%;
  width:5px;height:5px;margin-top:-2.5px;border-radius:50%;
  background:#fff;animation:pulse 1.7s ease-in-out infinite;
}

/* ---------- the statement ------------------------------------------------
   The line assembles out of halftone dots as the section scrolls through.
   ------------------------------------------------------------------------ */

.assemble{position:relative;height:190vh}
.assemble-stick{
  position:sticky;top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
#statementCanvas{display:block}  /* sized in JS, from the host column */
/* the sentence still has to exist for anyone the canvas cannot reach */
.assemble-fallback{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ---------- 02 . the five stages -----------------------------------------
   Alternating plates with the copy alongside. Nothing is set over a
   photograph, and the plates are sized to the column, not the viewport.
   ------------------------------------------------------------------------ */

.seq-band{padding-top:clamp(64px,8vh,96px)}
.seq-band .instrument-head{margin-bottom:clamp(30px,4vh,52px)}

.steps{display:flex;flex-direction:column;gap:clamp(44px,6vh,84px)}
.step{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(26px,4vw,64px);
  align-items:center;
}
.step.flip .step-plate{order:2}
.step-plate{
  position:relative;
  aspect-ratio:16/10;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s cubic-bezier(.2,.7,.2,1);
  border:1px solid rgba(22,24,28,.26);
  background:var(--paper3);
  overflow:hidden;
  isolation:isolate;
}
.step-plate img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.04);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.step.reveal.in .step-plate img{transform:scale(1)}
.step.reveal:not(.in) .step-plate{clip-path:inset(0 100% 0 0)}
.step.flip.reveal:not(.in) .step-plate{clip-path:inset(0 0 0 100%)}
.step-plate::after{
  content:"";
  position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 70px rgba(22,24,28,.2),inset 0 0 0 1px rgba(255,255,255,.34);
}
.step-plate .corner{z-index:3;border-color:rgba(22,24,28,.6)}
.step-copy{max-width:440px}
.step.flip .step-copy{justify-self:end}
.step-n{
  display:block;
  color:var(--faint);
  font:500 10px/1 'JetBrains Mono',monospace;
  letter-spacing:1.6px;
}
.step-copy h3{
  margin-top:14px;
  font-size:clamp(28px,2.6vw,40px);
  font-weight:520;
  line-height:1.02;
  letter-spacing:-.025em;
}
.step-copy p{
  margin-top:16px;
  color:var(--muted);
  font-size:clamp(14.5px,1.1vw,16px);
  line-height:1.62;
  font-weight:300;
}

/* ---------- 03 . the objects, and the asset rows -------------------------- */

.cap-band{padding-top:clamp(70px,9vh,110px)}
.glyph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.glyph-card{
  position:relative;
  padding:20px 26px 32px;
  background:var(--paper);
  transition:background .4s ease;
}
/* the card answers the pointer too, quietly */
.glyph-card::before,.glyph-card::after{
  content:"";
  position:absolute;
  width:13px;height:13px;
  opacity:0;
  border-color:rgba(22,24,28,.5);
  transition:opacity .35s ease;
  pointer-events:none;
}
.glyph-card::before{left:12px;top:12px;border-top:1px solid;border-left:1px solid}
.glyph-card::after{right:12px;bottom:12px;border-right:1px solid;border-bottom:1px solid}
.glyph-card.lit{background:rgba(240,241,243,.9)}
.glyph-card.lit::before,.glyph-card.lit::after{opacity:1}
.glyph{cursor:crosshair}
.glyph{display:block;width:100%;height:236px;image-rendering:pixelated;opacity:.92}
.glyph-card h3{
  margin-top:10px;padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-size:23px;font-weight:520;letter-spacing:-.02em;
}
.glyph-card p{margin-top:11px;color:var(--muted);font-size:13.5px;line-height:1.6;font-weight:300}

/* the seam: the homepage's tracing hairlines used as connective tissue
   between acts rather than as a list. Wider, more of them, and the traces
   run both directions at different speeds so it never reads as a loop. */
.seam-lines{
  position:relative;
  height:clamp(90px,13vh,150px);
  margin:clamp(30px,4vh,56px) 0 clamp(6px,1vh,16px);
  overflow:hidden;
  pointer-events:none;
}
.seam-lines i{position:absolute;left:0;right:0;height:1px;background:var(--line-soft);overflow:visible}
.seam-lines i::after{
  content:"";
  position:absolute;top:0;height:1px;
  background:rgba(22,24,28,.42);
  animation:seamtrace 9s linear infinite;
}
.seam-lines i:nth-child(1){top:8%}
.seam-lines i:nth-child(1)::after{width:14%;animation-duration:13s;animation-delay:-4s}
.seam-lines i:nth-child(2){top:22%;left:6%;right:28%}
.seam-lines i:nth-child(2)::after{width:8%;animation-duration:9s;animation-delay:-7s}
.seam-lines i:nth-child(3){top:37%}
.seam-lines i:nth-child(3)::after{width:24%;animation-duration:17s;animation-delay:-2s}
.seam-lines i:nth-child(4){top:51%;left:22%}
.seam-lines i:nth-child(4)::after{width:6%;animation-duration:7s;animation-delay:-5s;animation-name:seamtrace-back}
.seam-lines i:nth-child(5){top:66%;right:14%}
.seam-lines i:nth-child(5)::after{width:11%;animation-duration:11s;animation-delay:-9s}
.seam-lines i:nth-child(6){top:80%;left:38%}
.seam-lines i:nth-child(6)::after{width:5%;animation-duration:6s;animation-delay:-1s;animation-name:seamtrace-back}
.seam-lines i:nth-child(7){top:93%}
.seam-lines i:nth-child(7)::after{width:18%;animation-duration:15s;animation-delay:-11s}
@keyframes seamtrace{from{left:-26%}to{left:106%}}
@keyframes seamtrace-back{from{left:106%}to{left:-26%}}

/* ---------- 01 . the city model ------------------------------------------ */

/* the vitrine takes the full block: the model fills it, no dead margin */
.acq-pin{position:relative;height:190vh;padding:0}
.acq-pin-sticky{
  position:sticky;top:0;
  height:100vh;
  display:grid;
  /* the model was crowding its own caption off the edge; giving the copy a
     real column reads as an instrument with a label rather than a slab */
  grid-template-columns:1.34fr .66fr;
  gap:clamp(22px,3vw,48px);
  align-items:center;
  overflow:hidden;
  padding:0 clamp(14px,2vw,32px) 0 0;
}
.acq-vitrine{
  position:relative;
  height:clamp(440px,73vh,800px);
  border:1px solid var(--line);
  border-left:0;
  background:linear-gradient(170deg,rgba(226,228,231,.92),rgba(206,209,214,.9));
  box-shadow:0 30px 80px -50px rgba(22,24,28,.9),inset 0 1px 0 rgba(255,255,255,.7);
  overflow:hidden;
  isolation:isolate;
}
.acq-vitrine canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.vitrine-hud{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 16px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(to bottom,rgba(233,234,236,.72),rgba(233,234,236,0));
}
.stage-tag{color:var(--muted);font:500 9px/1 'JetBrains Mono',monospace;letter-spacing:1.5px;text-transform:uppercase}
.acq-pin-copy h2{font-size:clamp(26px,2.5vw,40px);line-height:1.02}
.acq-pin-copy .lede{margin-top:20px;font-size:15.5px;max-width:34ch}
.plate-line{margin-top:30px;color:var(--faint);font:500 9px/1 'JetBrains Mono',monospace;letter-spacing:1.6px;text-transform:uppercase}

/* ---------- 04 . where you come in --------------------------------------- */

.team-band .kicker{margin-bottom:22px}
.team-band .lede{margin-top:26px}

/* ==========================================================================
   restyle: one gray family, scan-tech motion. Overrides of product-pages.css
   values live here so the shared file stays untouched for the Brain session.
   ========================================================================== */

/* dark acts are dark gray, not black */
.dark-act{background:#22262c}
.dark-act::before{opacity:.2}
footer.dark-act,footer{background:#1e2227}
/* the principle cards keep the record's left-aligned, mono-labelled voice */
.team-band .principle{text-align:left}
.team-band .principles{margin-top:56px}
/* Two principles now that "Always on" has gone, since it said what the Monitor
   stage above already says. product-pages.css lays these out as a hard three
   column grid with 1px gaps over a line-coloured background, so the gaps read
   as hairline rules and a third empty cell would show as a grey block rather
   than as nothing. Overridden here rather than in the shared sheet. */
.team-band .principles{grid-template-columns:repeat(2,1fr)}

/* grain on the big gray panels, matching the site's atmosphere layers */
.acq-vitrine::after{
  content:"";
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
  opacity:.09;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:210px 210px;
}

/* ---------- responsive ---------------------------------------------------- */

@media(max-width:1050px){
  .acq-hero-grid{grid-template-columns:1fr}
  .acq-frame{min-height:min(66vw,600px)}
  .acq-pin{height:auto}
  /* 11vh top and bottom opened a hole under the caption that read as the page
     having ended. The model and its label are one block; the band below
     supplies the separation. */
  .acq-pin-sticky{position:relative;height:auto;grid-template-columns:1fr;gap:22px;padding:6vh 0 7vh}
  .acq-pin-copy{padding:0 clamp(24px,5vw,48px)}
  .acq-vitrine{height:min(78vw,560px);border-right:0}
}
@media(max-width:900px){
  /* the plate always leads, the copy always follows */
  .step{grid-template-columns:1fr;gap:18px}
  .step.flip .step-plate{order:0}
  .step.flip .step-copy{justify-self:start}
  .step-copy{max-width:none}
  .glyph-grid{grid-template-columns:1fr}
  /* stacked, each card is full width, so the object gets room to stand up */
  .glyph{height:290px}
}
@media(max-width:500px){
  .acq-frame{min-height:340px}
  /* a city wants a landscape frame. Sized by ratio rather than by viewport
     height so a tall phone does not squeeze it into a letterbox. */
  .acq-vitrine{height:auto;aspect-ratio:5/4}
  .acq-pin-copy h2{font-size:clamp(24px,7vw,32px)}
  .sf-readout{min-width:0;padding:10px 12px}
}
/* The nav needs nothing here: product-pages.css already drops Home below
   900px, News and About below 720px, and the wordmark below 500px. */

/* ---------- reduced motion ------------------------------------------------ */

@media(max-width:760px){
  .assemble{height:auto}
  .assemble-stick{position:relative;height:auto;padding:14vh 0}
  #statementCanvas{height:38vh}
}

@media(prefers-reduced-motion:reduce){
  .assemble{height:auto}
  .assemble-stick{position:relative;height:auto;padding:12vh 0}
  .plate-readout .live-dot::before{animation:none}
  .step-plate img{transition:none;transform:none}
  .step-plate{transition:none;clip-path:none}
  .seam-lines i::after{animation:none;left:38%}
}