/* ============================================================
   Brand Memory — "the box"
   slug: memory   prefix: bm-
   NOTE: `.memory` is also used by trilogy.css for a hero panel,
   so every top-level rule here is written as `section.memory`
   to win on specificity without !important.
   ============================================================ */

section.memory{
  --bm-ink:#24202d;
  --bm-muted:#91889d;
  --bm-faint:#a296b0;
  --bm-line:#e8e5ed;
  --bm-violet:#7c3aed;
  --bm-green:#1e9678;
  --bm-green-bg:#e7f6f1;
  --bm-red:#d9435e;
  --bm-red-bg:#fdeaee;
  --bm-boxh:308px;
  --bm-rowh:27px;
  --bm-cardw:94px;
  --bm-pad:5vw;

  position:relative;
  display:block;
  background:#f7f6fa;
  color:var(--bm-ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,system-ui,Arial,sans-serif;
  /* NOT overflow:hidden — that would make this element the scroll
     container for .bm-sticky and break position:sticky. */
  overflow-x:clip;
  overflow-y:visible;
  isolation:isolate;
}
section.memory *{box-sizing:border-box}

/* ---- scroll track + pinned stage -------------------------- */
.memory .bm-track{height:420vh;position:relative}
.memory .bm-sticky{position:sticky;top:0;height:100vh;min-height:640px;overflow:hidden}
.memory .bm-stage{
  height:100%;
  max-width:1500px;
  margin:0 auto;
  padding:clamp(64px,7vh,96px) var(--bm-pad) clamp(28px,4vh,44px);
  display:flex;
  flex-direction:column;
  gap:clamp(14px,2.2vh,26px);
}

/* ---- header (eyebrow + heading + subheading, nothing else) - */
.memory .bm-head{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:end;gap:24px 40px}
.memory .bm-eyebrow{
  grid-column:1;grid-row:1;
  font-family:ui-monospace,Menlo,monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bm-violet);margin:0 0 10px;
}
.memory .bm-h{
  grid-column:1;grid-row:2;margin:0;
  font-size:clamp(28px,3.3vw,48px);
  font-weight:650;letter-spacing:-.04em;line-height:1.05;color:var(--bm-ink);
  text-wrap:balance;
}
.memory .bm-sub{
  grid-column:2;grid-row:2;margin:0 0 5px;
  font-size:clamp(14px,1.05vw,16px);line-height:1.55;color:var(--bm-muted);
}

/* ---- the scene ------------------------------------------- */
.memory .bm-scene{position:relative;flex:1 1 auto;min-height:0}

/* the open mouth of the box: cards pass over this, then behind the face */
.memory .bm-well{
  position:absolute;left:0;right:0;margin:0 auto;
  max-width:900px;height:52px;
  bottom:calc(var(--bm-boxh) - 52px);
  z-index:1;
  border-radius:24px 24px 4px 4px;
  background:linear-gradient(180deg,#090610,#1a1026 86%);
  box-shadow:inset 0 12px 18px -6px #000000cc, 0 -1px 0 #ffffff24;
  will-change:transform,opacity;
}
.memory .bm-flash{
  position:absolute;inset:auto 10px 0;height:4px;border-radius:4px;
  background:linear-gradient(90deg,transparent,#c9a2ff,transparent);
  box-shadow:0 0 16px 3px #8b52e766;
  opacity:0;
}

/* falling creatives */
.memory .bm-fall{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 58px);
  mask-image:linear-gradient(180deg,transparent 0,#000 58px)}
.memory .bm-card{
  position:absolute;top:0;left:0;
  width:var(--bm-cardw);aspect-ratio:4/5;
  border-radius:9px;overflow:hidden;
  background:var(--bm-tint,#d6d1de);
  box-shadow:0 14px 30px -14px #2411384d, inset 0 0 0 1px #ffffff8c;
  will-change:transform,opacity;
  opacity:0;
}
.memory .bm-card img{width:100%;height:100%;object-fit:cover;display:block}

/* the box face — --bm-t (0..1, set by JS during the final settle) morphs
   this from the small pinned strip into the full-scene panel: geometry
   via width/height calc against the scene, type via scalar multiples of
   the base clamp() sizes so every breakpoint's baseline stays intact. */
.memory .bm-face{
  --bm-t:0;
  position:absolute;left:0;right:0;margin:0 auto;bottom:0;
  width:calc(min(900px,100%)*(1 - var(--bm-t)) + 100%*var(--bm-t));
  height:calc((var(--bm-boxh) - 22px)*(1 - var(--bm-t)) + (100% - 10px)*var(--bm-t));
  z-index:3;
  border-radius:calc(5px + 21px*var(--bm-t)) calc(5px + 21px*var(--bm-t)) calc(26px + 2px*var(--bm-t)) calc(26px + 2px*var(--bm-t));
  background:linear-gradient(168deg,#2c1c44,#1c1924 72%);
  box-shadow:0 30px 70px -30px #24113899;
  padding:calc(18px + 30px*var(--bm-t)) calc(clamp(18px,2.2vw,26px) + 34px*var(--bm-t)) calc(20px + 30px*var(--bm-t));
  display:grid;
  grid-template-columns:minmax(calc(140px + 90px*var(--bm-t)),calc(188px + 170px*var(--bm-t))) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;align-content:stretch;
  gap:calc(clamp(18px,2.6vw,36px)*(1 + .7*var(--bm-t)));
  color:#efe9f7;
  will-change:transform,opacity,width,height;
}
.memory .bm-face::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  border-radius:calc(5px + 21px*var(--bm-t)) calc(5px + 21px*var(--bm-t)) 0 0;
  background:linear-gradient(90deg,#3d2661,#7d51c4 50%,#3d2661);
}
.memory .bm-count{grid-row:1;display:flex;flex-direction:column;justify-content:center;border-right:1px solid #ffffff14;padding-right:calc(16px*(1 + .8*var(--bm-t)))}
.memory .bm-count b{
  font-size:calc(clamp(38px,4vw,58px)*(1 + .9*var(--bm-t)));font-weight:700;letter-spacing:-.05em;line-height:.92;
  color:#fff;font-variant-numeric:tabular-nums;
}
.memory .bm-count-label{
  font-family:ui-monospace,Menlo,monospace;font-size:calc(10px*(1 + .35*var(--bm-t)));letter-spacing:.12em;
  text-transform:uppercase;color:#a58fc4;margin-top:10px;height:12px;
}

/* ---- morphing text labels: two stacked strings crossfading in place ---- */
.memory .bm-morph{position:relative;display:block}
.memory .bm-morph-a,.memory .bm-morph-b{
  position:absolute;left:0;top:0;color:inherit;font:inherit;
  letter-spacing:inherit;text-transform:inherit;white-space:nowrap;
  will-change:opacity;
}
.memory .bm-morph-b{opacity:0}

/* ---- the right-hand panel: the chart morphs into the formula in place --- */
.memory .bm-panel{grid-row:1;min-width:0;display:flex;flex-direction:column}
.memory .bm-panel-label{
  font-family:ui-monospace,Menlo,monospace;font-size:calc(10px*(1 + .35*var(--bm-t)));letter-spacing:.12em;
  text-transform:uppercase;color:#9b88b4;margin:0 0 9px;flex:none;height:12px;line-height:1.2;
}
.memory .bm-panel-body{position:relative;flex:1 1 auto;min-height:0}
.memory .bm-chart,.memory .bm-winform{position:absolute;inset:0;will-change:opacity}
.memory .bm-chart{opacity:1}
.memory .bm-winform{opacity:0;pointer-events:none}
.memory .bm-rows{position:relative;height:100%}

.memory .bm-row{
  position:absolute;left:0;right:0;top:0;height:var(--bm-rowh);
  display:grid;grid-template-columns:9px minmax(0,1fr) 120px 32px;
  align-items:center;gap:10px;
  padding:0 9px;margin:0 -9px;border-radius:7px;
  opacity:0;will-change:transform,opacity;
}
.memory .bm-dot{width:7px;height:7px;border-radius:50%;background:var(--bm-c)}
.memory .bm-label{
  font-size:12.5px;letter-spacing:-.01em;color:#e7ddf5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.memory .bm-bar{position:relative;height:4px;border-radius:3px;background:#ffffff14;overflow:hidden}
.memory .bm-bar i{
  position:absolute;inset:0;border-radius:3px;background:var(--bm-c);
  transform-origin:0 50%;transform:scaleX(0);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.memory .bm-n{
  font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#b6a3ce;
  text-align:right;font-variant-numeric:tabular-nums;
}
.memory .bm-row.bm-row-top .bm-label{color:#fff;font-weight:600}

/* verdict chips */
.memory .bm-chips{position:absolute;inset:0;z-index:2;pointer-events:none}
.memory .bm-chip{
  position:absolute;top:0;left:0;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:7px 12px;border-radius:99px;
  font-size:11.5px;font-weight:550;letter-spacing:-.005em;
  box-shadow:0 10px 24px -12px #24113866;
  opacity:0;will-change:transform,opacity;
}
.memory .bm-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.memory .bm-chip.bm-g{color:var(--bm-green);background:var(--bm-green-bg);box-shadow:0 10px 24px -14px #1e967866,inset 0 0 0 1px #1e967826}
.memory .bm-chip.bm-r{color:var(--bm-red);background:var(--bm-red-bg);box-shadow:0 10px 24px -14px #d9435e66,inset 0 0 0 1px #d9435e26}

/* the winning formula — lives in the same panel cell the chart was in,
   fades up in place when the chart's animation finishes. Never a
   separate floating card, never stacked over the box. */
.memory .bm-wf-list{
  list-style:none;margin:0;padding:0;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
}
.memory .bm-wf-item{
  display:grid;grid-template-columns:calc(50px*(1 + .35*var(--bm-t))) minmax(0,1fr);
  gap:calc(12px*(1 + .5*var(--bm-t)));align-items:start;
  padding-top:calc(clamp(6px,1.1vh,10px)*(1 + .8*var(--bm-t)));border-top:1px solid #ffffff14;
  will-change:transform;
}
.memory .bm-wf-item:first-child{border-top:0;padding-top:0}
.memory .bm-wf-time{
  font-family:ui-monospace,Menlo,monospace;font-size:calc(10.5px*(1 + .45*var(--bm-t)));letter-spacing:.04em;
  color:#9b88b4;padding-top:2px;
}
.memory .bm-wf-body{min-width:0}
.memory .bm-wf-body b{
  display:block;font-size:calc(clamp(12px,1.05vw,13.5px)*(1 + .75*var(--bm-t)));font-weight:600;
  letter-spacing:-.01em;line-height:1.32;color:#efe9f7;
}
.memory .bm-wf-tags{margin:calc(6px*(1 + .6*var(--bm-t))) 0 0;display:flex;flex-wrap:wrap;gap:calc(5px*(1 + .6*var(--bm-t)))}
.memory .bm-t{
  display:inline-flex;align-items:center;gap:6px;font-style:normal;
  font-size:calc(10.5px*(1 + .45*var(--bm-t)));font-weight:550;letter-spacing:-.005em;
  padding:calc(4px*(1 + .5*var(--bm-t))) calc(9px*(1 + .5*var(--bm-t)));border-radius:99px;
}
.memory .bm-t::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.memory .bm-t-g{color:var(--bm-green);background:var(--bm-green-bg)}
.memory .bm-t-r{color:var(--bm-red);background:var(--bm-red-bg)}

/* the one-line footnote — lives inside the box now, as a footer row
   spanning both columns, so it can never sit half over the panel above
   it. It only fades in once the box has started expanding, by which
   point there is room under the formula for it. */
.memory .bm-tally{
  grid-column:1 / -1;grid-row:2;
  margin-top:calc(8px + 8px*var(--bm-t));
  padding-top:calc(8px + 8px*var(--bm-t));
  border-top:1px solid #ffffff14;
  text-align:center;
  font-size:calc(12.5px + 3.5px*var(--bm-t));
  color:#9b88b4;
  opacity:0;pointer-events:none;
  will-change:transform,opacity;
}

/* ---- 1100px ---------------------------------------------- */
@media(max-width:1100px){
  section.memory{--bm-boxh:288px;--bm-cardw:84px;--bm-rowh:25px}
  .memory .bm-head{grid-template-columns:minmax(0,1fr) minmax(0,290px)}
}

/* ---- tablet / stacked header ----------------------------- */
@media(max-width:860px){
  section.memory{--bm-boxh:268px;--bm-cardw:74px;--bm-rowh:24px;--bm-pad:24px}
  .memory .bm-track{height:400vh}
  .memory .bm-head{grid-template-columns:minmax(0,1fr)}
  .memory .bm-sub{grid-column:1;grid-row:3;margin:12px 0 0;max-width:46ch}
  .memory .bm-face{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:calc(14px*(1 + .7*var(--bm-t)));
    padding:calc(16px + 20px*var(--bm-t)) calc(18px + 22px*var(--bm-t)) calc(18px + 20px*var(--bm-t));
  }
  .memory .bm-count{
    grid-row:1;
    flex-direction:row;align-items:baseline;justify-content:flex-start;gap:12px;
    border-right:0;border-bottom:1px solid #ffffff14;padding:0 0 12px;
  }
  .memory .bm-panel{grid-row:2}
  .memory .bm-tally{grid-row:3}
  .memory .bm-count b{font-size:calc(32px*(1 + .9*var(--bm-t)))}
  .memory .bm-count-label{margin-top:0}
  .memory .bm-panel-label{display:none}
  .memory .bm-row{grid-template-columns:9px minmax(0,1fr) 72px 30px;gap:8px}
  .memory .bm-label{font-size:11.5px}
  .memory .bm-wf-item{grid-template-columns:calc(44px*(1 + .5*var(--bm-t))) minmax(0,1fr);gap:calc(10px*(1 + .5*var(--bm-t)))}
}

/* ---- phone ----------------------------------------------- */
@media(max-width:560px){
  section.memory{--bm-boxh:244px;--bm-cardw:72px;--bm-rowh:22px;--bm-pad:20px}
  .memory .bm-sticky{min-height:600px}
  .memory .bm-stage{padding-top:clamp(52px,6vh,72px)}
  .memory .bm-well{height:40px;bottom:calc(var(--bm-boxh) - 40px);border-radius:16px 16px 4px 4px}
  .memory .bm-face{
    height:calc((var(--bm-boxh) - 18px)*(1 - var(--bm-t)) + (100% - 10px)*var(--bm-t));
    border-radius:calc(4px + 22px*var(--bm-t)) calc(4px + 22px*var(--bm-t)) calc(20px + 2px*var(--bm-t)) calc(20px + 2px*var(--bm-t));
    padding:calc(13px + 25px*var(--bm-t)) calc(15px + 20px*var(--bm-t)) calc(14px + 25px*var(--bm-t));
    gap:calc(11px*(1 + .7*var(--bm-t)));
  }
  .memory .bm-count b{font-size:calc(28px*(1 + .9*var(--bm-t)))}
  .memory .bm-count-label{font-size:calc(9px*(1 + .35*var(--bm-t)))}
  .memory .bm-label{font-size:11px}
  .memory .bm-n{font-size:10px}
  .memory .bm-chip{font-size:10px;padding:5px 9px;gap:5px}
  .memory .bm-wf-item{
    grid-template-columns:calc(40px*(1 + .65*var(--bm-t))) minmax(0,1fr);
    gap:calc(8px*(1 + .5*var(--bm-t)));padding-top:calc(6px*(1 + .8*var(--bm-t)));
  }
  .memory .bm-wf-body b{font-size:calc(11.5px*(1 + .75*var(--bm-t)))}
  .memory .bm-t{font-size:calc(9.5px*(1 + .45*var(--bm-t)));padding:calc(3px*(1 + .5*var(--bm-t))) calc(7px*(1 + .5*var(--bm-t)))}
  .memory .bm-tally{font-size:calc(11.5px + 3.5px*var(--bm-t))}
}

/* ============================================================
   Reduced motion / static end state.
   No fall, no physics — the box with its count, the formula
   already settled in the panel, and the tally line under it.
   JS adds .bm-static for the same layout.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .memory .bm-track{height:auto}
  .memory .bm-sticky{position:static;height:auto;min-height:0}
  .memory .bm-stage{height:auto;padding-bottom:clamp(56px,8vh,96px)}
  .memory .bm-scene{display:flex;flex-direction:column;gap:0}
  .memory .bm-well,.memory .bm-fall,.memory .bm-face,
  .memory .bm-chips{position:static;width:100%}
  .memory .bm-fall{order:1}.memory .bm-well{order:2}
  .memory .bm-face{order:3;--bm-t:1}
  .memory .bm-chart{display:none}
  .memory .bm-winform{position:static;opacity:1;pointer-events:auto}
  .memory .bm-morph-a{display:none}
  .memory .bm-morph-b{position:static;opacity:1}
  .memory .bm-tally{opacity:1}
  .memory *{animation:none!important;transition:none!important}
}

.memory.bm-static .bm-track{height:auto}
.memory.bm-static .bm-sticky{position:static;height:auto;min-height:0}
.memory.bm-static .bm-stage{height:auto;padding-bottom:clamp(56px,8vh,96px)}
.memory.bm-static .bm-scene{display:flex;flex-direction:column;gap:0;margin-top:clamp(8px,1.4vh,18px)}

.memory.bm-static .bm-fall{
  order:1;position:static;height:auto;overflow:visible;
  -webkit-mask-image:none;mask-image:none;
  display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,1.6vw,20px);
  max-width:900px;margin:0 auto;padding:0;
}
.memory.bm-static .bm-card{position:static;opacity:1;transform:none;flex:none}
.memory.bm-static .bm-card:nth-child(odd){transform:rotate(-5deg)}
.memory.bm-static .bm-card:nth-child(even){transform:rotate(4deg)}

.memory.bm-static .bm-well{order:2;position:static;margin:0 auto;width:100%;max-width:900px;height:22px}
.memory.bm-static .bm-face{order:3;--bm-t:1;position:static;margin:0 auto;width:100%;max-width:900px;height:auto;min-height:0}
.memory.bm-static .bm-chips{display:none}

.memory.bm-static .bm-chart{display:none}
.memory.bm-static .bm-winform{position:static;opacity:1;pointer-events:auto}
.memory.bm-static .bm-morph-a{display:none}
.memory.bm-static .bm-morph-b{position:static;opacity:1}

.memory.bm-static .bm-tally{opacity:1;transform:none;pointer-events:none}

@media(max-width:560px){
  .memory.bm-static .bm-fall{flex-wrap:wrap}
}

/* ============================================================
   No JS: the box has no content to animate, so collapse the
   scroll track and render the header, the box (count + the
   settled formula) and the tally line only.
   JS adds .bm-js as its first act.
   ============================================================ */
section.memory:not(.bm-js) .bm-track{height:auto}
section.memory:not(.bm-js) .bm-sticky{position:static;height:auto;min-height:0}
section.memory:not(.bm-js) .bm-stage{height:auto;padding-bottom:clamp(56px,8vh,96px)}
section.memory:not(.bm-js) .bm-scene{display:flex;flex-direction:column;gap:14px}
section.memory:not(.bm-js) .bm-well,
section.memory:not(.bm-js) .bm-fall,
section.memory:not(.bm-js) .bm-chips{display:none}
section.memory:not(.bm-js) .bm-face{
  --bm-t:1;position:static;width:100%;max-width:900px;margin:0 auto;height:auto;
}
section.memory:not(.bm-js) .bm-chart{display:none}
section.memory:not(.bm-js) .bm-winform{position:static;opacity:1;pointer-events:auto}
section.memory:not(.bm-js) .bm-morph-a{display:none}
section.memory:not(.bm-js) .bm-morph-b{position:static;opacity:1}
section.memory:not(.bm-js) .bm-tally{opacity:1}