/* Homepage only. The Teams chat animation in #teams used inline style="animation-name:…"
   attributes, which the site CSP (style-src 'self') blocks, so the chat never played in
   production. Each message now carries an an-<keyframes> class instead. Loaded after
   styles.<date>.css. Rename to today's date on any change (4-hour cache, see CLAUDE.md). */
.an-tcl-k0 { animation-name: tcl-k0; }
.an-tcl-k1 { animation-name: tcl-k1; }
.an-tcl-k2 { animation-name: tcl-k2; }
.an-tcl-k3 { animation-name: tcl-k3; }
.an-tcl-k4 { animation-name: tcl-k4; }
.an-tcl-k5 { animation-name: tcl-k5; }
.an-tcl-k6 { animation-name: tcl-k6; }
.an-tcl-k7 { animation-name: tcl-k7; }
.an-tcl-k8 { animation-name: tcl-k8; }
.an-tcl-k9 { animation-name: tcl-k9; }
.an-tcl-k10 { animation-name: tcl-k10; }
.an-tcl-y0 { animation-name: tcl-y0; }
.an-tcl-y0w { animation-name: tcl-y0w; }
.an-tcl-y1 { animation-name: tcl-y1; }
.an-tcl-y1w { animation-name: tcl-y1w; }
.an-tcl-y2 { animation-name: tcl-y2; }
.an-tcl-y2w { animation-name: tcl-y2w; }

/* Hero fits one screen beside the wheel (11 Oct 2026). From 901px (where the wheel shows)
   the hero is sized to the viewport height so the copy, the call to action and the wheel
   are all visible without scrolling on an iPad in landscape, and the wheel sits in the
   middle of the screen rather than centred against a column taller than the screen. */
@media (min-width: 901px) {
  .hero { padding: clamp(18px, 3.5vh, 56px) 0 clamp(18px, 3vh, 48px); }
  .hero .eyebrow { margin-bottom: .5rem; }
  .hero .eyebrow-sub { margin: 0 0 clamp(.6rem, 1.6vh, 1.1rem); max-width: 60ch; }
  .hero h1 { font-size: clamp(2rem, min(3.6vw, 6.4vh), 3.5rem); max-width: 19ch; margin-bottom: clamp(.5rem, 1.6vh, 1rem); }
  .hero-sub { font-size: clamp(.98rem, 2.1vh, 1.18rem); margin-bottom: clamp(.5rem, 1.4vh, 1.1rem); line-height: 1.5; }
  .hero-wants { margin: clamp(.6rem, 1.6vh, 1rem) 0 clamp(.8rem, 2.2vh, 1.7rem); }
  .hero-note { margin-top: clamp(.6rem, 1.8vh, 1.6rem); }
  .hero .hw { font-size: clamp(.74rem, 1.6vh, .82rem); padding: 4px 11px; }
  .hero-wants { gap: 6px; }
  .hero-grid { gap: 36px; }
  .wh-stage { width: min(540px, 100%, calc(100vh - 230px)); }
}

/* Hero background (11 Oct 2026): the four stock photos, greyscale and heavily darkened,
   cross-fading slowly behind the copy and the wheel. Web-sized copies in /images/hero-bg-N.jpg
   (1920 px, 76–178 KB), made from the iStock originals, which are 11–23 MB each. Wide
   screens only: the images are set inside the media query, so phones never download them.
   Reduced motion shows the first photo and no fade. */
@media (min-width: 901px) {
  .hero { position: relative; overflow: hidden; isolation: isolate; }
  .hero > .container { position: relative; z-index: 1; }
  .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .hero-bg span { position: absolute; inset: 0; background-size: cover; background-position: center 30%;
    opacity: 0; animation: hero-bg-fade 48s linear infinite; }
  .hero-bg span:nth-child(1) { background-image: url('/images/hero-bg-1.jpg'); animation-delay: 0s; background-position: 70% 30%; }
  .hero-bg span:nth-child(2) { background-image: url('/images/hero-bg-2.jpg'); animation-delay: 12s; }
  .hero-bg span:nth-child(3) { background-image: url('/images/hero-bg-3.jpg'); animation-delay: 24s; background-position: 75% 40%; }
  .hero-bg span:nth-child(4) { background-image: url('/images/hero-bg-4.jpg'); animation-delay: 36s; }
  .hero-bg::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8, 11, 16, .92) 0%, rgba(8, 11, 16, .88) 45%, rgba(8, 11, 16, .85) 100%),
                linear-gradient(0deg, var(--bg, #080b10) 0%, transparent 18%); }
}
@keyframes hero-bg-fade { 0% { opacity: 0; } 6%, 25% { opacity: 1; } 31%, 100% { opacity: 0; } }
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .hero-bg span { animation: none; }
  .hero-bg span:nth-child(1) { opacity: 1; }
}