/* =====================================================================
   NEWTRI extras layer - load AFTER styles.css and your animation CSS
   ===================================================================== */

/* ---------- 1. OPENING CURTAIN ---------- */
html.nx-loading{overflow:hidden}
html.nx-loading::before{content:"";position:fixed;inset:0;background:#031B3A;z-index:99998}
html.nx-loading .nx-line>span{animation-play-state:paused}   /* hero headline waits for the curtain */

#nxCurtain{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center}
#nxCurtain .nx-cp{position:absolute;top:0;bottom:0;width:50.6%;background:#031B3A;
  transition:transform 1.1s cubic-bezier(.77,0,.18,1),box-shadow 1.1s ease}
#nxCurtain .nx-cl{left:0}
#nxCurtain .nx-cr{right:0}
#nxCurtain .nx-cmid{position:relative;z-index:2;text-align:center;padding:0 16px;
  transition:opacity .5s ease,transform .8s cubic-bezier(.77,0,.18,1)}
#nxCurtain .nx-cname{display:flex;justify-content:center;padding-left:.12em;color:#fff;
  font:700 clamp(46px,12vw,124px)/1 'Space Grotesk',Inter,sans-serif;letter-spacing:.12em}
#nxCurtain .nx-cname span{display:inline-block;opacity:0;transform:translateY(60%) scale(.9);filter:blur(8px);
  animation:nxLetter .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.15s + var(--k) * .09s)}
@keyframes nxLetter{to{opacity:1;transform:none;filter:blur(0)}}
#nxCurtain .nx-csub{margin-top:14px;padding-left:.7em;color:#19B8FF;opacity:0;
  font:600 clamp(11px,2.2vw,20px)/1 Inter,sans-serif;letter-spacing:.7em;animation:nxCFade .8s ease 1s forwards}
@keyframes nxCFade{to{opacity:1}}
#nxCurtain .nx-cbar{width:min(260px,60vw);height:3px;margin:26px auto 0;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.14)}
#nxCurtain .nx-cbar i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#1E6FE0,#19B8FF);animation:nxCBar 1.7s cubic-bezier(.4,0,.2,1) .2s forwards}
@keyframes nxCBar{to{transform:scaleX(1)}}

#nxCurtain.nx-open{pointer-events:none}
#nxCurtain.nx-open .nx-cl{transform:translateX(-101%);box-shadow:8px 0 60px rgba(25,184,255,.35)}
#nxCurtain.nx-open .nx-cr{transform:translateX(101%);box-shadow:-8px 0 60px rgba(25,184,255,.35)}
#nxCurtain.nx-open .nx-cmid{opacity:0;transform:scale(1.15)}

/* ---------- 2. MAGNETIC + RIPPLE BUTTONS ---------- */
.btn{position:relative;overflow:hidden;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),
             box-shadow .16s var(--ease),transform .08s var(--ease),translate .3s var(--ease)}
.nx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.28;
  transform:scale(0);animation:nxRipple .75s ease-out forwards}
@keyframes nxRipple{to{transform:scale(1);opacity:0}}

/* ---------- 3. SPOTLIGHT GLOW ON CARDS ---------- */
:is(.offer-card,.why-card,.trainer-card,.course-card,.institution-card,.faq-item,.contact-card){position:relative}
:is(.offer-card,.why-card,.trainer-card,.course-card,.institution-card,.faq-item,.contact-card)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(30,111,224,.13),transparent 65%)}
:is(.offer-card,.why-card,.trainer-card,.course-card,.institution-card,.faq-item,.contact-card):hover::after{opacity:1}

/* ---------- 4. HEADINGS RISE WORD BY WORD + LINE DRAWS UNDER ---------- */
.nx-wh .nx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.nx-wh .nx-w>span{display:inline-block;transform:translateY(115%);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.35s + var(--wi) * 70ms)}
.nx-wh.nx-wh-in .nx-w>span{transform:none}
.nx-wh::after{content:"";display:block;width:0;height:3px;margin-top:14px;border-radius:3px;
  background:linear-gradient(90deg,#1E6FE0,#19B8FF);transition:width 1s cubic-bezier(.2,.8,.2,1) .7s}
.nx-wh.nx-wh-in::after{width:84px}
.section-head.center .nx-wh::after{margin-left:auto;margin-right:auto}

/* ---------- 5. PARALLAX ---------- */
.nx-blob{will-change:translate}

/* ---------- 6. DOT MENU (right edge) ---------- */
#nxDots{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:14px;
  padding:12px 8px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(11,47,107,.15)}
#nxDots a{position:relative;display:block;width:11px;height:11px;border-radius:50%;background:#B9CDEA;
  transition:transform .25s ease,background .25s ease}
#nxDots a:hover{transform:scale(1.35);background:#1E6FE0}
#nxDots a.on{transform:scale(1.35);background:#0B2F6B}
#nxDots a span{position:absolute;right:24px;top:50%;transform:translateY(-50%) translateX(8px);white-space:nowrap;
  padding:5px 10px;border-radius:6px;background:#0B2F6B;color:#fff;font:600 12px Inter,sans-serif;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
#nxDots a:hover span{opacity:1;transform:translateY(-50%)}
@media (max-width:900px){#nxDots{display:none}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  #nxCurtain,html.nx-loading::before{display:none}
  html.nx-loading{overflow:auto}
  .nx-wh .nx-w>span{transform:none}
  .nx-wh::after{width:84px}
  .nx-ripple{display:none}
}