/* ===== VARIABLES ===== */
:root {
  --bg:          #0B0F19;
  --bg2:         #111827;
  --accent:      #39FF14;
  --accent-dim:  rgba(57,255,20,0.15);
  --accent-glow: rgba(57,255,20,0.40);
  --accent-soft: rgba(57,255,20,0.07);
  --white:       #FFFFFF;
  --muted:       #9CA3AF;
  --glass:       rgba(255,255,255,0.05);
  --border:      rgba(255,255,255,0.10);
  --display:     'Bebas Neue', sans-serif;
  --body:        'Poppins', sans-serif;
  --ease:        cubic-bezier(0.16,1,0.3,1);
  --spring:      cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--body);
  overflow-x:hidden;
}

/* ===== SECTION ===== */
#coaches{
  position:relative;
  padding:120px 0 140px;
  overflow:hidden;
  background:var(--bg);
}

/* BG GRID */
.bg-grid{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(57,255,20,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(57,255,20,0.025) 1px,transparent 1px);
  background-size:60px 60px;
  animation:gridDrift 25s linear infinite;
}
@keyframes gridDrift{0%{background-position:0 0}100%{background-position:60px 60px}}

/* BLOBS */
.blob{position:absolute;border-radius:50%;filter:blur(130px);z-index:0;pointer-events:none}
.blob-a{width:750px;height:750px;background:radial-gradient(circle,rgba(57,255,20,0.07) 0%,transparent 70%);top:-250px;right:-200px;animation:b1 14s ease-in-out infinite}
.blob-b{width:600px;height:600px;background:radial-gradient(circle,rgba(57,255,20,0.05) 0%,transparent 70%);bottom:-200px;left:-150px;animation:b2 18s ease-in-out infinite}
.blob-c{width:350px;height:350px;background:radial-gradient(circle,rgba(57,255,20,0.04) 0%,transparent 70%);top:45%;left:45%;animation:b1 22s ease-in-out infinite reverse}
@keyframes b1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,30px) scale(1.07)}}
@keyframes b2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(25px,-25px) scale(1.05)}}

/* PARTICLES */
.particles-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}

/* DIVIDER */
.sec-divider{
  position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent 0%,rgba(57,255,20,0.2) 20%,var(--accent) 50%,rgba(57,255,20,0.2) 80%,transparent 100%);
  animation:divPulse 3s ease-in-out infinite;
}
@keyframes divPulse{0%,100%{opacity:.6}50%{opacity:1}}

/* ===== CONTAINER ===== */
.container{max-width:1280px;margin:0 auto;padding:0 32px;position:relative;z-index:2}

/* ===== HEADER ===== */
.sec-header{text-align:center;margin-bottom:72px}

.sec-label{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 20px;
  background:var(--glass);
  border:1px solid rgba(57,255,20,0.3);
  border-radius:40px;
  font-size:11px;font-weight:600;
  letter-spacing:.2em;color:var(--accent);text-transform:uppercase;
  margin-bottom:28px;position:relative;overflow:hidden;
}
.sec-label::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(57,255,20,0.08),transparent);
  transform:translateX(-100%);animation:shimmer 3s ease-in-out infinite;
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.ldot{
  width:7px;height:7px;background:var(--accent);border-radius:50%;
  box-shadow:0 0 8px var(--accent),0 0 16px var(--accent-glow);
  animation:ldotPulse 2s ease-in-out infinite;
}
@keyframes ldotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.6}}

.sec-title{
  font-family:var(--display);
  font-size:clamp(38px,5.5vw,72px);
  line-height:1;letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:20px;
}
.sec-title .hi{
  color:var(--accent);
  text-shadow:0 0 30px var(--accent-glow),0 0 60px rgba(57,255,20,0.2);
}
.sec-desc{
  max-width:620px;margin:0 auto;
  font-size:15.5px;font-weight:300;color:var(--muted);line-height:1.8;
}

/* ===== GRID ===== */
.coaches-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

/* ===== CARD ===== */
.coach-card{
  position:relative;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  opacity:0;transform:translateY(55px);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease),
    border-color .4s ease,
    box-shadow .4s ease;
  cursor:pointer;
}
.coach-card.revealed{opacity:1;transform:translateY(0)}

.coach-card:hover{
  border-color:rgba(57,255,20,0.5);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.55),
    0 0 40px rgba(57,255,20,0.12),
    inset 0 1px 0 rgba(57,255,20,0.12);
  transform:translateY(-12px) !important;
}

/* top glow line */
.coach-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;transition:opacity .4s ease;z-index:5;
}
.coach-card:hover::after{opacity:1}

/* ── IMAGE ZONE ── */
.card-img-wrap{
  position:relative;height:260px;overflow:hidden;
}
.card-img-wrap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(11,15,25,0) 30%,
    rgba(11,15,25,0.6) 65%,
    rgba(11,15,25,0.98) 100%);
  z-index:1;
}

/* avatar placeholder — futuristic silhouette */
.coach-avatar{
  width:100%;height:100%;
  background:var(--bg2);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  transition:transform .6s var(--ease);
}
.coach-card:hover .coach-avatar{transform:scale(1.07)}

/* sport-themed bg pattern per coach */
.coach-avatar .av-bg{
  position:absolute;inset:0;
  opacity:.18;
  background-size:40px 40px;
}
.coach-avatar .av-silhouette{
  position:relative;z-index:1;
  width:130px;height:180px;
  display:flex;align-items:flex-end;justify-content:center;
}
.coach-avatar .av-silhouette svg{
  width:100%;height:100%;
  fill:rgba(57,255,20,0.25);
  filter:drop-shadow(0 0 12px rgba(57,255,20,0.3));
  transition:filter .4s ease, fill .4s ease;
}
.coach-card:hover .av-silhouette svg{
  fill:rgba(57,255,20,0.4);
  filter:drop-shadow(0 0 20px rgba(57,255,20,0.6));
}

/* glow ring behind avatar */
.av-ring{
  position:absolute;
  width:180px;height:180px;
  border-radius:50%;
  border:1px solid rgba(57,255,20,0.15);
  top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:0;
  animation:ringPulse 3s ease-in-out infinite;
}
.av-ring::before{
  content:'';position:absolute;inset:14px;border-radius:50%;
  border:1px solid rgba(57,255,20,0.1);
  animation:ringPulse 3s ease-in-out infinite reverse;
}
@keyframes ringPulse{
  0%,100%{box-shadow:0 0 0 0 transparent}
  50%{box-shadow:0 0 20px rgba(57,255,20,0.12)}
}

/* initials fallback text */
.av-initials{
  position:absolute;z-index:2;
  font-family:var(--display);font-size:52px;
  color:rgba(57,255,20,0.35);
  letter-spacing:.05em;
  top:50%;left:50%;transform:translate(-50%,-50%);
  transition:color .4s ease;
}
.coach-card:hover .av-initials{color:rgba(57,255,20,0.6)}

/* SPORT ICON badge top-left */
.sport-badge{
  position:absolute;top:16px;left:16px;z-index:3;
  width:40px;height:40px;
  background:rgba(11,15,25,0.8);
  border:1px solid rgba(57,255,20,0.3);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  backdrop-filter:blur(8px);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.coach-card:hover .sport-badge{
  border-color:var(--accent);
  box-shadow:0 0 14px rgba(57,255,20,0.35);
}

/* CERTIFIED badge top-right */
.cert-badge{
  position:absolute;top:16px;right:16px;z-index:3;
  padding:5px 12px;
  background:rgba(57,255,20,0.12);
  border:1px solid rgba(57,255,20,0.35);
  border-radius:30px;
  font-size:9px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);
  backdrop-filter:blur(8px);
  transition:background .3s ease, box-shadow .3s ease;
}
.coach-card:hover .cert-badge{
  background:rgba(57,255,20,0.2);
  box-shadow:0 0 12px rgba(57,255,20,0.3);
}

/* ── CARD BODY ── */
.card-body{
  padding:22px 24px 26px;
  position:relative;z-index:2;
}

.coach-name{
  font-family:var(--display);
  font-size:26px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--white);
  margin-bottom:4px;
  transition:color .3s ease;
}
.coach-card:hover .coach-name{
  color:var(--accent);
  text-shadow:0 0 18px rgba(57,255,20,0.4);
}

.coach-sport{
  font-size:12px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);opacity:.8;
  margin-bottom:14px;
}

/* META ROW */
.coach-meta{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.meta-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;
  background:rgba(57,255,20,0.06);
  border:1px solid rgba(57,255,20,0.15);
  border-radius:20px;
  font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
  transition:border-color .3s ease, color .3s ease;
}
.coach-card:hover .meta-pill{border-color:rgba(57,255,20,0.25);color:var(--white)}
.meta-pill svg{width:10px;height:10px;stroke:var(--accent);fill:none;stroke-width:2;flex-shrink:0}

.coach-desc{
  font-size:13px;font-weight:300;
  color:var(--muted);line-height:1.75;
  margin-bottom:20px;
  border-top:1px solid var(--border);
  padding-top:16px;
  transition:border-color .3s ease;
}
.coach-card:hover .coach-desc{border-color:rgba(57,255,20,0.15)}

/* BOTTOM ROW */
.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Social icons */
.social-links{display:flex;gap:8px}
.social-btn{
  width:34px;height:34px;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  transition:
    transform .35s var(--spring),
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}
.social-btn:hover{
  transform:translateY(-4px) scale(1.1);
  border-color:rgba(57,255,20,0.5);
  background:rgba(57,255,20,0.08);
  box-shadow:0 0 12px rgba(57,255,20,0.25);
}
.social-btn svg{width:14px;height:14px;fill:var(--muted);transition:fill .3s ease}
.social-btn:hover svg{fill:var(--accent)}

/* View Profile button */
.view-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 20px;
  background:transparent;
  border:1px solid rgba(57,255,20,0.4);
  border-radius:8px;
  font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);
  cursor:pointer;text-decoration:none;
  position:relative;overflow:hidden;
  transition:
    color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}
.view-btn::before{
  content:'';position:absolute;inset:0;
  background:var(--accent);
  transform:translateX(-101%);
  transition:transform .4s var(--ease);
  z-index:0;
}
.view-btn:hover::before{transform:translateX(0)}
.view-btn:hover{color:var(--bg);border-color:var(--accent);box-shadow:0 0 20px rgba(57,255,20,0.35)}
.view-btn span{position:relative;z-index:1}
.view-btn svg{position:relative;z-index:1;width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.view-btn:hover svg{transform:translate(3px,-3px)}

/* ===== BOTTOM TAGLINE ===== */
.coaches-footer{
  text-align:center;margin-top:64px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.footer-line{
  display:flex;align-items:center;gap:20px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.footer-line::before,.footer-line::after{
  content:'';display:block;width:80px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(57,255,20,0.3));
}
.footer-line::before{transform:scaleX(-1)}
.coaches-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;
  background:var(--accent);
  border:none;border-radius:8px;
  font-family:var(--body);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--bg);cursor:pointer;
  transition:box-shadow .3s ease, transform .3s var(--spring);
  text-decoration:none;
}
.coaches-cta:hover{
  box-shadow:0 0 30px var(--accent-glow), 0 8px 24px rgba(57,255,20,0.25);
  transform:translateY(-3px);
}
.coaches-cta svg{width:14px;height:14px;stroke:var(--bg);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){.coaches-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  #coaches{padding:80px 0 100px}
  .container{padding:0 20px}
  .coaches-grid{grid-template-columns:1fr;gap:20px}
  .sec-title{font-size:clamp(34px,10vw,52px)}
  .card-img-wrap{height:220px}
}