/* Light sky flight scene shared by the sign-in page and the dashboard's opening screen,
   so the plane keeps flying across the page change without a blank frame. */
.sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #e6eff9 0%, #f5f8fd 42%, #e9eff8 100%);
}
.sky .stars {
  position: absolute;
  inset: 0 -340px 0 0;
  background-image: radial-gradient(rgba(40, 64, 109, 0.55) 1px, transparent 1.5px);
  background-size: 34px 34px;
  opacity: 0.12;
  animation: sky-drift 40s linear infinite;
}
.sky .cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  background: rgba(0, 109, 190, 0.12);
  animation: sky-cloud 22s ease-in-out infinite alternate;
}
.sky .cloud.c1 { width: 520px; height: 220px; left: -120px; top: 12%; }
.sky .cloud.c2 { width: 460px; height: 200px; right: -140px; top: 52%; animation-duration: 28s; }
.sky .cloud.c3 { width: 380px; height: 160px; left: 30%; bottom: -60px; background: rgba(0, 109, 190, 0.14); animation-duration: 18s; }
@keyframes sky-drift { to { transform: translateX(-340px); } }
@keyframes sky-cloud { to { transform: translateX(80px); } }

/* cruising: the plane holds the middle of the screen while the sky streams past */
.cruise {
  position: fixed;
  left: 50%;
  top: 44%;
  z-index: 30;
  width: 0;
  height: 0;
  display: none;
}
.cruise.on { display: block; }
.cruise .plane {
  position: absolute;
  left: -46px;
  top: -46px;
  width: 92px;
  height: 92px;
  max-width: none; /* the app's Tailwind reset would squeeze it to the 0-wide anchor */
  filter: drop-shadow(0 10px 16px rgba(0, 109, 190, 0.4));
  animation: cruise-bob 1.6s ease-in-out infinite;
  transition: transform 0.7s cubic-bezier(0.55, 0, 0.8, 0.2), opacity 0.6s;
}
.cruise .streak {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(0, 109, 190, 0), rgba(0, 109, 190, 0.6));
  animation: cruise-streak 0.9s linear infinite;
}
.cruise .streak.s1 { width: 150px; top: -14px; left: -210px; }
.cruise .streak.s2 { width: 210px; top: 6px; left: -270px; animation-delay: 0.3s; }
.cruise .streak.s3 { width: 120px; top: 24px; left: -190px; animation-delay: 0.6s; }
.cruise .caption {
  position: absolute;
  top: 78px;
  left: -160px;
  width: 320px;
  text-align: center;
  font: 600 16px Inter, system-ui, sans-serif;
  color: #28406d;
  letter-spacing: 0.01em;
}
.cruise .caption::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: cruise-dots 1.2s steps(4) infinite; }
@keyframes cruise-bob { 50% { transform: translateY(-9px) rotate(-3deg); } }
@keyframes cruise-streak { from { transform: translateX(60px); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(-120px); opacity: 0; } }
@keyframes cruise-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* leaving: plane shoots off to the right and the sky fades away */
.leave .cruise .plane { animation: none; transform: translateX(70vw) scale(0.55); opacity: 0; }
.leave .cruise .caption, .leave .cruise .streak { opacity: 0; transition: opacity 0.3s; }