/* ویژن مدیا — لوگوی متحرک (چشم + لنز). استفاده:
   <span class="vm-logo"><i class="iris"></i></span>   (اندازه با width/height) */
.vm-logo, .brand-logo, .login-card .brand-mark{
  position:relative; display:inline-block; overflow:hidden; isolation:isolate; flex:none;
  background:#000 url(/public/brand/mark.webp) center/cover no-repeat !important;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 10px 26px -12px rgba(0,0,0,0.7) !important;
  animation:vmLogoGlow 6s ease-in-out infinite;
}
.vm-logo{width:40px; height:40px; border-radius:12px;}
.vm-logo.lg, .login-card .brand-mark{background-image:url(/public/brand/mark-512.webp) !important;}
.brand-logo svg{display:none !important;}
.brand-logo::after, .login-card .brand-mark::after{display:none !important;}
.vm-logo .iris, .brand-logo .iris, .brand-mark .iris{
  position:absolute; left:52.03%; top:52.61%; width:21.4%; height:21.4%; margin:-10.7% 0 0 -10.7%;
  border-radius:50%; background:url(/public/brand/iris.webp) center/cover no-repeat;
  animation:vmIris 9s cubic-bezier(.65,0,.35,1) infinite; will-change:transform;
}
/* برق عبوری */
.vm-logo::before, .brand-logo::before, .login-card .brand-mark::before{
  content:""; position:absolute; inset:-20%; z-index:2; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
  transform:translateX(-120%); animation:vmShine 7s ease-in-out infinite;
}
@keyframes vmIris{
  0%{transform:rotate(0) scale(1);}
  40%{transform:rotate(180deg) scale(.86);}
  55%{transform:rotate(180deg) scale(.86);}
  100%{transform:rotate(360deg) scale(1);}
}
@keyframes vmShine{0%,62%{transform:translateX(-120%);} 82%,100%{transform:translateX(120%);}}
@keyframes vmLogoGlow{
  0%,100%{filter:drop-shadow(-3px 0 6px rgba(239,68,68,0.35));}
  50%{filter:drop-shadow(3px 0 7px rgba(56,189,248,0.4));}
}
.vm-logo:hover .iris, a:hover > .vm-logo .iris, a:hover > .brand-logo .iris{animation-duration:2.4s;}
html.is-scrolling .vm-logo, html.is-scrolling .vm-logo *, html.is-scrolling .vm-logo::before,
html.is-scrolling .brand-logo, html.is-scrolling .brand-logo *, html.is-scrolling .brand-logo::before{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){
  .vm-logo, .vm-logo *, .vm-logo::before, .brand-logo, .brand-logo *, .brand-logo::before, .brand-mark, .brand-mark *, .brand-mark::before{animation:none !important;}
}
.vm-wordmark{display:inline-block; height:12px; width:107px; background:url(/public/brand/wordmark.webp) center/contain no-repeat;}
html[data-theme="light"] .vm-wordmark{filter:invert(1) brightness(.15);}
.login-card .brand-mark{display:block; margin-left:auto; margin-right:auto;}

/* لوگوی بدون پس‌زمینه (چشم شناور) — <span class="vm-eye"><i class="iris"></i></span> */
.vm-eye{position:relative; display:inline-block; width:160px; aspect-ratio:861/615; background:url(/public/brand/eye-alpha.webp) center/contain no-repeat;
  animation:vmEyeFloat 6s ease-in-out infinite, vmEyeGlow 5s ease-in-out infinite, vmBlink 7s ease-in-out infinite; transform-origin:50% 54%;}
.vm-eye .iris{position:absolute; left:52.03%; top:53.66%; width:21.37%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:url(/public/brand/iris.webp) center/cover no-repeat; animation:vmIrisC 9s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes vmIrisC{0%{transform:translate(-50%,-50%) rotate(0) scale(1);} 40%,55%{transform:translate(-50%,-50%) rotate(180deg) scale(.86);} 100%{transform:translate(-50%,-50%) rotate(360deg) scale(1);}}
@keyframes vmEyeFloat{50%{translate:0 -8px;}}
@keyframes vmEyeGlow{0%,100%{filter:drop-shadow(-10px 0 18px rgba(239,68,68,.45)) drop-shadow(0 0 2px rgba(255,255,255,.2));} 50%{filter:drop-shadow(10px 0 20px rgba(56,189,248,.5)) drop-shadow(0 0 2px rgba(255,255,255,.2));}}
@keyframes vmBlink{0%,93%,100%{scale:1 1;} 95.5%{scale:1 .08;}}
html[data-theme="light"] .vm-eye{filter:none; animation:vmEyeFloat 6s ease-in-out infinite, vmBlink 7s ease-in-out infinite;}
html[data-theme="light"] .vm-eye::before{content:""; position:absolute; inset:-14% -8%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side, #0b0f0d 62%, transparent);}
html.is-scrolling .vm-eye, html.is-scrolling .vm-eye .iris{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){ .vm-eye, .vm-eye .iris{animation:none !important;} }