/* Continuous page atmosphere — smooth, focused, no hard cuts */

html {
 --mouse-x: 50%;
 --mouse-y: 35%;
}

body {
 background: var(--bg);
}

/* Very subtle ambient wash */
body::before {
 content: '';
 position: fixed;
 inset: 0;
 z-index: 0;
 pointer-events: none;
 background:
  radial-gradient(ellipse 80% 45% at 50% -5%, rgba(var(--accent-rgb, 10, 132, 255), 0.028), transparent 55%);
}

/* Faint page grid — wide falloff */
body::after {
 content: '';
 position: fixed;
 inset: 0;
 z-index: 0;
 pointer-events: none;
 background-image:
  linear-gradient(rgba(var(--accent-rgb, 10, 132, 255), 0.014) 1px, transparent 1px),
  linear-gradient(90deg, rgba(var(--accent-rgb, 10, 132, 255), 0.014) 1px, transparent 1px);
 background-size: 88px 88px;
 mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, black 0%, transparent 68%);
 opacity: 0.45;
}

/* Mouse glow — tight focal point */
.cursor-glow {
 position: fixed;
 inset: 0;
 z-index: 0;
 pointer-events: none;
 background:
  radial-gradient(480px circle at var(--mouse-x) var(--mouse-y), rgba(var(--accent-rgb, 10, 132, 255), 0.07), transparent 40%),
  radial-gradient(280px circle at calc(var(--mouse-x) + 6%) calc(var(--mouse-y) + 5%), rgba(var(--accent-rgb, 10, 132, 255), 0.035), transparent 38%);
 opacity: 0;
 transition: opacity 0.8s ease;
}

body.is-ready .cursor-glow {
 opacity: 1;
}

body.has-fine-pointer main,
body.has-fine-pointer .nav,
body.has-fine-pointer .footer {
 position: relative;
 z-index: 1;
}

/* ─── Hero: focused glow + smooth handoff ─── */

.hero {
 background: transparent;
 overflow: hidden;
 isolation: isolate;
}

.hero__bg {
 overflow: hidden;
 z-index: 0;
}

.hero__mouse-field {
 mask-image: linear-gradient(to bottom, black 0%, black 58%, rgba(0, 0, 0, 0.4) 82%, transparent 100%);
 -webkit-mask-image: linear-gradient(to bottom, black 0%, black 58%, rgba(0, 0, 0, 0.4) 82%, transparent 100%);
}

.hero__grid-fade {
 opacity: 0.45;
}

.hero__bg::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: min(24vh, 200px);
 background: linear-gradient(to bottom, transparent 0%, var(--bg) 88%);
 z-index: 4;
 pointer-events: none;
}

.hero__layout {
 position: relative;
 z-index: 2;
}

/* ─── Floating particles ─── */

.float-particles {
 position: absolute;
 inset: 0;
 overflow: hidden;
 pointer-events: none;
 z-index: 1;
}

.float-particle {
 position: absolute;
 left: var(--px);
 top: var(--py);
 width: var(--size);
 height: var(--size);
 border-radius: 50%;
 background: rgba(var(--accent-rgb), var(--pop));
 box-shadow: 0 0 calc(var(--size) * 3) rgba(var(--accent-rgb), calc(var(--pop) * 0.45));
 animation: float-particle var(--dur) ease-in-out infinite;
 animation-delay: var(--delay);
 will-change: transform, opacity;
}

@keyframes float-particle {
 0%, 100% {
  transform: translate(0, 0) scale(1);
  opacity: calc(var(--pop) * 0.75);
 }
 50% {
  transform: translate(var(--dx), var(--dy)) scale(1.2);
  opacity: var(--pop);
 }
}

@media (prefers-reduced-motion: reduce) {
 .float-particle {
  animation: none;
  opacity: calc(var(--pop) * 0.5);
 }
}

/* ─── Sections: transparent, soft tints only ─── */

.section {
 position: relative;
 overflow: visible;
 background: transparent;
}

.section > .wrap,
.section > .origin,
.section > .location-grid,
.section > .contact-block,
.section > .contact-grid,
.section > .contact--centered,
.section > .audience-block,
.section > .cta {
 position: relative;
 z-index: 1;
}

.section--subtle,
.section--work,
.section--cta,
.section--dark,
.section--contact {
 background: transparent;
}

.section--solid-dark {
 background: var(--bg-dark);
 color: #f4f4f5;
 border-block: 1px solid rgba(255, 255, 255, 0.08);
}

.section--solid-dark::before {
 display: none !important;
}

.section--band::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: 0;
 pointer-events: none;
 background: linear-gradient(
  180deg,
  transparent 0%,
  rgba(var(--accent-rgb), 0.022) 16%,
  rgba(var(--accent-rgb), 0.032) 50%,
  rgba(var(--accent-rgb), 0.022) 84%,
  transparent 100%
 );
}

.section--band {
 border-block: none;
}

/* Dark sections — no gradient blob, keep origin layout clean */
.section--dark::before {
 display: none;
}

.section--dark .section-label {
 color: var(--muted);
}

.section--dark .origin__text h2,
.section--dark .clean-title {
 color: var(--ink);
}

.section--dark .origin__text p,
.section--dark .clean-text {
 color: var(--muted);
}

.section--dark .origin__card {
 background: var(--bg);
 color: var(--ink);
 border: 1px solid var(--border);
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
}

.section--dark .origin__card h3,
.section--dark .origin__card .origin__stat strong {
 color: var(--ink);
}

.section--dark .origin__card p,
.section--dark .origin__card .origin__stat span {
 color: var(--muted);
}

.section--dark .origin__region {
 background: transparent;
 border: none;
 color: var(--muted);
}

.section__glow {
 display: none !important;
}

.practices {
 position: relative;
 overflow: visible;
 background: transparent;
}

.section--cta {
 position: relative;
 overflow: visible;
}