/* Upset Alert home page. The heat bar is the one loud thing; everything else stays quiet. */
:root {
  --night: #0c1220;
  --night-2: #141d31;
  --line: #eef1f6;
  --muted: #9aa5b8;
  --ember: #ff6a2b;
  --track: #232c3f;
  --scoreboard: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root { --night: #eef2f8; --night-2: #ffffff; --line: #0c1220; --muted: #515c70; --ember: #d9481c; }
}

* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; color: var(--line); font: 18px/1.55 var(--text); }
a { color: var(--ember); }
a:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none;
         font: 700 22px/1 var(--scoreboard); letter-spacing: .01em; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.top nav a { color: var(--muted); text-decoration: none; margin-left: 22px; font-size: 16px; }
.top nav a:hover { color: var(--line); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 48px 0 88px; }
.hero h1 { font: 700 clamp(46px, 7.4vw, 92px)/.92 var(--scoreboard); letter-spacing: -.01em; margin: 0 0 24px; }
.hero p { color: var(--muted); max-width: 30em; margin: 0 0 28px; font-size: 19px; }
.soon { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px; border-radius: 12px;
        background: var(--line); color: var(--night); font-weight: 600; font-size: 16px; }
.soon svg { width: 22px; height: 22px; fill: currentColor; }
.soon + .aside { display: block; margin-top: 14px; color: var(--muted); font-size: 15px; }

/* The match card with the live heat bar */
.card { background: var(--night-2); border-radius: 22px; padding: 26px 26px 74px; position: relative;
        box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); }
.row { display: grid; grid-template-columns: 1fr auto auto; column-gap: 18px; align-items: center; }
.teams { font-size: 21px; line-height: 1.45; }
.score { font: 700 30px/1.2 var(--scoreboard); text-align: right; }
.clock { font: 700 19px/1 var(--scoreboard); color: var(--muted); min-width: 4.6em; text-align: right; position: relative; height: 1.2em; }
.clock span { position: absolute; right: 0; top: 0; }
.league { color: var(--muted); font-size: 16px; margin: 10px 0 18px; }

.bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; padding: 6px 10px;
       background: #161c29; border-radius: 9px; transform: skewX(-18deg); }
.bar i { height: 14px; border-radius: 3px; background: #2e3647; transform: skewX(0); }
.bar i:nth-child(1)  { --c: hsl(120 85% 48%); }
.bar i:nth-child(2)  { --c: hsl(107 85% 48%); }
.bar i:nth-child(3)  { --c: hsl(93 85% 48%); }
.bar i:nth-child(4)  { --c: hsl(80 88% 48%); }
.bar i:nth-child(5)  { --c: hsl(67 90% 50%); }
.bar i:nth-child(6)  { --c: hsl(53 95% 52%); }
.bar i:nth-child(7)  { --c: hsl(40 96% 52%); }
.bar i:nth-child(8)  { --c: hsl(27 96% 52%); }
.bar i:nth-child(9)  { --c: hsl(13 92% 52%); }
.bar i:nth-child(10) { --c: hsl(0 88% 52%); }

.alert { position: absolute; left: 18px; right: 18px; bottom: -34px; display: grid; grid-template-columns: 40px 1fr;
         gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px;
         background: rgba(236, 240, 247, .96); color: #0c1220; font-size: 15px; line-height: 1.35;
         box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); }
.alert img { width: 40px; height: 40px; border-radius: 9px; }
.alert b { display: block; font-size: 14px; }

/* One orchestrated moment: the bar fills to its pre-match level, kickoff, then it catches fire. */
@media (prefers-reduced-motion: no-preference) {
  .bar i { animation: lit .35s ease-out forwards; }
  .bar i:nth-child(1) { animation-delay: .5s; }  .bar i:nth-child(2) { animation-delay: .62s; }
  .bar i:nth-child(3) { animation-delay: .74s; } .bar i:nth-child(4) { animation-delay: .86s; }
  .bar i:nth-child(5) { animation-delay: .98s; } .bar i:nth-child(6) { animation-delay: 1.1s; }
  .bar i:nth-child(7) { animation-delay: 1.22s; }
  .bar i:nth-child(8) { animation-delay: 2.9s; } .bar i:nth-child(9) { animation-delay: 3.15s; }
  .bar i:nth-child(10) { animation-delay: 3.4s; }
  .clock .before { animation: out .3s 2.5s forwards; }
  .clock .live, .score .live { opacity: 0; animation: in .3s 2.6s forwards; }
  .score .before { animation: out .3s 2.5s forwards; }
  .alert { opacity: 0; transform: translateY(10px); animation: arrive .5s 3.8s cubic-bezier(.2, .8, .2, 1) forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .bar i { background: var(--c); }
  .clock .before, .score .before { display: none; }
}
@keyframes lit { to { background: var(--c); box-shadow: 0 0 10px -2px var(--c); } }
@keyframes out { to { opacity: 0; } }
@keyframes in { to { opacity: 1; } }
@keyframes arrive { to { opacity: 1; transform: none; } }
.score { position: relative; min-width: 1.6em; }
.score span { display: block; }
.score .live { position: absolute; right: 0; top: 0; }

/* What you get */
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 72px 0 24px; }
.points h2 { font: 700 30px/1.05 var(--scoreboard); margin: 0 0 10px; }
.points p { color: var(--muted); margin: 0; font-size: 17px; }

/* Showcase: the app in three phones, fanned out on a floodlit band */
.showcase { position: relative; margin: 72px 0 0; padding: 88px 0 120px; overflow: hidden; color: #eef1f6;
            background:
              radial-gradient(60% 55% at 50% 72%, rgba(255, 106, 43, .38), transparent 70%),
              radial-gradient(40% 40% at 20% 30%, rgba(43, 209, 91, .10), transparent 70%),
              linear-gradient(180deg, #0a0f1b, #111a2c);
            clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }
.showcase h2 { font: 700 clamp(40px, 6vw, 72px)/.95 var(--scoreboard); margin: 0 0 12px; text-align: center; }
.showcase > .wrap > p { color: #aab4c6; text-align: center; margin: 0 auto 64px; max-width: 32em; font-size: 19px; }

.fan { display: grid; grid-template-columns: repeat(3, minmax(0, 290px)); justify-content: center; gap: 0; }
.phone { margin: 0; position: relative; }
.phone .screen { position: relative; aspect-ratio: 9 / 18.6; border-radius: 44px; padding: 9px; overflow: hidden;
                 background: linear-gradient(145deg, #3a4356, #0d121c 55%, #262e3e);
                 box-shadow: 0 0 0 1.5px #4b5568 inset, 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 60px -20px rgba(255, 106, 43, .35); }
.phone .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 36px;
                     border-top: 44px solid #f7f9fc; background: #f7f9fc; box-sizing: border-box; }
.phone .screen::after { content: ""; position: absolute; top: 20px; left: 50%; width: 30%; height: 24px; margin-left: -15%;
                        background: #05070c; border-radius: 14px; }
.phone.left  { transform: rotate(-7deg) translate(34px, 36px); z-index: 1; }
.phone.mid   { transform: scale(1.08); z-index: 2; }
.phone.right { transform: rotate(7deg) translate(-34px, 36px); z-index: 1; }

/* Footer */
.end { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 40px 0 48px;
       color: var(--muted); font-size: 15px; }
.end nav a { color: var(--muted); margin-left: 20px; }
.end nav a:first-child { margin-left: 0; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 64px; padding: 24px 0 96px; }
  .points { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; }
  .showcase { padding: 64px 0 88px; clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%); }
  .fan { grid-template-columns: repeat(3, 74%); gap: 18px; justify-content: start; overflow-x: auto;
         scroll-snap-type: x mandatory; padding: 8px 4px 16px; }
  .phone { scroll-snap-align: center; }
  .phone.left, .phone.mid, .phone.right { transform: none; }
  .phone.mid { order: -1; }
  .top nav a { margin-left: 16px; }
}