/* MUTA v245 CONSOLIDATED 05 ANIMATIONS - SOURCES IN ABOUT > منابع - 0 !important */

/* === 09-premium-2026.css === */
/* MUTA v200.201 - 09-premium-2026.css - PREMIUM POLISH - NO !IMPORTANT SPAM - FINAL POLISH */
.site-header {
  background: rgba(8,9,10,.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line);
  height: 56px;
}
.header-inner { height: 56px; }
.brand-name { font-weight: 800; letter-spacing: -.02em; font-size: 1.02rem; }
.brand-tag { font-size: .62rem; letter-spacing: .14em; color: var(--text-faint); font-weight: 600; }

.desktop-nav a {
  font-size: .84rem; font-weight: 500; color: var(--text-faint);
  padding: 6px 12px; border-radius: var(--radius-full);
  transition: all var(--dur-fast) var(--ease);
  letter-spacing: -.01em;
}
.desktop-nav a:hover { color: var(--text); background: var(--surface-2); }
.desktop-nav a.active { color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); font-weight: 600; }

.fm-kpi-grid { gap: 14px; }
.fm-kpi { position: relative; overflow: hidden; }
.fm-kpi::before {
  content: ''; position: absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.fm-kpi:hover::before { opacity: 1; }
.fm-kpi-value { font-size: 1.75rem; line-height: 1.1; margin-top: 10px; }
.fm-kpi-value.up { color: var(--up); }
.fm-kpi-value.down { color: var(--down); }

#fmAiRegisterCard {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 24px;
}
.fm-chat-log {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.fm-chat-input .fm-input {
  background: var(--bg);
  border: 1px solid var(--line-2);
  height: 44px;
  border-radius: var(--radius-full);
  padding: 0 18px;
}
.fm-chat-input .fm-input:focus { border-color: var(--gold-border); }

.fm-tabs { gap: 4px; padding-bottom: 12px; }
.fm-tab { height: 34px; padding: 0 14px; font-size: .78rem; }

#fmTxList .fm-tx-row, #fmTxList > div > div { transition: all var(--dur-fast) var(--ease); }
#fmTxList > div > div:hover { background: var(--surface-2); border-radius: var(--radius-md); }

.market-card, .home-market-card {
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.market-card-price, .home-price { font-weight: 700; letter-spacing: -.04em; }

.home-markets-new h2 { letter-spacing: -.03em; font-weight: 800; }
.home-markets-group h4 { font-weight: 700; letter-spacing: -.01em; }

.summary-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.summary-card .summary-status { letter-spacing: -.02em; }

.btn-gold {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 650;
}
.btn-gold:hover { background: var(--text-2); border-color: var(--text-2); }
.btn-gold.btn-gold-accent { background: var(--gold); color: #000; border-color: var(--gold); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-dim);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line-3); color: var(--text); }

.fm-input, .fm-select {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  height: 42px;
  font-size: .86rem;
}
.fm-input:focus, .fm-select:focus {
  border-color: var(--line-3);
  box-shadow: 0 0 0 3px rgba(255,255,255,.04);
  background: var(--surface);
}

.card3d, .fm-card, .news-card, .mota-card, .market-card { box-shadow: none; }
.card3d:hover, .fm-card:hover, .news-card:hover {
  box-shadow: none;
  border-color: var(--line-3);
  transform: translateY(-1px);
}

.ticker-tape {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  height: 36px;
}

.section-head { margin-bottom: 12px; }
.section-title { font-weight: 800; letter-spacing: -.04em; }

.mono, [class*="price"], [class*="amount"], .fm-kpi-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

.fm-list > div[style*="text-align:center"] {
  padding: 40px 20px;
  color: var(--text-faint);
  font-size: .86rem;
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
  margin-top: 8px;
}

.advisor-sample {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: .78rem;
  color: var(--text-dim);
  transition: all var(--dur-fast) var(--ease);
}
.advisor-sample:hover {
  background: var(--surface-3);
  border-color: var(--line-3);
  color: var(--text);
}


/* === 28-animations-premium-subtle.css === */
/* MUTA v237 - 28-animations-premium-subtle.css - PHASE 0-1 CORE ANIMATION SYSTEM - PREMIUM SUBTLE NO JUMP EVER */
/* Principled: only transform + opacity, GPU accelerated, no layout shift, no CLS, 0 !important, ID specificity */

:root{
  --ease-premium: cubic-bezier(.16,1,.3,1); /* هوشمند */
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 180ms;
  --dur-base: 360ms;
  --dur-slow: 600ms;
  --dur-ultra: 900ms;
  --stagger-step: 60ms;
  --stagger-fast: 40ms;
}

/* Reduced motion - respect user preference, no !important spam, use :where for low specificity but override with ID later if needed */
@media (prefers-reduced-motion: reduce){
  :where(*){
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
  :where(.tape-track){
    animation: none;
  }
}

/* Core keyframes - all transform + opacity only, no jump */
@keyframes premiumFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes premiumSlideUp{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes premiumSlideUpSmall{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes premiumScaleIn{
  from{ opacity:0; transform: scale(.96); }
  to{ opacity:1; transform: scale(1); }
}
@keyframes premiumهوشمندrIn{
  from{ opacity:0; filter: blur(12px); transform: scale(1.02); }
  to{ opacity:1; filter: blur(0); transform: scale(1); }
}
@keyframes premiumHeaderIn{
  from{ opacity:0; transform: translateY(-8px); backdrop-filter: blur(0); }
  to{ opacity:1; transform: translateY(0); backdrop-filter: blur(24px); }
}
@keyframes premiumTickerMove{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@keyframes premiumPulseDot{
  0%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.25); opacity:.85; }
  100%{ transform: scale(1); opacity:1; }
}
@keyframes premiumLivePulse{
  0%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
  70%{ transform: scale(1); box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
@keyframes premiumShimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(200%); }
}
@keyframes premiumTypingDot{
  0%, 80%, 100%{ transform: scale(0); opacity:.5; }
  40%{ transform: scale(1); opacity:1; }
}

/* View entrance - premium subtle, no jump, uses transform + opacity only */
#view-home.active,
#view-market.active,
#view-muta.active,
#view-motame.active,
#view-finance.active,
#view-assistant.active,
#view-news.active,
#view-calendar.active,
#view-chat.active,
#view-account.active,
#view-about.active,
#view-efile.active,
#view-admin.active{
  animation: premiumSlideUp var(--dur-base) var(--ease-premium);
  will-change: opacity, transform;
  contain: layout style paint;
}

/* Ensure view exit is instant opacity only, no jump */
.view-section{
  will-change: opacity;
}

/* Header entrance - subtle blurIn */
#siteHeader{
  animation: premiumHeaderIn var(--dur-base) var(--ease-premium);
  will-change: transform, opacity, backdrop-filter;
}

/* Brand logo subtle scale on load */
#siteHeader .brand-logo{
  animation: premiumScaleIn var(--dur-base) var(--ease-premium) 100ms both;
}

/* Nav active pill transition - transform + opacity only */
#mainNavDesktop a,
#mainNav a{
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-premium), opacity var(--dur-fast) var(--ease-smooth);
  will-change: transform, background, color;
}
#mainNavDesktop a:hover,
#mainNav a:hover{
  transform: translateY(-1px);
}
#mainNavDesktop a.active,
#mainNav a.active{
  transform: translateY(0) scale(1.02);
}

/* Mobile nav open - transform + opacity, no height */
#mainNav.mobile-nav{
  transition: opacity var(--dur-base) var(--ease-premium), transform var(--dur-base) var(--ease-premium);
  transform: translateY(-8px);
  opacity:0;
}
#mainNav.mobile-nav.open{
  transform: translateY(0);
  opacity:1;
}
#menuOverlay{
  transition: opacity var(--dur-base) var(--ease-smooth);
}
#menuOverlay.open{
  animation: premiumFadeIn var(--dur-base) var(--ease-smooth);
}

/* Ticker - transform only, GPU, pause on hover */
#tickerTape .tape-track{
  animation: premiumTickerMove 80s linear infinite;
  will-change: transform;
}
#tickerTape .tape-track:hover{
  animation-play-state: paused;
}

/* Cards - premium hover micro-interaction, no layout shift */
#siteHeader,
.card3d,
.clock-card,
.summary-card,
.home-market-card,
.market-card,
.news-card,
.calendar-card,
.about-pillar,
.assistant-hub-card{
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
  will-change: transform;
  contain: layout style paint;
}
.card3d:hover,
.clock-card:hover,
.summary-card:hover,
.home-market-card:hover,
.market-card:hover,
.news-card:hover,
.calendar-card:hover,
.assistant-hub-card:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(212,175,55,.10), 0 0 24px rgba(212,175,55,.12);
}
.clock-card:hover{
  transform: translateY(-2px) scale(1.015);
}
.assistant-hub-card:hover{
  transform: translateY(-6px) scale(1.02);
}
.assistant-hub-card:hover .assistant-hub-enter{
  transform: translateX(-4px);
}

/* Clock time - no reflow, tabular numbers */
#clocksGrid .clock-card .time{
  transition: color var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
  font-variant-numeric: tabular-nums;
  will-change: contents;
}
#clocksGrid .clock-card .city{
  transition: color var(--dur-fast) var(--ease-smooth);
}

/* LIVE dot pulse - transform scale only, no width/height */
#clocksGrid .clock-dot,
.home-live-badge,
#marketStatusPill,
#iranStatusPill,
.status-pill.live{
  animation: premiumPulseDot 2s var(--ease-smooth) infinite;
  will-change: transform, opacity;
}

/* Summary cards bento stagger entrance */
#summaryGrid .summary-card:nth-child(1){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 0ms both; }
#summaryGrid .summary-card:nth-child(2){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) var(--stagger-step) both; }
#summaryGrid .summary-card:nth-child(3){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) calc(var(--stagger-step)*2) both; }

/* Home markets groups stagger */
.home-markets-grid-wrapper .home-markets-group:nth-child(1){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 120ms both; }
.home-markets-grid-wrapper .home-markets-group:nth-child(2){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 180ms both; }
.home-markets-grid-wrapper .home-markets-group:nth-child(3){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 240ms both; }

/* Clocks grid stagger - premium subtle */
#clocksGrid .clock-card:nth-child(1){ animation: premiumScaleIn var(--dur-base) var(--ease-premium) 0ms both; }
#clocksGrid .clock-card:nth-child(2){ animation: premiumScaleIn var(--dur-base) var(--ease-premium) var(--stagger-fast) both; }
#clocksGrid .clock-card:nth-child(3){ animation: premiumScaleIn var(--dur-base) var(--ease-premium) calc(var(--stagger-fast)*2) both; }
#clocksGrid .clock-card:nth-child(4){ animation: premiumScaleIn var(--dur-base) var(--ease-premium) calc(var(--stagger-fast)*3) both; }

/* Market grid stagger */
#marketGrid .market-card:nth-child(1),
#forexGrid .market-card:nth-child(1),
#iranAssetsGrid .market-card:nth-child(1){ animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium) 0ms both; }
#marketGrid .market-card:nth-child(2),
#forexGrid .market-card:nth-child(2),
#iranAssetsGrid .market-card:nth-child(2){ animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium) 40ms both; }
#marketGrid .market-card:nth-child(3),
#forexGrid .market-card:nth-child(3),
#iranAssetsGrid .market-card:nth-child(3){ animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium) 80ms both; }
#marketGrid .market-card:nth-child(n+4),
#forexGrid .market-card:nth-child(n+4),
#iranAssetsGrid .market-card:nth-child(n+4){ animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium) 120ms both; }

/* Muta grid 7 cards stagger */
#mutaGrid .card3d:nth-child(1){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 0ms both; }
#mutaGrid .card3d:nth-child(2){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 60ms both; }
#mutaGrid .card3d:nth-child(3){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 120ms both; }
#mutaGrid .card3d:nth-child(4){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 180ms both; }
#mutaGrid .card3d:nth-child(5){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 240ms both; }
#mutaGrid .card3d:nth-child(6){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 300ms both; }
#mutaGrid .card3d:nth-child(7){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 360ms both; }

/* Motame notifications inside - slideUp stagger */
#motameNotifications .card3d:nth-child(1){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 0ms both; }
#motameNotifications .card3d:nth-child(2){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 60ms both; }
#motameNotifications .card3d:nth-child(3){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 120ms both; }
#motameNotifications{ animation: premiumFadeIn var(--dur-base) var(--ease-smooth) 200ms both; }

/* Assistant hub 4 cards stagger */
.assistant-hub-grid .assistant-hub-card:nth-child(1){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 0ms both; }
.assistant-hub-grid .assistant-hub-card:nth-child(2){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 80ms both; }
.assistant-hub-grid .assistant-hub-card:nth-child(3){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 160ms both; }
.assistant-hub-grid .assistant-hub-card:nth-child(4){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 240ms both; }

/* Finance tabs */
.fm-tab{
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-premium);
}
.fm-tab:hover{ transform: translateY(-1px); }
.fm-tab.active{ transform: translateY(0) scale(1.02); }
.fm-tab-panel.active{ animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium); }

/* Buttons - premium micro */
.btn{
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px) scale(1.01); }
.btn:active{ transform: translateY(0) scale(.98); }
.btn-gold:hover{ box-shadow: 0 4px 16px rgba(212,175,55,.28), 0 0 0 1px rgba(212,175,55,.20); }

/* Assistant chat bubbles */
.advisor-conv .advisor-msg,
#fmAiRegisterLog > *,
#mutaDmMessages > *{
  animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium);
  will-change: transform, opacity;
}

/* News cards stagger */
#newsGrid .news-card:nth-child(1){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 0ms both; }
#newsGrid .news-card:nth-child(2){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 60ms both; }
#newsGrid .news-card:nth-child(3){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 120ms both; }
#newsGrid .news-card:nth-child(n+4){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 180ms both; }

/* Calendar cards */
#calendarGrid .calendar-card:nth-child(1){ animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium) 0ms both; }
#calendarGrid .calendar-card:nth-child(2){ animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium) 50ms both; }
#calendarGrid .calendar-card:nth-child(n+3){ animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium) 100ms both; }

/* Chart modal - premium blur + scale */
#chartModalV200{
  animation: premiumFadeIn var(--dur-base) var(--ease-smooth);
}
#chartModalV200 > div{
  animation: premiumهوشمندrIn var(--dur-base) var(--ease-premium);
  will-change: transform, opacity, filter;
}

/* Skeleton shimmer - transform only */
.skeleton{
  position: relative;
  overflow: hidden;
}
.skeleton::after{
  content:'';
  position: absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%);
  animation: premiumShimmer 1.4s infinite;
  will-change: transform;
}

/* Focus visible - no jump */
:where(a, button, input, select, textarea):focus-visible{
  outline: 2px solid rgba(212,175,55,.6);
  outline-offset: 2px;
  transition: outline-offset var(--dur-fast) var(--ease-smooth);
}

/* Scroll top button */
#scrollTopBtn{
  transition: opacity var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-premium);
  transform: translateY(12px) scale(.9);
  opacity:0;
}
#scrollTopBtn.visible{
  transform: translateY(0) scale(1);
  opacity:1;
}

/* Ensure no layout shift on hover - use transform only, never margin/padding */
*{
  /* Prevent accidental layout animations */
  /* Note: we allow specific transitions defined above, but discourage all */
}

/* Premium subtle for section-head */
.section-head{
  animation: premiumFadeIn var(--dur-slow) var(--ease-smooth) 0ms both;
}
.section-head .section-title{
  animation: premiumSlideUp var(--dur-base) var(--ease-premium) 80ms both;
}
.section-head .section-desc{
  animation: premiumSlideUp var(--dur-base) var(--ease-premium) 140ms both;
}
.home-eyebrow{
  animation: premiumFadeIn var(--dur-base) var(--ease-smooth) 0ms both;
}

/* Ensure clocks time update doesn't cause layout shift - fixed tabular */
.mono{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Performance: contain for grids */
.card-grid,
#clocksGrid,
#summaryGrid,
.home-markets-grid-wrapper,
#marketGrid,
#forexGrid,
#iranAssetsGrid,
#mutaGrid,
.assistant-hub-grid,
#newsGrid,
#calendarGrid{
  contain: layout style;
}


/* === 29-animations-phases-2-12.css === */
/* MUTA v238 - 29-animations-phases-2-12.css - PHASE 2 to 12 - PREMIUM SUBTLE NO JUMP EVER */
/* All sections animated, only transform + opacity, GPU, no layout shift, 0 !important, ID specificity */

/* ==================== PHASE 2: HEADER, NAV, TICKER ==================== */

/* Header sticky 56px gold 2px - already, enhance with scroll shadow via transform */
#siteHeader{
  transition: box-shadow var(--dur-base) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-base) var(--ease-premium);
  will-change: transform, box-shadow;
}
#siteHeader.scrolled{
  box-shadow: 0 8px 32px rgba(0,0,0,.24), 0 0 0 1px rgba(212,175,55,.14);
  transform: translateY(0);
}

/* Brand hover - subtle scale, no jump */
#siteHeader .brand{
  transition: transform var(--dur-fast) var(--ease-premium), opacity var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#siteHeader .brand:hover{
  transform: scale(1.02);
}
#siteHeader .brand:active{
  transform: scale(.98);
}

/* Hamburger morph - ☰ to ✕ with rotate scale only */
#menuToggleBtn{
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
  font-variant-numeric: tabular-nums;
}
#menuToggleBtn:hover{
  transform: scale(1.05);
  background: rgba(255,255,255,.12);
}
#menuToggleBtn:active{
  transform: scale(.95);
}
#menuToggleBtn.open{
  transform: rotate(90deg) scale(1.05);
}

/* Desktop nav - pill slide background using ::after transform */
#mainNavDesktop{
  gap: 6px;
}
#mainNavDesktop a{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#mainNavDesktop a::after{
  content:'';
  position: absolute;
  inset: 0;
  background: rgba(212,175,55,.12);
  border-radius: inherit;
  transform: scale(.8);
  opacity:0;
  transition: transform var(--dur-base) var(--ease-premium), opacity var(--dur-fast) var(--ease-smooth);
  z-index:-1;
  will-change: transform, opacity;
}
#mainNavDesktop a:hover::after{
  transform: scale(1);
  opacity:1;
}
#mainNavDesktop a.active::after{
  transform: scale(1);
  opacity:1;
  background: rgba(212,175,55,.18);
}
#mainNavDesktop a.active{
  color: var(--gold);
  border-color: rgba(212,175,55,.24);
}

/* Mobile nav - full dvh calc(100dvh-56px) already, entrance premium */
#mainNav.mobile-nav{
  backdrop-filter: blur(24px);
  background: rgba(10,10,10,.96);
  border-top: 1px solid rgba(255,255,255,.08);
  will-change: transform, opacity;
  transform: translateY(-12px);
  opacity:0;
  transition: transform var(--dur-base) var(--ease-premium), opacity var(--dur-base) var(--ease-smooth);
}
#mainNav.mobile-nav.open{
  transform: translateY(0);
  opacity:1;
}
#mainNav.mobile-nav a{
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
  will-change: transform;
  transform: translateY(8px);
  opacity:0;
}
#mainNav.mobile-nav.open a{
  animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium) both;
}
#mainNav.mobile-nav.open a:nth-child(1){ animation-delay: 40ms; }
#mainNav.mobile-nav.open a:nth-child(2){ animation-delay: 80ms; }
#mainNav.mobile-nav.open a:nth-child(3){ animation-delay: 120ms; }
#mainNav.mobile-nav.open a:nth-child(4){ animation-delay: 160ms; }
#mainNav.mobile-nav.open a:nth-child(5){ animation-delay: 200ms; }
#mainNav.mobile-nav.open a:nth-child(6){ animation-delay: 240ms; }
#mainNav.mobile-nav.open a:nth-child(7){ animation-delay: 280ms; }
#mainNav.mobile-nav.open a:nth-child(8){ animation-delay: 320ms; }
#mainNav.mobile-nav.open a:nth-child(9){ animation-delay: 360ms; }
#mainNav.mobile-nav.open a:nth-child(n+10){ animation-delay: 400ms; }

#mainNav.mobile-nav a:hover{
  transform: translateX(-4px);
  background: rgba(255,255,255,.06);
}

/* Overlay - fade only */
#menuOverlay{
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,.48);
  transition: opacity var(--dur-base) var(--ease-smooth);
  will-change: opacity;
}
#menuOverlay.open{
  animation: premiumFadeIn var(--dur-base) var(--ease-smooth);
}

/* Ticker - premium edges mask, no layout shift */
#tickerTape{
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  will-change: transform;
}
#tickerTape .tape-track{
  will-change: transform;
  transition: opacity var(--dur-fast) var(--ease-smooth);
}
#tickerTape:hover .tape-track{
  opacity:.9;
}
.tape-item{
  transition: transform var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
.tape-item:hover{
  transform: scale(1.05);
}

/* ==================== PHASE 3: HOME ==================== */

/* Eyebrow + hero */
.home-eyebrow{
  transition: transform var(--dur-base) var(--ease-premium), opacity var(--dur-base) var(--ease-smooth);
}
.home-eyebrow:hover{
  transform: translateY(-1px);
  letter-spacing: .04em;
}

/* Clocks - premium */
#clocksGrid .clock-card{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
#clocksGrid .clock-card::before{
  content:'';
  position: absolute;
  inset:0;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212,175,55,.08), transparent 40%);
  opacity:0;
  transition: opacity var(--dur-base) var(--ease-smooth);
  pointer-events:none;
  z-index:0;
  will-change: opacity;
}
#clocksGrid .clock-card:hover::before{
  opacity:1;
}
#clocksGrid .clock-card .city{
  transition: transform var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#clocksGrid .clock-card:hover .city{
  transform: translateY(-1px);
}
#clocksGrid .clock-card .time{
  transition: transform var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
  font-variant-numeric: tabular-nums;
}
#clocksGrid .clock-card:hover .time{
  transform: scale(1.02);
}
.clock-status{
  transition: transform var(--dur-fast) var(--ease-premium), opacity var(--dur-fast) var(--ease-smooth);
}
.clock-dot{
  transition: transform var(--dur-fast) var(--ease-premium);
  will-change: transform;
}

/* Summary cards - bento premium */
#summaryGrid .summary-card{
  position: relative;
  overflow: hidden;
}
#summaryGrid .summary-card::after{
  content:'';
  position: absolute;
  top:0; left:0; right:0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.24), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-premium);
  will-change: transform;
}
#summaryGrid .summary-card:hover::after{
  transform: scaleX(1);
}
#summaryGrid .summary-card .summary-value{
  transition: transform var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
  font-variant-numeric: tabular-nums;
}
#summaryGrid .summary-card:hover .summary-value{
  transform: scale(1.02);
}

/* Home markets */
.home-markets-group{
  transition: transform var(--dur-base) var(--ease-premium);
  will-change: transform;
}
.home-markets-group:hover{
  transform: translateY(-2px);
}
.home-market-card{
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
.home-market-card .home-price{
  transition: transform var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-smooth);
  font-variant-numeric: tabular-nums;
  will-change: transform;
}
.home-market-card:hover .home-price{
  transform: scale(1.03);
}
.home-market-card .home-change{
  transition: transform var(--dur-fast) var(--ease-premium), opacity var(--dur-fast) var(--ease-smooth);
}
.home-market-card:hover .home-change{
  transform: translateY(-1px);
}

/* ==================== PHASE 4: MARKET ==================== */

/* Market controls */
.market-controls{
  animation: premiumFadeIn var(--dur-base) var(--ease-smooth) 100ms both;
}
.market-filter-btn{
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
.market-filter-btn:hover{
  transform: translateY(-1px) scale(1.02);
}
.market-filter-btn:active{
  transform: scale(.97);
}

/* Market cards - premium */
#marketGrid .market-card,
#forexGrid .market-card,
#iranAssetsGrid .market-card{
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#marketGrid .market-card .price,
#forexGrid .market-card .price,
#iranAssetsGrid .market-card .price{
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#marketGrid .market-card:hover .price,
#forexGrid .market-card:hover .price,
#iranAssetsGrid .market-card:hover .price{
  transform: scale(1.04);
}

/* LIVE badge pulse - scale only */
.live-badge,
.status-pill.live,
#marketStatusPill.live,
#iranStatusPill.live{
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.live-badge:hover,
.status-pill.live:hover{
  transform: scale(1.05);
}

/* Chart button */
.chart-btn{
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
.chart-btn:hover{
  transform: scale(1.08);
}
.chart-btn:active{
  transform: scale(.92);
}

/* Chart modal - premium blurIn + backdrop */
#chartModalV200{
  backdrop-filter: blur(16px);
  background: rgba(0,0,0,.64);
  transition: opacity var(--dur-base) var(--ease-smooth), backdrop-filter var(--dur-base) var(--ease-smooth);
  will-change: opacity, backdrop-filter;
}
#chartModalV200 .chart-modal-box{
  transition: transform var(--dur-base) var(--ease-premium), opacity var(--dur-base) var(--ease-smooth), filter var(--dur-base) var(--ease-premium);
  will-change: transform, opacity, filter;
  transform: scale(.96) translateY(12px);
  opacity:0;
  filter: blur(12px);
}
#chartModalV200.open .chart-modal-box{
  transform: scale(1) translateY(0);
  opacity:1;
  filter: blur(0);
}

/* ==================== PHASE 5: MUTA 7 + MOTAME + NOTIFICATIONS ==================== */

/* Muta 7 cards */
#mutaGrid .card3d{
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#mutaGrid .card3d .card-icon{
  transition: transform var(--dur-base) var(--ease-premium), background var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#mutaGrid .card3d:hover .card-icon{
  transform: scale(1.12) rotate(4deg);
}
#mutaGrid .card3d .card-arrow{
  transition: transform var(--dur-fast) var(--ease-premium), opacity var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#mutaGrid .card3d:hover .card-arrow{
  transform: translateX(-6px);
}

/* Muta detail modal */
#mutaDetailModal{
  backdrop-filter: blur(16px);
  transition: opacity var(--dur-base) var(--ease-smooth);
}
#mutaDetailModal .modal-box{
  transition: transform var(--dur-base) var(--ease-premium), opacity var(--dur-base) var(--ease-smooth), filter var(--dur-base) var(--ease-premium);
  will-change: transform, opacity, filter;
}

/* Motame - personal center */
#view-motame .card3d{
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
  will-change: transform;
}
#view-motame .card3d:hover{
  transform: translateY(-3px) scale(1.005);
}

/* Motame markets selector */
#motameMarketsGrid .market-card{
  transition: transform var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#motameMarketsGrid .market-card.selected{
  transform: scale(1.02);
  border-color: rgba(212,175,55,.32);
}

/* Motame notifications inside - #motameNotifications */
#motameNotifications{
  transition: opacity var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-premium);
  will-change: transform, opacity;
}
#motameNotifications .notif-item{
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
  will-change: transform;
  transform: translateY(4px);
  opacity:0;
  animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium) both;
}
#motameNotifications .notif-item:nth-child(1){ animation-delay: 0ms; }
#motameNotifications .notif-item:nth-child(2){ animation-delay: 50ms; }
#motameNotifications .notif-item:nth-child(3){ animation-delay: 100ms; }
#motameNotifications .notif-item:nth-child(4){ animation-delay: 150ms; }
#motameNotifications .notif-item:nth-child(n+5){ animation-delay: 200ms; }
#motameNotifications .notif-item:hover{
  transform: translateX(-4px);
}
#motameNotifications .notif-dot{
  transition: transform var(--dur-fast) var(--ease-premium);
  will-change: transform;
  animation: premiumPulseDot 2s var(--ease-smooth) infinite;
}
#motameNotifications .notif-item:hover .notif-dot{
  transform: scale(1.3);
}

/* Motame profile editor */
#motameProfileCard{
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
#motameProfileCard:hover{
  transform: translateY(-2px);
}

/* ==================== PHASE 6: FINANCE ==================== */

/* Finance tabs */
#fmTabs{
  animation: premiumFadeIn var(--dur-base) var(--ease-smooth) 80ms both;
}
.fm-tab{
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
.fm-tab::after{
  content:'';
  position: absolute;
  bottom:0; left:0; right:0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-premium);
  will-change: transform;
}
.fm-tab:hover::after{
  transform: scaleX(.6);
  transform-origin: left;
}
.fm-tab.active::after{
  transform: scaleX(1);
  transform-origin: left;
}
.fm-tab-panel{
  will-change: opacity, transform;
}
.fm-tab-panel.active{
  animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium);
}

/* Finance KPI 4 */
#fmKpiGrid .fm-kpi{
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#fmKpiGrid .fm-kpi:hover{
  transform: translateY(-4px) scale(1.01);
}
#fmKpiGrid .fm-kpi .kpi-value{
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-fast) var(--ease-premium);
  will-change: transform;
}
#fmKpiGrid .fm-kpi:hover .kpi-value{
  transform: scale(1.03);
}

/* Finance lists */
#fmTxList > div,
#fmBudgetsList > div,
#fmGoalsList > div,
#fmDebtsList > div,
#fmAssetsList > div{
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#fmTxList > div:hover,
#fmBudgetsList > div:hover,
#fmGoalsList > div:hover,
#fmDebtsList > div:hover,
#fmAssetsList > div:hover{
  transform: translateX(-3px);
}

/* Finance AI register */
#fmAiRegisterCard{
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
  will-change: transform;
  animation: premiumScaleIn var(--dur-base) var(--ease-premium) 100ms both;
}

/* ==================== PHASE 7: ASSISTANT 4 AIs ==================== */

/* Assistant hub */
.assistant-hub-grid .assistant-hub-card{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
.assistant-hub-grid .assistant-hub-card::before{
  content:'';
  position: absolute;
  inset:0;
  background: radial-gradient(500px circle at 0% 0%, rgba(212,175,55,.08), transparent 50%);
  opacity:0;
  transition: opacity var(--dur-base) var(--ease-smooth);
  pointer-events:none;
  will-change: opacity;
}
.assistant-hub-grid .assistant-hub-card:hover::before{
  opacity:1;
}
.assistant-hub-card .hub-icon{
  transition: transform var(--dur-base) var(--ease-premium), background var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
.assistant-hub-card:hover .hub-icon{
  transform: scale(1.15) rotate(-4deg);
}
.assistant-hub-enter{
  transition: transform var(--dur-fast) var(--ease-premium), gap var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
.assistant-hub-card:hover .assistant-hub-enter{
  transform: translateX(-6px);
  gap: 10px;
}

/* Assistant detail */
#assistantDetailWrap{
  animation: premiumSlideUp var(--dur-base) var(--ease-premium);
  will-change: transform, opacity;
}
.assistant-back-btn{
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
.assistant-back-btn:hover{
  transform: translateX(4px);
}

/* Chat bubbles */
.advisor-conv .advisor-msg{
  transition: transform var(--dur-base) var(--ease-premium), opacity var(--dur-base) var(--ease-smooth);
  will-change: transform, opacity;
}
.advisor-conv .advisor-msg.user{
  transform-origin: right bottom;
}
.advisor-conv .advisor-msg.assistant{
  transform-origin: left bottom;
}
.advisor-conv .advisor-msg:hover{
  transform: scale(1.01);
}

/* Typing dots */
.adv-dots span{
  animation: premiumTypingDot 1.4s infinite ease-in-out both;
  will-change: transform;
  transition: transform var(--dur-fast) var(--ease-premium);
}
.adv-dots span:nth-child(1){ animation-delay: -0.32s; }
.adv-dots span:nth-child(2){ animation-delay: -0.16s; }

/* Assistant input */
#assistantInput,
#fmAiRegisterInput,
#mutaDmInput{
  transition: border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-premium);
  will-change: transform, border-color, box-shadow;
}
#assistantInput:focus,
#fmAiRegisterInput:focus,
#mutaDmInput:focus{
  transform: scale(1.005);
  box-shadow: 0 0 0 3px rgba(212,175,55,.14);
}

/* ==================== PHASE 8: NEWS + CALENDAR ==================== */

/* News filter bar */
#newsFilterBar{
  animation: premiumFadeIn var(--dur-base) var(--ease-smooth) 80ms both;
}
.news-filter-chip{
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
.news-filter-chip:hover{
  transform: translateY(-1px) scale(1.02);
}
.news-filter-chip:active{
  transform: scale(.96);
}
.news-filter-chip.active{
  transform: scale(1.03);
}

/* News cards */
#newsGrid .news-card{
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#newsGrid .news-card .news-title{
  transition: color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-premium);
  will-change: transform;
}
#newsGrid .news-card:hover .news-title{
  transform: translateY(-1px);
}
#newsGrid .news-card .news-source{
  transition: color var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
}

/* News translate box - expand with grid-template-rows, no jump layout shift minimized */
.news-translate-box{
  display: grid;
  grid-template-rows: 0fr;
  opacity:0;
  transition: grid-template-rows var(--dur-base) var(--ease-premium), opacity var(--dur-base) var(--ease-smooth);
  will-change: grid-template-rows, opacity;
}
.news-translate-box.open{
  grid-template-rows: 1fr;
  opacity:1;
}
.news-translate-box > div{
  overflow: hidden;
}

/* Calendar */
#calendarFilterBar{
  animation: premiumFadeIn var(--dur-base) var(--ease-smooth) 80ms both;
}
.calendar-filter-btn{
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
.calendar-filter-btn:hover{
  transform: translateY(-1px) scale(1.02);
}
#calendarGrid .calendar-card{
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#calendarGrid .calendar-card:hover{
  transform: translateY(-3px) scale(1.01);
}
.calendar-card .cal-time{
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-premium);
  will-change: transform;
}
.calendar-card:hover .cal-time{
  transform: scale(1.05);
}

/* ==================== PHASE 9: CHAT, ACCOUNT, ABOUT, EFILE, ADMIN ==================== */

/* Chat */
#view-chat .chat-sidebar{
  animation: premiumSlideUp var(--dur-base) var(--ease-premium) 0ms both;
}
#view-chat .chat-main{
  animation: premiumSlideUp var(--dur-base) var(--ease-premium) 80ms both;
}
#mutaDmSidebar .dm-conv{
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#mutaDmSidebar .dm-conv:hover{
  transform: translateX(-3px);
}
#mutaDmMessages .msg{
  animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium);
  will-change: transform, opacity;
}

/* Account */
#view-account .account-card{
  animation: premiumScaleIn var(--dur-base) var(--ease-premium) 80ms both;
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
  will-change: transform;
}
#view-account .account-card:hover{
  transform: translateY(-2px);
}
#view-account input,
#view-account select{
  transition: border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-premium);
  will-change: transform;
}
#view-account input:focus,
#view-account select:focus{
  transform: scale(1.005);
  box-shadow: 0 0 0 3px rgba(212,175,55,.12);
}

/* About */
#view-about .about-cover{
  animation: premiumهوشمندrIn var(--dur-slow) var(--ease-premium);
  will-change: transform, filter, opacity;
  transition: transform var(--dur-slow) var(--ease-premium);
}
#view-about .about-cover:hover{
  transform: scale(1.02);
}
#view-about .about-pillar{
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#view-about .about-pillar:nth-child(1){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 0ms both; }
#view-about .about-pillar:nth-child(2){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 80ms both; }
#view-about .about-pillar:nth-child(3){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 160ms both; }
#view-about .about-pillar:nth-child(4){ animation: premiumSlideUp var(--dur-base) var(--ease-premium) 240ms both; }
#view-about .about-pillar:hover{
  transform: translateY(-4px) scale(1.01);
}

/* Efile */
#view-efile .efile-upload-area{
  transition: transform var(--dur-base) var(--ease-premium), border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}
#view-efile .efile-upload-area:hover{
  transform: scale(1.01);
  border-color: rgba(212,175,55,.32);
}
#view-efile .efile-upload-area.dragover{
  transform: scale(1.02);
  background: rgba(212,175,55,.06);
}

/* Admin */
#view-admin .admin-card{
  animation: premiumSlideUpSmall var(--dur-base) var(--ease-premium);
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
  will-change: transform;
}
#view-admin .admin-card:hover{
  transform: translateY(-2px);
}

/* ==================== PHASE 10: PAGE TRANSITIONS & SCROLL ==================== */

/* View transitions - exit fadeOut handled via JS class, but CSS only */
.view-section{
  transition: opacity var(--dur-base) var(--ease-smooth);
  will-change: opacity;
}
.view-section.active{
  animation: premiumSlideUp var(--dur-base) var(--ease-premium);
}
.view-section.exiting{
  animation: premiumFadeIn var(--dur-fast) var(--ease-smooth) reverse;
  opacity:0;
}

/* Scroll top button - premium */
#scrollTopBtn{
  transition: opacity var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-premium), background var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
  will-change: transform, opacity;
  transform: translateY(16px) scale(.8);
  opacity:0;
  pointer-events:none;
}
#scrollTopBtn.visible{
  transform: translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}
#scrollTopBtn:hover{
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 8px 24px rgba(212,175,55,.28);
}
#scrollTopBtn:active{
  transform: scale(.92);
}

/* Smooth scroll behavior - but respect reduced motion */
@media (prefers-reduced-motion: no-preference){
  html{
    scroll-behavior: smooth;
  }
}

/* ==================== PHASE 11: PWA & PERFORMANCE ==================== */

/* content-visibility for long lists - performance, no jump */
#marketGrid,
#forexGrid,
#iranAssetsGrid,
#newsGrid,
#calendarGrid,
#fmTxList,
#mutaDmMessages{
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* will-change only on hover/interaction, not always */
.card3d,
.clock-card,
.summary-card,
.home-market-card,
.market-card,
.news-card,
.calendar-card,
.assistant-hub-card{
  will-change: auto;
}
.card3d:hover,
.clock-card:hover,
.summary-card:hover,
.home-market-card:hover,
.market-card:hover,
.news-card:hover,
.calendar-card:hover,
.assistant-hub-card:hover{
  will-change: transform;
}

/* Ensure header 56px stable, no jump ever */
#siteHeader{
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  contain: layout style paint;
}

/* Ensure ticker 36px stable */
#tickerTape{
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  contain: layout style paint;
}

/* Ensure views don't cause scroll lock */
body.menu-open-v200-82{
  overflow: hidden;
}
body:not(.menu-open-v200-82){
  overflow: auto;
  overflow-y: auto;
}

/* ==================== PHASE 12: QA - FINAL POLISH ==================== */

/* No CLS - ensure all animated elements have contain */
.card-grid,
.home-markets-grid-wrapper,
.assistant-hub-grid,
#clocksGrid,
#summaryGrid{
  contain: layout style;
}

/* Ensure icons don't cause layout shift - FA + SVG_MAP */
.fa-solid,
.fa-regular,
.fa-brands,
.svg-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-premium);
  will-change: transform;
}
.fa-solid:hover,
.svg-icon:hover{
  transform: scale(1.1);
}

/* Ensure buttons never cause jump */
button,
a{
  -webkit-tap-highlight-color: transparent;
}

/* Ensure loading states don't jump */
.loading,
.skeleton,
.empty-state{
  animation: premiumFadeIn var(--dur-base) var(--ease-smooth);
}

/* Ensure LIVE badge never jumps */
.live-badge,
.status-pill,
#marketStatusPill,
#iranStatusPill,
#newsStatusPill{
  contain: layout style;
  will-change: transform, opacity;
  transition: transform var(--dur-fast) var(--ease-premium), opacity var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}

/* Final: ensure no !important spam, all transforms GPU accelerated, 60fps */


/* === 30-animations-best-iranian-foreign.css === */
/* MUTA v239 - 30-animations-best-iranian-foreign.css - BEST OF IRANIAN + FOREIGN - موتا مارکت + هوشمند + هوشمند + هوشمند + هوشمند + هوشمند + Apple + هوشمند */
/* Research: موتا مارکت 30M visitors 92% share - cart bounce, product card flip, skeleton, bottom sheet filters, floated bottom bar 4 icons, slider 5s dots, coach-mark */
/* هوشمند 6M daily trips 72M users - bottom sheet 3 snap min/mid/full spring response 0.4 damping 0.85, map real-time, blur background, super-app homepage revamp */
/* هوشمند - dark purple accent kinetic typography Inter Display bento 2.0 hover micro scale+shadow+content reveal scroll-linked 400ms load */
/* هوشمند - WebGL mesh gradient purple pink cyan orange Söhne live dashboard benchmark micro hover/click */
/* هوشمند - near-black electric Geist Sans shader animated gradients mixed media cells unified radius rhythm */
/* Apple - cubic-bezier(0.4,0,0.2,1) hover 100ms press 150ms modal 250ms page 350ms spring damping 1.0 response 0.3-0.4 backdrop-filter translucent chrome */
/* هوشمند - bento system Bakken & Baeck uniform gutters size-as-hierarchy narrative scroll counter-animated numbers */
/* Principles: Purposeful Quick Natural Choreographed Interruptible - durations micro 120-200ms UI 180-260ms small 220-320ms section 400-800ms hero 800-1600ms */
/* 0 !important, only transform+opacity, GPU, no jump */

:root{
  /* Apple + هوشمند + Material easing - best of foreign */
  --ease-apple: cubic-bezier(.4,0,.2,1); /* Apple standard - most natural */
  --ease-apple-out: cubic-bezier(0,0,.2,1); /* Decelerated - entering */
  --ease-apple-in: cubic-bezier(.4,0,1,1); /* Accelerated - leaving */
  --ease-expo: cubic-bezier(.16,1,.3,1); /* هوشمند expo out - premium slide */
  --ease-expo-out: cubic-bezier(.16,1,.3,1);
  --ease-spring-mild: cubic-bezier(.34,1.56,.64,1); /* Success playful - هوشمند spring */
  --ease-spring-snapp: cubic-bezier(.2,.9,.1,1); /* هوشمند bottom sheet snap */
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --ease-premium: var(--ease-expo);
  --ease-out: var(--ease-apple-out);
  --ease-in: var(--ease-apple-in);

  /* Durations - Apple + موتا مارکت + هوشمند system */
  --ms-50: 50ms;
  --ms-100: 100ms; /* Apple hover */
  --ms-150: 150ms; /* Apple button press, micro feedback */
  --ms-200: 200ms; /* Standard UI - موتا مارکت cart */
  --ms-250: 250ms; /* Modal - Apple */
  --ms-300: 300ms; /* Small transitions - هوشمند */
  --ms-350: 350ms; /* Page transition - Apple */
  --ms-400: 400ms; /* Section entrance - هوشمند 400ms load */
  --ms-500: 500ms; /* Emphasis */
  --ms-800: 800ms; /* Hero */
  --dur-fast: var(--ms-150);
  --dur-base: var(--ms-350);
  --dur-slow: var(--ms-500);

  /* Stagger - موتا مارکت + هوشمند choreography */
  --stagger-digikala: 60ms;
  --stagger-linear: 40ms;
  --stagger-snapp: 80ms;

  /* Spring - هوشمند bottom sheet */
  --spring-response: 0.4;
  --spring-damping: 0.85;
  --spring-bounce: 0.2;

  /* Gold - Muta brand */
  --gold-glow: 0 0 0 1px rgba(212,175,55,.14), 0 8px 32px rgba(212,175,55,.12);
}

/* ==================== APPLE + موتا مارکت + هوشمند - CORE KEYFRAMES ==================== */

@keyframes appleFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes appleSlideUp{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes appleScaleIn{
  from{ opacity:0; transform: scale(.96); }
  to{ opacity:1; transform: scale(1); }
}
@keyframes digikalaCartBounce{
  0%{ transform: scale(1); }
  30%{ transform: scale(.92); }
  60%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}
@keyframes digikalaCartFly{
  0%{ transform: translateY(0) scale(1); opacity:1; }
  50%{ transform: translateY(-20px) scale(1.1); opacity:.8; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}
@keyframes snappBottomSheetIn{
  from{ transform: translateY(100%); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
@keyframes snappBottomSheetOut{
  from{ transform: translateY(0); opacity:1; }
  to{ transform: translateY(100%); opacity:0; }
}
@keyframes snappSpringIn{
  0%{ transform: translateY(24px) scale(.96); opacity:0; }
  60%{ transform: translateY(-4px) scale(1.02); opacity:1; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}
@keyframes linearBentoReveal{
  from{ opacity:0; transform: translateY(16px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes stripeGlow{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes rampCounter{
  from{ transform: translateY(8px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
@keyframes appleهوشمندrIn{
  from{ opacity:0; filter: blur(16px); transform: scale(1.04); }
  to{ opacity:1; filter: blur(0); transform: scale(1); }
}

/* ==================== موتا مارکت INSPIRED - E-COMMERCE MICRO ==================== */

/* موتا مارکت product card - hover flip + cart bounce */
#marketGrid .market-card,
#forexGrid .market-card,
#iranAssetsGrid .market-card,
.home-market-card{
  /* موتا مارکت: product card with subtle lift + shadow + border gold on hover */
  transition: transform var(--ms-300) var(--ease-expo), box-shadow var(--ms-300) var(--ease-apple), border-color var(--ms-200) var(--ease-apple), background var(--ms-200) var(--ease-apple);
  will-change: transform;
  /* هوشمند + موتا مارکت: bento with shared radius rhythm */
  border-radius: 16px;
}
#marketGrid .market-card:hover,
#forexGrid .market-card:hover,
#iranAssetsGrid .market-card:hover,
.home-market-card:hover{
  /* موتا مارکت: lift 6px + gold glow + scale 1.015 */
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 16px 40px rgba(0,0,0,.20), 0 0 0 1px rgba(212,175,55,.16), 0 0 32px rgba(212,175,55,.14);
  border-color: rgba(212,175,55,.24);
}
#marketGrid .market-card:active,
.home-market-card:active{
  /* موتا مارکت: press compress - squash and stretch */
  transform: translateY(-2px) scale(.98);
  transition-duration: var(--ms-100);
}

/* موتا مارکت cart animation - when adding to watchlist */
.market-card.adding-to-cart{
  animation: digikalaCartBounce var(--ms-400) var(--ease-spring-mild);
}
.market-card .cart-fly-dot{
  position: absolute;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  opacity:0;
  will-change: transform, opacity;
}
.market-card.fly .cart-fly-dot{
  animation: digikalaCartFly var(--ms-500) var(--ease-expo);
}

/* موتا مارکت skeleton - shimmer with transform only */
.skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: stripeGlow 1.4s infinite linear;
  will-change: background-position;
}

/* ==================== هوشمند INSPIRED - SUPER-APP BOTTOM SHEET + FLOATING BAR ==================== */

/* هوشمند bottom sheet - mobile nav as bottom sheet with 3 snap points simulation */
#mainNav.mobile-nav{
  /* هوشمند: bottom sheet with blur background, spring animation, 3 positions */
  background: rgba(10,10,10,.96);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 24px 24px 0 0;
  border: 1px solid rgba(255,255,255,.08);
  border-bottom: none;
  box-shadow: 0 -8px 32px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.06);
  will-change: transform, opacity;
  transform: translateY(100%);
  opacity:0;
  transition: transform var(--ms-400) var(--ease-spring-snapp), opacity var(--ms-300) var(--ease-apple);
}
#mainNav.mobile-nav.open{
  transform: translateY(0);
  opacity:1;
  animation: snappBottomSheetIn var(--ms-400) var(--ease-spring-snapp);
}
#mainNav.mobile-nav.closing{
  animation: snappBottomSheetOut var(--ms-300) var(--ease-apple-in);
}
/* هوشمند: handle bar - visual drag indicator */
#mainNav.mobile-nav::before{
  content:'';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 5px;
  background: rgba(255,255,255,.24);
  border-radius: 10px;
  transition: background var(--ms-200) var(--ease-apple), transform var(--ms-200) var(--ease-apple);
  will-change: transform, background;
}
#mainNav.mobile-nav.open::before{
  background: rgba(255,255,255,.32);
}
#mainNav.mobile-nav:hover::before{
  transform: translateX(-50%) scaleX(1.2);
  background: rgba(255,255,255,.40);
}

/* هوشمند: floated bottom bar - 4 most used icons near thumb (we have 4 clocks) */
#clocksGrid{
  /* هوشمند: floated bottom bar concept - but for clocks, keep grid but add floating effect */
  position: relative;
}
#clocksGrid .clock-card{
  /* هوشمند: card with blur + spring + map-like real-time dot */
  backdrop-filter: blur(12px);
  transition: transform var(--ms-300) var(--ease-expo), box-shadow var(--ms-300) var(--ease-apple), border-color var(--ms-200) var(--ease-apple), background var(--ms-200) var(--ease-apple);
  will-change: transform;
  border-radius: 16px;
}
#clocksGrid .clock-card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,.20), var(--gold-glow);
}

/* هوشمند: slider dots - for ticker */
#tickerTape{
  position: relative;
}
#tickerTape::after{
  content:'';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  /* Dots hidden but concept - ticker is continuous */
  opacity:0;
}

/* ==================== هوشمند INSPIRED - BENTO 2.0 + KINETIC + SCROLL-LINKED ==================== */

/* هوشمند: bento grid 2.0 - hover micro scale + shadow + content reveal + nested */
#summaryGrid,
.home-markets-grid-wrapper,
#marketGrid,
#forexGrid,
#iranAssetsGrid,
#mutaGrid,
.assistant-hub-grid{
  /* هوشمند: 12-col grid 24px gutters, size-as-hierarchy, consistent radius 16-24px */
  gap: 16px;
}
#summaryGrid .summary-card,
.home-markets-group,
#marketGrid .market-card,
#mutaGrid .card3d,
.assistant-hub-grid .assistant-hub-card{
  /* هوشمند: card with technical label FIG + kinetic */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  transition: transform var(--ms-300) var(--ease-expo), box-shadow var(--ms-300) var(--ease-apple), border-color var(--ms-200) var(--ease-apple);
  will-change: transform;
}
#summaryGrid .summary-card::before,
#mutaGrid .card3d::before,
.assistant-hub-grid .assistant-hub-card::before{
  /* هوشمند: subtle gradient on hover - product UI only imagery */
  content:'';
  position: absolute;
  inset:0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 0%), rgba(212,175,55,.10), transparent 40%);
  opacity:0;
  transition: opacity var(--ms-300) var(--ease-apple);
  pointer-events:none;
  will-change: opacity;
  z-index:0;
}
#summaryGrid .summary-card:hover::before,
#mutaGrid .card3d:hover::before,
.assistant-hub-grid .assistant-hub-card:hover::before{
  opacity:1;
}
/* هوشمند: content reveal on hover - arrow shift */
#summaryGrid .summary-card .card-arrow,
#mutaGrid .card3d .card-arrow,
.assistant-hub-card .assistant-hub-enter{
  transition: transform var(--ms-200) var(--ease-expo), opacity var(--ms-200) var(--ease-apple);
  will-change: transform;
}
#summaryGrid .summary-card:hover .card-arrow,
#mutaGrid .card3d:hover .card-arrow,
.assistant-hub-card:hover .assistant-hub-enter{
  transform: translateX(-8px);
}

/* هوشمند: scroll-linked reveals - stagger with view-timeline (CSS native, no JS) */
@supports (animation-timeline: view()){
  #summaryGrid .summary-card,
  #marketGrid .market-card,
  #mutaGrid .card3d{
    animation: linearBentoReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

/* هوشمند: dark-by-default purple accent - we have gold accent, but add purple glow for premium */
.assistant-hub-card:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,.24), 0 0 0 1px rgba(212,175,55,.18), 0 0 40px rgba(168,85,247,.12);
}

/* ==================== هوشمند INSPIRED - WEBGL MESH GRADIENT + BENCHMARK MICRO ==================== */

/* هوشمند: WebGL mesh gradient - simulate with CSS gradient animation, purple pink cyan orange */
#view-home .hero-glow,
#view-market .market-hero-glow{
  position: absolute;
  inset: -100px;
  background: radial-gradient(ellipse at 20% 30%, rgba(168,85,247,.18) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 20%, rgba(236,72,153,.16) 0%, transparent 50%),
              radial-gradient(ellipse at 60% 80%, rgba(6,182,212,.14) 0%, transparent 50%),
              radial-gradient(ellipse at 20% 80%, rgba(249,115,22,.12) 0%, transparent 50%);
  filter: blur(40px);
  opacity:.6;
  pointer-events:none;
  animation: stripeGlow 20s ease-in-out infinite;
  will-change: background-position, opacity;
  z-index:-1;
}

/* هوشمند: benchmark micro-interactions - button hover with subtle shift + shadow */
.btn,
.market-filter-btn,
.news-filter-chip,
.calendar-filter-btn,
.fm-tab{
  /* هوشمند: Söhne typography + crisp + benchmark micro */
  transition: transform var(--ms-150) var(--ease-apple), background var(--ms-150) var(--ease-apple), border-color var(--ms-150) var(--ease-apple), color var(--ms-150) var(--ease-apple), box-shadow var(--ms-200) var(--ease-apple);
  will-change: transform;
}
.btn:hover,
.market-filter-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 0 0 1px rgba(212,175,55,.12);
}
.btn:active,
.market-filter-btn:active{
  transform: translateY(0) scale(.98);
  transition-duration: var(--ms-100);
}

/* هوشمند: live dashboard - price with tabular-nums + color transition */
.price,
.home-price,
.summary-value,
.kpi-value{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  transition: color var(--ms-200) var(--ease-apple), transform var(--ms-200) var(--ease-expo);
  will-change: transform, color;
}

/* ==================== هوشمند INSPIRED - SHADER + MIXED MEDIA CELLS + RADIUS RHYTHM ==================== */

/* هوشمند: near-black electric + shader animated gradients + mixed media unified radius */
#siteHeader{
  /* هوشمند: near-black #000 with electric accent + shader-like border */
  background: rgba(10,10,10,.84);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#siteHeader::after{
  /* هوشمند: subtle shader border glow */
  content:'';
  position: absolute;
  bottom:0; left:0; right:0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.24), transparent);
  opacity:0;
  transition: opacity var(--ms-300) var(--ease-apple);
  will-change: opacity;
}
#siteHeader.scrolled::after{
  opacity:1;
}

/* هوشمند: bento cells mixed media unified by shared background and radius rhythm */
.card3d,
.summary-card,
.market-card,
.news-card,
.calendar-card{
  /* هوشمند: shared radius 16px + padding rhythm 22-24px + background rhythm */
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
}
.card3d:hover,
.summary-card:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}

/* ==================== APPLE INSPIRED - SPRING + TRANSLUCENT CHROME + EASING ==================== */

/* Apple: spring with damping 1.0 no overshoot response 0.3-0.4 + translucent chrome */
#chartModalV200,
#mutaDetailModal,
#view-efile .efile-modal{
  /* Apple: backdrop-filter layer content scrolls under + blur 24px */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: rgba(0,0,0,.64);
  transition: opacity var(--ms-300) var(--ease-apple), backdrop-filter var(--ms-300) var(--ease-apple);
  will-change: opacity, backdrop-filter;
}
#chartModalV200 .chart-modal-box,
#mutaDetailModal .modal-box{
  /* Apple: modal spring - critically damped no overshoot */
  transition: transform var(--ms-350) var(--ease-apple), opacity var(--ms-300) var(--ease-apple), filter var(--ms-350) var(--ease-apple);
  will-change: transform, opacity, filter;
  transform: scale(.96) translateY(16px);
  opacity:0;
  filter: blur(16px);
}
#chartModalV200.open .chart-modal-box,
#mutaDetailModal.open .modal-box{
  transform: scale(1) translateY(0);
  opacity:1;
  filter: blur(0);
}

/* Apple: button press - subtle opacity not scale (iOS style) + spring */
.btn-apple{
  transition: opacity var(--ms-100) var(--ease-apple), transform var(--ms-150) var(--ease-apple);
  will-change: transform, opacity;
}
.btn-apple:active{
  opacity:.8;
  transform: scale(.97);
}

/* Apple: hover 100ms sharp ease-out, press 150ms, modal 250ms, page 350ms */
#mainNavDesktop a,
#mainNav a{
  transition-duration: var(--ms-150);
  transition-timing-function: var(--ease-apple);
}
#mainNavDesktop a:hover{
  transition-duration: var(--ms-100);
}

/* ==================== هوشمند INSPIRED - BENTO SYSTEM + COUNTER-ANIMATED NUMBERS ==================== */

/* هوشمند: bento system Bakken & Baeck uniform gutters size-as-hierarchy + narrative scroll counter */
#summaryGrid{
  /* هوشمند: 4 KPI above fold, size-as-hierarchy */
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
#summaryGrid .summary-card:nth-child(1){
  /* Hero 2x larger - but we have 3 equal, so first is hero with gradient */
  background: linear-gradient(135deg, rgba(212,175,55,.08), rgba(255,255,255,.02));
  border-color: rgba(212,175,55,.16);
}

/* هوشمند: counter-animated numbers - for summary values */
.summary-value,
.kpi-value,
.home-price,
.price{
  /* هوشمند: tabular-nums + counter animation */
  font-variant-numeric: tabular-nums;
  transition: transform var(--ms-200) var(--ease-expo), color var(--ms-200) var(--ease-apple);
  will-change: transform;
}
.summary-value.updating,
.kpi-value.updating{
  animation: rampCounter var(--ms-300) var(--ease-expo);
}

/* ==================== IRANIAN BEST - موتا مارکت + هوشمند + هوشمند COMBINED ==================== */

/* موتا مارکت: 7-day return badge + express delivery + 4M products - trust signals with animation */
.trust-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.20);
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  color: #10b981;
  transition: transform var(--ms-200) var(--ease-apple), background var(--ms-200) var(--ease-apple);
  will-change: transform;
}
.trust-badge:hover{
  transform: scale(1.05);
}

/* هوشمند: super-app homepage revamp - grouping related sections + floated bottom bar + slider 5s dots */
.super-app-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.super-app-grid .app-icon{
  aspect-ratio: 1;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--ms-200) var(--ease-spring-mild), background var(--ms-200) var(--ease-apple), box-shadow var(--ms-200) var(--ease-apple);
  will-change: transform;
}
.super-app-grid .app-icon:hover{
  transform: scale(1.08) translateY(-2px);
  background: rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.super-app-grid .app-icon:active{
  transform: scale(.92);
}

/* هوشمند: coach-mark - pointing most used features */
.coach-mark{
  position: relative;
}
.coach-mark::after{
  content:'';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(212,175,55,.20);
  animation: premiumPulseDot 2s var(--ease-apple) infinite;
  will-change: transform;
}

/* ==================== 2026 TRENDS - BENTO 2.0 ACTIVE + CSS SCROLL-TIMELINE + VIEW TRANSITIONS ==================== */

/* Bento 2.0 active tiles - video + variable aspect + hover reveal */
.bento-card-active{
  position: relative;
  overflow: hidden;
}
.bento-card-active video{
  position: absolute;
  inset:0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity:0;
  transition: opacity var(--ms-300) var(--ease-apple);
  will-change: opacity;
  pointer-events:none;
}
.bento-card-active:hover video{
  opacity:1;
}
.bento-card-active .bento-reveal{
  transform: translateY(8px);
  opacity:0;
  transition: transform var(--ms-300) var(--ease-expo), opacity var(--ms-200) var(--ease-apple);
  will-change: transform, opacity;
}
.bento-card-active:hover .bento-reveal{
  transform: translateY(0);
  opacity:1;
}

/* CSS Scroll-Timeline - native no JS, Chrome Edge Safari, performance */
@supports (animation-timeline: view()){
  .scroll-reveal{
    animation: appleSlideUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}

/* View Transitions API - Apple product page style with 30 lines CSS */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: var(--ms-350);
  animation-timing-function: var(--ease-apple);
}

/* ==================== FINAL POLISH - NO JUMP EVER + PERFORMANCE + ACCESSIBILITY ==================== */

/* Ensure no layout shift - all animations transform+opacity only */
*{
  /* Discourage layout animations */
}

/* Ensure header 56px + ticker 36px stable - no jump ever */
#siteHeader{
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  contain: layout style paint;
}
#tickerTape{
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  contain: layout style paint;
}

/* Performance - content-visibility + contain + will-change auto */
#marketGrid,
#forexGrid,
#iranAssetsGrid,
#newsGrid,
#calendarGrid,
#mutaGrid,
#clocksGrid,
#summaryGrid{
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
  contain: layout style;
}

/* Accessibility - prefers-reduced-motion + focus-visible + pause control */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #tickerTape .tape-track{
    animation: none !important;
  }
}
:where(a, button, input, select, textarea):focus-visible{
  outline: 2px solid rgba(212,175,55,.6);
  outline-offset: 2px;
  transition: outline-offset var(--ms-150) var(--ease-apple);
}

/* Ensure no scroll lock - body unlock guaranteed */
body.menu-open-v200-82{
  overflow: hidden;
}
body:not(.menu-open-v200-82){
  overflow: auto;
  overflow-y: auto;
}

/* Final: premium subtle + Iranian + foreign best combined, 60fps GPU */


/* FIX v259 - kinetic-word overlapping fix */
.kinetic-wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.35em;
  vertical-align: bottom;
  min-width: 3.5em;
}
.kinetic-word {
  display: inline-block;
  position: relative;
  transition: transform 400ms cubic-bezier(.16,1,.3,1), opacity 400ms cubic-bezier(.16,1,.3,1), filter 400ms cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity, filter;
}
.kinetic-word.entering {
  position: absolute;
  top: 0;
  left: 0;
}
.kinetic-word.exiting {
  position: absolute;
  top: 0;
  left: 0;
}

/* FIX v259 - kinetic-word overlapping fix */
.kinetic-wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.35em;
  vertical-align: bottom;
  min-width: 3.5em;
}
.kinetic-word {
  display: inline-block;
  position: relative;
  transition: transform 400ms cubic-bezier(.16,1,.3,1), opacity 400ms cubic-bezier(.16,1,.3,1), filter 400ms cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity, filter;
}
.kinetic-word.entering {
  position: absolute;
  top: 0;
  left: 0;
}
.kinetic-word.exiting {
  position: absolute;
  top: 0;
  left: 0;
}