/* v6 — premium motion & polish layer (Nov 2026).
   Only visual: no text, image or layout content changes. Loaded after style.css / v5.css.
   Everything moving is switched off for visitors who ask their device for reduced motion. */

:root{--na-ease:cubic-bezier(.22,.8,.24,1);--na-gold:#e8bd4f;--na-glow:0 22px 60px rgba(11,45,82,.16)}

/* ---------- scroll progress (thin bar under the header) ---------- */
#naProgress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,#c91f36,#e8bd4f 55%,#0b2d52);transform-origin:0 50%;transform:scaleX(0);transition:transform .12s linear}
html[dir="rtl"] #naProgress{transform-origin:100% 50%}

/* ---------- header: glass that tightens on scroll ---------- */
.site-header{transition:box-shadow .35s var(--na-ease),background-color .35s var(--na-ease),backdrop-filter .35s}
.site-header.na-scrolled{background:rgba(255,255,255,.86)!important;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 10px 30px rgba(11,45,82,.10)}
.main-nav a{position:relative}
.main-nav a::after{content:"";position:absolute;inset-inline:12%;bottom:-4px;height:2px;border-radius:2px;background:linear-gradient(90deg,#c91f36,var(--na-gold));
  transform:scaleX(0);transition:transform .35s var(--na-ease)}
.main-nav a:hover::after,.main-nav a.active::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- buttons: lift + light sweep ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s var(--na-ease),box-shadow .3s var(--na-ease),background-color .3s,color .3s,border-color .3s}
.btn::before{content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .7s var(--na-ease)}
.btn:hover::before{left:120%}
.btn:hover{transform:translateY(-2px)}
.btn-primary:hover{box-shadow:0 14px 30px rgba(201,31,54,.32)}
.btn-primary{background-size:200% 100%}
.btn:active{transform:translateY(0) scale(.98)}

/* ---------- hero: slow cinematic zoom + staged entrance ---------- */
.hero{overflow:hidden}
.hero-background{animation:naKenBurns 22s ease-out both}
@keyframes naKenBurns{from{scale:1.12}to{scale:1}}
.hero-content>*{animation:naRise .9s var(--na-ease) both}
.hero-content>*:nth-child(1){animation-delay:.05s}.hero-content>*:nth-child(2){animation-delay:.15s}
.hero-content>*:nth-child(3){animation-delay:.27s}.hero-content>*:nth-child(4){animation-delay:.39s}
.hero-content>*:nth-child(5){animation-delay:.51s}.hero-content>*:nth-child(6){animation-delay:.63s}
.hero-content>*:nth-child(7){animation-delay:.75s}.hero-content>*:nth-child(n+8){animation-delay:.85s}
@keyframes naRise{from{opacity:0;translate:0 28px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}
.hero-institute-logo{animation:naRise .9s var(--na-ease) both,naFloat 6s ease-in-out 1.2s infinite}
@keyframes naFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.hero h1{text-shadow:0 2px 30px rgba(255,255,255,.35)}

/* ---------- stats strip: soft shine ---------- */
.hero-stats{position:relative;overflow:hidden}
.hero-stats::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-35%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);animation:naSweep 7s ease-in-out 1.5s infinite}
@keyframes naSweep{0%{left:-35%}45%,100%{left:130%}}
.stat-icon{transition:transform .5s var(--na-ease)}
.hero-stats-grid>div:hover .stat-icon{transform:rotate(-12deg) scale(1.12)}

/* ---------- section titles: eyebrow line grows in ---------- */
.eyebrow{position:relative}
.na-reveal .eyebrow::before,.section-head .eyebrow::before{content:"";display:inline-block;vertical-align:middle;width:22px;height:2px;margin-inline-end:8px;border-radius:2px;
  background:linear-gradient(90deg,#c91f36,var(--na-gold));transform-origin:inline-start;transition:transform .8s var(--na-ease) .2s}
.na-reveal:not(.na-in) .eyebrow::before{transform:scaleX(0)}

/* ---------- cards: lift, glow border, image zoom ---------- */
.program-card,.category-card,.why-card,.imp-item,.pay-card,.contact-card,.course-card,.news-card,.p-card,.offer-card,.course-detail-card,.fact,.accredit-card{
  transition:transform .45s var(--na-ease),box-shadow .45s var(--na-ease),border-color .45s var(--na-ease)}
.program-card:hover,.category-card:hover,.why-card:hover,.imp-item:hover,.pay-card:hover,.contact-card:hover,.course-card:hover,.news-card:hover,.p-card:hover,.offer-card:hover,.accredit-card:hover{
  transform:translateY(-6px);box-shadow:var(--na-glow);border-color:rgba(232,189,79,.55)}
.category-card,.course-card,.news-card,.p-card,.offer-card{overflow:hidden}
.category-card img,.course-card img,.news-card img,.p-card img,.offer-card img,.training-slide img,.about-section img{transition:transform 1.1s var(--na-ease)}
.category-card:hover img,.course-card:hover img,.news-card:hover img,.p-card:hover img,.offer-card:hover img{transform:scale(1.07)}
.why-ico,.program-number{transition:transform .5s var(--na-ease),box-shadow .5s}
.why-card:hover .why-ico{transform:translateY(-3px) rotate(-8deg);box-shadow:0 10px 22px rgba(11,45,82,.25)}

/* ---------- scroll reveal (classes added by v6.js only to content below the fold) ---------- */
.na-reveal{opacity:0;translate:0 34px;transition:opacity .9s var(--na-ease),translate .9s var(--na-ease);transition-delay:var(--na-d,0s)}
.na-reveal.na-in{opacity:1;translate:0 0}
.na-reveal.na-zoom{translate:none;scale:.94;transition:opacity .9s var(--na-ease),scale .9s var(--na-ease);transition-delay:var(--na-d,0s)}
.na-reveal.na-zoom.na-in{scale:1}

/* ---------- training slider + zoom mock: gentle depth ---------- */
.training-slider{box-shadow:0 30px 80px rgba(11,45,82,.18)}
.zoom-call{transition:transform .6s var(--na-ease)}
.zoom-call:hover{transform:perspective(900px) rotateY(-4deg) rotateX(2deg)}

/* ---------- mission strip: shimmering title ---------- */
.mission-strip h2,.mission-strip p:first-of-type{background-size:200% auto}

/* ---------- footer links ---------- */
.site-footer a{transition:color .25s,opacity .25s}
.footer-cols a:hover{color:var(--na-gold)}

/* ---------- account pages ---------- */
.acct-card{animation:naRise .8s var(--na-ease) both}
.acct-grid .acct-card:nth-child(2){animation-delay:.12s}

/* ---------- accessibility: no motion when the visitor asks for less ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .na-reveal{opacity:1!important;translate:none!important;scale:none!important}
  #naProgress{display:none}
}