/* ---------- BASIC ---------- */
:root{
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.08);
  --accent: #22c55e; /* green */
}

/* Glass card (login) */
.glass-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 12px 40px rgba(2,6,23,0.6);
}

/* inputs */
.input-field{
  width:100%;
  padding:0.75rem 1rem;
  border-radius:0.75rem;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: #fff;
  outline: none;
  transition: box-shadow .15s, transform .15s;
}
.input-field::placeholder{ color: rgba(255,255,255,0.6); }
.input-field:focus{
  box-shadow: 0 6px 20px rgba(34,197,94,0.12);
  transform: translateY(-1px);
  border-color: rgba(34,197,94,0.8);
}

/* small chat bubbles */
.chat-bubble{
  padding: .5rem .9rem;
  border-radius: 999px;
  font-size: .9rem;
  background: rgba(255,255,255,0.06);
  color: #fff;
  box-shadow: 0 6px 18px rgba(2,6,23,0.55);
}
.chat-bubble.left{ transform: translateY(0); animation: bob 4s ease-in-out infinite; }
.chat-bubble.right{ transform: translateY(4px); background: rgba(255,255,255,0.12); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }

/* mock chat box */
.mock-chat{
  margin-top: 3rem;
  border: 1px solid rgba(255,255,255,0.06);
}

/* ---------- JET ANIMATION ---------- */
.jet-wrap{
  position: absolute;
  left: -30%;
  top: 3rem;
  width: 160%;
  height: 140px;
  pointer-events: none;
  overflow: visible;
}

/* contrail animation: subtle moving pattern */
.jet-contrail{
  position: absolute;
  left: -20%;
  top: 0;
  width: 140%;
  height: 60px;
  opacity: 0.9;
  filter: blur(6px);
  transform: translateX(0);
  animation: contrailMove 6.5s linear infinite;
}
@keyframes contrailMove {
  0% { transform: translateX(-20%); opacity:0; }
  10% { opacity: .9; }
  50% { transform: translateX(30%); opacity: .6; }
  100% { transform: translateX(120%); opacity:0; }
}

/* main jet: moves left-to-right across view */
.jf17{
  position: absolute;
  left: -25%;
  top: -6px;
  width: 220px;
  transform-origin: center center;
  animation: jetFly 6.5s linear infinite;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45));
}
@keyframes jetFly {
  0% { transform: translateX(-30vw) rotate(-6deg) scale(0.95); opacity: 0; }
  8% { opacity: 1; }
  40% { transform: translateX(18vw) rotate(0deg) scale(1); }
  70% { transform: translateX(55vw) rotate(6deg) scale(1.02); }
  100% { transform: translateX(120vw) rotate(8deg) scale(0.98); opacity: 0; }
}

/* on small screens shift jet lower so it doesn't overlap header */
@media (max-width: 768px){
  .jet-wrap{ top: 1.5rem; height: 90px; }
  .jf17{ width: 160px; }
  .mock-chat{ margin-top: 1rem; }
}

/* small polish */
a{ color: inherit; }
button{ cursor:pointer; }