/**
 * BRIDGES Conference 2026 — "Conference Edition" colour skin.
 *
 * A purple layer painted over the base BRIDGES page to echo the Starbridge /
 * BRIDGES brand, loaded IN ADDITION to starbridge.css. Every rule is scoped
 * under .sb-conf so it only affects the conference-edition page and never the
 * original.
 *
 * Design principle — a deliberate two-colour split, not sprinkled purple:
 *   • KCT orange  = KCT's own actions & identity  (buttons, tool tiles, links)
 *   • BRIDGES purple = the event layer            (hero aura, co-brand lockup,
 *     date/venue chrome, section eyebrows, the dark CTA band)
 * Where the two literally meet — the hero highlight and the CTA glow — they
 * blend orange→purple, so the page reads as KCT × BRIDGES shaking hands.
 *
 * BRIDGES palette sampled from bridges.starbridge.ai:
 *   #7A3BFF saturated violet · #A47CF8 logo violet · #ECE9FE soft tint
 *   #190E2D signature purple-black (their dark)
 *
 * @package KCT
 */

.sb-conf {
	--conf-purple: #7a3bff;   /* saturated — accents, gradients */
	--conf-violet: #a47cf8;   /* logo match — softer marks */
	--conf-soft:   #ece9fe;   /* light tint */
	--conf-ink:    #190e2d;   /* BRIDGES purple-black — the dark band */
}

/* ---- Hero: a soft violet aura + violet ripples ------------------------- */

.sb-conf .erps-hero-bg {
	background: radial-gradient(60% 52% at 50% -4%, rgba(122, 59, 255, 0.12) 0%, rgba(122, 59, 255, 0) 70%);
}

.sb-conf .erps-hero-ripple {
	border-color: rgba(122, 59, 255, 0.22);
}

/* ---- Living aurora --------------------------------------------------------
   Two soft blobs — KCT orange and BRIDGES violet — drift and swell forever
   behind the hero, so the section is always quietly in motion, not only on
   scroll. Positioned toward the upper corners so the centred headline and lead
   stay readable. Transform-only (GPU-composited); the soft radial-gradient
   edges mean no expensive blur filter. Disabled under reduced-motion.
   --------------------------------------------------------------------------- */

.sb-conf .erps-hero-bg::before,
.sb-conf .erps-hero-bg::after {
	content: "";
	position: absolute;
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform;
}

.sb-conf .erps-hero-bg::before {
	width: min(48vw, 560px);
	left: 3%;
	top: 0%;
	background: radial-gradient(circle, rgba(255, 72, 0, 0.34) 0%, rgba(255, 72, 0, 0.10) 42%, rgba(255, 72, 0, 0) 70%);
	animation: sb-aurora-a 17s ease-in-out infinite;
}

.sb-conf .erps-hero-bg::after {
	width: min(54vw, 640px);
	right: 1%;
	top: 6%;
	background: radial-gradient(circle, rgba(122, 59, 255, 0.34) 0%, rgba(122, 59, 255, 0.10) 44%, rgba(122, 59, 255, 0) 70%);
	animation: sb-aurora-b 21s ease-in-out infinite;
}

@keyframes sb-aurora-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(24%, 16%) scale(1.15); }
	66%      { transform: translate(-8%, 28%) scale(0.92); }
}

@keyframes sb-aurora-b {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(-22%, 20%) scale(0.9); }
	66%      { transform: translate(16%, -10%) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
	.sb-conf .erps-hero-bg::before,
	.sb-conf .erps-hero-bg::after {
		animation: none;
	}
}

/* The highlight word blends KCT orange → BRIDGES violet: the two brands meet
   inside the headline itself. */
.sb-conf .erps-hero-h1 .hi {
	background: linear-gradient(102deg, var(--accent) 0%, var(--accent) 32%, var(--conf-purple) 100%);
	/* Wider than the text so the blend point can drift across it. */
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	/* The orange↔purple blend slowly breathes across the word — a living
	   gradient, the two brands never quite settling. */
	animation: sb-hi-shimmer 7s var(--ease-in-out) infinite;
}

@keyframes sb-hi-shimmer {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.sb-conf .erps-hero-h1 .hi { animation: none; }
}

/* ---- Co-brand lockup: purple ties it to the event --------------------- */

.sb-conf .sb-lockup-label {
	color: var(--conf-purple);
}

.sb-conf .sb-lockup-x {
	color: var(--conf-violet);
}

/* ---- Event chrome: date / venue / attendee pills go violet ------------ */

.sb-conf .sb-live {
	background: var(--conf-purple);
}

.sb-conf .sb-live::after {
	border-color: var(--conf-purple);
}

.sb-conf .sb-meta svg {
	color: var(--conf-purple);
}

/* ---- Section eyebrows: the square becomes an orange→violet blend, the
   connective thread that carries the two-brand pairing through every
   section without shouting. ---------------------------------------------- */

.sb-conf .eyebrow-mark::before {
	background: linear-gradient(135deg, var(--accent) 0%, var(--conf-purple) 100%);
}

/* ---- Case-study stat pills: BRIDGES ink instead of KCT near-black ------ */

.sb-conf .sb-cases-grid .cs-card-stats li {
	background: var(--conf-ink);
}

/* ---- The dark CTA band, reskinned to the BRIDGES signature dark, with an
   orange glow from the top (KCT) meeting a violet glow from the bottom
   (BRIDGES). The white BRIDGES wordmark already sits here. ---------------- */

.sb-conf .cta-bg {
	background: var(--conf-ink);
}

.sb-conf .cta-glow {
	background:
		/* KCT orange spotlight from the top */
		radial-gradient(82% 90% at 50% 0%, rgba(255, 72, 0, 0.34) 0%, rgba(255, 72, 0, 0.10) 30%, rgba(255, 72, 0, 0) 60%),
		/* BRIDGES violet rising from the bottom */
		radial-gradient(75% 85% at 50% 108%, rgba(122, 59, 255, 0.48) 0%, rgba(122, 59, 255, 0.14) 42%, rgba(122, 59, 255, 0) 72%);
}

/* Tint the eyebrow dot glow on the dark band toward violet. */
.sb-conf .cta .eyebrow-mono .dot {
	box-shadow: 0 0 0 4px rgba(164, 124, 248, 0.28);
}