/* =================================================================
   POLISH PASS 5: hero texture + lens, clean highlight, career climb,
   compact race, mega footer, smoother motion (Emil rules)
   ================================================================= */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1)}

/* ---- 1. highlighted result: border never clipped ---- */
.serp-view{padding-left:12px!important;padding-right:12px!important}
@media (min-width:900px){
  .serp-head{padding:0 12px}
  .serp-head,.serp-view{margin-left:calc(var(--pad) + var(--sheetw) + var(--colgap) - 12px)!important;margin-right:calc(var(--pad) - 12px)!important}
}
.skel{inset:12px 12px 0!important}
.you-bg{inset:3px -8px;transition:box-shadow .3s var(--ease-out)}
.res-item--you.lift .you-bg{box-shadow:0 0 0 1.5px var(--green),0 22px 44px -18px rgba(14,159,90,.45)}
.results-list{padding-top:4px}

/* ---- 2. hero: texture + search-lens cursor ---- */
.dotgrid{position:absolute;inset:0;background-image:radial-gradient(rgba(17,17,16,.16) 1px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask:radial-gradient(70% 60% at 50% 45%,#000 0%,transparent 75%);mask:radial-gradient(70% 60% at 50% 45%,#000 0%,transparent 75%);opacity:.55}
.grain{position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.blob{animation:drift 18s var(--ease-io) infinite alternate}
.b2{animation-duration:22s;animation-direction:alternate-reverse}
@keyframes drift{to{transform:translate3d(6vw,4vh,0) scale(1.08)}}
.spot{position:absolute;left:0;top:0;z-index:7;width:0;height:0;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .35s var(--ease-out)}
.spot i{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;background:#fff;transform:scale(.4);transition:transform .45s var(--ease-out)}
.spot i::after{content:"";position:absolute;right:-18px;bottom:-18px;width:34px;height:6px;border-radius:3px;background:#fff;transform:rotate(45deg);transform-origin:left center;opacity:0;transition:opacity .3s}
.spot.on{opacity:1}
.spot.on i{transform:scale(1)}
.spot.big i{transform:scale(2.1)}
.spot.big i::after{opacity:1}
.spot.small i{transform:scale(.25)}
@media (hover:none),(pointer:coarse){ .spot{display:none} }

/* ---- 3. clean highlight sweep (no inherited var) ---- */
.hl{background-size:100% 100%}
.hl-g{background-size:100% 100%}

/* ---- 4. experience: career as a ranking ---- */
.xp-head .lead{max-width:34ch}
.xp-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid var(--line-2)}
.xp-stats>div{padding:16px 0}
.xp-stats>div+div{padding-left:16px;border-left:1px solid var(--line-2)}
.xp-stats b{display:block;font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 106;font-size:clamp(26px,6vw,44px);letter-spacing:-.04em;line-height:1}
.xp-stats .mono{display:block;color:var(--muted);margin-top:8px}
.xp-progress{display:none}
.xp-list{position:relative;display:grid;gap:14px;margin-top:40px}
.xp-list::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:repeating-linear-gradient(to bottom,var(--line-2) 0 6px,transparent 6px 12px)}
.xp{position:relative;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.xp-rank{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--muted);font-size:12px;transition:background .5s var(--ease-out),color .5s,box-shadow .5s}
.xp.in .xp-rank{background:var(--ink);color:#fff;box-shadow:none}
.xp--now.in .xp-rank{background:var(--green)}
.xp-card{background:var(--card);border-radius:22px;padding:18px 18px 20px;box-shadow:var(--sh)}
.xp--now .xp-card{box-shadow:0 0 0 1.5px var(--green),var(--sh-lg)}
.xp-card .crumb{gap:12px}
.xp-card .crumb b{color:var(--ink)}
.xlogo{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--c);color:#fff;font-family:var(--f-display);font-weight:800;font-size:14px;flex:none}
.xp-card .now{margin-left:auto}
.xp-card h3{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 104;font-size:clamp(21px,5.4vw,28px);letter-spacing:-.03em;line-height:1.08;margin-top:14px}
.when{color:var(--link);margin-top:6px}
.xp-card>p:not(.crumb):not(.when){color:var(--ink-2);font-size:15px;margin-top:10px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags li{font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:999px;background:var(--sand);color:var(--ink-2)}
@media (min-width:1000px){
  #experience .sec.xp-sec{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);column-gap:6vw;align-items:start}
  .xp-head{position:sticky;top:110px}
  .xp-head .sec-h{position:static!important;font-size:clamp(48px,5.6vw,104px)}
  .xp-list{margin-top:0}
  .xp-progress{display:block;margin-top:24px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
  .xp-bar{display:block;height:100%;background:var(--green);transform-origin:left;transform:scaleX(0)}
}

/* ---- 5. rank race: compact header, no dead space ---- */
@media (min-width:900px){
  .sec--race{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:6vw;padding-top:120px}
  .sec--race>.kicker{grid-column:1 / -1}
  .race-head{display:block;grid-column:1}
  .race-head .sec-h{font-size:clamp(48px,5.4vw,96px)}
  .race-head .note{margin-top:18px}
  .race-sum{grid-column:2;align-self:end;margin-top:0;grid-template-columns:1fr;border:0}
  .race-sum>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
  .race-sum>div+div{padding-left:0;border-left:0}
  .race-sum>div:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
  .race-sum b{font-size:clamp(32px,3.4vw,52px)}
  .race-sum .mono{margin:0;text-align:right}
  .race{grid-column:1 / -1;margin-top:44px}
}
/* runners/trails move on transform only */
.trail{width:var(--dist,0px)!important;transform-origin:left center;transform:scaleX(0)}
.runner{left:calc((20 - min(var(--from),20)) / 19 * (100% - 44px))!important}

/* ---- 6. mega footer ---- */
.contact{min-height:0!important}
.mega{grid-column:1 / -1;margin-top:72px;border-top:1px solid rgba(255,255,255,.1);padding-top:34px}
.mega-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.mega-col{display:flex;flex-direction:column;gap:8px}
.mega-col .mono{color:rgba(255,255,255,.4);margin-bottom:6px}
.mega-col a{font-size:16px;color:#fff;width:fit-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease-out)}
.mega-col a:active{background-size:100% 1px}
.mega-live{display:flex;align-items:center;gap:8px;font-size:16px}
.mega-note{color:rgba(255,255,255,.55);font-size:14px}
.mega-word{position:relative;display:flex;align-items:flex-end;margin:56px calc(-1 * var(--pad)) 0;padding:0 var(--pad);overflow:hidden;cursor:default;user-select:none}
.mega-word{container-type:inline-size}
.mw{position:relative;display:block;font-family:var(--f-display);font-weight:900;font-variation-settings:"wdth" 100;font-size:clamp(48px,14.2cqi,300px);line-height:.8;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.2);white-space:nowrap}
.mw{-webkit-text-stroke:1.5px rgba(255,255,255,.32)}
.mw::after{content:attr(data-word);position:absolute;inset:0;color:var(--mint);-webkit-text-stroke:0;
  clip-path:inset(0 calc(100% - var(--fill,0%)) 0 0)}
.mw-cursor{width:.08em;height:.62em;margin:0 0 .06em .06em;font-size:clamp(48px,14.2cqi,300px);background:var(--hl);animation:blink 1s steps(1) infinite;flex:none}
@media (hover:hover) and (pointer:fine){
  .mw::after{clip-path:none;-webkit-mask:radial-gradient(circle var(--r,0px) at var(--mx,50%) var(--my,50%),#000 98%,transparent 100%);mask:radial-gradient(circle var(--r,0px) at var(--mx,50%) var(--my,50%),#000 98%,transparent 100%);transition:none}
  .mega-col a:hover{background-size:100% 1px}
}
.foot{margin-top:28px!important;padding-top:20px!important;border-top:1px solid rgba(255,255,255,.08)}
@media (min-width:900px){
  .mega-cols{grid-template-columns:repeat(3,1fr);max-width:900px}
}

/* ---- 7. motion hygiene ---- */
.log{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.06)}
.chip,.btn,.card{transition-property:transform}
.card{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
@media (prefers-reduced-motion:reduce){ .spot{display:none} .blob{animation:none} .mw::after{clip-path:none!important;-webkit-mask:none!important;mask:none!important} }