/* Homepage Quick Facts: arena scoreboard tiles with line art and the reserved banner.
   Everything renders complete without JS. Motion states only apply once js/quick-facts.js
   adds .qf-motion to <html>, so crawlers and no-JS visitors always see the final section. */

#start{grid-template-columns:1.1fr 1fr}

/* rolling digits: the real value stays in an sr-only span */
.qf .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qf .roll{display:inline-flex;line-height:1;font-variant-numeric:tabular-nums}
.qf .roll .d{display:inline-block;height:1em;overflow:hidden}
.qf .roll .col{display:flex;flex-direction:column;transform:translateY(0);will-change:transform}
.qf .roll .col span{height:1em;display:block}

/* tiles */
.sb{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.tile{position:relative;background:#020a1d;border:1px solid var(--line);border-radius:10px;padding:14px 14px 13px;overflow:hidden}
.tile::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px);background-size:6px 6px}
.tile .num{position:relative;display:block;font-family:'Saira Condensed';font-weight:800;color:#fff;
  font-size:clamp(2.6rem,4.2vw,3.7rem);line-height:1;margin:6px 0 6px}
.tile .cap{position:relative;font-family:'Saira';font-size:.9rem;line-height:1.45;color:var(--silver)}
/* glow lives on the roll wrapper so the digit masks don't clip it into a box */
.tile .num .roll{filter:drop-shadow(0 0 10px rgba(29,143,225,.35))}

.tile .cap a{color:var(--pacific);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;white-space:nowrap}
.tile .cap a:hover{color:#fff}

/* the Finals row */
.tile.finals{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:20px 26px 18px;
  border-color:rgba(237,23,76,.45);background:linear-gradient(120deg,#1a0716 0%,#020a1d 60%)}
.tile.finals .num{font-size:clamp(5rem,8vw,7rem);color:var(--ember);margin:0}
.tile.finals .num .roll{filter:drop-shadow(0 0 16px rgba(237,23,76,.6))}
.tile.finals .cap{font-size:.98rem;color:#fff}
.tile.finals .cap small{display:block;color:var(--silver);font-size:.92rem;margin-top:4px}
.tile.finals .num.landed .roll{animation:qf-pulse 1.6s ease-out 1}
@keyframes qf-pulse{0%{filter:drop-shadow(0 0 16px rgba(237,23,76,.6))}30%{filter:drop-shadow(0 0 30px rgba(237,23,76,1))}100%{filter:drop-shadow(0 0 16px rgba(237,23,76,.6))}}

/* line art */
.tile .art{position:relative;display:block;width:100%;height:96px;margin:-2px 0 10px;overflow:visible}
.art .draw{fill:none;stroke:var(--pacific);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.art .draw.thin{stroke-width:1;stroke:rgba(29,143,225,.6)}
.art .dot-fill{fill:var(--pacific)}
.art .lattice path{fill:none;stroke:rgba(29,143,225,.28);stroke-width:.8}
.art.map .draw.land{stroke:rgba(196,206,212,.55);stroke-width:1.1;fill:rgba(29,143,225,.06)}
.art .route{fill:none;stroke:var(--ember);stroke-width:1.4;stroke-dasharray:3 4}
.art .city circle{fill:var(--ember);stroke:#020a1d;stroke-width:1.5}
.art .city text{font-family:'Saira';font-weight:700;font-size:18px;fill:#fff;letter-spacing:.03em}

/* reserved banner */
.rafter{position:relative;display:flex;flex-direction:column;align-items:center}
.banner-svg{width:120px;height:auto;overflow:visible}
.banner-svg .beam{stroke:rgba(196,206,212,.5);stroke-width:3}
.banner-svg .rope{stroke:rgba(196,206,212,.7);stroke-width:1.5}
.banner-svg .cloth{fill:rgba(237,23,76,.10);stroke:var(--ember);stroke-width:2}
.banner-svg .inner{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1;stroke-dasharray:4 4}
.banner-svg text{font-family:'Saira Condensed';font-weight:800;fill:rgba(255,255,255,.38);letter-spacing:.08em}
.banner-svg .b-small{font-size:10px}.banner-svg .b-big{font-size:22px}.banner-svg .b-year{font-size:16px;fill:rgba(255,255,255,.6)}
.banner-svg .b-or{font-family:'Saira';font-weight:600;font-style:italic;font-size:11px;letter-spacing:.06em;fill:rgba(255,255,255,.7)}
.banner-svg .sway{transform-origin:60px 22px;transform-box:view-box}
.reserved-tag{margin-top:-6px;transform:rotate(-6deg);background:var(--ember);color:#fff;font-family:'Saira Condensed';font-weight:800;font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;padding:4px 12px;border-radius:4px;box-shadow:0 6px 18px rgba(237,23,76,.45)}

/* motion: draw-on, cities in order, then the banner drops and gets stamped */
.qf-motion .qf .art .draw{stroke-dasharray:1;stroke-dashoffset:1}
.qf-motion .qf.go .art .draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.qf-motion .qf .art .city,.qf-motion .qf .art .route{opacity:0}
.qf-motion .qf.go .art .route{opacity:1;transition:opacity .5s ease 1.1s}
.qf-motion .qf.go .art .city{opacity:1;transition:opacity .3s ease}
.qf-motion .qf.go .art .c1{transition-delay:.9s}.qf-motion .qf.go .art .c2{transition-delay:1.3s}.qf-motion .qf.go .art .c3{transition-delay:1.6s}
.qf-motion .qf .sway{transform:translateY(-40px);opacity:0}
.qf-motion .qf .reserved-tag{opacity:0;transform:rotate(-6deg) scale(2)}
.qf-motion .qf.go .sway{transform:none;opacity:1;transition:transform 1s cubic-bezier(.3,1.4,.5,1) 2.2s,opacity .3s ease 2.2s;animation:qf-sway 5s ease-in-out 3.4s 2}
.qf-motion .qf.go .reserved-tag{opacity:1;transform:rotate(-6deg) scale(1);transition:transform .22s cubic-bezier(.3,1.6,.5,1) 3.3s,opacity .1s linear 3.3s}
@keyframes qf-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(1.6deg)}75%{transform:rotate(-1.6deg)}}

@media (max-width:900px){
  #start{grid-template-columns:1fr !important}
  #start > div:first-child{border-right:none !important;border-bottom:4px solid var(--ember)}
}
@media (max-width:560px){
  .sb{grid-template-columns:1fr}
  .tile.finals{grid-template-columns:auto 1fr}
  .rafter{grid-column:1/-1;margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .qf-motion .qf .art .draw{stroke-dashoffset:0 !important;transition:none !important}
  .qf-motion .qf .art .city,.qf-motion .qf .art .route,.qf-motion .qf .sway,.qf-motion .qf .reserved-tag{opacity:1 !important;transition:none !important;animation:none !important}
  .qf-motion .qf .sway{transform:none !important}
  .qf-motion .qf .reserved-tag{transform:rotate(-6deg) !important}
  .tile.finals .num.landed .roll{animation:none}
}