/* =====================================================================
   TKMMAFIT · Hall of Fame, in TK's own look: black, white and chrome,
   soft spotlights and the hexagon lights. Clean photo cards, no frames.
   Effects stop for reduced motion and while off screen.
   ===================================================================== */
.hof-rc{position:relative;overflow:hidden;isolation:isolate;color:#F4F3EF;
  --txt:#F4F3EF;--mist:rgba(244,243,239,.66);--dim:rgba(244,243,239,.44);--line:rgba(244,243,239,.12);--line2:rgba(244,243,239,.22);
  background:radial-gradient(60% 40% at 50% -6%,rgba(255,255,255,.09),transparent 70%),#0B0B0C}
.hof-rc .chrome-t{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- soft white spotlights ---------- */
.rc-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hof-rc .beam{position:absolute;top:-8%;left:var(--x);width:min(40vw,560px);height:120%;transform-origin:50% 0;transform:translateX(-50%) rotate(var(--a));
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035) 50%,transparent 80%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);will-change:transform;
  animation:sweep var(--s) ease-in-out infinite alternate;animation-play-state:paused}
.hof-rc .beam.b1{--x:18%;--a:-14deg;--b:10deg;--s:12s}
.hof-rc .beam.b2{--x:82%;--a:14deg;--b:-10deg;--s:14s;animation-delay:-5s}
@keyframes sweep{to{transform:translateX(-50%) rotate(var(--b))}}
.hof-rc.run .beam{animation-play-state:running}

/* ---------- hero (page) ---------- */
.hof-hero{padding:calc(var(--rib,0px) + 150px) 0 0;text-align:center}
.hof-hero .ceiling{top:calc(var(--rib,0px) + 70px)}
.hof-hero-txt{position:relative;display:flex;flex-direction:column;align-items:center}
.hof-hero .crumbs{margin-bottom:22px}
.hof-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:99px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);box-shadow:inset 0 0 0 1px var(--line2)}
.hof-hero .star{font-style:normal;color:#fff}
.hof-hero h1{font-family:var(--disp);font-weight:600;font-size:clamp(46px,8.4vw,118px);line-height:.95;letter-spacing:-.045em;margin:22px 0 0;max-width:12ch}
.hof-hero .phero-lead{max-width:52ch;margin:24px auto 0;color:var(--mist)}
.hof-hero .ctas{justify-content:center;margin-top:30px}


/* ---------- centrepiece: three photos on a lit floor ---------- */
.hof-stage{position:relative;margin-top:clamp(40px,6vw,80px);padding:0 var(--gut) clamp(54px,7vw,96px)}
.hof-stage::before{content:"";position:absolute;left:50%;bottom:clamp(24px,4vw,52px);width:min(1000px,120vw);height:clamp(70px,9vw,120px);transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.14),rgba(255,255,255,.04) 60%,transparent);pointer-events:none}
.hof-stage::after{content:"";position:absolute;left:50%;bottom:clamp(54px,7vw,96px);width:min(760px,90vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);pointer-events:none}
.hof-feat{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,2.6vw,40px)}
.hof-feat .side{margin-bottom:clamp(14px,2.4vw,30px)}
.hof-feat .mid .hf-mat picture{width:clamp(210px,26vw,350px)!important;aspect-ratio:4/5!important}
.hof-feat .side .hf-mat picture{width:clamp(130px,16vw,230px)!important;aspect-ratio:4/5!important}

/* ---------- moving rows ---------- */
.hof-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:0}
.hof-head .h2{max-width:15ch;margin-top:22px}
.hof-prev .hof-stage{margin-top:clamp(30px,4vw,56px)}
.hof-foot{display:flex;justify-content:center;margin-top:10px}
.hof-wall{position:relative;display:grid;gap:clamp(6px,1.4vw,18px);padding:clamp(14px,2vw,26px) 0}
.hof-page{padding:clamp(20px,3vw,40px) 0 clamp(40px,5vw,70px)}
.hf-row{--gap:clamp(18px,2.4vw,32px);overflow:hidden;padding:18px 0 26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hf-track{display:flex;align-items:center;gap:var(--gap);padding-inline-end:var(--gap);width:max-content;animation:hfx calc(var(--n) * 7.5s) linear infinite;animation-play-state:paused;will-change:transform}
.hf-row.run .hf-track{animation-play-state:running}
.hf-row:hover .hf-track,.hf-row:focus-within .hf-track{animation-play-state:paused}
.hf-row.rtl .hf-track{animation-direction:reverse}
@keyframes hfx{to{transform:translate3d(-50%,0,0)}}

/* ---------- one photo card ---------- */
.hf{flex:none;margin:0;position:relative}
.hf-btn{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;transition:transform .55s var(--ease)}
.hf-frame{position:relative;display:block;overflow:hidden;border-radius:var(--rl,20px);background:#141416;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 30px 50px -28px rgba(0,0,0,.9);transition:box-shadow .5s}
.hf-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.22);pointer-events:none}
.hf-mat{display:block}
.hf-mat picture{display:block;overflow:hidden;background:#161618}
.hf-mat img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 32%;transition:transform 1.1s var(--ease)}
.hf-p .hf-mat picture{width:clamp(130px,14.5vw,200px);aspect-ratio:3/4}
.hf-l .hf-mat picture{width:clamp(196px,22vw,300px);aspect-ratio:4/3}
.hf-s .hf-mat picture{width:clamp(156px,17vw,236px);aspect-ratio:1/1}
.hf-plate{display:inline-block;padding:6px 12px;border-radius:99px;font-size:11.5px;font-weight:600;color:#F4F3EF;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
@media (hover:hover){
.hf:hover .hf-btn{transform:translateY(-8px)}
.hf:hover .hf-frame{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 40px 60px -26px rgba(0,0,0,.95),0 0 40px -12px rgba(255,255,255,.25)}
.hf:hover img{transform:scale(1.05)}
}
.hf-btn:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:var(--rl,20px)}
/* photos rise into place the first time they're seen */
html.hfj .hof-stage:not(.in) .hf-btn,html.hfj .hof-wall:not(.in) .hf-btn,html.hfj .hof-grid:not(.in) .hf-btn{opacity:0;translate:0 24px}
.hof-stage.in .hf-btn,.hof-wall.in .hf-btn,.hof-grid.in .hf-btn{animation:arrive 1s cubic-bezier(.22,1,.36,1) both}
.hof-stage.in .mid .hf-btn{animation-delay:.05s}.hof-stage.in .side .hf-btn{animation-delay:.2s}
@keyframes arrive{0%{opacity:0;translate:0 24px}100%{opacity:1;translate:0 0}}

/* ---------- the full grid ---------- */
.hof-grid-sec{background:radial-gradient(60% 30% at 50% 0%,rgba(255,255,255,.05),transparent 70%),#0B0B0C}
.hof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding-top:30px}
.hof-grid .hf-btn,.hof-grid .hf-frame,.hof-grid .hf-mat,.hof-grid .hf-mat picture{width:100%!important}
.hof-grid .hf-mat picture{aspect-ratio:4/5!important}
.hof-grid-sec .gnote{text-align:center;margin-top:40px}

@media (max-width:700px){
.hof-hero{padding-top:calc(var(--rib,0px) + 118px)}
.hf-row{--gap:14px;padding:14px 0 22px}
.hf-p .hf-mat picture{width:118px}.hf-l .hf-mat picture{width:184px}.hf-s .hf-mat picture{width:142px}
.hof-feat{gap:10px}
.hof-feat .mid .hf-mat picture{width:46vw!important}
.hof-feat .side .hf-mat picture{width:22vw!important}
.hof-feat .side{margin-bottom:12px}
.hof-rc .beam{width:70vw}
.hof-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (prefers-reduced-motion:reduce){
.hof-rc .beam,.hf-track,.hof-stage.in .hf-btn,.hof-wall.in .hf-btn,.hof-grid.in .hf-btn{animation:none!important}
html.hfj .hof-stage:not(.in) .hf-btn,html.hfj .hof-wall:not(.in) .hf-btn,html.hfj .hof-grid:not(.in) .hf-btn{opacity:1;translate:0 0}
.hf-row{-webkit-mask-image:none;mask-image:none}
.hf-track{flex-wrap:wrap;justify-content:center;width:auto;padding-inline:var(--gut);row-gap:24px}
.hf[aria-hidden=true]{display:none}
}