/* Illustrated Texas hero. All animation is decorative and can be paused. */
.hero-texas {
  --scene-play-state: running;
  height: 66.67vh;
  min-height: 400px;
  background: #68543f;
  isolation: isolate;
}
.texas-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.texas-world {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
}
.hero-texas .hero-overlay {
  pointer-events: none;
  background: linear-gradient(180deg, rgba(40, 30, 22, .52), transparent 24%, transparent 76%, rgba(40, 30, 22, .42));
}
.hero-texas .hero-content {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
}
.map-labels { opacity: .64; }
.plane-shadow { filter: brightness(0); opacity: .23; }
.flight {
  offset-rotate: auto;
  offset-anchor: 0px 0px;
  animation: texas-flight 65s linear infinite;
}
.flight-one {
  offset-path: path('M240 355C260 105 1230 60 1350 380S1120 935 765 844S80 830 240 355Z');
  animation-delay: -9s;
  offset-distance: 14%;
}
.flight-two {
  offset-path: path('M410 740C160 570 580 170 910 205S1480 620 1170 756S660 910 410 740Z');
  animation-duration: 80s;
  animation-delay: -49s;
  offset-distance: 61%;
}
.flight-three {
  offset-path: path('M240 355C260 105 1230 60 1350 380S1120 935 765 844S80 830 240 355Z');
  animation-duration: 65s;
  animation-delay: -43s;
  offset-distance: 66%;
}
.prop-rotor {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: propeller-spin .24s linear infinite;
  /* Inherit through SVG <use> instances as well as the source aircraft. */
  animation-play-state: var(--scene-play-state, running);
}
.prop-rotor-offset { animation-delay: -.08s; }
.prop-rotor-cessna { animation-duration: .3s; }
@keyframes propeller-spin { to { transform: rotate(360deg); } }
.drifting-cloud { animation: texas-cloud 24s ease-in-out infinite alternate; }
.cloud-two { animation-duration: 32s; animation-delay: -12s; }
.cloud-three { animation-duration: 28s; animation-delay: -8s; }
@keyframes texas-flight { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes texas-cloud { from { transform: translate(-25px, 0); } to { transform: translate(35px, 12px); } }
.scene-motion-toggle {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  right: 28px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid #e6d2ad55;
  border-radius: 24px;
  background: #443224bd;
  color: #f2e4cd;
  font: 400 12px var(--font-body);
  cursor: pointer;
  transition: background .2s;
}
.scene-motion-toggle:hover { background: #614b36; }
.hero-texas.motion-paused { --scene-play-state: paused; }
.hero-texas.motion-paused .flight,
.hero-texas.motion-paused .drifting-cloud,
.hero-texas.motion-paused .scroll-cue { animation-play-state: paused; }
@media (max-width: 768px) {
  .texas-world { width: 1000px; max-width: none; left: calc(50% - 500px); }
  .scene-motion-toggle { bottom: 20px; right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .flight, .drifting-cloud, .prop-rotor { animation: none; }
  .prop-disc { opacity: .08; }
  .scene-motion-toggle { display: none; }
}