/*
 * pages/brightwatch.css — Styles spécifiques à la page Brightwatch (produit).
 * Chargé via inc/enqueue.php (body.page-template-tpl-brightwatch).
 *
 * Sections :
 *   - .hero-sub--brightwatch → gradient + border-bottom accent, logo produit
 *   - .bw-problem            → éditorial narratif (kicker + Fraunces italic + prose)
 *   - .bw-features           → grid auto + 4 cards accent-top + bw-reveal stagger
 *   - .bw-process            → process-list 3 étapes + bw-reveal stagger
 *   - .bw-demo               → section-dark + red-line-draw + CTA centré
 */

/* ════════════════════════════════════════════════════════════════════
 * TITRE DE SECTION — signature Fraunces italic rouge (fragment em)
 * Pattern partagé entre toutes les sections de la page.
 * ════════════════════════════════════════════════════════════════════ */

.bw-problem__title,
.bw-features__title,
.bw-process__title,
.bw-demo__title {
	font-family:     var(--font-display);
	font-size:       clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight:     500;
	line-height:     var(--lh-tight);
	letter-spacing:  -0.015em;
	margin:          0 0 var(--space-6);
}

.bw-problem__title em,
.bw-features__title em,
.bw-process__title em,
.bw-demo__title em {
	font-style: italic;
	color:      var(--bw-red);
}

.bw-problem__kicker,
.bw-features__kicker,
.bw-process__kicker,
.bw-demo__kicker {
	display:         inline-block;
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.18em;
	text-transform:  uppercase;
	color:           var(--bw-red);
	margin:          0 0 var(--space-4);
}

/* ════════════════════════════════════════════════════════════════════
 * HERO BRIGHTWATCH — logo produit + h1 Fraunces italic (signature)
 * Le titre h1 hérite déjà de `.hero-sub .hero__title` (components.css) :
 *   Fraunces italic 500, stagger 0/120/180ms breadcrumb→h1→lead.
 * ════════════════════════════════════════════════════════════════════ */

.hero-sub--brightwatch {
	background:    linear-gradient(135deg, var(--bg) 0%, var(--surface) 100%);
	border-bottom: 2px solid var(--accent);
}

.brightwatch-hero__logo {
	margin-bottom: var(--space-4);
}

.brightwatch-hero__logo img {
	height: 60px;
	width:  auto;
}

/* Wordmark fallback si logo.svg absent — décoratif, pas un h1. */
.brightwatch-hero__wordmark {
	display:         inline-block;
	font-family:     var(--font-display);
	font-style:      italic;
	font-weight:     500;
	font-size:       clamp(1.5rem, 3vw, 2rem);
	letter-spacing:  -0.01em;
	color:           var(--accent);
	margin:          0 0 var(--space-4);
}

/* ════════════════════════════════════════════════════════════════════
 * #1 CONSTAT — éditorial centré
 * ════════════════════════════════════════════════════════════════════ */

.bw-problem__header {
	text-align:    center;
	margin-bottom: var(--space-8);
}

.bw-problem__title {
	color: var(--fg);
}

.bw-problem__prose {
	max-width: 780px;
	margin:    0 auto;
	text-align: center;
}

.bw-problem__prose p {
	font-size:   var(--text-md);
	color:       var(--fg-muted);
	line-height: var(--lh-relaxed);
}

/* ════════════════════════════════════════════════════════════════════
 * #2 CAPACITÉS — grid cards + bw-reveal stagger 0/80/160/240 ms
 * ════════════════════════════════════════════════════════════════════ */

.bw-features__header {
	text-align:    center;
	margin-bottom: var(--space-10);
}

.bw-features__title {
	color: var(--fg);
}

.bw-features__grid > .bw-reveal:nth-child(1) { --bw-reveal-delay:   0ms; }
.bw-features__grid > .bw-reveal:nth-child(2) { --bw-reveal-delay:  80ms; }
.bw-features__grid > .bw-reveal:nth-child(3) { --bw-reveal-delay: 160ms; }
.bw-features__grid > .bw-reveal:nth-child(4) { --bw-reveal-delay: 240ms; }

/* ════════════════════════════════════════════════════════════════════
 * #3 DÉPLOIEMENT — process-list + bw-reveal stagger 0/100/200 ms
 * ════════════════════════════════════════════════════════════════════ */

.bw-process__header {
	text-align:    center;
	margin-bottom: var(--space-10);
}

.bw-process__title {
	color: var(--fg);
}

.bw-process__list > .bw-reveal:nth-child(1) { --bw-reveal-delay:   0ms; }
.bw-process__list > .bw-reveal:nth-child(2) { --bw-reveal-delay: 100ms; }
.bw-process__list > .bw-reveal:nth-child(3) { --bw-reveal-delay: 200ms; }

/* ════════════════════════════════════════════════════════════════════
 * #4 DÉMO — section-dark + red-line-draw au sommet (pattern about-qualifs)
 * ════════════════════════════════════════════════════════════════════ */

html.js-reveals-ready .bw-demo::before {
	content:    '';
	position:   absolute;
	top:        0;
	left:       0;
	height:     1px;
	width:      0;
	background: var(--bw-red);
	transition: width 700ms cubic-bezier(.22, .61, .36, 1);
	z-index:    2;
}

html.js-reveals-ready .bw-demo.is-visible::before {
	width: 100%;
}

.bw-demo__header {
	text-align:    center;
	margin-bottom: var(--space-8);
}

.bw-demo__title {
	color: #e8eaed;
}

.bw-demo__lead {
	max-width:   640px;
	margin:      0 auto;
	font-size:   var(--text-md);
	color:       color-mix(in srgb, #e8eaed 75%, transparent);
	line-height: var(--lh-relaxed);
}

.bw-demo__actions {
	display:         flex;
	justify-content: center;
	margin-top:      var(--space-8);
}

/* ════════════════════════════════════════════════════════════════════
 * REDUCED MOTION
 * ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	html.js-reveals-ready .bw-demo::before {
		width:      100%;
		transition: none;
	}
}