/* The home page: one screen. The gym wall with the headline, slogan and one button; the squad stands
   on the gym floor; a thin white footer. Tokens from /wildcard.css (design system v4, gym). Light only. */
.home { --sig: var(--graphite); --on-sig: var(--volt); }
/* The body is the size container, not .site: a container is a stacking context, and the headline's
   tape canvas (on the body, z-index 3) has to pass under the squad (z-index 4). */
.home { container: site / inline-size; }
.home button { font: inherit; cursor: pointer; color: inherit; }
.home :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Hidden until the headline runs in (home.js), so nothing flashes in place first. */
.js #word, .js [data-settle] { opacity: 0; }

.site { min-height: 100svh; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
@container site (min-width: 720px) { .wrap { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); } }

/* the wall and floor; --cw is one character's width, --gh the floor band's height */
.floor { --h: min(clamp(40px, calc((100cqw - 40px) / 4.6), 120px), 18svh); }
/* with 外卡 on the line, the headline shrinks so both still fit one line (WILDCARD is about 4.5em, 外卡 about 1.1em) */
.floor:has(.cn) { --h: min(clamp(32px, calc((100cqw - 40px) / 5.7), 120px), 18svh); }
/* --cw also fits the height left under the hero (nav, padding, the hero at about 2.4 × --h, the gap), so the
   front row's feet stay on screen; the squad is about 2.2 × --cw tall */
.floor { --cw: max(72px, min(29cqw, 230px, calc((100svh - 176px - var(--h) * 2.4) / 2.2))); --gh: calc(var(--cw) * .62 + 40px); position: relative; overflow-x: clip; flex: 1; background: var(--gym-sky); display: flex; flex-direction: column; }
/* the gym floor, as on the app's welcome screen: graphite skirting, a volt line, faint tiles */
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: var(--gh); pointer-events: none;
  background: linear-gradient(var(--graphite), var(--graphite)) 0 0 / 100% 4px no-repeat, linear-gradient(var(--on-sig), var(--on-sig)) 0 4px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--gym-tile) 0 2px, transparent 2px 64px) 0 7px / 100% 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 45px, var(--gym-tile) 45px 47px, transparent 47px 64px) 0 7px / 100% 100% no-repeat, var(--gym-floor); }
.nav { height: 72px; display: flex; align-items: center; justify-content: space-between; }
/* the logo, top left: the black-and-white mark, then the brand name as live text */
.logo { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--num); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: .02em; color: var(--ink); text-decoration: none; }
.logo img { display: block; width: 30px; height: 30px; }

/* phones and tablets: the hero sits centred in the space above the squad */
.main { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: 40px; padding-block: 40px 0; }
.hero { align-self: center; }
h1 { margin: 0; display: flex; flex-wrap: nowrap; align-items: baseline; column-gap: .08em; font-family: var(--num); font-weight: 800; font-size: var(--h); line-height: .86; letter-spacing: .01em; }
/* optical alignment: the W's side bearing pulled back to the slogan's and button's edge */
#word { display: inline-block; margin-left: -.018em; line-height: 1; will-change: transform; }
/* 外卡's ink sits on WILDCARD's baseline */
h1 .cn { position: relative; top: -.07em; font-family: var(--sans); font-weight: 600; font-size: .5em; color: var(--ink); letter-spacing: 0; line-height: 1; }
/* --h (on .floor) is the headline's size; the slogan and button follow it, so they keep the desktop's
   proportions on a phone (floored at sizes that stay easy to read and tap) */
.sub { margin: calc(var(--h) * .16) 0 0; font-size: clamp(17px, calc(var(--h) * .24), 30px); line-height: 1.3; font-weight: 600; text-wrap: balance; }
.btn { margin-top: clamp(20px, calc(var(--h) * .3), 32px); height: clamp(46px, calc(var(--h) * .5), 56px); padding: 0 1.6em; border-radius: 999px; background: var(--sig); color: var(--on-sig); font-size: clamp(16px, calc(var(--h) * .17), 18px); font-weight: 600; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; transition: transform .15s; }
.btn:active { transform: scale(.97); }
/* a beam of volt light runs round the button's edge (after Magic UI's border beam), with a soft halo:
   a conic gradient turned by --beam, masked to a 2px ring just outside the pill */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn { position: relative; }
.btn::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--beam), color-mix(in srgb, var(--volt) 22%, transparent) 0 55%, color-mix(in srgb, var(--volt) 60%, transparent) 75%, var(--volt) 88%, var(--white) 93%, color-mix(in srgb, var(--volt) 22%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--volt) 70%, transparent)); animation: beam 3.2s linear infinite; }
@keyframes beam { to { --beam: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn::before { animation: none; } }

/* the squad: two rows with depth (3 back, 2 front), the front row's feet on the floor */
.squad { position: relative; z-index: 4; pointer-events: none; height: calc(var(--cw) * 4 / 3 * 1.62); margin-bottom: -4px; }
.c { position: absolute; width: var(--cw); aspect-ratio: 3 / 4; height: auto; border: 0; padding: 0; background: none; flex: none; -webkit-tap-highlight-color: transparent; }
/* only the drawn character takes a tap, so an overlapping neighbour's empty box never steals it */
.c { pointer-events: none; }
.c svg * { pointer-events: visiblePainted; }
.c svg { width: 100%; height: 100%; display: block; overflow: visible; }
.c:nth-child(1) { left: calc(50% - var(--cw) * 1.55); bottom: calc(var(--cw) * .62); }
.c:nth-child(2) { left: calc(50% + var(--cw) * .55); bottom: calc(var(--cw) * .62); }
.c:nth-child(3) { left: calc(50% - var(--cw) / 2); bottom: calc(var(--cw) * .7); }
.c:nth-child(4) { left: calc(50% - var(--cw) * 1.05); bottom: 0; z-index: 1; }
.c:nth-child(5) { left: calc(50% + var(--cw) * .05); bottom: 0; z-index: 1; }
.bubble { position: absolute; left: 50%; bottom: calc(100% - 4px); --dx: 0px; transform: translate(calc(-50% + var(--dx)), 4px); padding: 6px 10px; border-radius: 10px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 600; width: max-content; max-width: 170px; text-align: center; opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.bubble::after { content: ""; position: absolute; left: calc(50% - var(--dx)); bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--white); }
.bubble.on { opacity: 1; transform: translate(calc(-50% + var(--dx)), 0); }

@container site (min-width: 720px) {
  .floor { --h: min(176px, calc((100cqw - 96px) / 4.6), 18svh); }
  .floor:has(.cn) { --h: min(176px, calc((100cqw - 96px) / 5.7), 18svh); }
  .main { padding-block: 72px 0; }
}
footer .wrap { padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px)); }

/* desktop: the 1440×900 composition Tracy picked, scaled by --u (1px at 1440 wide) and centred past it:
   headline left; the squad stands on a 200-unit floor to the right, with depth (middle and ends in front,
   2 and 4 a step back); the page grows rather than letting the squad reach the hero on a short window */
@container site (min-width: 1100px) {
  /* --u also shrinks on a short window, so the whole composition and the footer fit its height */
  .floor { --u: min(calc(min(100cqw, 1440px) / 1440), calc((100svh - 60px) / 840)); --gh: calc(200 * var(--u)); min-height: calc(840 * var(--u)); }
  .wrap { max-width: 1440px; padding-left: max(64px, env(safe-area-inset-left, 0px)); padding-right: max(64px, env(safe-area-inset-right, 0px)); }
  .nav { height: 76px; }
  .main { display: block; padding-block: calc(42 * var(--u)) 0; }
  .floor, .floor:has(.cn) { --h: calc(200 * var(--u)); }
  h1 { column-gap: .14em; }
  h1 .cn { top: 0; }
  .sub { font-size: max(18px, calc(34 * var(--u))); margin-top: calc(22 * var(--u)); }
  .btn { margin-top: calc(32 * var(--u)); height: max(46px, calc(60 * var(--u))); padding: 0 1.8em; font-size: max(16px, calc(19 * var(--u))); }
  .squad { position: absolute; inset: 0; height: auto; margin: 0; }
  .c:nth-child(n) { left: calc(50% + var(--x) * var(--u)); bottom: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }
  .c:nth-child(1) { --x: -178; --y: 86.8; --w: 196; z-index: 2; }
  .c:nth-child(2) { --x: -6; --y: 130.1; --w: 172; z-index: 1; }
  .c:nth-child(3) { --x: 141; --y: 76.1; --w: 208; z-index: 3; }
  .c:nth-child(4) { --x: 324; --y: 130.1; --w: 172; z-index: 1; }
  .c:nth-child(5) { --x: 472; --y: 86.8; --w: 196; z-index: 2; }
  footer .wrap { padding-block: 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
}

.mail { user-select: all; }

@media (prefers-reduced-motion: reduce) { .home * { transition: none !important; } }