/* ==========================================================================
   MedBase launch intro — web mirror of medbase-ios/components/intro-animation.tsx
   Flaconul cade cu greutate, se turtește la aterizare, cuvântul "salutare"
   se scrie de la stânga la dreapta, apoi totul se dizolvă în pagină.
   O dată pe sesiune (echivalentul "cold start"-ului din iOS).
   ========================================================================== */
#medbase-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
  background: #fbfaf7;
  cursor: pointer;
  animation: mi-exit 0.36s ease 2.7s forwards;
}
#medbase-intro.mi-leave {
  animation: mi-leave 0.24s ease forwards;
}

/* Soft colour fields drifting behind everything (iOS BLOBS). */
.mi-blobs {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.mi-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  filter: blur(70px);
  -webkit-filter: blur(70px);
  animation: mi-drift 4.2s ease-in-out infinite alternate;
}
.mi-blob.b1 { width: 300px; height: 300px; background: #f2a8cf; transform: translate(-70px, -150px); }
.mi-blob.b2 { width: 340px; height: 340px; background: #9567bf; transform: translate(90px, -40px); animation-delay: 0.4s; }
.mi-blob.b3 { width: 320px; height: 320px; background: #a5d6ff; transform: translate(-40px, 130px); animation-delay: 0.8s; }
.mi-blob.b4 { width: 260px; height: 260px; background: #feeeaf; transform: translate(120px, 190px); animation-delay: 1.2s; }
@keyframes mi-drift {
  from { margin-top: 0; margin-left: 0; }
  to { margin-top: -26px; margin-left: 22px; }
}

/* Three nested wrappers: each owns one transform so drop, squash and
   levitation never fight over the same property. */
.mi-flacon-drop {
  position: relative;
  animation: mi-drop 0.56s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
@keyframes mi-drop {
  from { transform: translateY(-190px); }
  to { transform: translateY(0); }
}
.mi-flacon-squash {
  animation: mi-squash 0.55s ease 0.56s both;
}
@keyframes mi-squash {
  0% { transform: scale(1, 1); }
  16% { transform: scale(1.16, 0.82); }
  100% { transform: scale(1, 1); }
}
.mi-flacon-float {
  display: block;
  width: 96px;
  height: 138px;
  object-fit: contain;
  animation: mi-levitate 1.6s ease-in-out 1.1s infinite alternate;
}
@keyframes mi-levitate {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

/* Greeting, written on: static word, widening mask (iOS Wordmark). */
.mi-word-mask {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  animation: mi-widen 0.95s cubic-bezier(0.6, 0, 0.2, 1) 0.71s forwards;
}
@keyframes mi-widen {
  to { max-width: 340px; }
}
.mi-word {
  font-family: "Sacramento", cursive;
  font-size: 58px;
  line-height: 1.3;
  color: #181817;
}

@keyframes mi-exit {
  to { opacity: 0; visibility: hidden; }
}
@keyframes mi-leave {
  to { opacity: 0; visibility: hidden; }
}

/* Dark: same beat, near-black stage (iOS dark intro). */
html[data-medbase-appearance="dark"] #medbase-intro {
  background: #150f29;
}
html[data-medbase-appearance="dark"] .mi-word {
  color: #ffffff;
}
html[data-medbase-appearance="dark"] .mi-blob {
  opacity: 0.35;
}
@media (prefers-color-scheme: dark) {
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) #medbase-intro {
    background: #150f29;
  }
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .mi-word {
    color: #ffffff;
  }
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .mi-blob {
    opacity: 0.35;
  }
}

/* Reduce Motion: no drop, no bounce — calm cross-dissolve, like iOS. */
@media (prefers-reduced-motion: reduce) {
  #medbase-intro {
    animation: mi-exit 0.46s ease 1.9s forwards;
  }
  .mi-blob,
  .mi-flacon-drop,
  .mi-flacon-squash,
  .mi-flacon-float {
    animation: none;
  }
  .mi-word-mask {
    max-width: none;
    animation: mi-calm-in 0.62s ease 0.36s both;
  }
  @keyframes mi-calm-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}