/* ==========================================================================
   Negavid — "What's new" announcement widget
   Scoped stylesheet: every rule is namespaced under .nvwn-root so it cannot
   leak onto the host page, and every class/keyframe uses an "nvwn-" prefix.
   Safe to include as-is on a production site.
   ========================================================================== */

/* Local design tokens — scoped to the widget root, NOT :root,
   so they never override any variables your site already defines. */
.nvwn-root{
  --nvwn-bg:#0A0C11;
  --nvwn-surface:#14171F;
  --nvwn-surface-2:#1C2029;
  --nvwn-stroke:#262B36;
  --nvwn-text-1:#EDEEF2;
  --nvwn-text-2:#9299AA;
  --nvwn-text-3:#5B6272;
  --nvwn-brand:#4E7CFF;
  --nvwn-brand-glow:#4E7CFF55;
  --nvwn-new:#FF6B4A;

  /* isolate from host page stacking / fonts, without resetting the page */
  direction:rtl;
  font-family:'IRANYekanX', Tahoma, Arial, sans-serif;
  line-height:1.5;
  color:var(--nvwn-text-1);
}

/* box-sizing kept local to the widget only */
.nvwn-root, .nvwn-root *, .nvwn-root *::before, .nvwn-root *::after{
  box-sizing:border-box;
}

/* ---------- wrapper for fab + panel ---------- */
.nvwn-wrap{
  position:fixed;
  bottom:24px; right:24px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  z-index:2147483000; /* sit above typical site UI without an inline !important war */
  transition:opacity .4s ease, transform .4s ease;
}
.nvwn-wrap.nvwn-dismissed{
  opacity:0;
  transform:translateY(14px) scale(.92);
  pointer-events:none;
}

/* ---------- fab: hidden until the sketch draws it in ---------- */
.nvwn-fab-container{
  position:relative;
  width:52px; height:52px;
}

.nvwn-sketch{
  position:absolute;
  inset:-4px;
  width:60px; height:60px;
  overflow:visible;
  pointer-events:none;
}
.nvwn-sketch path{
  fill:none;
  stroke:var(--nvwn-brand);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:300;
  stroke-dashoffset:300;
  transition:stroke-dashoffset 1.05s cubic-bezier(.25,.6,.35,1);
}
.nvwn-sketch.nvwn-drawing path{stroke-dashoffset:0;}
.nvwn-sketch.nvwn-drawing{animation:nvwn-pencil-wobble 1.05s ease-in-out;}
@keyframes nvwn-pencil-wobble{
  0%{transform:rotate(0deg);}
  18%{transform:rotate(-2deg);}
  38%{transform:rotate(1.4deg);}
  58%{transform:rotate(-1.2deg);}
  78%{transform:rotate(1.6deg);}
  100%{transform:rotate(0deg);}
}
.nvwn-sketch.nvwn-fade path{
  transition:opacity .3s ease;
  opacity:0;
}

.nvwn-fab{
  position:relative;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--nvwn-surface-2);
  border:1px solid var(--nvwn-stroke);
  display:flex; align-items:center; justify-content:center;
  color:var(--nvwn-brand);
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0;
  transform:scale(.5);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, box-shadow .18s ease, border-color .18s ease;
}
.nvwn-fab.nvwn-show{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}
.nvwn-fab.nvwn-show:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.4), 0 0 0 6px var(--nvwn-brand-glow);
  border-color:var(--nvwn-brand);
}
.nvwn-fab svg{width:22px; height:22px; display:block;}
.nvwn-fab .nvwn-icon-close{display:none;}
.nvwn-fab.nvwn-is-open .nvwn-icon-default{display:none;}
.nvwn-fab.nvwn-is-open .nvwn-icon-close{display:block;}
.nvwn-fab.nvwn-is-open .nvwn-ring{display:none;}

.nvwn-ring{
  position:absolute; inset:-4px;
  border-radius:50%;
  border:1.5px solid var(--nvwn-new);
  opacity:0;
  animation:nvwn-ring-pulse 2.6s ease-out infinite;
}
@keyframes nvwn-ring-pulse{
  0%{opacity:.55; transform:scale(1);}
  100%{opacity:0; transform:scale(1.55);}
}
.nvwn-fab.nvwn-burst::before{
  content:"";
  position:absolute; inset:-4px;
  border-radius:50%;
  border:2px solid var(--nvwn-brand);
  animation:nvwn-burst-ring .8s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes nvwn-burst-ring{
  0%{opacity:.9; transform:scale(1);}
  100%{opacity:0; transform:scale(2.6);}
}

/* ---------- announcement panel ---------- */
.nvwn-panel{
  position:fixed;
  bottom:88px; right:24px;
  width:340px;
  max-width:calc(100vw - 48px);
  background:var(--nvwn-surface);
  border:1px solid var(--nvwn-stroke);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  overflow:hidden;
  z-index:2147483000;
  opacity:0;
  transform:scale(.4) translateY(40px);
  filter:blur(6px);
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease, filter .28s ease;
}
.nvwn-panel.nvwn-open{
  opacity:1;
  transform:scale(1) translateY(0);
  filter:blur(0);
  pointer-events:auto;
}
.nvwn-panel.nvwn-grand-open{
  animation:nvwn-panel-grand-in .7s cubic-bezier(.2,.85,.25,1.15) forwards;
}
@keyframes nvwn-panel-grand-in{
  0%  {opacity:0; transform:scale(.4) translateY(40px); filter:blur(6px);}
  55% {opacity:1; transform:scale(1.045) translateY(-4px); filter:blur(0);}
  78% {transform:scale(.985) translateY(2px);}
  100%{opacity:1; transform:scale(1) translateY(0); filter:blur(0);}
}
.nvwn-panel::before{
  content:"";
  position:absolute; inset:-30px;
  background:radial-gradient(60% 60% at 80% 100%, var(--nvwn-brand-glow), transparent 70%);
  opacity:0;
  pointer-events:none;
  z-index:-1;
}
.nvwn-panel.nvwn-grand-open::before{
  animation:nvwn-glow-flash 1s ease-out forwards;
}
@keyframes nvwn-glow-flash{
  0%{opacity:0;} 30%{opacity:1;} 100%{opacity:0;}
}

.nvwn-panel-media{
  height:130px;
  background:
    radial-gradient(120% 140% at 20% 0%, #2a3a6e 0%, transparent 55%),
    radial-gradient(120% 140% at 90% 100%, #6e2a4e 0%, transparent 55%),
    var(--nvwn-surface-2);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .5s ease, transform .5s ease;
}
.nvwn-panel-media.nvwn-show{opacity:1; transform:translateY(0);}
.nvwn-panel-media svg{width:40px; height:40px; color:#fff; opacity:.9;}

.nvwn-panel-body{padding:16px 18px 14px;}

.nvwn-eyebrow{
  font-size:11px; font-weight:700; color:var(--nvwn-new);
  letter-spacing:.3px; margin:0 0 6px;
  opacity:0; transform:translateY(6px);
}
.nvwn-title{
  font-size:15.5px; font-weight:700; margin:0 0 8px; color:var(--nvwn-text-1);
  opacity:0; transform:translateY(6px);
}
.nvwn-panel.nvwn-grand-open .nvwn-eyebrow{animation:nvwn-fade-up .45s ease .25s forwards;}
.nvwn-panel.nvwn-grand-open .nvwn-title{animation:nvwn-fade-up .45s ease .4s forwards;}
@keyframes nvwn-fade-up{to{opacity:1; transform:translateY(0);}}
/* animation-fill-mode:forwards only holds its end state while the
   triggering class (.nvwn-grand-open) is still applied — once that class
   is removed the animation is torn down and opacity would fall back to the
   base 0 state. .nvwn-settled is swapped in at the same moment so the
   final visible values (opacity:1, translateY(0)) never actually change. */
.nvwn-panel.nvwn-settled .nvwn-eyebrow,
.nvwn-panel.nvwn-settled .nvwn-title{
  opacity:1;
  transform:translateY(0);
}

.nvwn-desc{
  font-size:13px; line-height:1.9; color:var(--nvwn-text-2); margin:0 0 14px;
  min-height:74px;
}
.nvwn-desc.nvwn-typing::after{
  content:"";
  display:inline-block;
  width:2px; height:13px;
  background:var(--nvwn-brand);
  margin-inline-start:2px;
  vertical-align:-2px;
  animation:nvwn-blink 0.9s step-end infinite;
}
@keyframes nvwn-blink{50%{opacity:0;}}

.nvwn-actions{display:flex; align-items:center; justify-content:space-between;}

.nvwn-more{
  opacity:0;
  transform:translateY(8px) scale(.94);
  pointer-events:none;
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700;
  color:#fff;
  background:linear-gradient(135deg, var(--nvwn-brand), #6f5cff);
  padding:9px 16px;
  border-radius:10px;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(78,124,255,.35);
  transition:opacity .35s ease, transform .35s ease;
}
.nvwn-more.nvwn-show{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
  animation:nvwn-cta-pop .5s cubic-bezier(.3,.8,.3,1.4) forwards, nvwn-cta-pulse 1.8s ease-in-out 1s infinite;
}
@keyframes nvwn-cta-pop{
  0%{transform:translateY(8px) scale(.9);}
  60%{transform:translateY(-2px) scale(1.05);}
  100%{transform:translateY(0) scale(1);}
}
@keyframes nvwn-cta-pulse{
  0%,100%{box-shadow:0 6px 16px rgba(78,124,255,.35);}
  50%{box-shadow:0 6px 22px rgba(78,124,255,.7), 0 0 0 5px var(--nvwn-brand-glow);}
}
.nvwn-more svg{width:14px; height:14px; transform:scaleX(-1); animation:nvwn-arrow-nudge 1.4s ease-in-out 1.2s infinite;}
@keyframes nvwn-arrow-nudge{
  0%,100%{transform:scaleX(-1) translateX(0);}
  50%{transform:scaleX(-1) translateX(-3px);}
}

.nvwn-dismiss{
  font-size:12px; color:var(--nvwn-text-3);
  background:none; border:none; cursor:pointer;
  font-family:inherit;
  padding:0;
  opacity:0;
  transition:opacity .35s ease;
}
.nvwn-dismiss.nvwn-show{opacity:1;}

.nvwn-older{
  border-top:1px solid var(--nvwn-stroke);
  padding:10px 18px 14px;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
.nvwn-older.nvwn-show{opacity:1; transform:translateY(0);}
.nvwn-older-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 0;
  font-size:12.5px; color:var(--nvwn-text-3);
}
.nvwn-older-item .nvwn-tag{
  width:6px; height:6px; border-radius:50%;
  background:var(--nvwn-text-3); flex-shrink:0;
}
.nvwn-older-item b{color:var(--nvwn-text-2); font-weight:500;}

/* small screens: keep the panel comfortably on-screen */
@media (max-width:420px){
  .nvwn-wrap{ right:12px; bottom:16px; }
  .nvwn-panel{ right:12px; width:calc(100vw - 24px); }
}