/* Floral artwork stays local, so the intro needs no external image service. */
.loader {
  width: min(100%, 460px);
  margin-inline: auto;
  overflow: hidden;
  background: #c2a58a;
  isolation: isolate;
  transition: background-color .4s ease;
}
.floral-curtain { position: absolute; inset: 0; }
.floral-curtain::before { content: ''; position: absolute; inset: -5%; background-image: var(--flower-backdrop); background-position: center; background-size: cover; transition: opacity .8s ease; }
.floating-flower {
  position: absolute; left: var(--x); top: var(--y); width: var(--size); aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0;
  transition: transform 1.3s cubic-bezier(.4, 0, .2, 1), opacity .65s ease;
  transition-delay: var(--exit-delay);
}
.floating-flower span {
  display: block; width: 100%; height: 100%;
  background-image: var(--flower-art);
  background-position: var(--sprite) center;
  background-size: 300% 100%;
  background-repeat: no-repeat;
  animation: flower-wander var(--duration) cubic-bezier(.45, 0, .55, 1) var(--phase) infinite alternate;
  animation-play-state: paused;
  will-change: transform;
  backface-visibility: hidden;
}
.loader.art-ready .floating-flower { opacity: 1; }
.loader.art-ready .floating-flower span { animation-play-state: running; }
.floral-caption {
  position: absolute;
  bottom: max(40px, env(safe-area-inset-bottom));
  padding: 16px 23px 13px;
  border: 1px solid #fff7e85c;
  border-radius: 18px;
  background: #fff7e9d9;
  box-shadow: 0 5px 30px #68483218;
  color: #765842;
  font-size: 12px;
  letter-spacing: .3px;
  transition: opacity .3s ease, transform .3s ease;
}
.floral-caption b { font-size: 16px; font-weight: 400; margin-left: 5px; }
.floral-progress { height: 2px; margin-top: 10px; overflow: hidden; background: #b49a7f44; border-radius: 5px; }
.floral-progress::after { content: ''; display: block; height: 100%; width: 42%; background: #a57c5c; animation: floral-progress 1.4s ease-in-out infinite; }
.loader.opening { background-color: transparent; pointer-events: none; }
.loader.opening .floral-curtain::before { opacity: 0; }
.loader.opening .floral-caption { opacity: 0; transform: translateY(10px); }
.loader.opening .floating-flower { transform: translate3d(var(--exit-x), var(--exit-y), 0) rotate(var(--exit-turn)) scale(.85); opacity: 0; transition-duration: 1.3s, 1.1s; }
.loader.done { visibility: hidden; opacity: 0; pointer-events: none; }
body.loading-flowers { overflow: hidden; }
body.loading-flowers .phone * { animation-play-state: paused !important; }
@keyframes flower-wander {
  from { transform: translate3d(calc(var(--drift-x) * -1), calc(var(--drift-y) * -1), 0) rotate(var(--angle)) scale(.99); }
  to { transform: translate3d(var(--drift-x), var(--drift-y), 0) rotate(calc(var(--angle) + var(--turn))) scale(1.02); }
}
@keyframes floral-progress { from { transform: translateX(-110%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) {
  .floating-flower span, .floral-progress::after { animation: none; }
  .floating-flower, .floral-curtain::before, .floral-caption, .loader { transition: none; }
}
