/* ============================================================================
   NHLPS motion layer - scroll reveals, hover motion, 3D tilt, ripples, sparkle cursor.
   Loaded on every public page (from footer.html). Pairs with js/motion.js.
   Everything is switched off for visitors who ask their device for "reduced motion".
   ============================================================================ */
:root{--nb-green:#00a651;--nb-navy:#13216f;--nb-gold:#f5b301;--nb-ease:cubic-bezier(.22,.61,.36,1);}

/* ---- page entrance + scroll progress -------------------------------------- */
@keyframes nbPageIn{from{opacity:0;}to{opacity:1;}}
body{animation:nbPageIn .7s ease both;}
#nbProgress{position:fixed;top:0;left:0;height:4px;width:0;z-index:99999;background:linear-gradient(90deg,var(--nb-green),var(--nb-gold),var(--nb-navy));box-shadow:0 0 12px rgba(0,166,81,.6);transition:width .12s linear;border-radius:0 4px 4px 0;pointer-events:none}

/* ---- scroll reveal ---------------------------------------------------------- */
.nb-motion .nb-rv{opacity:0;transform:translate3d(0,46px,0) scale(.97);transition:opacity .9s var(--nb-ease) var(--d,0ms),transform .9s var(--nb-ease) var(--d,0ms),filter .9s var(--nb-ease) var(--d,0ms);filter:blur(5px);will-change:opacity,transform}
.nb-motion .nb-rv.nb-l{transform:translate3d(-70px,0,0) scale(.97)}
.nb-motion .nb-rv.nb-r{transform:translate3d(70px,0,0) scale(.97)}
.nb-motion .nb-rv.nb-z{transform:scale(.86)}
.nb-motion .nb-rv.nb-flip{transform:perspective(900px) rotateX(18deg) translate3d(0,40px,0)}
.nb-motion .nb-rv.nb-in{opacity:1;transform:none;filter:none}

/* ---- headings: animated gradient underline ---------------------------------- */
.page-wrapper h1,.page-wrapper h2.hd-h,.section-title h2,.ue-head h2{position:relative}
.page-wrapper h1::after,.section-title h2::after{content:"";display:block;height:4px;width:0;margin-top:10px;border-radius:4px;background:linear-gradient(90deg,var(--nb-green),var(--nb-navy));transition:width 1s var(--nb-ease) .25s}
.text-center.nb-in::after,.section-title .nb-in::after,.page-wrapper h1.nb-in::after,.section-title h2.nb-in::after{width:90px}
.text-center::after,.section-title h2::after{margin-left:auto;margin-right:auto}
.page-wrapper h1:not(.nb-rv)::after,.section-title h2:not(.nb-rv)::after{width:90px}

/* ---- navigation ------------------------------------------------------------- */
.main-menu nav>ul>li>a,#mobile-menu>ul>li>a{position:relative}
.main-menu nav>ul>li>a::after{content:"";position:absolute;left:50%;bottom:-2px;width:0;height:3px;border-radius:3px;background:linear-gradient(90deg,#fff,var(--nb-gold));transform:translateX(-50%);transition:width .35s var(--nb-ease)}
.main-menu nav>ul>li:hover>a::after,.main-menu nav>ul>li>a.active::after{width:70%}
.main-menu nav>ul>li>ul{transform-origin:top center}
.main-menu nav>ul>li:hover>ul{animation:nbDrop .35s var(--nb-ease) both}
@keyframes nbDrop{from{opacity:0;transform:translateY(14px) scaleY(.92)}to{opacity:1;transform:none}}
.main-menu nav>ul>li>ul li a{transition:transform .25s var(--nb-ease),padding-left .25s var(--nb-ease)}
.main-menu nav>ul>li>ul li:hover>a{padding-left:24px}
.new-bg{background-size:240% 240% !important;animation:nbNavFlow 14s ease-in-out infinite}
@keyframes nbNavFlow{0%{background-position:0% 30%}50%{background-position:100% 70%}100%{background-position:0% 30%}}

/* ---- logo + chat button -------------------------------------------------------- */
.logo-t{animation:nbFloat 5.5s ease-in-out infinite;transform-origin:center}
@keyframes nbFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(1.5deg)}}
#nhChatBtn{animation:nbBob 3.2s ease-in-out infinite}
#nhChatBtn::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid rgba(0,166,81,.55);animation:nbPulse 2.4s ease-out infinite;pointer-events:none}
@keyframes nbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes nbPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.header-cta .call-box .icon i,.f-contact .icon{transition:transform .3s var(--nb-ease)}
.header-cta .call-box:hover .icon i{transform:rotate(-12deg) scale(1.2)}

/* ---- boxes & cards: lift, glow, shine ------------------------------------------- */
.BG-2,.single-post2,.single-testimonial,.ue-card,.aw-card,.ql-item,.cs-card,.ct-card,.hd-box,.cr-why>div,.fm-info,.gl-story .gl-grid a,.border.rounded.p-3,.page-wrapper .df-bar,.footer-widget{transition:transform .45s var(--nb-ease),box-shadow .45s var(--nb-ease),border-color .35s,background .35s}
.BG-2:hover,.single-post2:hover,.single-testimonial:hover,.cs-card:hover,.ct-card:hover,.hd-box:hover,.cr-why>div:hover,.fm-info:hover,.border.rounded.p-3:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(19,33,111,.18),0 0 0 2px rgba(0,166,81,.18)}
/* diagonal light sweep across a box when the mouse enters it */
.BG-2,.single-post2,.ue-card,.aw-card,.ql-item,.cs-card,.ct-card,.hd-box,.cr-why>div,.border.rounded.p-3{position:relative;overflow:hidden}
.BG-2::before,.single-post2::before,.ue-card::before,.aw-card::before,.ql-item::before,.cs-card::before,.ct-card::before,.hd-box::before,.cr-why>div::before,.border.rounded.p-3::before{content:"";position:absolute;top:0;left:-130%;width:70%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);pointer-events:none;z-index:3}
.BG-2:hover::before,.single-post2:hover::before,.ue-card:hover::before,.aw-card:hover::before,.ql-item:hover::before,.cs-card:hover::before,.ct-card:hover::before,.hd-box:hover::before,.cr-why>div:hover::before,.border.rounded.p-3:hover::before{animation:nbShine 1s var(--nb-ease)}
@keyframes nbShine{to{left:150%}}
/* the 3D tilt (set from js) */
.nb-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) !important;transition:transform .12s linear,box-shadow .4s !important}

/* ---- pictures --------------------------------------------------------------------- */
.page-wrapper img:not(.logo-t),.blog-thumb2 img,.gl-grid img,.aw-photo img{transition:transform .8s var(--nb-ease),filter .6s}
.page-wrapper img:not(.logo-t):hover,.blog-thumb2:hover img{transform:scale(1.04)}
.aw-card:hover .aw-photo img{transform:scale(1.1)}
.aw-star{animation:nbSpin 7s linear infinite}
@keyframes nbSpin{to{transform:rotate(360deg)}}
.ql-icon,.ue-ico,.aw-star{animation-play-state:running}
.ql-item:hover .ql-icon{animation:nbWiggle .6s ease}
@keyframes nbWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.12)}75%{transform:rotate(12deg) scale(1.12)}}
.ue-ico{animation:nbBob 3.4s ease-in-out infinite}
.ue-wrap::before,.ue-wrap::after{animation:nbBlob 9s ease-in-out infinite alternate}
@keyframes nbBlob{from{transform:translate(0,0) scale(1)}to{transform:translate(26px,-18px) scale(1.18)}}
.ue-date{transition:transform .35s var(--nb-ease)}
.ue-card:hover .ue-date{transform:rotate(-6deg) scale(1.08)}

/* ---- buttons: ripple + lift ---------------------------------------------------------- */
.btn,.ue-all,.cr-btn,.fm-btn,.nh-chips button,.hd-dl a,.ql-item,button[type=submit]{position:relative;overflow:hidden;transition:transform .3s var(--nb-ease),box-shadow .3s,background .3s,color .3s}
.btn:hover,.ue-all:hover,.cr-btn:hover,.fm-btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(19,33,111,.28)}
.btn:active,.ue-all:active,.cr-btn:active,.fm-btn:active{transform:translateY(0) scale(.97)}
.nb-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:nbRipple .65s ease-out forwards;pointer-events:none}
@keyframes nbRipple{to{transform:scale(3.2);opacity:0}}

/* ---- footer & lists ---------------------------------------------------------------------- */
.footer-link ul li a,.f-contact a,.sidebar-menu li a{transition:transform .3s var(--nb-ease),color .3s}
.footer-link ul li a:hover{transform:translateX(8px)}
.sidebar-menu li{transition:transform .3s var(--nb-ease),background .3s}
.sidebar-menu li:hover{transform:translateX(6px)}
.hd-faq details{transition:box-shadow .3s,transform .3s var(--nb-ease)}
.hd-faq details:hover{transform:translateX(4px);box-shadow:0 8px 20px rgba(19,33,111,.1)}
.hd-faq details[open] .hd-a{animation:nbOpen .45s var(--nb-ease)}
@keyframes nbOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.news-item,.news-ticker-images li{transition:transform .3s var(--nb-ease),background .3s}
.news-item:hover{transform:translateX(5px)}

/* ---- sparkle cursor canvas ---------------------------------------------------------------------- */
#nbSparkle{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:99990}

/* ---- accessibility: no motion when the visitor prefers it ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .nb-motion .nb-rv{opacity:1 !important;transform:none !important;filter:none !important}
  #nbSparkle,#nbProgress{display:none !important}
}

/* ---- "About the school" picture + video: animated frame on hover ---------------------------------------------- */
@property --nbAng{syntax:"<angle>";initial-value:0deg;inherits:false}
.s-about-img{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 8px 24px rgba(19,33,111,.14);transition:transform .55s var(--nb-ease),box-shadow .55s var(--nb-ease)}
.s-about-img img,.s-about-img video{display:block;width:100%;border-radius:20px;transition:transform 1s var(--nb-ease),filter .6s;transform-origin:center}
/* rotating theme-coloured ring that is drawn inside the picture edge */
.s-about-img::before{content:"";position:absolute;inset:0;border-radius:20px;padding:4px;pointer-events:none;z-index:3;opacity:0;transition:opacity .45s;background:conic-gradient(from var(--nbAng),#00a651,#19c37d,#f5b301,#13216f,#3b4fb8,#00a651);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* soft light that glides across the picture */
.s-about-img::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;z-index:2;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);background-size:260% 100%;background-position:170% 0;opacity:0}
.s-about-img:hover{transform:translateY(-10px) scale(1.025);box-shadow:0 26px 50px rgba(19,33,111,.28),0 0 0 1px rgba(0,166,81,.25),0 0 34px rgba(0,166,81,.28)}
.s-about-img:hover::before{opacity:1;animation:nbRing 3.2s linear infinite}
.s-about-img:hover::after{opacity:1;animation:nbGlide 1.3s var(--nb-ease) forwards}
.s-about-img:hover img,.s-about-img:hover video{transform:scale(1.09) rotate(.6deg);filter:saturate(1.18) contrast(1.04)}
@keyframes nbRing{to{--nbAng:360deg}}
@keyframes nbGlide{from{background-position:170% 0}to{background-position:-70% 0}}
@supports not (background:conic-gradient(from 0deg,red,blue)){.s-about-img::before{display:none}}

/* ---- header logo: hover animation (flip-spin + glow) and animated school name ---------------------------------- */
.nb-brand-link .logo-t{transition:filter .5s;transform-style:preserve-3d}
.nb-brand-link:hover .logo-t{animation:nbLogoSpin 1.1s cubic-bezier(.22,.61,.36,1) both,nbLogoGlow 1.6s ease-in-out 1.1s infinite alternate}
@keyframes nbLogoSpin{0%{transform:perspective(600px) rotateY(0) scale(1)}55%{transform:perspective(600px) rotateY(360deg) scale(1.18)}100%{transform:perspective(600px) rotateY(360deg) scale(1.1) rotate(-3deg)}}
@keyframes nbLogoGlow{from{filter:drop-shadow(0 0 4px rgba(0,166,81,.55))}to{filter:drop-shadow(0 0 16px rgba(245,179,1,.9))}}
.nb-brand-link .logo-text-t{background:linear-gradient(90deg,#13216f 0%,#13216f 40%,#00a651 50%,#13216f 60%,#13216f 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent !important;transition:letter-spacing .5s}
.nb-brand-link:hover .logo-text-t{animation:nbNameShine 1.6s ease-in-out infinite;letter-spacing:.6px}
@keyframes nbNameShine{from{background-position:100% 0}to{background-position:-100% 0}}
.nb-brand-link:hover .nb-tag{animation:nbTagIn .6s ease both}
@keyframes nbTagIn{from{transform:translateX(-8px);opacity:.4}to{transform:none;opacity:1}}

/* ---- navbar: wobble / jelly on hover ---------------------------------------------------------------------------- */
@media (min-width:992px){
  #header-sticky .main-menu nav>ul>li>a{display:block;transform-origin:50% 100%;transition:text-shadow .3s,color .3s}
  #header-sticky .main-menu nav>ul>li:hover>a{animation:nbWobble .9s cubic-bezier(.36,.07,.19,.97) both;text-shadow:0 0 14px rgba(255,255,255,.65)}
  @keyframes nbWobble{
    0%{transform:translateY(0) rotate(0) scale(1)}
    15%{transform:translateY(-6px) rotate(-5deg) scale(1.12)}
    30%{transform:translateY(0) rotate(4deg) scale(1.08)}
    45%{transform:translateY(-3px) rotate(-3deg) scale(1.1)}
    60%{transform:translateY(0) rotate(2deg) scale(1.08)}
    80%{transform:translateY(-1px) rotate(-1deg) scale(1.1)}
    100%{transform:translateY(0) rotate(0) scale(1.08)}
  }
  /* dropdown: panel springs open, its items drop in one by one and jiggle when pointed at */
  #header-sticky .main-menu nav>ul>li>ul{border-radius:0 0 14px 14px;overflow:hidden;box-shadow:0 18px 40px rgba(19,33,111,.28)}
  #header-sticky .main-menu nav>ul>li:hover>ul{animation:nbSpring .55s cubic-bezier(.34,1.56,.64,1) both}
  @keyframes nbSpring{from{opacity:0;transform:translateY(-12px) scaleY(.82)}to{opacity:1;transform:none}}
  #header-sticky .main-menu nav>ul>li:hover>ul>li{animation:nbItemIn .5s cubic-bezier(.34,1.56,.64,1) both}
  #header-sticky .main-menu nav>ul>li:hover>ul>li:nth-child(1){animation-delay:.04s}
  #header-sticky .main-menu nav>ul>li:hover>ul>li:nth-child(2){animation-delay:.08s}
  #header-sticky .main-menu nav>ul>li:hover>ul>li:nth-child(3){animation-delay:.12s}
  #header-sticky .main-menu nav>ul>li:hover>ul>li:nth-child(4){animation-delay:.16s}
  #header-sticky .main-menu nav>ul>li:hover>ul>li:nth-child(5){animation-delay:.2s}
  #header-sticky .main-menu nav>ul>li:hover>ul>li:nth-child(n+6){animation-delay:.24s}
  @keyframes nbItemIn{from{opacity:0;transform:translateX(-22px) rotate(-2deg)}to{opacity:1;transform:none}}
  #header-sticky .main-menu nav>ul>li>ul>li>a{position:relative;transition:padding-left .3s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s}
  #header-sticky .main-menu nav>ul>li>ul>li>a::before{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#00a651,#13216f);opacity:.12;transition:width .35s}
  #header-sticky .main-menu nav>ul>li>ul>li:hover>a{animation:nbJiggle .5s ease both;color:#0a7a45 !important;padding-left:28px}
  #header-sticky .main-menu nav>ul>li>ul>li:hover>a::before{width:100%}
  @keyframes nbJiggle{0%{transform:translateX(0)}25%{transform:translateX(6px)}50%{transform:translateX(-3px)}75%{transform:translateX(3px)}100%{transform:translateX(0)}}
}

/* ---- TC search card (Transfer Certificate page) - theme styling + motion ---------------------------------------- */
@keyframes nbCardFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes nbFloatIc{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(4deg)}}
#myform{position:relative;max-width:460px !important;padding:64px 36px 34px !important;border-radius:26px !important;overflow:hidden;
  background:linear-gradient(135deg,#eafaf1,#f1f5ff,#e4f7ee,#eaf0ff) !important;background-size:300% 300% !important;animation:nbCardFlow 12s ease-in-out infinite;
  border:1px solid #cfe8da;box-shadow:0 16px 40px rgba(19,33,111,.14) !important;transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s}
#myform:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(19,33,111,.22) !important}
#myform::before{content:"\f002";font-family:"Font Awesome 6 Pro","Font Awesome 5 Pro";font-weight:900;position:absolute;top:-4px;left:50%;margin-left:-32px;width:64px;height:64px;border-radius:0 0 50% 50%;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;padding-bottom:12px;font-size:24px;color:#fff;
  background:linear-gradient(160deg,#00a651,#13216f);box-shadow:0 8px 18px rgba(19,33,111,.3);animation:nbFloatIc 3.6s ease-in-out infinite}
#myform::after{content:"";position:absolute;right:-70px;bottom:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(0,166,81,.2),transparent 70%);animation:nbBlob 8s ease-in-out infinite alternate;pointer-events:none}
#myform label{display:block;font-size:17px !important;font-weight:700;color:#13216f;margin-bottom:12px;letter-spacing:.3px}
#myform input[type=text]{width:100%;max-width:320px;padding:12px 18px !important;font-size:17px !important;text-align:center;border:2px solid #cfdcec;border-radius:40px;background:#fff;color:#13216f;outline:0;transition:border-color .3s,box-shadow .3s,transform .3s}
#myform input[type=text]:focus{border-color:#00a651;box-shadow:0 0 0 5px rgba(0,166,81,.18),0 8px 20px rgba(0,166,81,.2);transform:scale(1.03)}
#myform input[type=submit]{position:relative;overflow:hidden;margin-top:18px !important;padding:12px 38px !important;font-size:16px !important;font-weight:700;letter-spacing:1.2px;color:#fff !important;border:0;border-radius:40px;cursor:pointer;
  background:linear-gradient(90deg,#00a651,#13216f,#00a651) !important;background-size:200% 100% !important;box-shadow:0 10px 22px rgba(19,33,111,.3);transition:background-position .6s,transform .3s,box-shadow .3s}
#myform input[type=submit]:hover{background-position:100% 0 !important;transform:translateY(-3px) scale(1.04);box-shadow:0 16px 30px rgba(0,166,81,.35)}
#myform input[type=submit]:active{transform:scale(.96)}
#myresponse{animation:nbOpen .6s cubic-bezier(.22,.61,.36,1)}
#myresponse .container{background:#fff;border:1px solid #d9e2ec;border-radius:20px;padding:18px;box-shadow:0 12px 30px rgba(19,33,111,.12)}
#myresponse .myform a{display:inline-block;margin-top:6px;background:linear-gradient(90deg,#00a651,#13216f);color:#fff !important;padding:10px 24px;border-radius:30px;font-size:15px !important;font-weight:600;text-decoration:none !important;transition:transform .3s,box-shadow .3s}
#myresponse .myform a:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,166,81,.35)}

/* ---- inner (CMS) pages: portrait photo + message card ---------------------------------------------------------- */
.nb-portrait{display:inline-block !important;max-width:340px;margin:8px auto 26px;vertical-align:top}
.nb-portrait img{border:0 !important;border-radius:20px !important;box-shadow:none !important;max-width:100% !important;width:100% !important;height:auto !important}
.nb-msg-card{position:relative;margin-top:6px;padding:26px 30px !important;border-radius:22px;background:linear-gradient(135deg,#f2fbf6,#f6f9ff);border:1px solid #dbeee3;box-shadow:0 10px 30px rgba(19,33,111,.08);overflow:hidden;text-align:left}
.nb-msg-card::before{content:"\201C";position:absolute;right:20px;top:-14px;font-size:120px;line-height:1;color:rgba(0,166,81,.16);font-family:Georgia,serif;pointer-events:none}
.nb-msg-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,#00a651,#13216f)}
.nb-msg-card p{position:relative;z-index:1}