/* SportPulse home first screen: pitch lines, match board and spotlight ball. Loaded on the front page only. */

.intro--pitch, .intro--board, .intro--ball { position: relative; isolation: isolate; overflow: hidden; }
.intro .wrap { position: relative; z-index: 2; }
.hx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.hx-chips .chip { background: color-mix(in srgb, var(--sp-bg) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hx-chips .chip.is-active { background: var(--sp-text); color: var(--sp-bg); }

/* Text on the left, interactive piece on the right */
.hx-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; align-items: center; text-align: left; }
.hx-split .intro__title, .hx-split .intro__text { margin-left: 0; margin-right: 0; }
.hx-split .intro__text { margin-bottom: 1.75rem; }
.hx-split .figures, .hx-split .last10 { justify-content: flex-start; }
.hx-split .figures__note { margin-left: 0; margin-right: 0; text-align: left; }
@media (max-width: 860px) {
	.hx-split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ---------- Pitch lines ---------- */
.intro--pitch { --hx-x: 50%; --hx-y: 30%; padding-bottom: clamp(9rem, 22vw, 14rem); }
.intro--pitch::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(600px circle at var(--hx-x) var(--hx-y), color-mix(in srgb, var(--sp-accent) 9%, transparent), transparent 60%); }
.intro--pitch .hx-chips { margin-top: 1.5rem; }
.hx-pitch { position: absolute; z-index: 1; left: 50%; bottom: -4%; width: min(1100px, 150%); pointer-events: none; transform: translateX(-50%) perspective(1100px) rotateX(56deg); transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%); mask-image: linear-gradient(to top, #000 45%, transparent 100%); }
.hx-pitch svg { display: block; width: 100%; height: auto; overflow: visible; }
.hx-pitch .ln { fill: none; stroke: color-mix(in srgb, var(--sp-text) 26%, transparent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hx-pitch .dot { fill: color-mix(in srgb, var(--sp-text) 26%, transparent); }
.hx-pitch .is-drawing .ln { animation: hx-draw 1.6s cubic-bezier(.6, 0, .2, 1) both; }
.hx-pitch .is-drawing .ln:nth-child(3n+2) { animation-delay: .15s; }
.hx-pitch .is-drawing .ln:nth-child(3n) { animation-delay: .3s; }
@keyframes hx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- Match board ---------- */
.intro--board { background: radial-gradient(900px 420px at 85% 10%, color-mix(in srgb, var(--sp-accent) 9%, transparent), transparent 70%), linear-gradient(to bottom, var(--sp-fill), var(--sp-bg)); }
.hx-board { min-width: 0; padding: 1.375rem; border-radius: 28px; text-align: left;
	background: color-mix(in srgb, var(--sp-surface) 72%, transparent); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
	border: 1px solid color-mix(in srgb, var(--sp-text) 7%, transparent); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .25), 0 2px 10px rgba(0, 0, 0, .04); }
[data-theme="dark"] .hx-board { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); }
.hx-board:focus-visible { outline-offset: 4px; border-radius: 28px; }
.hx-board__top { font-size: .8125rem; color: var(--sp-muted); }
.hx-live { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--sp-text); }
.hx-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--sp-won); animation: hx-ping 2s infinite; }
@keyframes hx-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sp-won) 45%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
.hx-slide { display: block; margin-top: 1.125rem; color: var(--sp-text); text-decoration: none !important; transition: opacity .35s, transform .35s; }
.hx-slide[hidden] { display: none; }
.hx-slide.is-out { opacity: 0; transform: translateY(6px); }
.hx-slide__comp { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--sp-muted); }
.hx-slide__teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem; margin: .875rem 0 1.125rem; }
.hx-team { display: grid; justify-items: center; gap: .5rem; text-align: center; min-width: 0; }
.hx-team b { font-size: .9375rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.hx-ko { display: grid; justify-items: center; }
.hx-ko time { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hx-ko small { font-size: .75rem; color: var(--sp-muted); }
.hx-board .prob__row { grid-template-columns: minmax(0, 7.5rem) 1fr 2.75rem; font-size: .8125rem; }
.hx-board .prob__track { height: 6px; background: color-mix(in srgb, var(--sp-text) 8%, transparent); }
.hx-slide:hover .prob__label { color: var(--sp-link); }
.hx-board__foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1.125rem; }
.hx-pager { display: flex; gap: 6px; }
.hx-pager button { position: relative; width: 22px; height: 6px; padding: 0; border: 0; border-radius: 3px; overflow: hidden; cursor: pointer; background: color-mix(in srgb, var(--sp-text) 15%, transparent); transition: width .3s; }
.hx-pager button::before { content: ""; position: absolute; inset: -10px -2px; }
.hx-pager button[aria-current="true"] { width: 34px; }
.hx-pager button[aria-current="true"]::after { content: ""; position: absolute; inset: 0; background: var(--sp-text); transform-origin: left; animation: hx-fill var(--hx-dur, 5s) linear both; }
.hx-board.is-paused .hx-pager button::after { animation-play-state: paused; }
@keyframes hx-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Spotlight ball ---------- */
.intro--ball { background: radial-gradient(700px 500px at 75% 45%, color-mix(in srgb, #f26b1d 10%, transparent), transparent 70%), var(--sp-bg); }
.hx-stage { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto; cursor: grab; touch-action: pan-y; }
.hx-stage:active { cursor: grabbing; }
.hx-stage canvas { display: block; width: 100%; height: 100%; }
.hx-stage .hx-chips { position: absolute; left: 0; right: 0; bottom: 1%; }
@media (max-width: 860px) {
	.intro--ball .hx-stage { order: -1; max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
	.hx-pitch .is-drawing .ln, .hx-live i, .hx-pager button[aria-current="true"]::after { animation: none; }
	.hx-pager button[aria-current="true"]::after { transform: none; }
	.hx-slide { transition: none; }
}