/* =====================================================================
   SkillDana motion — subtle, fast, transform/opacity only.
   Everything is switched off for "prefers-reduced-motion".
   ===================================================================== */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}

/* page fade-in */
@keyframes sd-page{from{opacity:0}to{opacity:1}}
.js body{animation:sd-page .45s ease both}

/* ---------- reveal variants (JS adds .in) ---------- */
.js .reveal{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .reveal.from-left{transform:translateX(-28px)}
.js .reveal.from-right{transform:translateX(28px)}
.js .reveal.zoom{transform:scale(.94)}
.js .reveal.in.from-left,.js .reveal.in.from-right,.js .reveal.in.zoom{transform:none}

/* kicker line grows when its block appears */
.js .reveal .kicker:before,.js .reveal.kicker:before{width:0;transition:width .6s .2s var(--ease-out)}
.js .reveal.in .kicker:before,.js .reveal.in.kicker:before{width:22px}

/* section headings rise a moment after their block */
.js .sec-head.reveal h2{opacity:0;transform:translateY(16px);transition:opacity .7s .1s var(--ease-out),transform .7s .1s var(--ease-out)}
.js .sec-head.reveal.in h2{opacity:1;transform:none}

/* ---------- hero ---------- */
.eyebrow .dot{position:relative}
.eyebrow .dot:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(22,163,74,.45);animation:sd-ping 1.8s var(--ease-out) infinite}
@keyframes sd-ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.1);opacity:0}}

.hero h1 .hl{position:relative}
.hero h1 .hl:after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.14em;border-radius:99px;background:rgba(242,106,27,.22);
  transform:scaleX(0);transform-origin:left;transition:transform .9s .55s var(--ease-out)}
.js .hero h1.in .hl:after,.no-js .hero h1 .hl:after{transform:scaleX(1)}

.hero .grid-bg{animation:sd-drift 40s linear infinite}
@keyframes sd-drift{to{background-position:220px 110px}}

.hero-visual .frame img{transform:scale(1.08);transition:transform 1.6s var(--ease-out)}
.js .hero-visual.in .frame img{transform:scale(1)}
.hero-visual .ring{transition:transform 1.1s .25s var(--ease-out),opacity 1.1s .25s}
.js .hero-visual:not(.in) .ring{transform:translate(-22px,-22px);opacity:0}
.hero-visual .frame,.hero-visual .ring{translate:calc(var(--px,0) * -10px) calc(var(--py,0) * -10px);transition:translate .3s ease-out,transform 1.1s .25s var(--ease-out),opacity 1.1s .25s}
.hero-visual .ring{translate:calc(var(--px,0) * 8px) calc(var(--py,0) * 8px)}

.badge-float{opacity:0;transform:translateY(14px) scale(.92);transition:opacity .6s var(--ease-out),transform .6s var(--ease-spring)}
.js .hero-visual.in .badge-float{opacity:1;transform:none}
.js .hero-visual.in .badge-float.b1{transition-delay:.55s}
.js .hero-visual.in .badge-float.b2{transition-delay:.75s}
.js .hero-visual.in .badge-float.b3{transition-delay:.95s}
.no-js .badge-float{opacity:1;transform:none}
.badge-float{animation:sd-bob 5.5s ease-in-out infinite}
.badge-float.b2{animation-delay:-1.8s}
.badge-float.b3{animation-delay:-3.4s}
@keyframes sd-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;transition:transform .18s var(--ease-out),box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn:active{transform:scale(.97)}
.btn-primary:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s var(--ease-out);pointer-events:none}
.btn-primary:hover:after{left:130%}
.btn-primary:hover{box-shadow:0 10px 22px -10px rgba(242,106,27,.75)}
.btn .arrow{display:inline-flex}
.hero .actions .btn-primary{animation:sd-glow 3.2s ease-in-out 2.5s infinite}
@keyframes sd-glow{0%,100%{box-shadow:0 0 0 0 rgba(242,106,27,0)}50%{box-shadow:0 0 0 8px rgba(242,106,27,.14)}}

/* ---------- cards ---------- */
.card{will-change:transform}
.course:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(14,42,92,.35)}
.course .thumb{position:relative;overflow:hidden}
.course .thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-100%);transition:transform .9s var(--ease-out);pointer-events:none}
.course:hover .thumb:after{transform:translateX(100%)}
.course:hover .thumb img{transform:scale(1.06)}
.feature{transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s}
.feature:hover{transform:translateY(-5px);box-shadow:0 18px 34px -22px rgba(14,42,92,.35);border-color:#CDD5E3}
.feature .icon{transition:transform .45s var(--ease-spring),background .3s,color .3s}
.feature:hover .icon,.js .feature.reveal.in:hover .icon{transform:rotate(-8deg) scale(1.08);background:var(--orange);color:#fff}
.js .feature.reveal .icon{transform:scale(.6);opacity:0;transition:transform .6s .25s var(--ease-spring),opacity .4s .25s}
.js .feature.reveal.in .icon{transform:none;opacity:1}
.quote{transition:transform .3s var(--ease-out),box-shadow .3s}
.quote:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(14,42,92,.3)}

/* steps: connector line draws across the row */
.steps{position:relative}
@media (min-width:901px){
  .steps:before{content:"";position:absolute;left:4%;right:4%;top:62px;height:1px;background:linear-gradient(90deg,rgba(242,106,27,.0),rgba(242,106,27,.6),rgba(242,106,27,0));
    transform:scaleX(0);transform-origin:left;transition:transform 1.4s .3s var(--ease-out)}
  .steps.in:before{transform:scaleX(1)}
}
.step .num{display:inline-block;transition:transform .5s var(--ease-spring)}
.step:hover .num{transform:translateY(-4px) scale(1.06)}

/* compare columns */
.compare .bad li,.compare .good li{transition:transform .25s}
.compare .good li:hover{transform:translateX(4px)}

/* ---------- ticker (skills strip) ---------- */
.ticker{background:var(--navy);color:#DDE6F7;overflow:hidden;border-block:1px solid rgba(255,255,255,.06)}
.ticker-track{display:flex;width:max-content;animation:sd-marquee 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{display:inline-flex;align-items:center;gap:14px;padding:14px 22px;font:600 15px/1 var(--f-en,Manrope),"Hind Siliguri",system-ui;white-space:nowrap}
.ticker-track span:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);margin-left:8px}
@keyframes sd-marquee{to{transform:translateX(-50%)}}

/* ---------- FAQ / accordions: smooth open (JS animates height) ---------- */
.faq details > div,.faq details > p,.faq .ans{overflow:hidden}
.faq summary:after{transition:transform .3s var(--ease-out)}

/* ---------- misc ---------- */
.wa-float{animation:sd-pop .5s 1.2s var(--ease-spring) both}
.wa-float:before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.55);animation:sd-ping 2.4s 3s var(--ease-out) infinite;pointer-events:none}
@keyframes sd-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.check{animation:sd-pop .6s var(--ease-spring) both}
.check svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:sd-draw .6s .45s var(--ease-out) forwards}
@keyframes sd-draw{to{stroke-dashoffset:0}}
.check{position:relative}
.check:after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid rgba(22,163,74,.35);animation:sd-ping 1.6s .5s var(--ease-out) 2}
.lprog-bar span{transition:width 1.1s var(--ease-out)}
.stat{transition:transform .25s var(--ease-out),box-shadow .25s}
.stat:hover{transform:translateY(-3px);box-shadow:0 14px 26px -18px rgba(14,42,92,.35)}
.topbar a .ic,.topbar a svg{transition:transform .2s}
.topbar a:hover .ic,.topbar a:hover svg{transform:translateX(3px)}
.enroll{transition:box-shadow .3s}
.enroll:focus-within{box-shadow:0 24px 50px -24px rgba(14,42,92,.4)}
.field input,.field select,.field textarea{transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px rgba(242,106,27,.12)}

/* phones: lighter motion */
@media (max-width:640px){
  .js .reveal{transition-duration:.55s}
  .js .reveal.from-left,.js .reveal.from-right{transform:translateY(18px)}
  .badge-float{animation:none}
  .course:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .js body,.ticker-track,.badge-float,.hero .grid-bg,.eyebrow .dot:after,.wa-float,.wa-float:before,.check,.check:after,.check svg path,.hero .actions .btn-primary{animation:none!important}
  .check svg path{stroke-dashoffset:0}
  .badge-float,.hero-visual .frame img{opacity:1!important;transform:none!important}
  .js .sec-head.reveal h2{clip-path:none;transform:none}
}
.hero-visual{isolation:isolate}