/* ================================================================
   SECTION 04 — PLAYER DEVELOPMENT PROFILE
   The athlete is a separate transparent PNG. UI and background are code.
   ================================================================ */

.profile{padding:0;background:#eeefeb;color:#080b09;overflow:hidden;border-block:1px solid rgba(5,7,6,.22)}
.profile::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.52;background:linear-gradient(rgba(5,7,6,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(5,7,6,.035) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(90deg,transparent,#000 35%,#000)}
.profile-layout{position:relative;min-height:555px;display:grid;grid-template-columns:1.05fr 1.05fr 1.18fr 1.28fr;gap:0;align-items:stretch}
.profile-layout>*{min-width:0;position:relative;border-left:1px solid rgba(5,7,6,.13)}
.profile-layout>*:first-child{border-left:0}

.profile-copy{z-index:4;padding:58px clamp(24px,3vw,48px) 42px 0;display:flex;flex-direction:column;align-items:flex-start}
.profile-copy .section-label{margin-bottom:19px;color:#4b9e42}
.profile-copy .section-title{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:clamp(47px,4vw,64px);font-weight:800;line-height:.9;letter-spacing:-.026em}
.profile-copy>p:not(.section-label){max-width:255px;margin-top:20px;font-size:11px;line-height:1.62;color:#565d57;text-wrap:pretty}
.profile-cta{min-height:42px;margin-top:23px;padding-inline:17px;border:1px solid rgba(5,7,6,.22);color:#080b09;background:rgba(255,255,255,.22);font-size:8px}
.profile-cta:hover{border-color:var(--green-dark);color:var(--green-dark)}
.profile-copy .demo-note{margin-top:auto;padding-top:20px;color:#8a908b;font-size:6px}

.profile-athlete{z-index:3;isolation:isolate}
.profile-number{position:absolute;z-index:-1;left:2%;top:19px;font:800 clamp(130px,13vw,208px)/.8 "Barlow Condensed",sans-serif;letter-spacing:-.07em;color:rgba(5,7,6,.045)}
.profile-id{position:absolute;z-index:4;right:9px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font:700 8px var(--font-ui);letter-spacing:.18em;color:#6c736d}
.profile-person{position:absolute;z-index:2;inset:-12px -1% 8px 1%;pointer-events:none}
.profile-person::after{content:"";position:absolute;z-index:-1;left:26%;right:18%;bottom:34px;height:28px;border-radius:50%;background:rgba(3,6,4,.22);filter:blur(15px)}
.profile-person img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 20px 18px rgba(5,8,6,.18));transform:scale(.96);transform-origin:center bottom}

.profile-radar-panel,.profile-metrics{z-index:4;padding:32px clamp(18px,2vw,30px) 24px;background:rgba(246,247,243,.56);backdrop-filter:blur(5px);overflow:hidden}
.profile-radar-panel::after,.profile-metrics::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:-18%;height:18%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(8,213,43,.055),transparent);animation:profile-scan 6.5s linear infinite}
.profile-metrics::after{animation-delay:-3.1s}
.profile-panel-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid rgba(5,7,6,.16);text-transform:uppercase;font:700 8px var(--font-ui);letter-spacing:.09em}
.profile-panel-head b{font-size:6px;color:var(--green-dark)}
.profile-radar{width:100%;height:370px;overflow:visible}
.radar-grid polygon,.radar-grid path{fill:none;stroke:rgba(5,7,6,.15);stroke-width:1}
.radar-value{fill:rgba(8,213,43,.54);stroke:#079522;stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.radar-points circle{fill:#087f1c;stroke:#eeefeb;stroke-width:1;animation:profile-point-pulse 2.4s ease-in-out infinite}
.radar-points circle:nth-child(2){animation-delay:-.4s}.radar-points circle:nth-child(3){animation-delay:-.8s}.radar-points circle:nth-child(4){animation-delay:-1.2s}.radar-points circle:nth-child(5){animation-delay:-1.6s}.radar-points circle:nth-child(6){animation-delay:-2s}
.radar-labels text{font:700 7px var(--font-ui);letter-spacing:.03em;fill:#353b36;text-anchor:middle}
.radar-labels text:nth-child(2),.radar-labels text:nth-child(3){text-anchor:start}.radar-labels text:nth-child(5),.radar-labels text:nth-child(6){text-anchor:end}
.profile-code{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(5,7,6,.13);font:700 6px var(--font-ui);letter-spacing:.12em;color:#777e78}
.profile-code b{color:var(--green-dark)}

.profile-metrics{padding-right:0}
.profile-metric-list{display:grid;gap:22px;margin-top:47px}
.profile-metric{display:grid;grid-template-columns:82px minmax(70px,1fr) 42px;gap:12px;align-items:center}
.profile-metric>span{font:700 8px var(--font-ui);letter-spacing:.04em;text-transform:uppercase}
.profile-metric>input{width:100%;height:16px;margin:0;padding:0;appearance:none;-webkit-appearance:none;pointer-events:none;cursor:default;opacity:1;background:transparent;transform-origin:left}
.profile-metric>input::-webkit-slider-runnable-track{height:3px;border:0;background:linear-gradient(90deg,var(--green),var(--green)) 0/var(--value) 100% no-repeat,rgba(5,7,6,.13)}
.profile-metric>input::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4.5px;appearance:none;-webkit-appearance:none;border:3px solid #f2f3ef;border-radius:50%;background:var(--green-dark);box-shadow:0 0 0 1px rgba(5,7,6,.3),0 0 9px rgba(8,213,43,.3)}
.profile-metric>input::-moz-range-track{height:3px;border:0;background:rgba(5,7,6,.13)}
.profile-metric>input::-moz-range-progress{height:3px;background:var(--green)}
.profile-metric>input::-moz-range-thumb{width:8px;height:8px;border:3px solid #f2f3ef;border-radius:50%;background:var(--green-dark);box-shadow:0 0 0 1px rgba(5,7,6,.3)}
.profile-metric>input:focus-visible{outline:1px solid var(--green-dark);outline-offset:5px}
.profile-metric>output{font:600 7px var(--font-ui);color:#626a63;font-variant-numeric:tabular-nums}
.profile-metrics>small{position:absolute;left:30px;bottom:26px;font:600 6px var(--font-ui);letter-spacing:.11em;color:#929792}

@keyframes profile-scan{to{transform:translateY(760%)}}
@keyframes profile-point-pulse{0%,100%{r:2.6;opacity:.65}50%{r:3.8;opacity:1}}

@media (max-width:1100px){
  .profile-layout{grid-template-columns:1fr 1fr;min-height:auto}
  .profile-copy,.profile-athlete{min-height:520px}
  .profile-copy{padding-left:0}
  .profile-radar-panel,.profile-metrics{min-height:500px;border-top:1px solid rgba(5,7,6,.13)}
  .profile-metrics{padding-right:30px}
}

@media (max-width:640px){
  .profile-layout{width:100%;grid-template-columns:1fr}
  .profile-layout>*{border-left:0}
  .profile-copy{min-height:470px;padding:70px 20px 38px}
  .profile-copy .section-title{font-size:54px}
  .profile-copy .demo-note{margin-top:38px}
  .profile-athlete{min-height:530px;border-top:1px solid rgba(5,7,6,.13)}
  .profile-number{font-size:190px;left:9%}
  .profile-person{inset:4px 6% 10px}
  .profile-id{right:16px}
  .profile-radar-panel,.profile-metrics{min-height:auto;padding:30px 20px}
  .profile-radar{height:340px}
  .profile-metrics{padding-bottom:72px}
  .profile-metric-list{margin-top:34px;gap:19px}
  .profile-metrics>small{left:20px;bottom:25px}
}

@media (prefers-reduced-motion:reduce){
  .profile-radar-panel::after,.profile-metrics::after,.radar-points circle{animation:none}
}