/* MUTA v243 - 08-phase-d-micro-best.css - PHASE D - Micro-interactions Best - هوشمند Velocity + Rubber-band + موتا مارکت Bezier Fly + Magnetic Buttons + Reading Progress + Text Word-by-Word */
/* Best of هوشمند drag velocity + Apple rubber-band + موتا مارکت Bezier fly-to-cart + 2026 magnetic buttons + Medium reading progress + Apple text reveals */
/* Only transform+opacity, GPU, no jump, 0 !important */

/* ==================== هوشمند VELOCITY + RUBBER-BAND - BOTTOM SHEET ==================== */

#mainNav.mobile-nav.rubber{
  transition: none !important;
  /* Will be set via JS with resistance */
}
#mainNav.mobile-nav.velocity-closing{
  animation: snappVelocityOut 300ms cubic-bezier(.4,0,1,1) forwards;
}
@keyframes snappVelocityOut{
  from{ transform: translateY(var(--current-y, 0)); opacity:1; }
  to{ transform: translateY(100%); opacity:0; }
}
#mainNav.mobile-nav.velocity-opening{
  animation: snappSpringIn 400ms cubic-bezier(.2,.9,.1,1) forwards;
}

/* Rubber-band visual */
#mainNav.mobile-nav::after{
  content:'';
  position: absolute;
  top:0; left:0; right:0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.32), transparent);
  transform: scaleX(0);
  opacity:0;
  transition: transform 200ms ease, opacity 200ms ease;
  will-change: transform, opacity;
}
#mainNav.mobile-nav.rubber::after{
  transform: scaleX(1);
  opacity:1;
}

/* ==================== موتا مارکت BEZIER FLY-TO-CART - DUAL-AXIS CURVED PATH ==================== */

.fly-clone{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .9rem;
  box-shadow: 0 8px 24px rgba(212,175,55,.32);
  will-change: transform, opacity;
  transform: translate(-50%, -50%) scale(1);
  opacity:1;
  transition: none;
}
.fly-clone.flying{
  /* Bezier via JS with transform, but CSS fallback */
  transition: transform 600ms cubic-bezier(.16,1,.3,1), opacity 400ms ease;
}
.fly-target-bump{
  animation: digikalaCartBump 400ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes digikalaCartBump{
  0%{ transform: scale(1); }
  30%{ transform: scale(.88); }
  60%{ transform: scale(1.18); }
  100%{ transform: scale(1); }
}

/* Bezier path visualization - optional dot trail */
.fly-trail{
  position: fixed;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  opacity:.6;
  will-change: transform, opacity;
}

/* ==================== MAGNETIC BUTTONS - 2026 TREND ==================== */

.magnetic-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms cubic-bezier(.16,1,.3,1), background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  will-change: transform;
  transform: translate(0,0);
}
.magnetic-btn:hover{
  transform: translate(var(--mag-x, 0), var(--mag-y, 0)) scale(1.02);
}
.magnetic-btn:active{
  transform: translate(var(--mag-x, 0), var(--mag-y, 0)) scale(.96);
}

.btn.magnetic-btn,
.market-filter-btn.magnetic-btn,
.fm-tab.magnetic-btn,
.news-filter-chip.magnetic-btn{
  /* Apply magnetic to all btns */
  transition: transform 200ms cubic-bezier(.16,1,.3,1), background 200ms ease, box-shadow 200ms ease;
  will-change: transform;
}

/* Magnetic area - larger hover area for magnetic effect */
.magnetic-area{
  position: relative;
  display: inline-flex;
  padding: 12px;
  margin: -12px;
}

/* ==================== READING PROGRESS - MEDIUM STYLE ==================== */

#readingProgressBar{
  position: fixed;
  top:0; left:0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 1004;
  pointer-events: none;
  contain: layout style paint;
}
#readingProgressBar .rp-fill{
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 50%, var(--purple-2) 100%);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 100ms linear;
  will-change: transform;
  box-shadow: 0 0 8px rgba(212,175,55,.32);
}

/* ==================== TEXT WORD-BY-WORD - APPLE PRODUCT PAGE STYLE ==================== */

.word-reveal{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.word-reveal span{
  display: inline-block;
  transform: translateY(100%);
  opacity:0;
  filter: blur(8px);
  transition: transform 600ms cubic-bezier(.16,1,.3,1), opacity 400ms ease, filter 600ms ease;
  will-change: transform, opacity, filter;
}
.word-reveal.visible span{
  transform: translateY(0);
  opacity:1;
  filter: blur(0);
}
.word-reveal span:nth-child(1){ transition-delay: 0ms; }
.word-reveal span:nth-child(2){ transition-delay: 60ms; }
.word-reveal span:nth-child(3){ transition-delay: 120ms; }
.word-reveal span:nth-child(4){ transition-delay: 180ms; }
.word-reveal span:nth-child(5){ transition-delay: 240ms; }
.word-reveal span:nth-child(6){ transition-delay: 300ms; }
.word-reveal span:nth-child(7){ transition-delay: 360ms; }
.word-reveal span:nth-child(8){ transition-delay: 420ms; }
.word-reveal span:nth-child(n+9){ transition-delay: 480ms; }

/* Section titles word-by-word */
.section-title.word-by-word{
  display: block;
}
.section-title.word-by-word .word{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-left: 6px;
}
.section-title.word-by-word .word span{
  display: inline-block;
  transform: translateY(110%);
  opacity:0;
  filter: blur(10px);
  transition: transform 700ms cubic-bezier(.16,1,.3,1), opacity 500ms ease, filter 700ms ease;
  will-change: transform, opacity, filter;
}
.section-title.word-by-word.visible .word span{
  transform: translateY(0);
  opacity:1;
  filter: blur(0);
}

/* ==================== INLINE VALIDATION - هوشمند ==================== */

.inline-validation{
  position: relative;
}
.inline-validation input:valid{
  border-color: rgba(16,185,129,.32);
  background: rgba(16,185,129,.04);
}
.inline-validation input:invalid:not(:placeholder-shown){
  border-color: rgba(239,68,68,.32);
  background: rgba(239,68,68,.04);
  animation: inlineShake 400ms cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes inlineShake{
  10%, 90%{ transform: translateX(-1px); }
  20%, 80%{ transform: translateX(2px); }
  30%, 50%, 70%{ transform: translateX(-4px); }
  40%, 60%{ transform: translateX(4px); }
}
.inline-validation .validation-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  opacity:0;
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1), opacity 200ms ease;
  will-change: transform, opacity;
  pointer-events: none;
}
.inline-validation input:valid ~ .validation-icon.valid{
  transform: translateY(-50%) scale(1);
  opacity:1;
  color: var(--up);
}
.inline-validation input:invalid:not(:placeholder-shown) ~ .validation-icon.invalid{
  transform: translateY(-50%) scale(1);
  opacity:1;
  color: var(--down);
}

/* ==================== HAPTIC VISUAL FEEDBACK - BUTTON BOUNCE ==================== */

.haptic-btn{
  transition: transform 150ms cubic-bezier(.4,0,.2,1), background 150ms ease;
  will-change: transform;
}
.haptic-btn:active{
  transform: scale(.96);
}
.haptic-btn.bouncing{
  animation: hapticBounce 400ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes hapticBounce{
  0%{ transform: scale(1); }
  30%{ transform: scale(.92); }
  60%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

/* ==================== CURSOR LABEL - ESZTER BIAL STYLE ==================== */

#cursorLabel{
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: rgba(12,12,14,.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text);
  transform: translate(-50%, -120%) scale(.8);
  opacity:0;
  transition: transform 200ms cubic-bezier(.16,1,.3,1), opacity 200ms ease;
  will-change: transform, opacity;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.20);
}
#cursorLabel.visible{
  transform: translate(-50%, -120%) scale(1);
  opacity:1;
}

/* ==================== ENSURE NO JUMP ==================== */

#readingProgressBar, #cursorLabel{
  contain: layout style paint;
}
.magnetic-btn, .haptic-btn{
  contain: layout style;
}