/* Parallax hero — shared layer system for all page headers.
   Height is driven entirely by the inner `.container.py-12` (no min-height),
   so every hero stays consistent in height/margin/padding. Layers are
   absolutely positioned and never affect layout. Drift is pure CSS (GPU
   compositing); scroll parallax is applied by parallax-hero.js. */
.ph-hero {
  position: relative;
  overflow: hidden;
  background: #0b2c63; /* fallback before SVG paints */
}
.ph-hero > .container {
  position: relative;
  z-index: 5;
  width: 100%;
}
.ph-hero .ph-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  pointer-events: none;
}
/* Scroll layers get a vertical buffer so scroll-parallax never reveals an edge. */
.ph-hero .ph-layer--scroll {
  height: 130%;
  top: -15%;
}
/* Drift layers: 200% wide, content tiled at the midpoint for a seamless loop. */
.ph-hero .ph-drift {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  will-change: transform;
  animation: phDrift linear infinite;
}
.ph-hero .ph-drift--slow { animation-duration: 60s; }
.ph-hero .ph-drift--fast { animation-duration: 34s; }
.ph-hero svg { display: block; width: 100%; height: 100%; }

@keyframes phDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ph-hero .ph-drift { animation: none; }
}