/* AiFight add-on layer. Loaded after the bundle CSS from index.html.
   The logo, wordmark and header lockup are styled in the bundle now
   (styles/cinematic.css, "HUD pass"): Ai in orange, Fight in white, the
   same as the fist shield. This file keeps the entrance show and polish. */

/* Reduced-motion rotator (intro.js): a plain crossfade, no movement. */
.mc-scr { transition: opacity .26s ease; }
.mc-scr.af-fade { opacity: 0; }


/* ======================================================================
   ENTRANCE SHOW (brand/intro.js). html.af-intro is set by an inline script
   in index.html before first paint.
   ====================================================================== */

/* Cover the page from the very first frame, and hold the hero's own
   entrance animation so it plays as the intro clears. The cover fades
   itself out after 5s even if intro.js never runs. */
html.af-intro { overflow: hidden; }
html.af-intro::before {
  content: ""; position: fixed; inset: 0; z-index: 9998; background: #000;
  animation: afi-failsafe .5s ease 5s forwards;
}
@keyframes afi-failsafe { to { opacity: 0; visibility: hidden; } }
html.af-intro .mc-in,
html.af-intro .mc-row,
html.af-intro .mc-you { animation-play-state: paused !important; }

#af-intro {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden; background: #000;
  font-family: var(--font-display, 'Host Grotesk'), system-ui, sans-serif; color: #fff;
  -webkit-user-select: none; user-select: none;
}
.afi-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(60vmax 50vmax at 50% 58%, #ff5a1f2e, transparent 60%),
    linear-gradient(#ffffff0a 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, #ffffff0a 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask: radial-gradient(closest-side at 50% 55%, #000, transparent);
          mask: radial-gradient(closest-side at 50% 55%, #000, transparent);
  animation: afi-fade .8s ease both;
}
.afi-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.afi-stage > * { grid-area: 1 / 1; }

.afi-shield {
  position: absolute; top: max(22px, 4vh); left: 50%; width: clamp(42px, 5vw, 58px);
  transform: translateX(-50%); opacity: 0;
  animation: afi-fade .6s ease .15s forwards;
  filter: drop-shadow(0 4px 14px #0009);
}
.afi-bloom {
  width: min(90vmin, 900px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, #ff5a1f66, #ff5a1f14 55%, transparent);
  opacity: 0; animation: afi-bloom 1.1s ease .45s forwards, afi-breathe 2.4s ease-in-out 1.6s infinite;
}
.afi-helmet {
  height: min(66vh, 86vw); width: auto; opacity: 0;
  filter: brightness(0) drop-shadow(0 30px 60px #000);
  animation:
    afi-helmet-in .9s cubic-bezier(.2, .8, .2, 1) .05s forwards,
    afi-visor .5s steps(1) .6s forwards,
    afi-push 2.2s ease-out 1s forwards,
    afi-dim .3s ease 2.6s forwards;
}
@keyframes afi-helmet-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); filter: brightness(.3) drop-shadow(0 30px 60px #000); } }
/* the visor "ignites": a few hard flickers, then full power */
@keyframes afi-visor {
  0%   { filter: brightness(.3) drop-shadow(0 30px 60px #000); }
  20%  { filter: brightness(1.15) drop-shadow(0 0 40px #ff5a1f); }
  35%  { filter: brightness(.45) drop-shadow(0 30px 60px #000); }
  55%  { filter: brightness(1.1) drop-shadow(0 0 50px #ff5a1f); }
  100% { filter: brightness(1) drop-shadow(0 0 36px #ff5a1f88); }
}
@keyframes afi-push { from { scale: 1; } to { scale: 1.05; } }
@keyframes afi-dim { to { filter: brightness(.38) drop-shadow(0 0 30px #ff5a1f55); } }
@keyframes afi-bloom { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .35; } 100% { opacity: .9; } }
@keyframes afi-breathe { 50% { opacity: .6; } }
@keyframes afi-fade { from { opacity: 0; } to { opacity: 1; } }

/* roll-call: one AI every .34s (under 3 flashes per second) */
.afi-names { position: relative; width: 100%; height: 1em; font-size: clamp(54px, 15vw, 230px); align-self: end; margin-bottom: 14vh; }
.afi-names span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; font-style: italic; letter-spacing: -.045em; line-height: 1;
  color: var(--c); text-shadow: 0 0 40px color-mix(in srgb, var(--c) 55%, transparent), 0 6px 0 #000;
  opacity: 0;
  animation: afi-name .34s cubic-bezier(.2, .9, .3, 1) calc(.95s + var(--n) * .28s) both;
}
@keyframes afi-name {
  0%   { opacity: 0; transform: scale(1.3) skewX(-6deg); }
  22%  { opacity: 1; transform: scale(1) skewX(-6deg); }
  78%  { opacity: 1; transform: scale(.99) skewX(-6deg); }
  100% { opacity: 0; transform: scale(.95) skewX(-6deg); }
}
.afi-count {
  align-self: end; margin-bottom: max(40px, 7vh); display: flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--font-mono, 'Geist Mono'), monospace; letter-spacing: .28em; text-transform: uppercase; color: #8a909a;
}
.afi-count i {
  width: 22px; height: 4px; border-radius: 2px; background: #ffffff1a; position: relative; overflow: hidden;
}
.afi-count i::after {
  content: ""; position: absolute; inset: 0; background: var(--c); box-shadow: 0 0 10px var(--c);
  transform: scaleX(0); transform-origin: left;
  animation: afi-fill .2s ease calc(1s + var(--n) * .28s) forwards;
}
@keyframes afi-fill { to { transform: scaleX(1); } }
.afi-count b { margin-left: 10px; font-weight: 600; opacity: 0; animation: afi-fade .3s ease 2.55s forwards; }

/* the slam */
.afi-vs { display: grid; place-items: center; line-height: .85; text-align: center; }
.afi-vs b {
  font-size: clamp(110px, 26vw, 380px); font-weight: 800; font-style: italic; letter-spacing: -.06em;
  padding: 0 .12em 0 .04em; /* room for the italic overhang, or background-clip cuts the S */
  background: linear-gradient(180deg, #fff 0%, #dfe3e8 40%, #8d949f 55%, #f2f4f7 72%, #9aa1ab 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 0 #000) drop-shadow(0 0 30px #0008);
  opacity: 0; animation: afi-slam .26s cubic-bezier(.3, 1.6, .5, 1) 2.66s forwards;
}
.afi-vs em {
  font-style: normal; font-weight: 800; font-size: clamp(40px, 8vw, 118px); letter-spacing: -.02em; margin-top: .1em; padding: 0 .06em;
  background: linear-gradient(180deg, #ffd0ae, #f08a4e 40%, #ff5a1f 60%, #c2582b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px #ff5a1f99);
  opacity: 0; animation: afi-rise .4s cubic-bezier(.2, .9, .3, 1) 2.95s forwards;
}
@keyframes afi-slam { from { opacity: 0; transform: scale(3.4); } to { opacity: 1; transform: scale(1); } }
@keyframes afi-rise { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
.afi-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: afi-flash .32s ease-out 2.8s; }
@keyframes afi-flash { 0% { opacity: .5; } 100% { opacity: 0; } }
.afi-stage { animation: afi-shake .32s linear 2.8s; }
@keyframes afi-shake {
  0%, 100% { transform: none; } 15% { transform: translate(-10px, 6px); } 30% { transform: translate(9px, -7px); }
  45% { transform: translate(-7px, -4px); } 60% { transform: translate(6px, 5px); } 80% { transform: translate(-3px, 2px); }
}

.afi-skip {
  position: absolute; right: max(18px, 3vw); bottom: max(18px, 3vh); z-index: 2;
  font: 500 12px var(--font-mono, 'Geist Mono'), monospace; letter-spacing: .1em; color: #8a909a;
  background: #ffffff0a; border: 1px solid #ffffff1f; border-radius: 99px; padding: 9px 14px; cursor: pointer;
  opacity: 0; animation: afi-fade .4s ease .8s forwards;
}
.afi-skip:hover { color: #fff; border-color: #ffffff40; }

/* exit: the camera flies through the helmet into the page */
#af-intro.afi-out { animation: afi-fade .55s ease reverse forwards; }
#af-intro.afi-out .afi-stage { animation: afi-through .6s cubic-bezier(.6, 0, .8, .4) forwards; }
@keyframes afi-through { to { transform: scale(2.6); opacity: 0; filter: blur(6px); } }
#af-intro.afi-out-fast { animation: afi-fade .25s ease reverse forwards; }

/* Reduced motion: no zooms, slams, shakes or flashes, just a short
   crossfade sequence. */
html.af-rm .afi-helmet { animation: afi-fade .6s ease forwards; filter: brightness(.45) drop-shadow(0 0 30px #ff5a1f55); }
html.af-rm .afi-bloom { animation: afi-fade .6s ease forwards; }
html.af-rm .afi-names, html.af-rm .afi-flash { display: none; }
html.af-rm .afi-count i::after { animation: afi-fade .01s linear .3s forwards; transform: none; opacity: 0; }
html.af-rm .afi-count b { animation-delay: .4s; }
html.af-rm .afi-stage { animation: none; }
html.af-rm .afi-vs b { animation: afi-fade .5s ease .7s forwards; }
html.af-rm .afi-vs em { animation: afi-fade .5s ease 1s forwards; }
html.af-rm #af-intro.afi-out .afi-stage { animation: none; }


/* ======================================================================
   POLISH PASS (add-on layer, no bundle changes)
   ====================================================================== */

/* 1. Final call to action: a breathing glow behind the big headline. */
.fc::after {
  content: ""; pointer-events: none; position: absolute; left: 50%; top: 46%;
  width: min(760px, 92vw); aspect-ratio: 1.6;
  background: radial-gradient(closest-side, #ff5a1f40, #ff5a1f0f 60%, transparent);
  transform: translate(-50%, -50%);
  animation: fc-breathe 3.6s ease-in-out infinite;
}
.fc > * { position: relative; z-index: 1; }
@keyframes fc-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* 2. The ledger: each pick gets sealed on screen. The badge stamps down,
   the card border flashes green, the fingerprint prints left to right. */
.lg-card.is-in .lg-ok {
  display: inline-block;
  animation: lg-stamp .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0ms) + .45s) both;
}
@keyframes lg-stamp {
  0%   { opacity: 0; transform: scale(2.4) rotate(-14deg); }
  60%  { opacity: 1; transform: scale(.94) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.lg-card.is-in { animation: lg-lock .9s ease calc(var(--d, 0ms) + .5s) both; }
@keyframes lg-lock {
  0%   { box-shadow: 0 0 0 0 #3ddc9700; }
  25%  { box-shadow: 0 0 0 1px #3ddc97aa, 0 0 34px -6px #3ddc97aa; border-color: #3ddc9799; }
  100% { box-shadow: 0 0 0 0 #3ddc9700; }
}
.lg-card.is-in .lg-hash {
  animation: lg-print .7s steps(24) calc(var(--d, 0ms) + .15s) both;
}
@keyframes lg-print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* 3. Install prompt: never on the home page. People install after they
   have played, not before they know what the site is. (html.af-home is
   kept in sync with the route by intro.js.) */
html.af-home .ip-card { display: none !important; }

/* 4. Beat the AI: on desktop the fixture wall becomes two columns, which
   halves the scroll down to standings, human wins and past weeks. */
@media (min-width: 1024px) {
  .space-y-3:has(> .bta-card) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start;
  }
  .space-y-3:has(> .bta-card) > * { margin-top: 0 !important; }
  .space-y-3:has(> .bta-card) > p { grid-column: 1 / -1; }
  /* the open stake slip stays inside its half-width card: spanning the row
     would leave holes in the grid and make cards jump while betting */
  .space-y-3:has(> .bta-card) .bta-slip .grid { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .fc::after { animation: none; opacity: .7; }
  .lg-card.is-in, .lg-card.is-in .lg-ok, .lg-card.is-in .lg-hash { animation: none; }
}

/* the intro's last line: what you are fighting for */
.afi-vs .afi-prize {
  display: block; margin-top: 1.1em; font: 700 clamp(11px, 1.5vw, 17px)/1.2 var(--font-mono, 'Geist Mono'), monospace;
  letter-spacing: .26em; color: #e9ecf1; text-transform: uppercase;
  opacity: 0; animation: afi-rise .45s cubic-bezier(.2, .9, .3, 1) 3.35s forwards;
}
.afi-vs .afi-prize i { font-style: normal; color: #ff5a1f; }
.afi-vs .afi-prize span {
  display: block; margin-top: .35em; font: 800 clamp(26px, 5.4vw, 70px)/1 var(--font-display, 'Host Grotesk'), sans-serif; letter-spacing: -.04em; text-transform: none;
  background: linear-gradient(180deg, #ffe9a8, #ffb347 45%, #ff5a1f); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px #ff5a1faa);
}
html.af-rm .afi-vs .afi-prize { animation: afi-fade .5s ease 1.4s forwards; }
/* ======================================================================
   THE CHEST. The intro's centrepiece is the Mystery Box itself, the same
   SVG the site draws: it drops in dark, lights up, rattles once for each AI
   named, steps back for "VS YOU", then the lid flies and the light pours out.
   ====================================================================== */
.afi-crate {
  position: relative; width: min(52vh, 70vw); aspect-ratio: 1; opacity: 0; --hot: #ff5a1f; --hot2: #ffb37a;
  animation:
    afi-crate-in .9s cubic-bezier(.2, .8, .2, 1) .05s forwards,
    afi-crate-rattle .34s ease-in-out .95s 5,
    afi-push 2.2s ease-out 1s forwards;
}
.afi-crate i { position: absolute; display: block; }
.afi-crate .mbx2 { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: brightness(.25); animation: afi-visor .5s steps(1) .6s forwards, afi-crate-dim .3s ease 2.6s forwards, afi-crate-undim .4s ease 3.35s forwards; }
.afi-crate .mbx2 * { transform-box: fill-box; }
.afi-crate .mbx2-lid { transform-origin: 8% 100%; animation: afi-lid-fly .6s cubic-bezier(.34, 1.5, .5, 1) 3.35s forwards; }
.afi-crate .mbx2-gem { transform-origin: 50% 50%; animation: afi-gem-drop .5s cubic-bezier(.5, 0, .8, .4) 3.3s forwards; }
.afi-crate .mbx2-inner { opacity: 0; animation: afi-fade .4s ease 3.4s forwards; }
.afi-crate .mbx2-beam { opacity: 0; transform-origin: 50% 100%; transform: scaleY(.25); animation: afi-beam-up .65s cubic-bezier(.2, .9, .3, 1) 3.4s forwards; }
.afi-crate .mbx2-star { transform-origin: 50% 50%; opacity: 0; animation: afi-star 1.6s ease-in-out calc(.8s + var(--d, 0s)) infinite; }
.afi-crate .mbx2-seam { animation: afi-fade .3s ease 3.35s reverse forwards; }
.afi-crate .mbx2-q { animation: afi-fade .3s ease 3.35s reverse forwards; }
.afi-crate-rays {
  inset: -55%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: repeating-conic-gradient(from 0deg, #ff5a1f8c 0deg 7deg, transparent 7deg 24deg);
  -webkit-mask: radial-gradient(closest-side, #000 16%, transparent 76%); mask: radial-gradient(closest-side, #000 16%, transparent 76%);
  opacity: 0; animation: afi-rays-in .8s ease .7s forwards, afi-rays-turn 14s linear infinite;
}
@keyframes afi-crate-in { from { opacity: 0; transform: translateY(-18%) scale(1.14); } to { opacity: 1; transform: none; } }
@keyframes afi-crate-rattle { 0%, 100% { rotate: 0deg; } 25% { rotate: -3.5deg; } 50% { rotate: 3deg; } 75% { rotate: -2deg; } }
@keyframes afi-crate-dim { to { filter: brightness(.34); } }
@keyframes afi-crate-undim { to { filter: brightness(.85); } }
@keyframes afi-lid-fly { to { transform: translate(-8%, -70%) rotate(-26deg); } }
@keyframes afi-gem-drop { to { transform: translateY(300%) rotate(60deg); opacity: 0; } }
@keyframes afi-beam-up { to { opacity: .9; transform: none; } }
@keyframes afi-star { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes afi-rays-in { to { opacity: .34; } }
@keyframes afi-rays-turn { to { rotate: 360deg; } }
html.af-rm .afi-crate { animation: afi-fade .6s ease forwards; }
html.af-rm .afi-crate .mbx2 { animation: none; filter: brightness(.5); }
html.af-rm .afi-crate .mbx2-lid, html.af-rm .afi-crate .mbx2-gem, html.af-rm .afi-crate .mbx2-beam, html.af-rm .afi-crate .mbx2-inner, html.af-rm .afi-crate .mbx2-star, html.af-rm .afi-crate .mbx2-seam, html.af-rm .afi-crate .mbx2-q { animation: none; }
html.af-rm .afi-crate-rays { animation: afi-rays-in .6s ease forwards; }