/* =====================================================================
   fx.css - מסך טעינה אינטראקטיבי + מעברי עמודים (משותף לכל האתר והמשחק)
   עצמאי: לא תלוי ב-site.css, כדי שיעבוד גם במשחק.
   ===================================================================== */
html.fx-on::before {            /* מכסה את הדף מיד בכניסה אחרי מעבר, עד שה-JS בונה את המסך */
    content: ''; position: fixed; inset: 0; z-index: 99998;
    background: linear-gradient(180deg, #1d8fff, #8fdcff 80%, #d6f3ff);
}

.loading-screen {
    position: fixed; inset: 0; z-index: 99999;
    display: grid !important; place-items: center;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .35), transparent 55%),
        linear-gradient(180deg, #1d8fff 0%, #5cbcff 50%, #a6e3ff 85%, #d6f3ff 100%);
    font-family: 'Rubik', system-ui, sans-serif; color: #fff;
    overflow: hidden; cursor: default;
    opacity: 1; visibility: visible;
    transition: opacity .55s ease, visibility .55s, transform .55s cubic-bezier(.6, 0, .4, 1);
}
.loading-screen.hidden { opacity: 0; visibility: hidden; transform: translateY(-4%) scale(1.04); pointer-events: none; display: grid !important; }

.loading-screen .cloud {
    position: absolute; pointer-events: none; z-index: 1;
    width: var(--w, 240px); aspect-ratio: 2 / 1; top: var(--y, 20%); inset-inline-start: -30%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath fill='%23fff' d='M40 92a30 30 0 0 1-4-59 40 40 0 0 1 74-12 36 36 0 0 1 56 26 28 28 0 0 1-6 45z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: var(--o, .85); animation: fxDrift var(--t, 60s) linear infinite; animation-delay: var(--d, 0s);
}
.loading-screen .cloud--1 { --w: 280px; --y: 8%;  --t: 38s; --d: -10s; }
.loading-screen .cloud--2 { --w: 170px; --y: 36%; --t: 30s; --d: -22s; --o: .6; }
.loading-screen .cloud--3 { --w: 340px; --y: 64%; --t: 48s; --d: -30s; --o: .7; }
.loading-screen .cloud--4 { --w: 140px; --y: 20%; --t: 26s; --d: -4s;  --o: .5; }

.loading-screen .loading-box { position: relative; z-index: 3; text-align: center; padding: 20px; pointer-events: none; }
.loading-screen .loading-logo { width: min(64vw, 290px); animation: fxFloaty 2.6s ease-in-out infinite; filter: drop-shadow(0 16px 20px rgba(11, 61, 145, .35)); }
.loading-screen .loading-text { font: 400 1.6rem 'Secular One', 'Rubik', sans-serif; margin: 0 0 8px; text-shadow: 0 3px 0 #1565d8; animation: none; }
.loading-screen .loading-bar {
    width: min(70vw, 290px); height: 22px; margin: 8px auto 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .45); border: 3px solid #fff; overflow: hidden; box-shadow: 0 4px 0 rgba(21, 101, 216, .3);
}
.loading-screen .loading-bar i {
    display: block; height: 100%; width: 42%; border-radius: 999px;
    background: repeating-linear-gradient(-45deg, #ffc65c 0 12px, #ff9a1f 12px 24px); background-size: 34px 34px;
    animation: fxLoadBar 1.4s ease-in-out infinite, fxStripes 1s linear infinite;
}
.loading-screen .loading-tip {
    max-width: 420px; margin: 0 auto; padding: 0; background: none; border: 0; backdrop-filter: none; animation: none;
    font-weight: 500; text-shadow: 0 1px 4px rgba(10, 50, 130, .55);
}
.loading-screen .loading-tip p { margin: 0; font-size: 1rem; line-height: 1.6; }
.loading-screen .loading-container { display: none; }

/* ---- שכבה אינטראקטיבית: מטוס נייר שעוקב אחרי העכבר ואוסף כוכבים ---- */
.fx-field { position: absolute; inset: 0; z-index: 2; overflow: hidden; touch-action: none; }
.fx-star {
    position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; will-change: transform;
    filter: drop-shadow(0 4px 6px rgba(11, 61, 145, .35)); cursor: pointer;
}
.fx-star svg { width: 100%; height: 100%; animation: fxSpin 3s linear infinite; }
.fx-star--gold svg { animation-duration: 2s; }
.fx-plane {
    position: absolute; left: 0; top: 0; z-index: 4; width: 56px; height: 56px; margin: -28px 0 0 -28px; pointer-events: none; will-change: transform;
    filter: drop-shadow(0 8px 8px rgba(11, 61, 145, .35));
}
.fx-plane svg { width: 100%; height: 100%; }
.fx-hud {
    position: absolute; z-index: 5; top: 18px; inset-inline-start: 18px; display: flex; align-items: center; gap: 10px; pointer-events: none;
    background: #fff; color: #17315c; padding: 6px 16px 6px 12px; border-radius: 999px;
    border: 3px solid #7fd0ff; box-shadow: 0 4px 0 rgba(21, 101, 216, .3); font: 400 1.15rem 'Secular One', 'Rubik', sans-serif;
}
.fx-hud svg { width: 24px; height: 24px; }
.fx-hud small { font: 500 .8rem 'Rubik', sans-serif; color: #4a6288; }
.fx-hud b { display: inline-block; min-width: 1.2ch; }
.fx-hud.bump { animation: fxBump .35s ease; }
.fx-pop { position: fixed; z-index: 100000; pointer-events: none; font: 400 1.4rem 'Secular One', sans-serif; color: #fff; text-shadow: 0 2px 0 #e8650c, 0 0 8px rgba(255, 217, 59, .9); }

/* ---- מעבר בין עמודים: ענן עגול שנפתח מנקודת הלחיצה ---- */
.loading-screen.fx-overlay { clip-path: circle(0 at var(--fx-x, 50%) var(--fx-y, 50%)); }
.loading-screen.fx-overlay.fx-in { clip-path: circle(150% at var(--fx-x, 50%) var(--fx-y, 50%)); transition: clip-path .62s cubic-bezier(.5, 0, .2, 1); }
.loading-screen.fx-overlay.fx-arrive { clip-path: circle(150% at 50% 50%); }
.loading-screen.fx-overlay.fx-out { clip-path: circle(0 at 50% 45%); transition: clip-path .7s cubic-bezier(.6, 0, .3, 1); }

@keyframes fxFloaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes fxDrift { from { transform: translateX(0); } to { transform: translateX(-160vw); } }
@keyframes fxLoadBar { 0% { margin-inline-start: -42%; } 100% { margin-inline-start: 100%; } }
@keyframes fxStripes { to { background-position: 34px 0; } }
@keyframes fxSpin { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.12); } }
@keyframes fxBump { 50% { transform: scale(1.18) rotate(-3deg); } }

@media (prefers-reduced-motion: reduce) {
    .loading-screen .cloud, .loading-screen .loading-logo, .fx-star svg { animation: none; }
    .loading-screen.fx-overlay, .loading-screen.fx-overlay.fx-in, .loading-screen.fx-overlay.fx-out { transition: opacity .2s; clip-path: none; }
}