/* total.football, the public home (Avni 02.11). The game's onboarding design: the .c-onb stage, the line art, the panels,
   the pill buttons, the step rail. Same token names and values as apps/web/app/styles/tokens.css. */
/* the game's tokens, same names and values as apps/web/app/styles/tokens.css */
:root {
  --tf-dir:1; --tf-hero-base:#131826; --tf-bg:#0d1018; --tf-white:#fff; --tf-text-secondary:#c9d1dd;
  --tf-white-a04:rgba(255,255,255,.04); --tf-white-a08:rgba(255,255,255,.08); --tf-white-a20:rgba(255,255,255,.2); --tf-white-a50:rgba(255,255,255,.5); --tf-white-a75:rgba(255,255,255,.75);
  --tf-accent:#e6c987; --tf-accent-deep:#a9873f; --tf-on-accent:#1a1405; --tf-gold:#e6c987; --tf-club-2:#e9c46a;
  --tf-border-strong:#303a4d; --tf-font-display:'Murecho','Segoe UI',system-ui,sans-serif; --tf-font-body:'Google Sans','Segoe UI',system-ui,sans-serif;
  --tf-radius-xl:28px; --tf-radius-full:999px; --tf-duration-fast:120ms; --tf-duration-meter:1.1s; --tf-ease-out:cubic-bezier(.3,1,.4,1);
  --c-onb-surface:color-mix(in srgb, color-mix(in srgb, var(--tf-white) 4%, var(--tf-hero-base)) 96%, transparent);
  --step:cubic-bezier(.2,.75,.2,1);
}
:root[dir="rtl"] { --tf-dir:-1; }
:root:lang(he) { --tf-font-display:'Noto Sans Hebrew','Segoe UI',system-ui,sans-serif; --tf-font-body:'Noto Sans Hebrew','Segoe UI',system-ui,sans-serif; }
:root:lang(zh) { --tf-font-display:'Noto Sans SC','Segoe UI',system-ui,sans-serif; --tf-font-body:'Noto Sans SC','Segoe UI',system-ui,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--tf-bg); }
body { margin:0; min-height:100dvh; color:var(--tf-white); font:15px/1.55 var(--tf-font-body); color-scheme:dark; overflow-x:clip; }
/* the .c-onb stage, fixed behind the page */
.stage { position:fixed; inset:0; background:
    radial-gradient(60% 45% at 50% -10%, color-mix(in srgb, var(--tf-club-2) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--tf-hero-base), color-mix(in srgb, var(--tf-hero-base) 40%, var(--tf-bg))); }
/* .c-onb::before, the slow floodlight */
.stage::before { content:""; position:absolute; inset:0; background:radial-gradient(45% 35% at 50% 12%, var(--tf-white-a04), transparent 70%); animation:spot 9s ease-in-out infinite alternate; }
@keyframes spot { from { opacity:.6; transform:none; } to { opacity:1; transform:translateY(-14px) scale(1.05); } }
a { color:inherit; }
:focus-visible { outline:2px solid var(--tf-accent); outline-offset:3px; }

/* .c-onbdecor, the line art behind each part */
.decor { position:fixed; inset:0; display:grid; place-items:center; pointer-events:none; overflow:hidden; }
.art { grid-area:1/1; inline-size:min(1700px,130vw); block-size:auto; max-block-size:118vh; fill:none; stroke:var(--tf-white-a20); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:translateX(calc(var(--tf-dir)*56px)) scale(.985); transition:opacity 780ms var(--step), transform 780ms var(--step); }
.art .acc { stroke:color-mix(in srgb, var(--tf-accent) 45%, transparent); } .art .dot { fill:color-mix(in srgb, var(--tf-accent) 45%, transparent); stroke:none; }
.art.is-on { opacity:.3; transform:none; }
.art.is-out { opacity:0; transform:translateX(calc(var(--tf-dir)*-56px)) scale(.985); }

.tfh { position:relative; z-index:1; }
.top { display:flex; align-items:center; gap:16px; padding:20px 24px 0; }
.wordmark { font:600 22px/1 var(--tf-font-display); letter-spacing:-.01em; text-decoration:none; } .wordmark b { color:var(--tf-gold); font-weight:inherit; }
.flags { display:flex; gap:6px; margin-inline-start:auto; }
.flags a { display:block; border-radius:4px; line-height:0; opacity:.55; transition:opacity var(--tf-duration-fast), box-shadow var(--tf-duration-fast); }
.flags a:hover { opacity:1; }
.flags a[aria-current] { opacity:1; box-shadow:0 0 0 2px var(--tf-hero-base), 0 0 0 3.5px var(--tf-accent); }
.flags img { inline-size:28px; block-size:21px; border-radius:4px; display:block; }
.top .login { font-size:14px; font-weight:600; text-decoration:none; color:var(--tf-white-a75); } .top .login:hover { color:var(--tf-white); }

/* .c-btn */
.btn { display:inline-flex; align-items:center; justify-content:center; font:600 13px/1 var(--tf-font-body); padding:10px 18px; border-radius:var(--tf-radius-full); text-decoration:none; white-space:nowrap; background:var(--tf-accent); color:var(--tf-on-accent); transition:transform var(--tf-duration-fast), box-shadow var(--tf-duration-fast); }
.btn:hover { transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.5); } .btn:active { transform:none; }
.btn.lg { font-size:15px; padding:14px 26px; }
.btn.ghost { background:transparent; color:var(--tf-white); box-shadow:inset 0 0 0 1px var(--tf-border-strong); }

.part { max-inline-size:1040px; margin-inline:auto; padding-inline:24px; }
.hero { min-block-size:calc(100dvh - 62px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-block:40px 72px; }
.eyebrow { font:500 15px var(--tf-font-display); color:var(--tf-accent); margin:0 0 12px; }
h1 { font:600 clamp(44px,7.4vw,74px)/1.04 var(--tf-font-display); letter-spacing:-.02em; margin:0; text-wrap:balance; }
.lead { font:500 clamp(18px,2vw,20px)/1.4 var(--tf-font-display); color:var(--tf-white-a75); max-inline-size:32em; margin:18px 0 28px; text-wrap:balance; }
.acts { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.fine { color:var(--tf-white-a50); font-size:13px; margin:16px 0 0; }

section.part { padding-block:72px; }
h2 { font:600 clamp(28px,4vw,36px)/1.1 var(--tf-font-display); letter-spacing:-.02em; margin:0 0 8px; text-align:center; text-wrap:balance; }
.sub { text-align:center; color:var(--tf-white-a75); margin:0 auto 36px; max-inline-size:34em; }

/* .c-onb__panel */
.panel { background:var(--c-onb-surface); box-shadow:inset 0 0 0 1px var(--tf-white-a08); border-radius:var(--tf-radius-xl); padding:24px; }
.panel h3 { font:600 18px/1.25 var(--tf-font-display); margin:0 0 6px; } .panel p { margin:0; color:var(--tf-text-secondary); }

/* the step rail, same as the onboarding's */
.rail { position:relative; display:grid; grid-template-columns:repeat(3,1fr); margin-block-end:18px; }
.rail::before,.rail::after { content:""; position:absolute; inset-block-start:17px; inset-inline-start:16.66%; block-size:2px; }
.rail::before { inline-size:66.68%; background:var(--tf-white-a08); }
.rail::after { inline-size:0; background:linear-gradient(calc(90deg*var(--tf-dir)),var(--tf-accent-deep),var(--tf-accent)); transition:inline-size calc(var(--tf-duration-meter)*1.6) var(--tf-ease-out) .15s; }
.in .rail::after { inline-size:66.68%; }
.node { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; font:500 14px var(--tf-font-display); color:var(--tf-white-a50); transition:color .4s; text-align:center; }
.node b { font-weight:inherit; }
.node i { inline-size:36px; block-size:36px; border-radius:50%; background:var(--tf-hero-base); box-shadow:inset 0 0 0 1px var(--tf-border-strong); transition:background .4s, box-shadow .4s; }
.in .node { color:var(--tf-accent); }
.in .node i { background:var(--tf-accent); box-shadow:0 0 0 6px color-mix(in srgb, var(--tf-accent) 18%, transparent); }
.in .node:nth-child(2),.in .node:nth-child(2) i { transition-delay:.5s; } .in .node:nth-child(3),.in .node:nth-child(3) i { transition-delay:1s; }
.three,.six { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }

.chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-block-end:20px; }
.chips span { padding:6px 14px; border-radius:var(--tf-radius-full); box-shadow:inset 0 0 0 1px var(--tf-border-strong); font-size:13px; color:var(--tf-text-secondary); }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; text-align:center; }
.stats div { display:flex; flex-direction:column; padding-inline:12px; border-inline-start:1px solid var(--tf-white-a08); } .stats div:first-child { border:0; }
.stats dd { margin:0; font:600 36px/1.1 var(--tf-font-display); order:-1; }
.stats dt { font-size:13px; color:var(--tf-white-a50); margin-block-start:4px; }

.end { text-align:center; padding-block:40px; }
.end h2 { margin-block-end:20px; }
footer { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; padding:8px 24px 28px; color:var(--tf-white-a50); font-size:13px; }
footer a { text-decoration:none; } footer a:hover { color:var(--tf-white); }

/* the .c-onb step slide: 28px + fade in the reading direction, 520ms */
.js .rise { opacity:0; transform:translateX(calc(var(--tf-dir)*28px)); transition:opacity 520ms var(--step), transform 520ms var(--step); }
.js .in .rise,.js .in.rise { opacity:1; transform:none; }
.js .three .rise:nth-child(2),.six .rise:nth-child(3n+2) { transition-delay:.08s; } .three .rise:nth-child(3),.six .rise:nth-child(3n) { transition-delay:.16s; }

@media (max-width:760px) {
  .top { flex-wrap:wrap; } .flags { order:3; inline-size:100%; margin-inline-start:0; justify-content:center; padding-block-start:6px; } .top .login { margin-inline-start:auto; }
  .three,.six { grid-template-columns:1fr; } .stats { grid-template-columns:1fr 1fr; row-gap:20px; } .stats div:nth-child(3) { border:0; }
  section.part { padding-block:52px; } .art { inline-size:190vw; max-block-size:none; }
  .panel { padding:20px; border-radius:20px; }
}
@media (max-width:480px) { .top > .btn { display:none; } }
@media (prefers-reduced-motion:reduce) {
  .stage::before { animation:none; } html { scroll-behavior:auto; }
  .art,.art.is-out,.js .rise { transform:none; }
}
.skip { position:absolute; inset-inline-start:-999px; } .skip:focus { inset-inline-start:12px; inset-block-start:12px; z-index:9; background:var(--tf-accent); color:var(--tf-on-accent); padding:8px 14px; border-radius:var(--tf-radius-full); }