/* ── Home Hero ──────────────────────────────────────────────────────────── */

.home-hero {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  margin-top: calc(-1 * var(--nav-height));
  padding-top: var(--nav-height);
}

/* Video background */
.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Dark overlay + accent glow — keeps text legible over video */
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(122, 198, 166, 0.12) 0%, transparent 70%),
    rgba(8, 13, 28, 0.68);
  pointer-events: none;
  z-index: 1;
}

.home-hero .container { position: relative; z-index: 2; }

/* Respect reduced-motion preference — fall back to static background */
@media (prefers-reduced-motion: reduce) {
  .home-hero__video { display: none; }
}

.home-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

.home-hero h1 {
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-6);
  max-width: 800px;
}

.home-hero .lead {
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  color: rgba(232, 237, 243, 0.8);
  max-width: 600px;
  margin-bottom: var(--space-10);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* ── Page Hero (sub-pages) ──────────────────────────────────────────────── */

.page-hero {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  padding: var(--space-12) 0 var(--space-14);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(122, 198, 166, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero .container { position: relative; z-index: 2; }

.page-hero h1 {
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-4);
  max-width: 800px;
}

.page-hero .lead {
  font-size: var(--text-lg);
  color: rgba(232, 237, 243, 0.75);
  max-width: 580px;
  margin-bottom: var(--space-8);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ── Animated page hero ──────────────────────────────────────────────────── */

.page-hero--animated {
  min-height: 70vh;
  display: flex;
  align-items: center;
}

/* Registered custom properties enable smooth interpolation of trace positions */
@property --hero-t1x { syntax: '<percentage>'; initial-value: -20%; inherits: false; }
@property --hero-t2y { syntax: '<percentage>'; initial-value: -20%; inherits: false; }
@property --hero-t3x { syntax: '<percentage>'; initial-value: 120%; inherits: false; }

/* Diagonal grid — structural backdrop for the light traces */
.page-hero--animated::after {
  content: '';
  position: absolute;
  inset: -60%;
  background-image:
    linear-gradient(rgba(122, 198, 166, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 198, 166, 0.10) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: rotate(-18deg);
  pointer-events: none;
  z-index: 0;
}

/* Light traces that travel along the grid lines.
   The element is rotated -18° to match the grid — axis-aligned ellipses
   therefore travel along the grid line directions on screen.
   Trace A and C follow the "horizontal" grid lines; Trace B follows the
   perpendicular "vertical" grid lines. */
.page-hero--animated::before {
  inset: -60%;
  transform: rotate(-18deg);
  z-index: 1;
  background:
    radial-gradient(ellipse 400px 5px  at var(--hero-t1x) 28%, rgba(122, 198, 166, 0.90) 0%, transparent 100%),
    radial-gradient(ellipse 5px  400px at 55% var(--hero-t2y), rgba(122, 198, 166, 0.75) 0%, transparent 100%),
    radial-gradient(ellipse 400px 5px  at var(--hero-t3x) 64%, rgba(122, 198, 166, 0.70) 0%, transparent 100%);
  animation:
    heroTraceA 13s linear          infinite,
    heroTraceB 18s linear -7s      infinite,
    heroTraceC 10s linear -3s      infinite;
}

/* Trace A: sweeps left → right along a horizontal grid line */
@keyframes heroTraceA {
  from { --hero-t1x: -20%; }
  to   { --hero-t1x: 120%; }
}

/* Trace B: sweeps top → bottom along a vertical grid line */
@keyframes heroTraceB {
  from { --hero-t2y: -20%; }
  to   { --hero-t2y: 120%; }
}

/* Trace C: sweeps right → left along a different horizontal grid line */
@keyframes heroTraceC {
  from { --hero-t3x: 120%; }
  to   { --hero-t3x: -20%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero--animated::after  { animation: none; }
  .page-hero--animated::before { animation: none; }
}

/* Minimal page hero — no CTA, just title/label/description */
.page-hero--minimal { padding: var(--space-10) 0 var(--space-12); }
.page-hero--minimal .lead { margin-bottom: 0; }

/* ── About Hero ──────────────────────────────────────────────────────────── */

.about-hero {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  margin-top: calc(-1 * var(--nav-height));
  padding-top: calc(var(--nav-height) + var(--space-12));
  padding-bottom: var(--space-14);
}

.about-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  z-index: 0;
}

.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 50%, rgba(122, 198, 166, 0.08) 0%, transparent 70%),
    rgba(8, 13, 28, 0.50);
  pointer-events: none;
  z-index: 1;
}

.about-hero .container {
  position: relative;
  z-index: 2;
}

.about-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.about-hero__text { flex: 1 1 0; }

.about-hero__text h1 {
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-6);
}

.about-hero__text .lead {
  font-size: var(--text-lg);
  color: rgba(232, 237, 243, 0.80);
  max-width: 520px;
  margin-bottom: 0;
}

.about-hero__media {
  flex: 0 0 auto;
  width: clamp(180px, 26vw, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-hero__media img {
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__video { display: none; }
}

@media (max-width: 768px) {
  .about-hero__media { display: none; }
}

/* Image background page hero */
.page-hero--image {
  min-height: 75vh;
  display: flex;
  align-items: center;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-hero__bg ~ .container { position: relative; z-index: 2; }

.page-hero--image::before {
  background: rgba(8, 13, 28, 0.70);
  z-index: 1;
}

.page-hero--image .container { z-index: 2; }