/* Homepage hero, live layer (hero-live.js). */
.hl { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; max-width: 620px; opacity: 0; transition: opacity .5s ease; }
.hl.hl-on { opacity: 1; }
.hl svg { width: 16px; height: 16px; flex-shrink: 0; }

/* 1 + 2: people here now / LIVE, just arrived */
.hl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hl-row:empty, .hl-row:not(:has(> :not([hidden]))) { display: none; }
.hl-now { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: .86rem; color: var(--text);
  background: color-mix(in srgb, #3ddc97 12%, transparent); border: 1px solid color-mix(in srgb, #3ddc97 40%, transparent); }
.hl-now strong { color: #3ddc97; }
.hl-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #3ddc97; flex-shrink: 0; }
.hl-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: hl-ping 1.8s ease-out infinite; }
@keyframes hl-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.8); opacity: 0; } }
.hl-now.is-live { background: color-mix(in srgb, #ff3b4f 16%, transparent); border-color: color-mix(in srgb, #ff3b4f 55%, transparent); }
.hl-now.is-live .hl-dot { background: #ff3b4f; }
.hl-now.is-live strong { color: #ff8a96; letter-spacing: .02em; }
.hl-join { margin-left: 4px; padding: 4px 12px; border-radius: 999px; background: #ff3b4f; color: #fff; font-weight: 700; text-decoration: none; font-size: .82rem; }
.hl-join:hover, .hl-join:focus-visible { background: #ff5566; }
.hl-arrive { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--text-muted); }
.hl-arrive svg { color: #ffc94d; }
.hl-arrive strong { color: var(--text); }
.hl-arrive.hl-in { animation: hl-slide .45s ease both; }
@keyframes hl-slide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* the arriving visitor's country on the map */
.hero-map .map-label.hl-ping { animation: hl-label 3s ease both; z-index: 5; }
@keyframes hl-label { 0%, 100% { text-shadow: none; transform: none; } 15%, 70% { color: #ffd76a; text-shadow: 0 0 12px rgba(255, 201, 77, .9); transform: scale(1.25); } }

/* 4 + 6: sign-ups and quotes */
.hl-rot { min-height: 2.6em; display: flex; align-items: center; }
.hl-rot-line { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; color: var(--text-muted); animation: hl-slide .5s ease both; }
.hl-rot-ic { display: inline-flex; padding-top: 1px; }
.hl-signup .hl-rot-ic { color: #3ddc97; }
.hl-quote .hl-rot-ic { color: var(--accent-2); }
.hl-rot-txt strong { color: var(--text); }
.hl-rot-txt em { font-style: normal; color: var(--text); white-space: nowrap; }

/* 7: round-number celebration */
.hl-cele { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: 14px; font-size: .92rem; color: var(--text);
  background: linear-gradient(135deg, rgba(255, 201, 77, .18), rgba(61, 220, 151, .12)); border: 1px solid rgba(255, 201, 77, .55); overflow: hidden;
  animation: hl-cele-in .6s cubic-bezier(.2, 1.4, .4, 1) both; transition: opacity .6s ease, transform .6s ease; }
.hl-cele.out { opacity: 0; transform: translateY(-6px); }
.hl-cele strong { color: #ffd76a; }
.hl-cele-ic { display: inline-flex; color: #ffd76a; }
.hl-cele-ic svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.hl-cele-ring { position: absolute; left: 24px; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid #ffd76a; animation: hl-ring 1.4s ease-out 2; pointer-events: none; }
@keyframes hl-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(9); opacity: 0; } }
@keyframes hl-cele-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* 8: a light that follows the mouse across "Every Sunday" */
.hero-title .ht-when.hl-glow {
  background: radial-gradient(circle 110px at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(95deg, #3b8bff 0%, #4fd1ff 55%, #7cf2d0 100%);
  -webkit-background-clip: text; background-clip: text;
}
[data-theme="light"] .hero-title .ht-when.hl-glow {
  background: radial-gradient(circle 110px at var(--gx, 50%) var(--gy, 50%), rgba(10, 30, 80, .9), rgba(10, 30, 80, 0) 70%),
    linear-gradient(95deg, #1f6fe5 0%, #0aa5d6 60%, #0f9f7a 100%);
  -webkit-background-clip: text; background-clip: text;
}

@media (max-width: 640px) {
}
@media (prefers-reduced-motion: reduce) {
  .hl, .hl-cele { transition: none; animation: none; }
  .hl-dot::after, .hl-cele-ring { animation: none; }
}

/* Headline "Free AI & Web Development / Training for Everyone, / Every Sunday" (founder, 2026-10-06:
   "I teach both AI & web development"). styles.css sizes the lines (no wrapping) for the old, shorter
   first line "Free AI Training" (14.5cqi); the longest line is now ~25 characters, so it is sized
   down to fit the column on every screen. */
.hero-copy .hero-title { font-size: clamp(1.1rem, 8cqi, 3.6rem); }
@media (max-width: 959px) { .hero-copy .hero-title { font-size: clamp(1.1rem, 8cqi, 3rem); } }