/* =============================================================================
 *  MC Digital — שכבת מושן עתידנית (FX)
 *  Preloader · פס התקדמות · זוהר עכבר · הטיית כרטיסים · כפתורים מגנטיים ·
 *  חשיפות בגלילה · מוני מספרים · HUD · גליץ' · סקאנליינס
 *  הכול transform/opacity (GPU), בטוח במובייל, מכבד reduced-motion.
 * ===========================================================================*/

:root { --fx-ease: cubic-bezier(.16,.84,.44,1); }

html.fx-loading, html.fx-loading body { overflow: hidden !important; }

/* ============================================================
 *  1. Preloader — מסך פתיחה ממותג
 * ========================================================== */
.fx-loader {
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center;
  background:
    radial-gradient(800px 500px at 50% 38%, rgba(139,92,246,.18), transparent 60%),
    #05040d;
  transition: opacity .7s var(--fx-ease), visibility .7s var(--fx-ease);
  animation: fxLoaderFail 0s linear 4s forwards; /* גיבוי ללא JS */
}
html.fx-ready .fx-loader { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes fxLoaderFail { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.fx-loader__box { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.fx-loader__ring { position: absolute; inset: 0; border-radius: 50%; }
.fx-loader__ring::before,
.fx-loader__ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent;
}
.fx-loader__ring::before { border-top-color: var(--violet); border-inline-end-color: var(--violet); animation: fxSpin 1s linear infinite; }
.fx-loader__ring::after  { border-bottom-color: var(--cyan); inset: 10px; animation: fxSpin 1.6s linear infinite reverse; }
@keyframes fxSpin { to { transform: rotate(360deg); } }

.fx-loader__logo {
  font-weight: 900; font-size: 1.7rem; letter-spacing: .04em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fxPulse 1.6s ease-in-out infinite;
}
@keyframes fxPulse { 0%,100%{ transform: scale(1); opacity:.92 } 50%{ transform: scale(1.08); opacity:1 } }

.fx-loader__name {
  position: absolute; inset-block-end: -46px; inset-inline: 0; text-align: center;
  color: #fff; font-weight: 900; letter-spacing: .35em; font-size: .78rem;
  opacity: 0; animation: fxFadeIn .6s ease .25s forwards;
}
.fx-loader__bar { position: absolute; inset-block-end: -70px; inset-inline: 50%; width: 140px; height: 2px; transform: translateX(50%); background: rgba(255,255,255,.12); overflow: hidden; border-radius: 2px; }
.fx-loader__bar::after { content:""; position:absolute; inset-block:0; inset-inline-start:-40%; width:40%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: fxLoad 1.1s ease-in-out infinite; }
@keyframes fxLoad { to { inset-inline-start: 120%; } }
@keyframes fxFadeIn { to { opacity: 1; } }

/* ============================================================
 *  2. פס התקדמות גלילה
 * ========================================================== */
.fx-progress {
  position: fixed; top: 0; inset-inline: 0; height: 3px; width: 0%;
  z-index: 9998; background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 14px var(--glow-c); transition: width .1s linear;
}

/* ============================================================
 *  3. זוהר עכבר (דסקטופ בלבד)
 * ========================================================== */
.fx-cursor {
  position: fixed; top: 0; inset-inline-start: 0; width: 520px; height: 520px;
  border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(139,92,246,.14), transparent 60%);
  mix-blend-mode: screen; transition: opacity .4s ease; will-change: transform;
}
@media (hover: hover) and (pointer: fine) { .fx-cursor.on { opacity: 1; } }

/* ============================================================
 *  4. חשיפות בגלילה
 * ========================================================== */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity .7s var(--fx-ease), transform .7s var(--fx-ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal--right { transform: translateX(40px); }
.reveal--left  { transform: translateX(-40px); }
.reveal--zoom  { transform: scale(.92); }
.reveal--right.in, .reveal--left.in, .reveal--zoom.in { transform: none; }
.reveal[style*="--i"] { transition-delay: calc(var(--i) * .07s); }

/* חשיפת "קלף" לכרטיסי עבודות */
.work-card.reveal { transform: translateY(22px); transform-origin: center bottom; backface-visibility: hidden; }
.work-card.reveal.in { animation: fxCardFlip .75s var(--fx-ease) backwards; }
.work-card.reveal.in[style*="--i"] { animation-delay: calc(var(--i) * .08s); }
@keyframes fxCardFlip {
  0%   { opacity: 0; transform: perspective(1300px) rotateX(60deg); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: perspective(1300px) rotateX(0deg); }
}

/* ============================================================
 *  5. הטיית כרטיסים תלת-ממדית (tilt) + ברק
 * ========================================================== */
.tilt-wrap { perspective: 900px; }
.tilt { transform-style: preserve-3d; transition: transform .25s var(--fx-ease); will-change: transform; }
.tilt__glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.16), transparent 60%);
  transition: opacity .25s ease; border-radius: inherit; mix-blend-mode: screen;
}
.tilt.is-tilting .tilt__glare { opacity: 1; }

/* ============================================================
 *  6. גליץ' לכותרות (hover)
 * ========================================================== */
.fx-glitch { position: relative; }
.fx-glitch::before, .fx-glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.fx-glitch:hover::before { opacity: .9; color: var(--cyan); transform: translate(2px,-2px); animation: fxGlitchA .4s steps(2) infinite; }
.fx-glitch:hover::after  { opacity: .9; color: var(--pink); transform: translate(-2px,2px); animation: fxGlitchB .4s steps(2) infinite; }
@keyframes fxGlitchA { 0%{clip-path:inset(0 0 70% 0)} 50%{clip-path:inset(40% 0 30% 0)} 100%{clip-path:inset(70% 0 0 0)} }
@keyframes fxGlitchB { 0%{clip-path:inset(70% 0 0 0)} 50%{clip-path:inset(20% 0 50% 0)} 100%{clip-path:inset(0 0 70% 0)} }

/* ============================================================
 *  7. סקאנליינס עדין
 * ========================================================== */
.fx-scan { position: fixed; inset: 0; z-index: 9996; pointer-events: none; opacity: .3;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 3px); }

/* ============================================================
 *  8. טלמטריית HUD בפינות
 * ========================================================== */
.fx-hud { position: fixed; z-index: 9995; pointer-events: none; font-family: "Courier New", monospace; font-size: .66rem; letter-spacing: .12em; color: rgba(255,255,255,.5); text-transform: uppercase; opacity: 0; transition: opacity .8s ease 1.2s; }
html.fx-ready .fx-hud { opacity: 1; }
.fx-hud b { color: var(--cyan); font-weight: 700; }
.fx-hud--bl { bottom: 14px; inset-inline-start: 90px; }
.fx-hud--br { bottom: 14px; inset-inline-end: 16px; text-align: end; }
.fx-hud .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #19e36a; box-shadow: 0 0 8px #19e36a; margin-inline-start: 5px; animation: fxBlink 1.4s ease-in-out infinite; vertical-align: middle; }
@keyframes fxBlink { 50% { opacity: .25; } }

/* ============================================================
 *  9. כניסת תוכן + זוהר נשימה ל-CTA ראשי
 * ========================================================== */
html.fx-ready main { animation: fxMainIn .8s var(--fx-ease) both; }
@keyframes fxMainIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero-actions .btn-grad { animation: fxBreathe 2.6s ease-in-out infinite; }
@keyframes fxBreathe {
  0%,100%{ box-shadow: 0 8px 30px var(--glow-v); }
  50%    { box-shadow: 0 8px 46px var(--glow-c), 0 0 0 1px rgba(34,211,238,.35); }
}

/* רשת חלקיקים (canvas) */
.fx-particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7; }

/* ============================================================
 *  10. נגישות + מובייל
 * ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .fx-loader { animation: none; }
  .fx-cursor, .fx-scan, .fx-hud, .fx-particles { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .work-card.reveal.in { animation: none !important; }
  html.fx-ready main { animation: none; }
  .tilt { transition: none; }
  .hero-actions .btn-grad { animation: none; }
}
@media (hover: none), (pointer: coarse) {
  .fx-cursor, .fx-scan, .fx-hud { display: none !important; }
}