/* areatwentyfour.com: stealth teaser. Dark only, system fonts, no third-party requests.
   Motion: two glows drift (about a minute each way), the dotted ring turns, and a light sweeps the
   24-tick dial once an hour like a minute hand; a small script in index.html sets it to the visitor's
   clock. All of it uses transform only. Under Reduce Motion everything holds still and the sweep
   just shows the current minute. */
:root {
  color-scheme: dark;
  --bg: #07080B; --text: #F2F3F5; --muted: #9AA1AD; --line: rgba(255, 255, 255, 0.12);
  --glow-a: 94, 234, 212;   /* teal */
  --glow-b: 129, 140, 248;  /* indigo */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--bg); color: var(--text); font: 400 16px/24px system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
a { color: inherit; text-underline-offset: 3px; }

/* Background glows */
.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.sky::before, .sky::after { content: ''; position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; will-change: transform; }
.sky::before { top: -38vmax; left: -30vmax; background: radial-gradient(closest-side, rgba(var(--glow-a), 0.16), transparent); animation: drift-a 56s ease-in-out infinite alternate; }
.sky::after { bottom: -42vmax; right: -34vmax; background: radial-gradient(closest-side, rgba(var(--glow-b), 0.2), transparent); animation: drift-b 68s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(22vmax, 16vmax) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-20vmax, -14vmax) scale(1.1); } }

header, footer { position: relative; z-index: 2; width: 100%; max-width: 1120px; margin: 0 auto; padding: 28px 24px; }
.wordmark { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; }
footer { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; line-height: 18px; color: var(--muted); }
footer a:hover { color: var(--text); }

/* Hero */
.hero { position: relative; z-index: 1; isolation: isolate; overflow-x: clip; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; }
h1 {
  margin: 0 0 20px; font-size: clamp(38px, 6.6vw, 80px); line-height: 1.05; font-weight: 650; letter-spacing: -0.035em;
  background: linear-gradient(180deg, #FFFFFF 35%, rgba(255, 255, 255, 0.66)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1 span { display: block; text-wrap: balance; }
h1.small { font-size: clamp(32px, 5vw, 48px); }
.sub { margin: 0; max-width: 34ch; color: var(--muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.5; }
.badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--glow-a)); }
.pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgb(var(--glow-a)); animation: pulse 3.2s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: 0.55; } to { transform: scale(3.4); opacity: 0; } }

/* Dial: 24 ticks behind the headline */
/* On phones the dial is wider than the screen and the hero crops its sides, so the ring frames the text.
   It never gets taller than the screen, so it doesn't add a scrollbar on short windows. */
.dial { --size: min(clamp(540px, 94vw, 760px), 100vh - 40px); --size: min(clamp(540px, 94vw, 760px), 100svh - 40px); position: absolute; z-index: -1; left: 50%; top: 50%; width: var(--size); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.dial svg, .sweep { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial-dots { animation: spin 180s linear infinite reverse; will-change: transform; }
.sweep {
  border-radius: 50%; will-change: transform; animation: minute-hand 3600s linear infinite;
  background: conic-gradient(from 0deg, rgba(var(--glow-a), 0) 0deg, rgba(var(--glow-a), 0) 265deg, rgba(var(--glow-a), 0.26) 360deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 62%, #000 84%, #000 92%, transparent 95%);
  mask-image: radial-gradient(closest-side, transparent 62%, #000 84%, #000 92%, transparent 95%);
}
/* The bright head of the sweep, on the tick ring at 12 o'clock of the rotating layer. */
.dial::after {
  content: ''; position: absolute; left: 50%; top: 5%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: #E9FFFB; box-shadow: 0 0 12px 4px rgba(var(--glow-a), 0.55);
  transform-origin: 3px calc(var(--size) * 0.45 + 3px); animation: minute-hand 3600s linear infinite; will-change: transform;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Same turn as spin, under its own name so the script in index.html can find the minute hand. */
@keyframes minute-hand { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  /* Paused, not removed, so the script can still point the sweep at the current minute. */
  .sweep, .dial::after { animation: minute-hand 3600s linear infinite paused !important; }
}