/* Interaction & motion layer for /negotiation — loaded after negotiation-slides.css.
   Every animation here moves only transform/translate/opacity so it stays on the GPU. */

/* ---------- Slide transitions: overlapping enter + exit ---------- */
.nl-slide{backface-visibility:hidden}
.nl-slide.is-active{z-index:2;animation:nl-slide-in .56s cubic-bezier(.16,1,.3,1) both}
.nl-slide.is-leaving{z-index:1;display:block!important;pointer-events:none;overflow:hidden;animation:nl-slide-out .36s cubic-bezier(.4,0,1,1) both}
@keyframes nl-slide-in{
  from{opacity:0;transform:translate3d(0,calc(var(--nl-slide-direction,1) * 46px),0) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes nl-slide-out{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translate3d(0,calc(var(--nl-slide-direction,1) * -30px),0) scale(.985)}
}

/* ---------- Staggered content reveal ---------- */
.nl-reveal .nl-rv{animation:nl-rise .72s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--nl-i,0) * 55ms + 110ms)}
@keyframes nl-rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
.nl-reveal :is(h1,h2).nl-rv{animation-name:nl-rise-title;animation-duration:.8s}
@keyframes nl-rise-title{from{opacity:0;translate:0 28px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}

/* ---------- Deck bar: progress uses transform, CTA reacts at the offer ---------- */
.nl-deck-progress span{width:100%!important;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s cubic-bezier(.16,1,.3,1)!important;background:linear-gradient(270deg,#e7be6a,#ffab00)}
html[dir="ltr"] .nl-deck-progress span{transform-origin:0 50%}
.nl-deck-controls button{transition:background .15s,transform .15s}
.nl-deck-controls button:active:not(:disabled){transform:scale(.94)}
.nl-deck-buy.nl-pulse{animation:nl-cta-pulse 1.4s cubic-bezier(.2,.8,.2,1) 2}
@keyframes nl-cta-pulse{0%,100%{transform:none}35%{transform:scale(1.06)}60%{transform:scale(.98)}}
/* Re-implemented sheens: transform instead of animating `left` (no layout work each frame). */
.barayand-negotiation-product .nl-deck-buy:after{inset:-50% auto -50% 0!important;width:35%;left:0;transform:translateX(-180%) skewX(-20deg);animation:nl-sheen 7s ease-in-out infinite}
:is(.nl-offer__badge,.nl-button--primary,.nl-button--gold):after{inset:-50% auto -50% 0!important;left:0!important;transform:translateX(-190%) skewX(-18deg);animation-name:nl-sheen-wide!important}
@keyframes nl-sheen{0%,72%{transform:translateX(-180%) skewX(-20deg)}88%,100%{transform:translateX(430%) skewX(-20deg)}}
@keyframes nl-sheen-wide{0%,65%{transform:translateX(-190%) skewX(-18deg)}85%,100%{transform:translateX(320%) skewX(-18deg)}}

/* ---------- Buttons: magnetic pull + ripple ---------- */
.nl-button--primary,.nl-deck-buy,.nl-contact-phone{transition:translate .35s cubic-bezier(.2,.8,.2,1),background-color .15s,box-shadow .2s,transform .2s}
.nl-ripple-host{position:relative;overflow:hidden}
.nl-ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);pointer-events:none;animation:nl-ripple .65s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes nl-ripple{to{transform:scale(1);opacity:0}}

/* ---------- Card tilt + moving light (mouse only) ---------- */
html.nl-motion [data-nl-tilt]{transform-style:preserve-3d}
html.nl-motion [data-nl-tilt].is-tilting{transform:perspective(1000px) rotateX(var(--nl-rx,0deg)) rotateY(var(--nl-ry,0deg)) translate3d(0,-3px,0)!important;transition:transform .12s linear!important}
.nl-glare{position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--nl-gx,50%) var(--nl-gy,50%),rgba(255,255,255,.2),transparent 48%);transition:opacity .35s}
.is-tilting>.nl-glare{opacity:1}
html.dark .nl-glare,html[data-theme="dark"] .nl-glare{background:radial-gradient(circle at var(--nl-gx,50%) var(--nl-gy,50%),rgba(255,226,160,.12),transparent 48%)}

/* ---------- Video cards: inviting play buttons ---------- */
.nl-introduction-video>img,.nl-course-video>img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.nl-introduction-video:hover>img,.nl-course-video:hover>img{transform:scale(1.04)}
.nl-introduction-video__play{animation:nl-play-ring 2.6s ease-out infinite}
@keyframes nl-play-ring{0%{box-shadow:0 0 0 0 rgba(240,197,114,.55)}70%,100%{box-shadow:0 0 0 22px rgba(240,197,114,0)}}
.nl-slide:not(.is-active) .nl-introduction-video__play{animation:none}

/* ---------- "More below" hint ---------- */
.nl-more-hint{position:fixed;z-index:9400;left:50%;bottom:calc(var(--nl-deck-bar-height) + env(safe-area-inset-bottom) + 14px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:8px 14px 8px 12px;border:1px solid #e7be6a80;border-radius:99px;background:#0b292bf0;color:#f6e3b4;font:700 13px "NL Yekan",Tahoma,sans-serif;box-shadow:0 10px 28px #0005;cursor:pointer;animation:nl-hint-in .45s cubic-bezier(.16,1,.3,1) both}
.nl-more-hint svg{width:18px;height:18px;animation:nl-bob 1.4s ease-in-out infinite}
.nl-more-hint[hidden]{display:none}
@keyframes nl-hint-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes nl-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
html:not(.nl-deck-active) .nl-more-hint{display:none}

/* ---------- First-visit navigation hint ---------- */
.nl-nav-hint{position:fixed;z-index:9450;left:50%;bottom:calc(var(--nl-deck-bar-height) + env(safe-area-inset-bottom) + 16px);display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:10px 16px;border-radius:14px;background:#ffffff;color:#123c3e;border:1px solid #d9c18a;font:700 13px/1.7 "NL Yekan",Tahoma,sans-serif;box-shadow:0 14px 40px #0003;opacity:0;transform:translate(-50%,16px);transition:opacity .4s,transform .45s cubic-bezier(.16,1,.3,1);pointer-events:none}
.nl-nav-hint.is-visible{opacity:1;transform:translate(-50%,0)}
.nl-nav-hint svg{width:20px;height:20px;flex:none;color:#c4973f;animation:nl-bob 1.4s ease-in-out infinite}
html.dark .nl-nav-hint,html[data-theme="dark"] .nl-nav-hint{background:#113639;color:#f2e6c8;border-color:#476563}

/* ---------- Fit self-check ---------- */
.nl-fit-tip{display:flex;align-items:center;gap:7px;margin:4px 0 10px;font-size:13px;color:var(--ed-gold,#b98a2f)}
.nl-fit-tip svg{width:17px;height:17px;flex:none}
#main-content.nl-editorial .nl-fit__yes li{cursor:pointer;border-radius:10px;padding:6px 34px 6px 8px;margin-inline:-8px;transition:background-color .2s,color .2s;-webkit-tap-highlight-color:transparent;user-select:none}
#main-content.nl-editorial .nl-fit__yes li:hover{background:color-mix(in srgb,var(--ed-green,#13796f) 7%,transparent)}
#main-content.nl-editorial .nl-fit__yes li:focus-visible{outline:2px solid var(--ed-green,#13796f);outline-offset:1px}
#main-content.nl-editorial .nl-fit__yes li:before{width:18px;height:18px;right:8px;top:50%;margin-top:-9px;border-radius:6px;background:transparent;border:1.5px solid color-mix(in srgb,var(--ed-green,#13796f) 55%,transparent);transition:background-color .2s,border-color .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
#main-content.nl-editorial .nl-fit__yes li:after{content:"";position:absolute;right:14.5px;top:50%;width:5px;height:9px;margin-top:-6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
#main-content.nl-editorial .nl-fit__yes li.is-checked{color:var(--ed-ink,#0b292b)}
#main-content.nl-editorial .nl-fit__yes li.is-checked:before{background:var(--ed-green,#13796f);border-color:var(--ed-green,#13796f);transform:scale(1.08)}
#main-content.nl-editorial .nl-fit__yes li.is-checked:after{transform:rotate(45deg) scale(1)}
.nl-fit-result{display:grid;gap:10px;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.16,1,.3,1),opacity .3s,margin .3s}
.nl-fit-result.is-on{max-height:220px;opacity:1;margin-top:14px}
.nl-fit-result__meter{height:8px;border-radius:99px;background:color-mix(in srgb,var(--ed-green,#13796f) 12%,transparent);overflow:hidden}
.nl-fit-result__meter span{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(270deg,var(--ed-green,#13796f),#e7be6a);transform-origin:100% 50%;transform:scaleX(var(--nl-fit,0));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.nl-fit-result p{margin:0;font-size:14px;line-height:1.8;color:var(--ed-ink,#0b292b)}
.nl-fit-result.is-strong p b{color:var(--ed-green,#13796f)}
.nl-fit-result__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:11px;background:#ffab00;color:#172827!important;font:900 16px "NL Peyda",sans-serif;text-decoration:none;animation:nl-hint-pop .5s cubic-bezier(.16,1,.3,1) both}
.nl-fit-result__cta svg{width:18px;height:18px}
@keyframes nl-hint-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- Situation chips (problem slide) ---------- */
#main-content.nl-editorial [data-nl-situation]{cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s}
#main-content.nl-editorial [data-nl-situation]:hover{border-color:#e7be6a;transform:translateY(-2px)}
#main-content.nl-editorial [data-nl-situation][aria-pressed="true"]{background:#e7be6a;border-color:#e7be6a;color:#123335}
#main-content.nl-editorial [data-nl-situation]:focus-visible{outline:2px solid #e7be6a;outline-offset:2px}
#main-content.nl-editorial .nl-situation-answer{margin:14px 0 0;padding:12px 14px;border-radius:12px;border:1px solid #e7be6a55;background:#e7be6a14;font-size:14px;line-height:1.9;color:#dcebe6}
.nl-situation-answer b{color:#e7be6a}
.nl-situation-answer.is-in{animation:nl-hint-pop .4s cubic-bezier(.16,1,.3,1) both}

/* ---------- Decision map: explorable nodes; glow via opacity (was animating box-shadow) ---------- */
.nl-decision-map>span{animation:none!important;cursor:pointer;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s,border-color .2s}
.nl-decision-map>span:before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid #d5b16a;box-shadow:0 10px 35px #c79c3230;opacity:0;pointer-events:none;animation:nl-node-glow 12s ease-in-out infinite}
.nl-decision-map>span:nth-of-type(2):before{animation-delay:3s}.nl-decision-map>span:nth-of-type(3):before{animation-delay:6s}.nl-decision-map>span:nth-of-type(4):before{animation-delay:9s}
@keyframes nl-node-glow{0%,25%,100%{opacity:0}10%,15%{opacity:1}}
.nl-decision-map.is-exploring>span{opacity:.5}
.nl-decision-map.is-exploring>span.is-focus{opacity:1;transform:scale(1.06)}
.nl-decision-map.is-exploring>span.is-focus:before{animation:none;opacity:1}
.nl-decision-map>span:focus-visible{outline:2px solid #e7be6a;outline-offset:3px}
.nl-decision-map__center small{max-width:118px;text-align:center;line-height:1.6}
.nl-decision-map__center.is-swap :is(b,small){animation:nl-hint-pop .35s cubic-bezier(.16,1,.3,1) both}
.nl-slide:not(.is-active) .nl-decision-map>span:before{animation-play-state:paused}
.nl-map-tip{max-width:420px;min-height:3.6em;margin:18px auto 0;padding:0 12px;text-align:center;font-size:14px;line-height:1.8;color:#b7d2cb;opacity:.75}
.nl-map-tip.is-on{color:#f3dfae;opacity:1}
.nl-map-tip.is-in{animation:nl-hint-pop .35s cubic-bezier(.16,1,.3,1) both}

/* ---------- Section number 01 for the main course ---------- */
#main-content.nl-editorial .nl-teacher{position:relative}
#main-content.nl-editorial .nl-teacher>.nl-layer__index{position:absolute;z-index:3;font-family:"NL Peyda",sans-serif}

/* ---------- Book titles: English names in a Latin face (fixes «۳-D») ---------- */
#main-content.nl-editorial .nl-book-card figcaption [dir="ltr"]{font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-feature-settings:normal}

/* ---------- Video dialog: close button no longer covers «BARAYAND · NEGOTIATION» ---------- */
.nl-dialog__chrome{padding-left:46px!important}

/* ---------- Mobile: price visible in the bottom bar, offer card before the list ---------- */
@media(max-width:767px){
  .nl-deck-count{display:none}
  .barayand-negotiation-product .nl-deck-buy{min-width:118px;padding-inline:14px}
  .nl-deck-offer{gap:9px}
  .nl-deck-offer>div{display:grid!important;gap:0}
  .nl-deck-offer>div small{display:none}
  .nl-deck-offer>div b{font-size:15px;white-space:nowrap;line-height:1.3}
  .nl-deck-offer>div b span{font-size:10px}
  .nl-deck-offer>div:before{content:"۵۰٪ تخفیف";font:700 10px "NL Yekan",sans-serif;color:#e7be6a}
  #main-content.nl-editorial .nl-offer__grid{gap:0}
  #main-content.nl-editorial .nl-offer__copy{display:contents}
  #main-content.nl-editorial .nl-offer__copy>.nl-kicker{order:1}
  #main-content.nl-editorial .nl-offer__copy>h2{order:2}
  #main-content.nl-editorial .nl-offer__copy>p{order:3;margin-bottom:20px}
  #main-content.nl-editorial .nl-offer__checkout{order:4}
  #main-content.nl-editorial .nl-offer__copy>ul{order:5;margin-top:22px}
  .nl-more-hint{font-size:12px;padding:7px 12px 7px 10px}
  .nl-map-tip{font-size:13px;margin-top:12px}
}
@media(max-width:360px){
  .nl-deck-offer>div{display:none!important}
}

/* ---------- Respect reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .nl-slide.is-active,.nl-slide.is-leaving,.nl-reveal .nl-rv,.nl-deck-buy.nl-pulse,.nl-introduction-video__play,.nl-more-hint,.nl-more-hint svg,.nl-nav-hint svg,.nl-decision-map>span:before,.nl-fit-result__cta,.nl-situation-answer.is-in,.nl-map-tip.is-in{animation:none!important}
  .nl-slide.is-leaving{display:none!important}
  html.nl-motion [data-nl-tilt].is-tilting{transform:none!important}
  .nl-introduction-video:hover>img,.nl-course-video:hover>img{transform:none}
}
html.nl-tab-hidden *{animation-play-state:paused!important}
@media print{.nl-more-hint,.nl-nav-hint{display:none!important}}