/* Coordinates follow the 1659 × 948 painted station scene, including its cover crop. */
.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.hero-atmosphere__cloth { opacity: .98; }
.hero-atmosphere__bird { opacity: 0; will-change: transform; }
.hero-atmosphere__bird--one { animation: hero-bird-one 19s linear -6s infinite; }
.hero-atmosphere__bird--two { animation: hero-bird-two 23s linear -15s infinite; }
.hero-atmosphere__bird--three { animation: hero-bird-three 27s linear -9s infinite; }
.hero-atmosphere__bird--four { animation: hero-bird-four 21s linear -3s infinite; }
.hero-atmosphere__wings {
  fill: none;
  stroke: #3f5144;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 0 0;
  animation: hero-bird-wings .72s ease-in-out infinite alternate;
}
.hero-atmosphere__bird--two .hero-atmosphere__wings { animation-duration: .88s; animation-delay: -.4s; }
.hero-atmosphere__bird--three .hero-atmosphere__wings { animation-duration: 1s; animation-delay: -.6s; }
.hero-atmosphere__bird--four .hero-atmosphere__wings { animation-duration: .78s; animation-delay: -.3s; }
.hero-atmosphere__wisp {
  fill: none;
  stroke: #fff9eb;
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hero-tea-steam 5s ease-out -1s infinite;
}
.hero-atmosphere__wisp--two { animation-duration: 5.8s; animation-delay: -3.6s; stroke-width: 2.8; }
.hero-atmosphere__wisp--three { animation-duration: 4.6s; animation-delay: -1.8s; stroke: #f2e7d1; stroke-width: 2.2; }
.hero-atmosphere__wisp--four { animation-duration: 6.2s; animation-delay: -2.5s; stroke-width: 3.8; }
.hero-atmosphere__wisp--five { animation-duration: 5.4s; animation-delay: -4.2s; stroke-width: 2.6; }
.hero-atmosphere.is-paused, .hero-atmosphere.is-paused * { animation-play-state: paused !important; }

@keyframes hero-bird-one {
  0% { transform: translate(170px, 290px) scale(1); opacity: 0; }
  8% { opacity: .8; }
  52% { transform: translate(780px, 210px) scale(1.1); }
  92% { opacity: .8; }
  100% { transform: translate(1450px, 165px) scale(.9); opacity: 0; }
}
@keyframes hero-bird-two {
  0% { transform: translate(330px, 245px) scale(.65); opacity: 0; }
  10% { opacity: .7; }
  53% { transform: translate(790px, 173px) scale(.8); }
  90% { opacity: .7; }
  100% { transform: translate(1230px, 149px) scale(.6); opacity: 0; }
}
@keyframes hero-bird-three {
  0% { transform: translate(520px, 235px) scale(.55); opacity: 0; }
  12% { opacity: .65; }
  55% { transform: translate(900px, 193px) scale(.7); }
  88% { opacity: .65; }
  100% { transform: translate(1310px, 168px) scale(.5); opacity: 0; }
}
@keyframes hero-bird-four {
  0% { transform: translate(1430px, 310px) scale(.95); opacity: 0; }
  9% { opacity: .76; }
  48% { transform: translate(850px, 255px) scale(1.05); }
  90% { opacity: .76; }
  100% { transform: translate(260px, 300px) scale(.85); opacity: 0; }
}
@keyframes hero-bird-wings {
  from { transform: scaleY(-.45); }
  to { transform: scaleY(1); }
}
@keyframes hero-tea-steam {
  0% { transform: translate(0, 9px) scaleX(.8); opacity: 0; }
  18% { opacity: .88; }
  55% { transform: translate(9px, -20px) scaleX(1.1); opacity: .65; }
  100% { transform: translate(20px, -62px) scaleX(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce), print {
  .hero-atmosphere { display: none !important; }
}
@media (max-width: 1000px) { .hero-atmosphere:not(.is-portrait) { display: none; } }
