/* ============ AGENT FILE CARDS ============
   One card for every athlete, shared by the homepage (Featured athletes) and
   the Athletes page (top rail). Markup is drawn by agent-card.js from one data
   list, so a change to an athlete is made once and shows on both pages.

   The card is laid out at a fixed 360 x 504 and scaled to whatever width its
   slot gives it, so the composition is identical at every size. Tap or click
   turns it over. On the back, "View full file" opens the athlete's profile.
   Every class is prefixed ag- so nothing here collides with turbotec.css. */

.ag-row{display:flex;flex-wrap:nowrap;gap:clamp(14px,1.8vw,24px);
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;
  /* room for the edition glow and the hover lift, which overflow would clip */
  padding:22px var(--gutter,20px) 36px 14px;margin:-22px calc(var(--gutter,20px) * -1) -36px -14px}
.ag-row::-webkit-scrollbar{display:none}
.ag-slot{position:relative;flex:0 0 clamp(210px,19vw,250px);aspect-ratio:360/504;scroll-snap-align:start}

.ag-card{position:absolute;top:0;left:0;width:360px;height:504px;transform-origin:0 0;
  transform:scale(var(--ag-s,.6));perspective:1600px;--mx:30%;--my:20%;
  --ag-ink:#0A0A0B;--ag-paper:#E8E6E1;--ag-dim:#8C8C94;--ag-line:#34343a;
  font-family:var(--body,'Archivo',sans-serif);color:var(--ag-paper);text-align:left}
.ag-card[data-ed="gold"]{--ed:#E6A23F;--glow:rgba(230,162,63,.42)}
.ag-card[data-ed="red"]{--ed:#CE3227;--glow:rgba(206,50,39,.48)}
.ag-card[data-ed="cyan"]{--ed:#19C3DB;--glow:rgba(25,195,219,.42)}
.ag-card[data-ed="mono"]{--ed:#E8E6E1;--glow:rgba(232,230,225,.20)}

.ag-turn{all:unset;position:absolute;inset:0;z-index:5;cursor:pointer;
  clip-path:polygon(22px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 22px),calc(100% - 22px) 100%,10px 100%,0 calc(100% - 10px),0 22px)}
.ag-turn:focus-visible{outline:none}
.ag-card:has(.ag-turn:focus-visible) .ag-side{filter:drop-shadow(0 0 0 #E6A23F) drop-shadow(0 0 3px #E6A23F)}
.ag-open{position:absolute;z-index:6;left:20px;top:424px;width:200px;height:60px;display:none}
.ag-card.is-back .ag-open{display:block}
.ag-open:focus-visible{outline:2px solid #E6A23F;outline-offset:3px}

.ag-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.ag-card.is-back .ag-flip{transform:rotateY(180deg)}
.ag-side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  filter:drop-shadow(0 0 14px var(--glow));transition:filter .32s ease,transform .32s cubic-bezier(.22,.61,.36,1)}
.ag-back{transform:rotateY(180deg)}
@media (hover:hover){
  .ag-card:hover .ag-front{filter:drop-shadow(0 0 26px var(--glow));transform:translateY(-6px)}
  .ag-card:hover .ag-back{filter:drop-shadow(0 0 26px var(--glow));transform:rotateY(180deg) translateY(-6px)}
  .ag-card:hover .ag-face::after{opacity:.22}
}
.ag-frame{position:absolute;inset:0;
  clip-path:polygon(22px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 22px),calc(100% - 22px) 100%,10px 100%,0 calc(100% - 10px),0 22px);
  background:linear-gradient(140deg,var(--ed) 0%,color-mix(in srgb,var(--ed) 30%,#0A0A0B) 46%,color-mix(in srgb,var(--ed) 30%,#0A0A0B) 62%,var(--ed) 100%)}
.ag-face{position:absolute;inset:2px;background:#0A0A0B;overflow:hidden;
  clip-path:polygon(21px 0,calc(100% - 9.5px) 0,100% 9.5px,100% calc(100% - 21px),calc(100% - 21px) 100%,9.5px 100%,0 calc(100% - 9.5px),0 21px)}
.ag-face::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .32s ease;
  background:radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb,var(--ed) 60%,transparent) 0%,transparent 42%)}
.ag-face>*{position:absolute;margin:0}

.ag-photo{inset:0 0 auto 0;height:373px;object-fit:cover;width:100%;display:block}
.ag-card[data-ed="mono"] .ag-photo{filter:grayscale(1) contrast(1.06)}
.ag-shade{inset:0 0 auto 0;height:377px;
  background:linear-gradient(180deg,rgba(10,10,11,.82) 0%,rgba(10,10,11,.35) 18%,rgba(10,10,11,0) 32%,rgba(10,10,11,0) 40%,#0A0A0B 92%)}
.ag-tint{inset:0;background:radial-gradient(120% 60% at 0% 100%,color-mix(in srgb,var(--ed) 16%,transparent),transparent 60%)}

.ag-wm{font-family:var(--display,'Chakra Petch',sans-serif);font-weight:700;letter-spacing:.08em;line-height:1;text-transform:uppercase;color:var(--ag-paper)}
.ag-m{font-family:'Share Tech Mono',ui-monospace,monospace;text-transform:uppercase;line-height:1;white-space:nowrap;font-weight:400}
.ag-aoa{top:21px;right:48px;font-size:8.5px;letter-spacing:.28em;text-align:right;line-height:1.45}
.ag-globe{top:17px;right:20px;width:20px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 4px rgba(10,10,11,.7))}
.ag-file{top:72px;left:20px;font-size:8.5px;letter-spacing:.28em;color:rgba(232,230,225,.72);line-height:1.6;text-shadow:0 1px 6px rgba(10,10,11,.8)}
.ag-file b{display:block;font-family:var(--display,'Chakra Petch',sans-serif);font-weight:600;font-size:15px;letter-spacing:.08em;color:var(--ag-paper)}
.ag-name{left:20px;right:20px;bottom:140px;white-space:nowrap;font-family:var(--display,'Chakra Petch',sans-serif);
  font-weight:700;font-size:42px;line-height:.95;letter-spacing:.01em;text-transform:uppercase;color:var(--ag-paper)}
.ag-loc{left:20px;top:372px;font-size:10.5px;letter-spacing:.22em}
.ag-lbl{left:20px;font-size:8.5px;letter-spacing:.28em;color:var(--ed)}
.ag-chips{left:20px;right:20px;top:414px;display:flex;gap:6px}
.ag-chip{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  height:26px;display:flex;align-items:center;padding:0 10px;border:1px solid var(--ag-line);white-space:nowrap;line-height:1}
.ag-chip.p{border-color:var(--ed);background:color-mix(in srgb,var(--ed) 14%,transparent);color:var(--ed)}
.ag-card[data-ed="mono"] .ag-chip.p{color:var(--ag-paper)}
.ag-rule{left:20px;right:20px;height:1px;background:var(--ag-line)}
.ag-vals{left:20px;top:472px;font-size:8px;letter-spacing:.2em;color:var(--ag-dim)}
.ag-pwr{right:20px;top:472px;font-size:8px;letter-spacing:.22em;color:var(--ag-dim)}

.ag-b-wm{top:22px;left:20px;font-size:16px}
.ag-b-file{top:25px;right:20px;font-size:8.5px;letter-spacing:.24em;color:var(--ag-dim)}
.ag-b-file b{font-weight:400;color:var(--ed)}
.ag-quote{top:80px;left:20px;right:20px;white-space:nowrap;font-family:var(--display,'Chakra Petch',sans-serif);font-weight:600;font-size:17px;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.ag-b-name{top:122px;left:20px;right:20px;font-family:var(--display,'Chakra Petch',sans-serif);font-weight:700;font-size:24px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.ag-b-loc{top:152px;left:20px;font-size:9.5px;letter-spacing:.22em;color:var(--ag-dim)}
.ag-bio{top:174px;left:20px;right:20px;font-size:12px;line-height:18px;opacity:.9}
.ag-cred{left:20px;right:20px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;line-height:1}
.ag-cred span:last-child{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ag-dim);white-space:nowrap}
.ag-skills{top:342px;left:20px;right:20px;font-size:11.5px;line-height:17px;color:var(--ag-dim)}
.ag-qr{top:424px;left:20px;width:60px;height:60px;background:var(--ag-paper);padding:4px;box-sizing:border-box;image-rendering:pixelated}
.ag-view{top:430px;left:92px;font-size:9.5px;letter-spacing:.22em}
.ag-view::after{content:" \2197";color:var(--ed)}
.ag-url{top:446px;left:92px;font-size:8px;letter-spacing:.14em;color:var(--ag-dim)}
.ag-stat{top:466px;left:92px;font-size:8px;letter-spacing:.22em;color:var(--ag-dim)}
.ag-stat b{font-weight:400;color:#3FBF7F}
.ag-b-pwr{top:430px;right:20px;font-size:7.5px;letter-spacing:.28em;color:var(--ag-dim)}
.ag-b-wm2{top:443px;right:20px;font-size:18px}
.ag-b-vals{top:472px;right:20px;font-size:7.5px;letter-spacing:.22em;color:var(--ag-dim)}

@media(max-width:860px){
  .ag-row{gap:12px;scroll-snap-type:x mandatory}
  .ag-slot{flex:0 0 62%}
}
@media (prefers-reduced-motion:reduce){
  .ag-flip,.ag-side,.ag-face::after{transition:none}
  .ag-card:hover .ag-front{transform:none}
  .ag-card:hover .ag-back{transform:rotateY(180deg)}
}