/* ===================== Parallax φόντο κεντρικού μενού (js/menubg.js) ===================== */
#menu-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.menu-layout { z-index: 1; }
/* Κάθε στρώμα είναι λίγο μεγαλύτερο από την οθόνη ώστε να μη φαίνονται άκρες όταν μετακινείται.
   Ήπιο parallax: κάθε στρώμα αιωρείται αργά αριστερά-δεξιά (και λίγο πάνω-κάτω) με δικό του πλάτος (--amp) και ρυθμό (--dur) —
   τα κοντινά περισσότερο και γρηγορότερα από τα μακρινά. */
.mb-layer { position: absolute; inset: -6%; will-change: transform; animation: mb-parallax var(--dur, 30s) ease-in-out infinite alternate; }
@keyframes mb-parallax { from { transform: translate3d(calc(var(--amp, 20px) * -1), calc(var(--amp, 20px) * -.25), 0); } to { transform: translate3d(var(--amp, 20px), calc(var(--amp, 20px) * .25), 0); } }
.mb-sky { background: url('../img/app_bg.jpg') center/cover no-repeat; }
.mb-sky.has-img { background-image: url('../img/menu/sky.jpg'); }
.mb-hills { background: url('../img/menu/hills.png') center bottom / 100% auto no-repeat; display: none; }
.mb-hills.has-img { display: block; }
.mb-front.has-img { background: url('../img/menu/front.png') center bottom / 100% auto no-repeat; }
.mb-front.has-img .mb-props { display: none; }
.mb-props { position: absolute; inset: 6%; }

/* Sprites: εικόνα (img/props) ή emoji */
.mb-sprite { position: absolute; width: var(--s, 100px); height: var(--s, 100px); opacity: var(--o, 1); display: flex; align-items: center; justify-content: center; }
.mb-sprite img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
.mb-sprite i { display: none; font-style: normal; font-size: calc(var(--s, 100px) * .8); line-height: 1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.2)); }
.mb-sprite.noimg i { display: block; }
.mb-sun img { filter: drop-shadow(0 0 30px rgba(255, 214, 79, .9)); animation: mb-spin 40s linear infinite; }
.mb-cloud { animation-name: mb-drift; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.mb-drift1 { animation-duration: 26s; } .mb-drift2 { animation-duration: 34s; animation-delay: -10s; } .mb-drift3 { animation-duration: 40s; animation-delay: -20s; }
.mb-balloon { animation-name: mb-bob; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.mb-bob1 { animation-duration: 7s; } .mb-bob2 { animation-duration: 9s; animation-delay: -3s; }
.mb-plane { right: -15%; animation: mb-plane 55s linear infinite; }   /* η εικόνα κοιτά αριστερά: πετά από δεξιά προς αριστερά */
.mb-fly { animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.mb-fly1 { animation-name: mb-fly-a; animation-duration: 14s; }
.mb-fly2 { animation-name: mb-fly-b; animation-duration: 17s; animation-delay: -5s; }
.mb-fly3 { animation-name: mb-fly-c; animation-duration: 11s; animation-delay: -2s; }
/* Φυτά & δέντρο: λυγίζουν από τον αέρα γύρω από τη ρίζα τους (transform-origin στη βάση) — δεν μετακινούνται.
   Το πρώτο πλάνο έχει --amp: 0 ώστε το «χώμα» να μένει ακίνητο· η κίνηση είναι ένα ελαφρύ, άνισο φύσημα (ριπή και ηρεμία). */
.mb-plant { transform-origin: 50% 100%; }
.mb-sway1 { animation: mb-wind 6s ease-in-out infinite; } .mb-sway2 { animation: mb-wind 7.5s ease-in-out infinite; animation-delay: -2.5s; } .mb-sway3 { animation: mb-wind 5.2s ease-in-out infinite; animation-delay: -1.2s; }
.mb-tree { transform-origin: 50% 100%; animation: mb-wind-tree 9s ease-in-out infinite; }

@keyframes mb-drift { from { transform: translateX(-4vw); } to { transform: translateX(4vw); } }
@keyframes mb-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-22px) rotate(2deg); } }
@keyframes mb-spin { to { transform: rotate(360deg); } }
@keyframes mb-plane { 0% { transform: translateX(0) translateY(0) rotate(0); } 50% { transform: translateX(-65vw) translateY(-30px) rotate(-3deg); } 100% { transform: translateX(-130vw) translateY(10px) rotate(2deg); } }
@keyframes mb-fly-a { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 25% { transform: translate(60px, -50px) rotate(10deg); } 50% { transform: translate(140px, -10px) rotate(-6deg); } 75% { transform: translate(50px, 40px) rotate(8deg); } }
@keyframes mb-fly-b { 0%, 100% { transform: translate(0, 0) rotate(6deg); } 30% { transform: translate(-90px, -40px) rotate(-10deg); } 60% { transform: translate(-150px, 20px) rotate(8deg); } }
@keyframes mb-fly-c { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(40px, 30px); } 45% { transform: translate(-30px, 60px); } 70% { transform: translate(-70px, 10px); } }
@keyframes mb-wind { 0%, 100% { transform: rotate(-2deg) skewX(0); } 35% { transform: rotate(4deg) skewX(-3deg); } 55% { transform: rotate(1deg) skewX(-1deg); } 75% { transform: rotate(3deg) skewX(-2deg); } }
@keyframes mb-wind-tree { 0%, 100% { transform: rotate(-1deg) skewX(0); } 40% { transform: rotate(2deg) skewX(-2deg); } 65% { transform: rotate(.5deg) skewX(-.5deg); } }

@media (prefers-reduced-motion: reduce) { #menu-bg * { animation: none !important; } }
@media (max-width: 900px) { .mb-sprite { --s: 70px !important; } .mb-tree { --s: 180px !important; } .mb-props .mb-plant { --s: 70px !important; } }