/* ============================================================================
   SEO — THE LADDER AND THE GRID.  Loaded by seo.html only.

   Two things, and they are this page's alone (MOTION-CHARTER §3):
     1. The grid. A 5×5 local rank grid on a street map. Each point resolves
        from a blur into a placed pin, one at a time, outward from the
        business — driven by how far the grid has come up the screen.
     2. The ladder. Twenty rungs of rank positions. Keyword chips climb them
        while the section is held, week by week, as a pure function of scroll.

   Without JS (or under reduced motion) every pin is placed and every chip
   sits at its final rung. The readouts show the finished numbers.
   ========================================================================== */

/* --------------------------------------------------------- the readout ---- */
.fx-read{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin:22px 0 0; padding:10px 14px;
  width:max-content; max-width:100%;
  border:1px solid rgba(var(--accent-rgb),.16); border-radius:8px;
  background:rgba(4,18,28,.35);
  font:600 10.5px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(191,238,255,.62);
}
.fx-read b{ color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
.fx-read i{ font-style:normal; opacity:.55; }
.fx-read span{ white-space:nowrap; }
.sec--light .fx-read, .sec--tintlight .fx-read{
  color:var(--text-muted); border-color:rgba(var(--primary-rgb),.22); background:rgba(var(--primary-rgb),.04);
}
.sec--light .fx-read b, .sec--tintlight .fx-read b{ color:var(--primary); }

/* ============================================================== THE GRID == */
.seo-map-wrap{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:44px;
  align-items:center; margin-top:40px;
}
.seo-map{
  position:relative; width:100%; max-width:540px; aspect-ratio:1;
  border-radius:16px; border:1px solid rgba(var(--accent-rgb),.18); overflow:hidden;
  display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr);
  padding:7%;
  background:
    repeating-linear-gradient(0deg,  rgba(var(--accent-rgb),.075) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb),.075) 0 1px, transparent 1px 46px),
    radial-gradient(60% 60% at 50% 50%, rgba(21,100,147,.30), transparent 70%),
    linear-gradient(160deg, rgba(24,86,120,.32), rgba(7,27,41,.9));
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
/* two diagonal streets and a river, so it reads as a town and not graph paper */
.seo-map::before{
  content:""; position:absolute; inset:-30%; pointer-events:none;
  background:
    linear-gradient( 34deg, transparent 49.7%, rgba(var(--accent-rgb),.18) 49.85%, rgba(var(--accent-rgb),.18) 50.15%, transparent 50.3%),
    linear-gradient(-56deg, transparent 49.75%, rgba(var(--accent-rgb),.13) 49.9%, rgba(var(--accent-rgb),.13) 50.1%, transparent 50.25%),
    linear-gradient(112deg, transparent 63%, rgba(42,154,214,.16) 64%, rgba(42,154,214,.16) 67%, transparent 68%);
}
/* fine scanlines over the top: it is an instrument */
.seo-map::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(0deg, rgba(191,238,255,.04) 0 1px, transparent 1px 3px);
}
.pin{ position:relative; display:grid; place-items:center; z-index:2; will-change:transform, opacity, filter; }
.pin b{
  width:min(42px,7.2vw); height:min(42px,7.2vw); border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  display:grid; place-items:center;
  font:800 13px/1 var(--font-display);
  border:1px solid rgba(255,255,255,.25);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.pin b span{ transform:rotate(45deg); }
.pin[data-tier="top"] b{ background:var(--accent); color:var(--dark); box-shadow:0 0 22px 2px rgba(var(--accent-rgb),.55); }
.pin[data-tier="mid"] b{ background:var(--primary-light); color:#fff; box-shadow:0 0 16px 1px rgba(42,154,214,.4); }
.pin[data-tier="low"] b{ background:#2a4658; color:#a8c4d5; }
.pin:hover b{ transform:rotate(-45deg) scale(1.16); }
/* the business itself: a ring */
.pin.home::before{
  content:""; position:absolute; width:min(64px,11vw); height:min(64px,11vw); border-radius:50%;
  border:1px dashed rgba(var(--accent-rgb),.55); pointer-events:none;
}
/* label on hover — the pointer asks, the map answers */
.pin::after{
  content:attr(data-label); position:absolute; bottom:calc(100% - 4px); left:50%;
  transform:translate(-50%, 4px); white-space:nowrap; z-index:5;
  font:600 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:rgba(4,18,28,.92);
  border:1px solid rgba(var(--accent-rgb),.3); padding:6px 8px; border-radius:6px;
  opacity:0; transition:opacity .2s, transform .2s var(--ease-out); pointer-events:none;
}
.pin:hover::after{ opacity:1; transform:translate(-50%, 0); }
.seo-map-copy .fx-read{ margin-top:22px; }
.seo-legend{ display:flex; flex-wrap:wrap; gap:10px 18px; margin:18px 0 0; padding:0; list-style:none; font-size:13.5px; color:#a8c4d5; }
.seo-legend li{ display:inline-flex; align-items:center; gap:8px; }
.seo-legend i{ width:10px; height:10px; border-radius:50%; }
.seo-legend .top{ background:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),.6); }
.seo-legend .mid{ background:var(--primary-light); }
.seo-legend .low{ background:#2a4658; }

/* armed */
.fx-on .pin{ opacity:0; filter:blur(10px); transform:translateY(-18px) scale(1.5); }

/* ============================================================ THE LADDER == */
.seo-ladder{ position:relative; height:230vh; margin-top:24px; }
.seo-ladder-stick{
  position:sticky; top:70px; height:calc(100vh - 70px);
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:52px; align-items:center;
}
.seo-steps{ list-style:none; margin:26px 0 0; padding:0; }
.seo-steps li{ display:grid; grid-template-columns:auto 1fr; gap:0 18px; padding:0 0 22px; position:relative; }
.seo-steps li:last-child{ padding-bottom:0; }
.seo-steps .n{
  grid-row:1/3; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font:800 16px/1 var(--font-display);
  background:rgba(var(--primary-rgb),.08); border:1px solid rgba(var(--primary-rgb),.28); color:var(--primary);
  transition: background .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.seo-steps h3{ font-size:1.15rem; margin-bottom:5px; }
.seo-steps p{ margin:0; font-size:.98rem; line-height:1.5; }
.fx-on .seo-steps li{ opacity:.34; transition:opacity .4s var(--ease-out); }
.fx-on .seo-steps li.on{ opacity:1; }
.fx-on .seo-steps li.on .n{ background:var(--primary); color:#fff; box-shadow:0 0 0 4px rgba(var(--primary-rgb),.14); }

/* 20 real rungs, then a compressed zone: anything beyond 20 is drawn at
   20 + (rank - 20) / 5, so 27, 34 and 41 sit on their own lines instead of
   piling onto one. --pos is that drawn position; JS writes it every frame. */
.ladder{ position:relative; --rung:28px; height:calc(var(--rung) * 25); }
.ladder ol{ list-style:none; margin:0; padding:0; position:absolute; inset:0; }
.ladder li{
  height:var(--rung); display:flex; align-items:center; gap:12px;
  font:600 10.5px/1 var(--mono); letter-spacing:.1em; color:rgba(15,31,46,.42);
  font-variant-numeric:tabular-nums;
}
.ladder li span{ width:28px; text-align:right; }
.ladder li::after{ content:""; flex:1; height:1px; background:rgba(var(--primary-rgb),.13); }
.ladder li.top3{ color:var(--primary); }
.ladder li.top3::after{ background:rgba(var(--primary-rgb),.3); }
.ladder li.page1{ color:rgba(15,77,114,.7); }
.ladder li.zone{ color:rgba(15,31,46,.5); }
.ladder li.zone span{ width:auto; }
.ladder li.zone.deep{ height:calc(var(--rung) * 4); align-items:flex-start; }
.ladder li.zone::after{ background:repeating-linear-gradient(90deg, rgba(var(--primary-rgb),.22) 0 6px, transparent 6px 12px); }
/* the fold: page one ends at 10 */
.ladder li.fold{ position:relative; }
.ladder li.fold::before{
  content:"page 1 ends"; position:absolute; right:0; top:calc(100% - 7px);
  font:600 9px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(15,77,114,.55);
  background:var(--bg-alt); padding:0 6px;
}

.chips{ position:absolute; left:48px; right:0; top:0; }
.chip{
  position:absolute; left:var(--x,0); top:0; height:var(--rung);
  display:inline-flex; align-items:center; gap:9px; padding:0 12px 0 0;
  border-radius:100px; background:#fff; border:1px solid rgba(var(--primary-rgb),.3);
  box-shadow:0 12px 26px -14px rgba(15,77,114,.6); white-space:nowrap;
  font-size:13px; color:var(--text); will-change:transform;
  transform:translate3d(0, calc((var(--pos,1) - 1) * var(--rung)), 0);
}
.chip .rk{
  width:calc(var(--rung) - 4px); height:calc(var(--rung) - 4px); margin:2px; border-radius:50%;
  display:grid; place-items:center; font:800 11.5px/1 var(--font-display); color:#fff;
  background:#5b7385; font-variant-numeric:tabular-nums;
  transition: background .3s var(--ease-out);
}
.chip[data-tier="top"] .rk{ background:var(--primary); box-shadow:0 0 14px rgba(var(--primary-rgb),.45); }
.chip[data-tier="mid"] .rk{ background:var(--primary-light); }
.chip i{ font-style:normal; }
/* the trail it climbed */
.chip::before{
  content:""; position:absolute; left:calc(var(--rung) / 2 - 1px); top:100%; width:2px;
  height:calc(var(--rung) * 25); transform-origin:top; transform:scaleY(var(--trail,0));
  background:linear-gradient(rgba(var(--primary-rgb),.35), transparent 70%);
  pointer-events:none;
}
.ladder-hint{ margin:14px 0 0; font-size:13px; color:var(--text-muted); }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:900px){
  .seo-map-wrap{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .seo-map{ max-width:none; }
  .seo-ladder{ height:auto; }
  .seo-ladder-stick{ position:static; height:auto; grid-template-columns:1fr; gap:30px; }
  .ladder{ --rung:22px; }
  .chips{ left:40px; }
  .chip{ font-size:12px; left:calc(var(--x,0px) * .45); }
  .chip .rk{ font-size:10.5px; }
  .ladder li.fold::before{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .pin{ opacity:1 !important; filter:none !important; transform:none !important; }
  .seo-steps li{ opacity:1 !important; }
}