/* Field Sim 3D BIOBUZZ · ecranul de încărcare (încărcat după menu.css și game-flat.css).
   Fundal întunecat cu lumini moi care plutesc și praf de polen; titlu mare; bara de progres e condusă de o albină. */

.ld { background: #0a090c; clip-path: circle(150% at 50% 50%); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); font-family: "Instrument Sans", system-ui, sans-serif; }
.ld.out { opacity: 1; transform: none; clip-path: circle(0% at 50% 50%); }

/* fundal: două lumini moi care plutesc încet + praf de polen */
.ld-bg { inset: 0; background: radial-gradient(90% 70% at 50% 110%, #1a0f1f 0%, #0a090c 70%); animation: none; overflow: hidden; }
.ld-bg::before, .ld-bg::after { content: ''; position: absolute; border-radius: 50%; will-change: transform; }
.ld-bg::before { width: 62vmax; height: 62vmax; left: -14vmax; top: -26vmax; background: radial-gradient(closest-side, rgba(249, 5, 108, .34), rgba(249, 5, 108, 0)); animation: ldDriftA 16s ease-in-out infinite alternate; }
.ld-bg::after { width: 54vmax; height: 54vmax; right: -16vmax; bottom: -28vmax; background: radial-gradient(closest-side, rgba(255, 190, 40, .2), rgba(255, 190, 40, 0)); animation: ldDriftB 19s ease-in-out infinite alternate; }
@keyframes ldDriftA { to { transform: translate3d(14vmax, 8vmax, 0) scale(1.1); } }
@keyframes ldDriftB { to { transform: translate3d(-12vmax, -6vmax, 0) scale(1.12); } }
.pol { position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); opacity: 0; pointer-events: none; animation: ldPollen var(--t) linear var(--d) infinite; }
@keyframes ldPollen { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: var(--o); } 50% { transform: translate(var(--dx), -55vh); } 88% { opacity: var(--o); } 100% { transform: translate(calc(var(--dx) * -.6), -112vh); opacity: 0; } }

.ld-center { width: min(560px, 88vw); display: grid; justify-items: center; }
.ld-kicker { display: block; margin: 0; font: 500 11.5px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .3em; text-transform: uppercase; color: #ff3d8f; }

/* titlu: la fel ca în meniul principal (Bricolage Grotesque, roz cu strălucire, „3D” galben) */
.ld-title { margin: 14px 0 0; display: grid; justify-items: center; line-height: .96; }
.ld-title span { overflow: visible; }
.ld-title span i { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; letter-spacing: -.045em; text-transform: uppercase; }
.ld-title span:nth-child(1) i { font-size: clamp(56px, 13vw, 118px); line-height: .92; padding: .02em .03em 0; color: #f9056c; background: none; text-shadow: 0 0 70px rgba(249, 5, 108, .5); animation: ldRise .9s cubic-bezier(.16, 1, .3, 1) .25s forwards; }
.ld-title span:nth-child(2) i { margin-top: 2px; font-size: clamp(28px, 6.5vw, 59px); letter-spacing: -.03em; color: #f4f1ea; animation-delay: .45s; }
.ld-title em { font-style: normal; color: #ffc933; }

/* bara de progres: albina zboară în capătul ei */
.ld-bar { position: relative; width: 100%; height: 8px; margin-top: 64px; padding: 0; border-radius: 99px; background: rgba(244, 241, 234, .1); box-shadow: none; opacity: 1; animation: none; overflow: visible; }
.ld-bar i { position: relative; display: block; height: 100%; min-width: 8px; border-radius: 99px; background: linear-gradient(90deg, #f9056c, #ff4d94 60%, #ffc933); overflow: visible; }
.ld-bee { position: absolute; right: -22px; top: -31px; width: 42px; height: 35px; pointer-events: none; animation: ldHover 1.1s ease-in-out infinite alternate; }
.ld-bee svg { width: 100%; height: 100%; overflow: visible; }
@keyframes ldHover { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-6px) rotate(3deg); } }
.ld-bee .wing { transform-box: fill-box; transform-origin: 50% 100%; animation: ldFlap .09s ease-in-out infinite alternate; }
.ld-bee .wing.b { animation-delay: -.045s; }
@keyframes ldFlap { from { transform: rotate(-24deg) scaleY(1); } to { transform: rotate(10deg) scaleY(.7); } }
.ld-row { width: 100%; align-items: center; margin-top: 12px; }
.ld-row span { font: 500 12px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 241, 234, .65); }
.ld-row b { font: 800 clamp(18px, 2.6vw, 24px)/1 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: -.02em; color: #f4f1ea; font-variant-numeric: tabular-nums; }

/* sfat + tasta de continuare */
.ld-tip { width: 100%; min-height: 0; margin-top: 22px; font-size: 13px; line-height: 1.5; text-align: center; color: rgba(244, 241, 234, .55); }
.ld-press { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font: 700 12px "Instrument Sans", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #f4f1ea; opacity: .9; }
.ld-press kbd { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(244, 241, 234, .12); color: #f4f1ea; font: 700 12px "JetBrains Mono", ui-monospace, monospace; box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .3); }
.ld-press.hidden { display: none; }

@media (max-width: 640px) { .ld-bar { margin-top: 54px; } }
@media (prefers-reduced-motion: reduce) {
  .ld-bg::before, .ld-bg::after, .pol, .ld-bee, .ld-bee .wing { animation: none; }
  .ld.out { clip-path: none; opacity: 0; }
}

/* ───── finisaje de fundal: vignetă, granulație fină, lumină moale în spatele titlului, polen cu adâncime ───── */
.ld::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(75% 75% at 50% 48%, transparent 42%, rgba(4, 3, 6, .72) 100%); }
.ld::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px; }
.ld-center { position: relative; z-index: 2; }
.ld-center::before { content: ''; position: absolute; left: 50%; top: 22%; width: 120%; aspect-ratio: 2 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(249, 5, 108, .2), rgba(249, 5, 108, 0)); pointer-events: none; z-index: -1; }
.pol.bk { background: radial-gradient(closest-side, var(--c), rgba(0, 0, 0, 0)); --o: .22; }