/* getclubface.com, redesign: what every direction shares. The app's palette and type (dark only; lime is light, never a
   material), the hour's sky behind the islands, the glass name tags, the wordmark and the "coming soon" status.
   Geist from the site itself (SIL OFL): a visitor's browser asks nobody else for anything. */
@font-face { font-family: Geist; font-weight: 400; font-display: swap; src: url(/fonts/Geist-Regular.ttf) format('truetype'); }
@font-face { font-family: Geist; font-weight: 500; font-display: swap; src: url(/fonts/Geist-Medium.ttf) format('truetype'); }
@font-face { font-family: Geist; font-weight: 600; font-display: swap; src: url(/fonts/Geist-SemiBold.ttf) format('truetype'); }

:root {
  --ground: #050505;
  --ink: #F2F2F0;
  --soft: rgba(242, 242, 240, .74);   /* 10.6:1 on the ground */
  --quiet: rgba(242, 242, 240, .58);  /* 6.6:1 */
  --card: #121212;
  --hairline: rgba(255, 255, 255, .09);
  --lime: #D4FF3A;
  --on-lime: #050505;
  --bone: #F2F2F0;
  /* the crew's tag discs (Palette+Onboarding) */
  --crew-sky: #8FD3FF; --crew-gold: #FFD166; --crew-amber: #FFB35C; --crew-lilac: #C9A4FF;
  /* the hour's light behind the islands (Palette.welcomeSky); golden until the hour is read */
  --glow: rgba(236, 170, 86, .22);
  --tint: rgba(118, 78, 58, .18);
  color-scheme: dark;
}
html[data-light=morning] { --glow: rgba(140, 168, 204, .22); --tint: rgba(58, 78, 112, .20); }
html[data-light=midday]  { --glow: rgba(156, 182, 190, .16); --tint: rgba(70, 92, 104, .14); }
html[data-light=golden]  { --glow: rgba(236, 170, 86, .22);  --tint: rgba(118, 78, 58, .18); }
html[data-light=dusk]    { --glow: rgba(218, 126, 82, .24);  --tint: rgba(98, 62, 116, .22); }
html[data-light=night]   { --glow: rgba(78, 98, 156, .14);   --tint: rgba(26, 36, 78, .20); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: Geist, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The hour's sky: a glow low at the islands' horizon and a tint high, over black. --horizon is set per world. */
.sky {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 30% at 50% var(--horizon, 62%), var(--glow), transparent 72%),
    linear-gradient(180deg, var(--tint), transparent var(--tint-end, 70%));
}

.sky.fade { -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 24%, #000 70%, transparent); }

.sky.fade-b { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }

/* The wordmark: the club mark and "club" + "face" (face in lime, as on the app's Welcome) */
.wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-size: 21px; font-weight: 500; letter-spacing: -0.045em; color: var(--ink); }
.wordmark svg { width: 22px; height: 22px; flex: none; }
.wordmark em { font-style: normal; color: var(--lime); }

/* Glass (the app's Liquid Glass, as near as the web gets: frosted, a light rim on top) */
.glass {
  background: rgba(30, 30, 32, .46);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 30px rgba(0, 0, 0, .35);
}

/* A friend's name in glass, the person glyph on their color (lime for You): a label, never a button, no initials. */
.tag {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px 0 3px; border-radius: 13px; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--ink); transform-origin: 50% 100%;
}
.tag .disc { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--lime)); }
.tag .disc svg { width: 12px; height: 12px; fill: var(--on-lime); }

/* The status where the App Store button will go: truthful until it's there. */
.soon {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; padding: 0 26px; border-radius: 28px; font-size: 17px; font-weight: 600; color: var(--ink);
  background: #161616; border: 1px solid rgba(255, 255, 255, .06);
}
.soon svg { width: 18px; height: 18px; fill: var(--ink); margin-top: -2px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; }

/* A world: islands (images) and the tags absolutely placed by world.js; the shots on one canvas over them. */
.world { position: relative; overflow: hidden; }
.world .isle { position: absolute; left: 0; top: 0; will-change: transform; }
.world .isle img { position: absolute; inset: 0; width: 100%; height: 100%; }
.world canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.world .tags { position: absolute; inset: 0; pointer-events: none; }

/* The footer every page ends on */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; font-size: 14px; color: var(--quiet); }
.foot nav { display: flex; gap: 22px; }
.foot a { color: var(--soft); text-decoration: none; }
.foot a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }