/* ==== VERSION 5 — FAST BREAK ===============================
   Everything leans. The logo's slanted cuts become the whole
   grammar of the page: sheared panels, split teal/pink fields,
   oversized type running off the edge.
   ========================================================= */

:root{
  --bg:#0A0A0C; --bg-2:#0E0E12; --card:#131318;
  --fg:#F6F6F8; --muted:#9C9CA4; --line:rgba(169,168,170,.2);
  --display:"Archivo",system-ui,sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --util:"Archivo",monospace;
  --r:0px; --r-sm:0px;
  --shear:-9deg;
}

body{background-image:
  linear-gradient(108deg,rgba(19,199,202,.09) 0 32%,transparent 32.4%),
  linear-gradient(288deg,rgba(255,61,139,.09) 0 26%,transparent 26.4%)}

h1,h2,h3,h4,h5{font-weight:900;letter-spacing:-.045em}

/* the shear */
.hero-title{font-size:clamp(64px,15vw,220px);line-height:.82;transform:skewX(var(--shear));
  transform-origin:left bottom;margin-left:.06em}
.hero-title .accent{color:transparent;-webkit-text-stroke:2px var(--teal)}
.hero-title .accent::after{background:var(--pink);height:.055em;transform-origin:left}
.eyebrow{transform:skewX(var(--shear));display:inline-block}
.hero-logo{opacity:.085;transform:translate(-46%,-52%) rotate(-6deg) scale(1.1)}

.sec-title{transform:skewX(var(--shear));transform-origin:left bottom;display:inline-block}
.kicker{letter-spacing:.4em}

/* sheared panels, upright content */
.prog,.path-card,.aff,.pillar,.fs,.sent,.film{transform:skewX(-4deg)}
.prog>*,.path-card>*,.aff>*,.pillar>*,.fs>*,.sent>*,.film>*{transform:skewX(4deg)}
.prog{border-left:4px solid var(--teal)}
.prog:nth-child(even){border-left-color:var(--pink)}
.prog:hover{transform:skewX(-4deg) translateY(-8px)}
.aff{border-left:4px solid var(--pink)}
.film-screen{transform:skewX(4deg)}

.btn{border-radius:0;transform:skewX(-9deg);font-weight:700}
.btn>*,.btn{letter-spacing:.18em}
.btn-primary{background:var(--teal);color:#06110F}
.btn-primary:hover{background:var(--pink);color:#fff;transform:skewX(-9deg) translateY(-2px)}
.btn-ghost:hover,.btn-join:hover{transform:skewX(-9deg) translateY(-2px)}
.nav-link{letter-spacing:.16em}
.nav-link.active{transform:skewX(-9deg)}

.marks{border-top:3px solid var(--teal)}
.marks li{border-right:1px solid var(--line)}
.marks strong{transform:skewX(var(--shear));display:inline-block;font-size:clamp(28px,3.4vw,46px)}

/* split field behind the pillars */
.pillars{border:0;background:linear-gradient(100deg,rgba(19,199,202,.14) 0 50%,rgba(255,61,139,.14) 50% 100%);
  gap:1px}
.pillar{background:rgba(10,10,12,.86)}

.timeline li::before{width:4px;background:linear-gradient(180deg,var(--teal),var(--pink))}
.shot{border-radius:0}
.shot:nth-child(odd) img{clip-path:polygon(0 0,100% 0,100% 100%,3% 100%)}
.shot:nth-child(even) img{clip-path:polygon(3% 0,100% 0,100% 100%,0 100%)}
.shot-cap{letter-spacing:.2em}

.field input,.field select,.waiver{border-radius:0}
.dropdown-in{border-radius:0;border-left:4px solid var(--teal)}
.site-foot{border-top:4px solid var(--pink)}
.foot-logo{transform:rotate(-3deg)}

/* ==== BROADCAST PANEL — PLAYER DEVELOPMENT =================
   One section runs on the Broadcast system inside the Fast
   Break page: LED matrix ground, live ticker, square stat
   panels, monospaced data, numbered program slots. The shear
   is dropped here on purpose — a scoreboard reads straight.
   ========================================================= */

.sec-dev{
  --display:"Saira Condensed",Impact,sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  --util:"DM Mono",ui-monospace,monospace;
  font-family:var(--body);
  padding-top:clamp(56px,7vw,96px);
}

/* full-bleed LED panel behind the section */
.sec-dev::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);z-index:-1;pointer-events:none;
  background-color:#08090B;
  background-image:radial-gradient(rgba(169,168,170,.07) 1px,transparent 1.4px);
  background-size:5px 5px;
  border-top:1px solid rgba(19,199,202,.35);
  border-bottom:1px solid rgba(255,61,139,.35);
}

/* live ticker across the top of the panel */
.sec-dev .sec-head{position:relative;padding-top:38px}
.sec-dev .sec-head::before{
  content:"● LIVE  ·  23AD PLAYER DEVELOPMENT  ·  PRIVATE · GROUP · YOUTH · HS · COLLEGIATE · PROSPECTS  ·  FUNDAMENTALS FIRST  ·  ";
  position:absolute;top:0;left:0;right:0;white-space:nowrap;overflow:hidden;
  font-family:var(--util);font-size:10.5px;letter-spacing:.28em;color:var(--pink);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px 0;
  animation:tick 28s linear infinite;
}
@keyframes tick{from{text-indent:0}to{text-indent:-1500px}}

/* a scoreboard reads straight — drop the shear inside this section only */
.sec-dev .sec-title{transform:none;letter-spacing:.01em;display:block}
.sec-dev .kicker{letter-spacing:.28em;font-family:var(--util)}
.sec-dev .sec-lead{color:var(--muted)}

.sec-dev .prog-grid{counter-reset:pgm}
.sec-dev .prog{
  transform:none;border:1px solid var(--line);border-left:1px solid var(--line);
  border-radius:2px;background:linear-gradient(180deg,#101318,#0A0C0F);
  counter-increment:pgm;padding-top:34px;
}
.sec-dev .prog>*{transform:none}
.sec-dev .prog::before{height:2px;background:var(--teal);transform:scaleX(1)}
.sec-dev .prog::after{
  content:"PGM " counter(pgm,decimal-leading-zero);
  position:absolute;top:14px;right:16px;
  font-family:var(--util);font-size:10px;letter-spacing:.22em;color:var(--pink);
}
.sec-dev .prog:hover{transform:translateY(-6px);border-color:var(--teal);
  box-shadow:0 20px 50px rgba(19,199,202,.12)}
.sec-dev .prog:hover::before{background:linear-gradient(90deg,var(--teal),var(--pink))}
.sec-dev .prog h3{font-size:clamp(25px,2.5vw,34px);letter-spacing:.01em;font-weight:800}
.sec-dev .prog-sub{font-family:var(--util);font-size:11.5px;letter-spacing:.14em}

/* status pill becomes a data field */
.sec-dev .prog-who{
  border-radius:2px;border-color:rgba(19,199,202,.45);color:var(--fg);
  font-family:var(--util);font-size:10.5px;letter-spacing:.16em;
  background:rgba(19,199,202,.07);display:inline-flex;align-items:center;gap:8px;
}
.sec-dev .prog-who::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);
  animation:blink 1.8s steps(1) infinite;
}
@keyframes blink{50%{opacity:.25}}

.sec-dev .ticks li{font-family:var(--body);font-size:13.6px}
.sec-dev .ticks li::before{transform:none;border-radius:0;width:8px;height:8px;top:.55em;
  border-width:2px}
.sec-dev .prog-cta{font-family:var(--util);letter-spacing:.16em}

/* gallery + callouts follow the Fast Break grammar */
.callout{transform:skewX(-4deg);border-left:4px solid var(--pink)}
.callout>*{transform:skewX(4deg)}
.sec-gallery .sub-title{transform:skewX(var(--shear));transform-origin:left bottom;display:inline-block}
.sec-gallery .film{transform:skewX(-4deg)}
.sec-gallery .film>*{transform:skewX(4deg)}
.shots-archive .shot:nth-child(odd) img,.shots-archive .shot:nth-child(even) img{clip-path:none}