/* The club's sport: decoration only (core/sport-look.js sets data-sport-look on <html>). A faint line drawing of the club's playing
   surface sits behind the sign-in, the Overview header, My membership and the join page, in the accent colour so it follows light and
   dark. No ball is shown on club or member screens (Grant, 8 Oct 2026). The drawings are masks (public/img/sports/<look>.svg), so only
   their shape is used. Nothing here moves layout, and with reduced motion nothing moves at all.
   Loaded by app/index.html, member/index.html and join/index.html only: the marketing site never shows a sport look. */

html[data-sport-look="football"]   { --sport-motif: url("/img/sports/football.svg"); --sport-line: url("/img/sports/line-football.svg"); }
html[data-sport-look="gaelic"]     { --sport-motif: url("/img/sports/gaelic.svg"); --sport-line: url("/img/sports/line-gaelic.svg"); }
html[data-sport-look="rugby"]      { --sport-motif: url("/img/sports/rugby.svg"); --sport-line: url("/img/sports/line-rugby.svg"); }
html[data-sport-look="cricket"]    { --sport-motif: url("/img/sports/cricket.svg"); --sport-line: url("/img/sports/line-cricket.svg"); }
html[data-sport-look="hockey"]     { --sport-motif: url("/img/sports/hockey.svg"); --sport-line: url("/img/sports/line-hockey.svg"); }
html[data-sport-look="tennis"]     { --sport-motif: url("/img/sports/tennis.svg"); --sport-line: url("/img/sports/line-tennis.svg"); }
html[data-sport-look="basketball"] { --sport-motif: url("/img/sports/basketball.svg"); --sport-line: url("/img/sports/line-basketball.svg"); }
html[data-sport-look="netball"]    { --sport-motif: url("/img/sports/netball.svg"); --sport-line: url("/img/sports/line-netball.svg"); }
html[data-sport-look="volleyball"] { --sport-motif: url("/img/sports/volleyball.svg"); --sport-line: url("/img/sports/line-volleyball.svg"); }
html[data-sport-look="diamond"]    { --sport-motif: url("/img/sports/diamond.svg"); --sport-line: url("/img/sports/line-diamond.svg"); }
html[data-sport-look="athletics"]  { --sport-motif: url("/img/sports/athletics.svg"); --sport-line: url("/img/sports/line-athletics.svg"); }
html[data-sport-look="swimming"]   { --sport-motif: url("/img/sports/swimming.svg"); --sport-line: url("/img/sports/line-swimming.svg"); }
html[data-sport-look="golf"]       { --sport-motif: url("/img/sports/golf.svg"); --sport-line: url("/img/sports/line-golf.svg"); }
html[data-sport-look="bowls"]      { --sport-motif: url("/img/sports/bowls.svg"); --sport-line: url("/img/sports/line-bowls.svg"); }
html[data-sport-look="combat"]     { --sport-motif: url("/img/sports/combat.svg"); --sport-line: url("/img/sports/line-combat.svg"); }
html[data-sport-look="general"]    { --sport-motif: url("/img/sports/general.svg"); }

html[data-sport-look] { --sport-ink: var(--accent-text); --sport-strength: .13; }
html[data-sport-look][data-theme="light"] { --sport-strength: .11; }
@media (prefers-color-scheme: light) { html[data-sport-look]:not([data-theme]) { --sport-strength: .11; } }

/* ---- The playing surface behind a page: wide, centred near the top, fading away down the page ---------------------------------------- */
html[data-sport-look] .app--bare,
html[data-sport-look] .pub { position: relative; isolation: isolate; }
html[data-sport-look] .app--bare::before,
html[data-sport-look] .pub::before {
  content: ""; position: absolute; inset: 0 0 auto; height: min(92vh, 820px); z-index: -1; pointer-events: none;
  background: var(--sport-ink); opacity: var(--sport-strength);
  -webkit-mask-image: var(--sport-motif), linear-gradient(#000 30%, transparent 92%);
  -webkit-mask-size: min(1180px, 190vw) auto, 100% 100%;
  -webkit-mask-position: 50% 34%, 0 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: var(--sport-motif), linear-gradient(#000 30%, transparent 92%);
  mask-size: min(1180px, 190vw) auto, 100% 100%;
  mask-position: 50% 34%, 0 0;
  mask-repeat: no-repeat;
  mask-composite: intersect;
  animation: sport-in 900ms var(--ease-out, ease-out) both;
}
/* A phone held upright: the whole surface across the top of the screen, so it reads as that sport, not a few stray lines. */
@media (max-width: 640px) {
  html[data-sport-look] .app--bare::before, html[data-sport-look] .pub::before {
    -webkit-mask-size: max(132vw, 470px) auto, 100% 100%; mask-size: max(132vw, 470px) auto, 100% 100%;
    -webkit-mask-position: 50% 14%, 0 0; mask-position: 50% 14%, 0 0;
  }
}
/* My membership and the join page have a page full of cards: the drawing stays up in the header, quieter. */
html[data-sport-look] .pub:not(.pub--gate)::before { height: min(60vh, 520px); --sport-strength: .08; mask-position: 50% 0, 0 0; -webkit-mask-position: 50% 0, 0 0; }
@keyframes sport-in { from { opacity: 0; } }

/* ---- Overview: the drawing on the right of the club's header card, behind its contents ------------------------------------------------- */
html[data-sport-look] .ov-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--sport-ink); opacity: calc(var(--sport-strength) * .8);
  -webkit-mask-image: var(--sport-motif), linear-gradient(90deg, transparent 18%, #000 70%);
  -webkit-mask-size: auto 150%, 100% 100%; -webkit-mask-position: 100% 50%, 0 0; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-in;
  mask-image: var(--sport-motif), linear-gradient(90deg, transparent 18%, #000 70%);
  mask-size: auto 150%, 100% 100%; mask-position: 100% 50%, 0 0; mask-repeat: no-repeat; mask-composite: intersect;
}

/* ---- The side menu: the sport's line drawing, large and faint, low in the menu and behind its links (Grant's "option A", 8 Oct 2026) ----
   Part of the background, never the foreground: the text colour at a low strength, fading out towards the top. "general" (an Other sport)
   has no drawing, so --sport-line is unset and nothing is drawn. */
@media (min-width: 768px) {
  html[data-sport-look] .side-nav { isolation: isolate; overflow-x: hidden; }
  html[data-sport-look] .side-nav::before {
    content: none; position: absolute; left: -58px; bottom: 70px; width: 330px; height: 330px; z-index: -1; pointer-events: none;
    background: var(--text); opacity: .075; rotate: -16deg;
    -webkit-mask-image: var(--sport-line), linear-gradient(to top, #000 55%, transparent); -webkit-mask-size: contain, 100% 100%;
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-composite: source-in;
    mask-image: var(--sport-line), linear-gradient(to top, #000 55%, transparent); mask-size: contain, 100% 100%;
    mask-repeat: no-repeat; mask-position: center; mask-composite: intersect;
  }
  html[data-sport-look]:not([data-sport-look="general"]) .side-nav::before { content: ""; }
}

/* ---- A club's sport icon beside its name in the club lists (core/sport-icons.js) ------------------------------------------------------ */
.club-line { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.club-line > span { min-width: 0; overflow-wrap: anywhere; }
.club-line .sport-icon { flex: none; color: var(--text-2); }

/* ---- A sport's ball: the staff Sports page only ---------------------------------------------------------------------------------------- */
.sport-ball { display: inline-block; flex: none; vertical-align: middle; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .22)); }

@media (prefers-reduced-motion: reduce) {
  html[data-sport-look] .app--bare::before, html[data-sport-look] .pub::before { animation: none; }
}
@media (forced-colors: active) {
  html[data-sport-look] .app--bare::before, html[data-sport-look] .pub::before, html[data-sport-look] .ov-hero::before, html[data-sport-look] .signin__hero::after { display: none; }
}