/* Homepage hero: quiet text labels over a crossfading stack of app screenshots
   (CRM / Projects / Invoices / Wiki / Whatever). Shared by banner.tpl.php (homepage) and
   banner-middle.tpl.php (/f5bot), which are injected as raw HTML and so cannot
   include PHP. Bump the ?v= in both files when editing.

   The tabs carry the point even if nobody clicks: one product, many apps.
   Every slide image is the same 1200x800 frame (phone 414x804), so the stack
   never changes height mid-fade. */

.hero-slides .hero-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; margin: 0 auto 16px; }
/* Deliberately quiet: plain text, no pill or fill. The hero image is the
   subject; the labels only need to be readable. */
.hero-slides .hero-tab { position: relative; border: 0; background: none; color: var(--grey2); font: inherit;
	font-size: 0.95em; font-weight: 500; padding: 4px 0 6px; cursor: pointer; }
.hero-slides .hero-tab:hover { color: var(--content); }
.hero-slides .hero-tab.is-active { color: var(--content); }

/* Active underline, which doubles as the auto-advance progress bar. */
.hero-slides .hero-tab:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.hero-slides .hero-tab.is-active:after { transform: scaleX(1); }
.hero-slides.is-playing .hero-tab.is-active:after { transform: scaleX(0); animation: heroTabProgress var(--hero-interval, 6s) linear forwards; }
.hero-slides.is-paused .hero-tab.is-active:after { animation-play-state: paused; }
@keyframes heroTabProgress { to { transform: scaleX(1); } }

/* Slides share one grid cell so the stack takes the height of one image. */
.hero-slides .hero-stage { display: grid; position: relative; touch-action: pan-y; }
.hero-slides .hero-slide { grid-area: 1 / 1; position: relative; margin: 0; opacity: 0; visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.hero-slides .hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s; }

@media (prefers-reduced-motion: reduce) {
	.hero-slides .hero-slide, .hero-slides .hero-slide.is-active { transition: none; }
}
@media (max-width: 560px) {
	.hero-slides .hero-tabs { gap: 4px 18px; }
	.hero-slides .hero-tab { font-size: 0.9em; }
}