/* ============================================================
   ANIMATED BACKGROUND ELEMENTS — "living moving pictures"
   ============================================================ */

/* ---------- Floating geometric shapes layer ---------- */
.alive {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.alive__shape {
  position: absolute;
  opacity: .08;
  will-change: transform;
}
.alive__shape svg { width: 100%; height: 100%; display: block; }
.alive__shape path,
.alive__shape circle,
.alive__shape polygon {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.2;
}

/* Different floating shapes with different orbits */
.alive__shape--1 {
  width: 180px; height: 180px;
  top: 8%; left: 5%;
  animation: float1 24s ease-in-out infinite;
}
.alive__shape--2 {
  width: 120px; height: 120px;
  top: 60%; right: 8%;
  animation: float2 30s ease-in-out infinite;
}
.alive__shape--3 {
  width: 100px; height: 100px;
  top: 30%; left: 50%;
  animation: float3 20s ease-in-out infinite;
}
.alive__shape--4 {
  width: 140px; height: 140px;
  bottom: 12%; left: 12%;
  animation: float4 28s ease-in-out infinite;
}
.alive__shape--5 {
  width: 80px; height: 80px;
  top: 15%; right: 25%;
  animation: float5 22s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(40px, -30px) rotate(120deg); }
  66%      { transform: translate(-20px, 20px) rotate(240deg); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%      { transform: translate(-40px, -40px) rotate(180deg) scale(1.15); }
}
@keyframes float3 {
  0%, 100% { transform: translate(-50%, 0) rotate(0deg); }
  50%      { transform: translate(-50%, -60px) rotate(180deg); }
}
@keyframes float4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(30px, -20px) rotate(90deg); }
  50%      { transform: translate(50px, 20px) rotate(180deg); }
  75%      { transform: translate(0, 40px) rotate(270deg); }
}
@keyframes float5 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .08; }
  50%      { transform: translate(20px, 30px) scale(1.4); opacity: .14; }
}

/* On dark sections — invert the stroke */
.dark .alive__shape path,
.dark .alive__shape circle,
.dark .alive__shape polygon {
  stroke: #fff;
}
.dark .alive__shape { opacity: .06; }

/* ---------- Section divider wave ---------- */
.section-wave {
  position: relative;
  height: 80px;
  margin-top: -1px;
  overflow: hidden;
  pointer-events: none;
}
.section-wave svg {
  width: 100%; height: 100%; display: block;
}
.section-wave--top svg { transform: scaleY(-1); }
.section-wave path {
  animation: waveSlide 28s linear infinite;
}

/* ---------- Animated section gradient background ---------- */
.alive-bg {
  position: relative;
  overflow: hidden;
}
.alive-bg::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(30% 30% at 20% 30%, rgba(123,181,220,.10), transparent 70%),
    radial-gradient(35% 35% at 80% 60%, rgba(6,64,102,.07), transparent 70%);
  filter: blur(6px);
  animation: alivePulse 16s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}
.alive-bg > * { position: relative; z-index: 1; }
@keyframes alivePulse {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(2%, -1%) scale(1.05); }
}

/* ---------- Animated underline accent ---------- */
.draw-line {
  position: relative;
  display: inline-block;
}
.draw-line::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--accent), var(--blue));
  background-size: 200% 100%;
  border-radius: 2px;
  animation: drawLine 4s ease-in-out infinite;
}
@keyframes drawLine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------- Subtle "breathing" effect on key elements ---------- */
.breathe {
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* ---------- Animated chevron arrow ---------- */
.chev-anim {
  display: inline-block;
  transition: transform .2s var(--ease);
  animation: chevPulse 1.6s ease-in-out infinite;
}
@keyframes chevPulse {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .alive__shape, .section-wave path, .alive-bg::before,
  .draw-line::after, .breathe, .chev-anim {
    animation: none !important;
  }
}

/* ============================================================
   PAGE HERO — compact intro block for inner pages
   ============================================================ */
.page-hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: #fff;
  padding: calc(var(--nav-h) + 80px) 0 100px;
  overflow: hidden;
}
.page-hero__mesh {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 40% at 18% 28%, rgba(7,76,122,.60), transparent 70%),
    radial-gradient(36% 36% at 82% 22%, rgba(123,181,220,.22), transparent 70%),
    radial-gradient(50% 50% at 70% 78%, rgba(6,64,102,.45), transparent 72%);
  filter: blur(8px);
  animation: meshMove 22s ease-in-out infinite alternate;
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  text-align: center;
  margin: 0 auto;
}
.page-hero__inner .eyebrow {
  margin-bottom: 18px;
}
.page-hero__inner h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(36px, 5.4vw, 68px);
  line-height: 1.05;
  margin-bottom: 22px;
  background: linear-gradient(120deg, #fff, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-hero__inner p {
  font-size: clamp(16px, 1.4vw, 19px);
  color: rgba(255,255,255,.72);
  max-width: 640px;
  margin: 0 auto;
}
.page-hero__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 80px;
  z-index: 3;
  pointer-events: none;
}
.page-hero__wave svg { width: 100%; height: 100%; display: block; }