/* ============================================
   SECTION TRANSITIONS & FLOW HARMONIZATION
   Ensures smooth visual continuity from top to bottom
   ============================================ */

/* ============================================
   SECTION EDGE FADES
   Smooth gradients at section boundaries
   ============================================ */

/* Generic section top edge softener */
.intel-section,
.benchmark-section,
.security-section,
.protocol-section,
.profiles-section,
.engagement-section {
    /* Add inner shadow at top for depth */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Light sections get subtle bottom shadow for depth */
.deliverables-section,
.morning-brief {
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.03);
}

/* ============================================
   SCAN-LINE CONSISTENCY
   Normalize scan-line intensity across sections
   ============================================ */

/* Ensure all dark sections have consistent scan-line opacity */
.intel-section::before,
.benchmark-section::before,
.security-section::before,
.protocol-section::before,
.profiles-section::before {
    opacity: 0.4 !important;
}

[data-theme="light"] .intel-section::before,
[data-theme="light"] .benchmark-section::before,
[data-theme="light"] .security-section::before,
[data-theme="light"] .protocol-section::before,
[data-theme="light"] .profiles-section::before {
    opacity: 0.5 !important;
}

/* ============================================
   REVEAL ANIMATION ENHANCEMENTS
   Consistent, refined scroll-reveal behavior
   ============================================ */

/* Base reveal state */
.chat-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: 
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered card reveals with subtle scale */
.report-output-card.chat-reveal,
.advantage-card.chat-reveal,
.pricing-card.chat-reveal {
    transform: translateY(20px) scale(0.98);
}

.report-output-card.chat-reveal.is-visible,
.advantage-card.chat-reveal.is-visible,
.pricing-card.chat-reveal.is-visible {
    transform: translateY(0) scale(1);
}

/* Section headers get subtle fade-up */
.section-kicker.chat-reveal,
.section-title.chat-reveal,
.section-lead.chat-reveal,
.deliverables-kicker.chat-reveal,
.deliverables-title.chat-reveal,
.deliverables-lead.chat-reveal {
    transform: translateY(12px);
}

/* ============================================
   SECTION ACCENT COLOR TRANSITIONS
   Top-edge color bleeding for smooth flow
   ============================================ */

/* NOTE: Color-bleed edge shadows removed; band groupings are now defined by
   their shared section background tokens directly. */

/* ============================================
   GRID PATTERN CONSISTENCY
   Unified grid sizing and opacity
   ============================================ */

.intel-section::after,
.benchmark-section::after,
.security-section::after,
.protocol-section::after,
.profiles-section::after,
.engagement-section::before,
.deliverables-section::before {
    background-size: 48px 48px;
}

/* ============================================
   SECTION KICKER ANIMATIONS
   Subtle pulse on status indicators
   ============================================ */

/* Consistent kicker styling across sections */
.section-kicker,
.deliverables-kicker {
    position: relative;
}

/* Status dot animation (where applicable) */
.deliverables-kicker::before,
.intel-section .section-kicker::before {
    animation: status-pulse 3s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.6;
        transform: scale(0.95);
    }
}

/* ============================================
   HOVER STATE CONSISTENCY
   Unified card hover behavior
   ============================================ */

/* All interactive cards get consistent hover timing */
.report-output-card,
.advantage-card,
.pricing-card,
.feature-card,
.intel-card,
.benchmark-card,
.protocol-step,
.profile-card,
.output-module {
    transition: 
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
}

/* Output modules - subtle hover */
.output-module:hover {
    transform: translateY(-2px);
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .chat-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .deliverables-kicker::before,
    .intel-section .section-kicker::before {
        animation: none;
    }
    
    .report-output-card,
    .advantage-card,
    .pricing-card,
    .feature-card {
        transition: none;
    }
}

/* ============================================
   CONTENT Z-INDEX STACK
   Ensure content appears above patterns
   ============================================ */

.intel-container,
.benchmark-container,
.security-container,
.protocol-container,
.profiles-container,
.engagement-container {
    position: relative;
    z-index: 2;
}

/* ============================================
   BAND WRAPPERS - CONTINUOUS GROUPED BACKGROUNDS
   Own the background at the band level so paired
   sections read as a single environment.
   ============================================ */

.section-band {
	position: relative;
}

.section-band > section {
	position: relative;
	z-index: 1;
}

/* --- Product + Deliverables: DOC band --- */

.section-band.band--doc {
	background:
		/* Indigo document glow over deep slate */
		radial-gradient(circle at top left, rgba(129, 140, 248, 0.18) 0%, transparent 55%),
		linear-gradient(180deg, #020617 0%, #020617 100%);
}

.section-band.band--doc::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
	z-index: 0;
}

[data-theme="light"] .section-band.band--doc {
	background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
}

[data-theme="light"] .section-band.band--doc::before {
	background-image: none;
}

/* Strip individual section backgrounds/edges inside DOC band */
.section-band.band--doc .morning-brief,
.section-band.band--doc .deliverables-section {
	background: transparent;
	box-shadow: none;
}

.section-band.band--doc .morning-brief::before,
.section-band.band--doc .morning-brief::after,
.section-band.band--doc .deliverables-section::before {
	content: none;
}

[data-theme="light"] .section-band.band--doc .morning-brief,
[data-theme="light"] .section-band.band--doc .deliverables-section {
	background: transparent;
}

/* --- Intel + Benchmark: TERMINAL band --- */

.section-band.band--terminal {
	background:
		/* Teal terminal glow over deep slate */
		radial-gradient(circle at top center, rgba(56, 189, 248, 0.22) 0%, transparent 60%),
		linear-gradient(180deg, #020617 0%, #020617 100%);
}

.section-band.band--terminal::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(0, 0, 0, 0.04) 2px,
			rgba(0, 0, 0, 0.04) 4px
		);
	opacity: 0.45;
	z-index: 0;
}

.section-band.band--terminal::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(56, 189, 248, 0.015) 1px, transparent 1px),
		linear-gradient(90deg, rgba(56, 189, 248, 0.015) 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: 0.5;
	z-index: 0;
}

[data-theme="light"] .section-band.band--terminal {
	background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
}

[data-theme="light"] .section-band.band--terminal::before {
	background:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(0, 0, 0, 0.01) 2px,
			rgba(0, 0, 0, 0.01) 4px
		);
}

[data-theme="light"] .section-band.band--terminal::after {
	background-image:
		linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
}

/* Strip individual section backgrounds/edges inside TERMINAL band */
.section-band.band--terminal .intel-section,
.section-band.band--terminal .benchmark-section {
	background: transparent;
	box-shadow: none;
}

.section-band.band--terminal .intel-section::before,
.section-band.band--terminal .intel-section::after,
.section-band.band--terminal .benchmark-section::before,
.section-band.band--terminal .benchmark-section::after {
	content: none;
}

[data-theme="light"] .section-band.band--terminal .intel-section,
[data-theme="light"] .section-band.band--terminal .benchmark-section {
	background: transparent;
}

/* --- Security + Protocol: TRUST band --- */

.section-band.band--trust {
	background:
		/* Cyan trust glow over deep slate */
		radial-gradient(circle at top center, rgba(6, 182, 212, 0.22) 0%, transparent 60%),
		linear-gradient(180deg, #020617 0%, #111827 100%);
}

.section-band.band--trust::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(6, 182, 212, 0.008) 2px,
			rgba(6, 182, 212, 0.008) 4px
		);
	opacity: 0.5;
	z-index: 0;
}

.section-band.band--trust::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(6, 182, 212, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(6, 182, 212, 0.025) 1px, transparent 1px);
	background-size: 48px 48px;
	opacity: 0.5;
	z-index: 0;
}

[data-theme="light"] .section-band.band--trust {
	background:
		/* Subtle cyan trust glow over brighter neutral top */
		radial-gradient(circle at top center, rgba(6, 182, 212, 0.06) 0%, transparent 55%),
		linear-gradient(180deg, #ffffff 0%, #f9fafb 40%, #f3f4f6 100%);
}

[data-theme="light"] .section-band.band--trust::before {
	background:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(148, 163, 184, 0.015) 2px,
			rgba(148, 163, 184, 0.015) 4px
		);
}

[data-theme="light"] .section-band.band--trust::after {
	background-image:
		linear-gradient(rgba(148, 163, 184, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, 0.02) 1px, transparent 1px);
	opacity: 0.35;
}

.section-band.band--trust .security-section,
.section-band.band--trust .protocol-section {
	background: transparent;
	box-shadow: none;
}

.section-band.band--trust .security-section::before,
.section-band.band--trust .security-section::after,
.section-band.band--trust .protocol-section::before,
.section-band.band--trust .protocol-section::after {
	content: none;
}

[data-theme="light"] .section-band.band--trust .security-section,
[data-theme="light"] .section-band.band--trust .protocol-section {
	background: transparent;
}

/* --- Profiles + Pricing (+ hidden Team): CONFIG band --- */

.section-band.band--config {
	background:
		/* Violet config glow over deep slate */
		radial-gradient(circle at top center, rgba(139, 92, 246, 0.24) 0%, transparent 62%),
		linear-gradient(180deg, #020617 0%, #0d1626 100%);
}

.section-band.band--config::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(45deg, rgba(100, 116, 139, 0.03) 1px, transparent 1px),
		linear-gradient(-45deg, rgba(100, 116, 139, 0.03) 1px, transparent 1px);
	background-size: 30px 30px;
	z-index: 0;
}

.section-band.band--config::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: 120%;
	pointer-events: none;
	background: radial-gradient(
		ellipse at center,
		rgba(100, 116, 139, 0.05) 0%,
		transparent 60%
	);
	z-index: 0;
}

[data-theme="light"] .section-band.band--config {
	background: linear-gradient(180deg, #f9fafb 0%, #eef2ff 100%);
}

[data-theme="light"] .section-band.band--config::before {
	background-image:
		linear-gradient(45deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px),
		linear-gradient(-45deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
}

[data-theme="light"] .section-band.band--config::after {
	background: radial-gradient(
		ellipse at center,
		rgba(129, 140, 248, 0.06) 0%,
		transparent 60%
	);
}

.section-band.band--config .profiles-section,
.section-band.band--config .engagement-section,
.section-band.band--config #team {
	background: transparent;
	box-shadow: none;
}

.section-band.band--config .profiles-section::before,
.section-band.band--config .profiles-section::after,
.section-band.band--config .engagement-section::before,
.section-band.band--config .engagement-section::after {
	content: none;
}

[data-theme="light"] .section-band.band--config .profiles-section,
[data-theme="light"] .section-band.band--config .engagement-section,
[data-theme="light"] .section-band.band--config #team {
	background: transparent;
}

/* ============================================
   SECTION SPACING REFINEMENTS
   Ensure consistent vertical rhythm
   ============================================ */

/* Ensure first/last elements don't have extra margin */
section > .container > :first-child {
    margin-top: 0;
}

section > .container > :last-child {
    margin-bottom: 0;
}
