/* ==========================================================================
   Replay Sports — 2026 enhancement layer
   --------------------------------------------------------------------------
   Additive only. Loads AFTER css/styles.css and reuses its brand tokens
   (--accent, --font-display, …) so nothing about the brand changes.
   Scoped by opt-in classes, so linking this file can never restyle a page
   that doesn't use the new markup. Never loaded by /g/ (streaming) or
   /p/ (showcase) — those pages are self-contained by design.
   ========================================================================== */

/* --- Fluid type: headings scale with the viewport instead of stepping at
   breakpoints. clamp() keeps a sane floor on phones and ceiling on desktop. */
.u-fluid-h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.08; }
.u-fluid-h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.15; }

/* Stops ragged one-word orphans in headlines. Widely supported in 2026;
   older browsers simply ignore it. */
.u-balance { text-wrap: balance; }
.u-pretty  { text-wrap: pretty; }

/* --- Section rhythm -------------------------------------------------------- */
.section-head { max-width: 62ch; margin: 0 auto 2.5rem; text-align: center; }
.section-head .eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: 0.6rem; display: block;
}
.section-head p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin-top: 0.75rem; }

/* ==========================================================================
   Bento grid — the layout pattern most SaaS sites moved to; varied cell
   sizes create hierarchy a uniform card grid can't.
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.bento-cell {
  position: relative;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(148,163,184,0.07), rgba(148,163,184,0.02));
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
/* Accent wash that only shows on the feature cells */
.bento-cell.is-feature {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(59,130,246,0.18), transparent 60%),
    linear-gradient(180deg, rgba(148,163,184,0.07), rgba(148,163,184,0.02));
}
.bento-cell:hover { border-color: rgba(96,165,250,0.55); transform: translateY(-3px); }
.bento-cell h3 {
  font-family: var(--font-display); margin: 0;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem); letter-spacing: 0.01em;
}
.bento-cell p { color: var(--muted); margin: 0; line-height: 1.5; font-size: 0.92rem; }
/* Inline SVG, not emoji: emoji render differently on every OS/browser,
   can't take the brand color, and sit on the text baseline unpredictably.
   These inherit currentColor so one rule restyles the whole set. */
.bento-cell .cell-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; margin-bottom: 0.1rem;
  background: rgba(59,130,246,0.16); border: 1px solid rgba(96,165,250,0.35);
  color: var(--accent-soft);
}
.bento-cell .cell-icon svg { width: 19px; height: 19px; display: block; }
.bento-cell.is-feature .cell-icon {
  background: rgba(59,130,246,0.24); border-color: rgba(96,165,250,0.55);
}

/* Cell spans — the hierarchy. Desktop: a 2x2 anchor with two wides beside
   it (showcase, live stats), then a standard, a wide and a standard. */
.bento-a { grid-column: span 2; grid-row: span 2; }
.bento-b { grid-column: span 2; }
.bento-d { grid-column: span 2; }
.bento-c { grid-column: span 1; }
.bento-e { grid-column: span 2; }
.bento-f { grid-column: span 1; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; }
  .bento-a { grid-column: span 2; grid-row: auto; }
  .bento-b, .bento-d, .bento-e { grid-column: span 2; }
  .bento-c, .bento-f { grid-column: span 1; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento > * { grid-column: 1 / -1 !important; }
}

/* ==========================================================================
   Image placeholders — clearly marked slots so a real asset can drop in
   later without touching layout. Each states its ideal aspect + content.
   ========================================================================== */
.ph {
  position: relative; width: 100%; margin-top: auto;
  border-radius: 12px; overflow: hidden;
  border: 1px dashed rgba(148,163,184,0.4);
  background:
    linear-gradient(135deg, rgba(59,130,246,0.10), rgba(16,185,129,0.07)),
    repeating-linear-gradient(45deg, rgba(148,163,184,0.05) 0 10px, transparent 10px 20px);
  display: grid; place-items: center; text-align: center; padding: 1rem;
  min-height: 120px;
}
.ph-tall { min-height: 240px; }
.ph-wide { min-height: 150px; }
.ph span {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(203,213,225,0.85); line-height: 1.5;
}
.ph small { display: block; font-family: var(--font-body); letter-spacing: 0;
  text-transform: none; color: var(--muted-dark); font-size: 0.72rem; margin-top: 0.3rem; }
/* Real image dropped in later: add class="ph has-image" and an <img>. */
.ph.has-image { border-style: solid; border-color: var(--border); padding: 0; background: none; }
.ph.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Proof band — stats + logo row. The single most common gap on early
   marketing sites; numbers and names do more than another feature card.
   ========================================================================== */
.proof {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(15,23,42,0.6), rgba(15,23,42,0.25));
}
.proof-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  text-align: center; padding: 2.25rem 0;
}
.proof-stat .n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); color: var(--text);
  line-height: 1; display: block;
}
.proof-stat .l {
  display: block; margin-top: 0.4rem; color: var(--muted);
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
}
@media (max-width: 720px) { .proof-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }

/* ==========================================================================
   Testimonial cards
   ========================================================================== */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }
.quote {
  padding: 1.5rem; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(148,163,184,0.07), rgba(148,163,184,0.02));
  display: flex; flex-direction: column; gap: 0.9rem;
}
.quote blockquote { margin: 0; color: var(--text); line-height: 1.6; font-size: 1rem; }
.quote blockquote::before { content: "\201C"; color: var(--accent-soft); font-size: 1.6rem; line-height: 0; }
.quote .who { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; }
.quote .avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: rgba(59,130,246,0.18); border: 1px dashed rgba(148,163,184,0.45);
  display: grid; place-items: center; font-size: 0.62rem; color: var(--muted-dark);
}
.quote .who b { display: block; font-size: 0.9rem; }
.quote .who span { color: var(--muted); font-size: 0.8rem; }

/* ==========================================================================
   Scroll-driven reveals — native CSS, no JS, no library.
   Progressive enhancement: content is authored in its FINISHED state, and
   the animation is layered on only where animation-timeline is supported,
   so unsupported browsers (and reduced-motion users) see it fully visible.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    @keyframes reveal-in {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* Gentle float for the hero device — pure decoration, motion-safe. */
@media (prefers-reduced-motion: no-preference) {
  .u-float { animation: floaty 7s ease-in-out infinite; }
  @keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }
}

/* ==========================================================================
   Audience switcher cards (athlete / coach / parent / recruiter)
   ========================================================================== */
.aud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .aud-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .aud-grid { grid-template-columns: 1fr; } }
.aud {
  padding: 1.35rem; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(148,163,184,0.06), transparent);
  transition: border-color .25s ease, transform .25s ease;
}
.aud:hover { border-color: rgba(96,165,250,0.5); transform: translateY(-3px); }
.aud h3 {
  font-family: var(--font-display); font-size: 1rem; margin: 0 0 0.45rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-soft);
}
.aud p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin: 0; }

/* --- Closing CTA ---------------------------------------------------------- */
.cta-band {
  border-radius: 22px; padding: clamp(2rem, 1rem + 4vw, 3.5rem);
  border: 1px solid rgba(96,165,250,0.35);
  background:
    radial-gradient(90% 140% at 15% 0%, rgba(59,130,246,0.28), transparent 62%),
    linear-gradient(180deg, rgba(15,23,42,0.85), rgba(15,23,42,0.6));
  text-align: center;
}
.cta-band h2 { font-family: var(--font-display); margin: 0 0 0.65rem; }
.cta-band p { color: var(--muted); margin: 0 auto 1.5rem; max-width: 52ch; line-height: 1.6; }

/* ==========================================================================
   Real showcase gallery (recruiting) — stills of an actual athlete's card,
   page, and clips. Contact details are never included in the stills.
   ========================================================================== */
.showcase-gallery {
  display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 14px; align-items: start;
}
@media (max-width: 900px) { .showcase-gallery { grid-template-columns: 1fr 1fr; } .sc-reels { grid-column: span 2; grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .showcase-gallery { grid-template-columns: 1fr; } .sc-reels { grid-column: auto; grid-template-columns: 1fr; } }
.sc {
  margin: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); background: rgba(15,23,42,0.6);
  transition: border-color .25s ease, transform .25s ease;
}
.sc:hover { border-color: rgba(96,165,250,0.55); transform: translateY(-3px); }
.sc img { width: 100%; height: auto; display: block; }
.sc figcaption {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); padding: 0.6rem 0.85rem;
}
.sc-reels { display: grid; gap: 14px; }
.sc-reel { position: relative; }
.sc-reel .play {
  position: absolute; left: 50%; top: 42%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: rgba(15,23,42,0.72); border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
}
.sc-reel .play::after {
  content: ""; position: absolute; left: 21px; top: 16px;
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff;
}
.sc-note { color: var(--muted-dark); font-size: 0.8rem; margin: 0.9rem 0 0; }

/* Real images in the feature cells get FIXED heights so a tall phone
   screenshot can't stretch its cell (and the whole grid) to its natural size. */
.ph.has-image { min-height: 0; }
.ph-wide.has-image { height: 200px; }
.ph.has-image.img-top img { object-position: top; }
@media (max-width: 720px) { .ph-wide.has-image { height: 170px; } }

/* Feature cell phone: fills whatever height the grid gives the 2x2 cell,
   rising out of the bottom edge like the App Store shots. The phone is sized
   from the slot's height (not a fixed px), so ~85% of the screen is always
   visible: the drawing, the arrow and the coach's note, never a dead gap. */
.ph.ph-phone {
  flex: 1 1 auto; min-height: 300px; margin: 0.35rem -1.1rem -1.1rem;
  padding: 0; border: 0; border-radius: 0; background: none;
  display: block; overflow: visible;   /* the CELL clips the phone; clipping here would cut the shadow to a hard edge */
}
.ph.ph-phone img {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  height: 108%; width: auto; max-width: none; display: block;   /* ~93% of the screen shows: the note stays in view */
  /* same outline as the recruiting hero phone */
  border-radius: 28px; border: 6px solid #0b1220; background: #0b1220;
  filter: drop-shadow(0 26px 34px rgba(2,6,23,0.45)) drop-shadow(0 8px 12px rgba(2,6,23,0.35));
}
@media (max-width: 900px) { .ph.ph-phone { min-height: 340px; } }

/* Landscape screen variant (live stats): copy on top, the phone's landscape
   screen below it at full cell width, framed like the phones. */
.ph.ph-landscape {
  margin-top: auto; padding: 0; border: 0; background: none; min-height: 0;
  display: block; overflow: visible; border-radius: 0;
}
.ph.ph-landscape img {
  display: block; width: 100%; height: auto;
  border-radius: 18px; border: 5px solid #0b1220; background: #0b1220;
  filter: drop-shadow(0 18px 26px rgba(2,6,23,0.45)) drop-shadow(0 6px 10px rgba(2,6,23,0.35));
}

/* Wide cell variant: copy on the left, the phone rising out of the
   bottom-right corner. The spare row (1fr) soaks up the phone's height so
   the icon, title and copy stay packed at the top. */
.bento-cell.has-phone {
  display: grid; grid-template-columns: minmax(0, 1fr) 42%;
  grid-template-rows: auto auto auto 1fr; column-gap: 0.6rem; row-gap: 0.5rem;
}
.bento-cell.has-phone > .cell-icon,
.bento-cell.has-phone > h3,
.bento-cell.has-phone > p { grid-column: 1; }
.bento-cell.has-phone > .ph-phone {
  grid-column: 2; grid-row: 1 / span 4; min-height: 250px;
  margin: -1.1rem -1.1rem -1.1rem 0;
}
.bento-cell.has-phone > .ph-phone img {
  top: 16px; height: auto; width: 84%; max-width: 210px;   /* top of the page; the cell edge clips the rest */
}
@media (max-width: 720px) {
  .bento-cell.has-phone { display: flex; }
  .bento-cell.has-phone > .ph-phone { margin: 0.35rem -1.1rem -1.1rem; min-height: 320px; }
  .bento-cell.has-phone > .ph-phone img { top: 6px; height: 108%; width: auto; max-width: none; }
}

/* ==========================================================================
   Recruiting hero visual — the showcase page (phone) in front of a real
   player card, the way the App Store shot frames it. The phone bleeds off
   the bottom edge; shadows are soft and never clipped at the sides.
   ========================================================================== */
.page-hero-grid { align-items: start; }
.page-hero-copy { padding-top: 12px; }
.hero-showcase {
  position: relative; height: auto; padding-bottom: 30px;   /* height follows the phone; no slack, nothing cropped */
  overflow: visible;
}
.hero-showcase img {
  position: absolute; display: block; height: auto;
  filter: drop-shadow(0 26px 34px rgba(2,6,23,0.45)) drop-shadow(0 8px 12px rgba(2,6,23,0.35));
}
.hero-showcase .hs-card {
  left: 6%; top: 7%; width: 54%; max-width: 294px; z-index: 1;   /* tucked behind the phone, most of the card still showing */
  border-radius: 20px; transform: rotate(-12deg); transform-origin: center;
}
.hero-showcase .hs-phone {
  position: relative; margin: 8px 4% 0 auto; width: 48%; max-width: 260px; z-index: 2;
  padding: 10px 8px 30px; border-radius: 34px; background: #0b1220;   /* a phone: bezel all round, a chin at the bottom */
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.18);
  filter: drop-shadow(0 26px 34px rgba(2,6,23,0.45)) drop-shadow(0 8px 12px rgba(2,6,23,0.35));
  transform: rotate(6deg); transform-origin: top center;
}
.hero-showcase .hs-phone img {
  position: static; width: 100%; height: auto; display: block; border-radius: 22px; filter: none;
}
.hero-showcase .hs-phone::after {   /* home indicator on the chin */
  content: ''; position: absolute; left: 50%; bottom: 11px; width: 34%; height: 4px; border-radius: 2px;
  background: rgba(226,232,240,0.55); transform: translateX(-50%);
}
@media (max-width: 900px) {
  .hero-showcase { max-width: 520px; margin: 22px auto 0; }
  .page-hero-copy { padding-top: 0; }
}

/* Phones. The composite gets ~330px to work in, and at that size the frame's
   fixed-pixel bezel breaks: a 30px chin on a 129px-wide phone is a quarter of
   the device. Scale the bezel with the phone, give both pieces more of the
   width, and drop the card low enough that the screenshot never covers the
   player's name. */
@media (max-width: 600px) {
  .hero-showcase { max-width: 420px; margin: 16px auto 0; padding-bottom: 16px; }
  .hero-showcase .hs-card {
    left: 3%; top: 7%; width: 51%; max-width: none;
    border-radius: 13px; transform: rotate(-8deg);
  }
  .hero-showcase .hs-phone {
    width: 52%; max-width: none; margin: 26px 0 0 auto;
    padding: 6px 5px 16px; border-radius: 23px; transform: rotate(6deg);
  }
  .hero-showcase .hs-phone img { border-radius: 18px; }
  .hero-showcase .hs-phone::after { bottom: 7px; height: 3px; width: 30%; }
}

/* ==========================================================================
   Recruiting page — one continuous backdrop. The hero's gradient becomes the
   page background so no section edge draws a hard line under the hero, and
   the content below sits closer to it.
   ========================================================================== */
/* Page stays the site's normal dark tone; the hero keeps its glow and simply
   fades into that tone at its bottom edge, so there is no seam. */
body.recruiting-page .page-hero {
  background:
    /* top layer: guarantees the bottom edge is exactly the page colour, so the
       glows below can never leave a line where the section ends */
    linear-gradient(180deg, rgba(30, 41, 59, 0) 45%, var(--bg) 100%),
    radial-gradient(60% 90% at 0% 0%, rgba(59, 130, 246, 0.20), transparent 75%),
    radial-gradient(45% 70% at 82% 20%, rgba(16, 185, 129, 0.10), transparent 75%),
    linear-gradient(180deg, #0f172a 0%, #1a2540 60%, var(--bg) 100%);
  padding-bottom: 0;
}
body.recruiting-page .section--alt { background: transparent; border-top: 0; }
/* Pull the toggle + first section up into the hero's empty left column; the
   phone keeps hanging down on the right. Reset where the layout stacks. */
body.recruiting-page .audience-switch { padding-top: 0; margin-top: -100px; position: relative; z-index: 1; }
/* The audience toggle overlaps the hero's gradient by 100px on desktop; the
   phone (a full showcase page, taller than the old mockup) needs that much
   room under it so the toggle never covers its bottom. */
@media (min-width: 901px) {
  body.recruiting-page .hero-showcase { padding-bottom: 130px; }
}

body.recruiting-page .audience-panel { position: relative; z-index: 1; }
@media (max-width: 900px) {
  body.recruiting-page .audience-switch { margin-top: 0; padding-top: 18px; }
}
body.recruiting-page .audience-panel { padding-top: 22px; }