/* Thakur British Academy — MOTION + SOFT-UI layer (24 Oct 2026). Loaded last, homepage only.
   Adds: hero entrance, softer scroll reveals, card lift / button press, gallery zoom, thin gold progress bar,
   gentle coin float, and a light neumorphic (soft dual-shadow) finish on cards, buttons, inputs and icon chips.
   Colours, layout, fonts and content are unchanged. Everything stays visible without JavaScript, and
   prefers-reduced-motion (or the site's own "motion off" switch) turns all movement off. */
:root{
  --nm-hi:rgba(255,255,255,.92);          /* light from top-left (on cream) */
  --nm-lo:rgba(1,75,170,.13);            /* maroon-tinted shade bottom-right */
  --nm-lo2:rgba(1,75,170,.20);
  --nm-card:-7px -7px 16px var(--nm-hi),8px 9px 20px var(--nm-lo);
  --nm-card-up:-9px -9px 20px var(--nm-hi),12px 16px 30px var(--nm-lo2);
  --nm-btn:-4px -4px 10px var(--nm-hi),5px 6px 12px var(--nm-lo);
  --nm-press:inset 3px 3px 7px rgba(0,0,0,.22),inset -3px -3px 7px rgba(255,255,255,.18);
  --nm-in:inset 2px 2px 5px rgba(1,75,170,.11),inset -3px -3px 6px rgba(255,255,255,.95);
  --ease-out:cubic-bezier(.22,.8,.24,1)
}
html{scroll-behavior:smooth;scroll-padding-top:84px}

/* ---- thin gold scroll-progress bar (2px, sits on top of the band) ---- */
html.js body .progress{display:block!important;height:2px;background:linear-gradient(90deg,var(--gold),var(--goldL),var(--crest))!important;z-index:130;will-change:transform}

/* ---- sticky header: soft shadow once the page scrolls ---- */
header.nav{transition:box-shadow .35s ease,background-color .35s ease}
header.nav.scrolled{background:rgba(248,243,240,.86)!important;box-shadow:0 6px 22px -10px rgba(1,75,170,.28)!important}

/* ---- scroll reveal: softer, shorter rise (no blur filter = cheaper on budget phones) ---- */
.js .reveal{filter:none!important;transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)!important}
.js .reveal:not(.in){opacity:0;transform:translateY(22px)!important}
.js .reveal.in{opacity:1;transform:none!important}

/* ---- hero entrance: plays once the preloader lifts (html.m-ready). Before that nothing is hidden. ---- */
@keyframes mRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mFade{from{opacity:0}to{opacity:1}}
.m-ready .hero .stage{animation:mFade 1s ease  backwards}
.m-ready .hero .badge{animation:mRise .7s var(--ease-out) .12s  backwards}
.m-ready .hero h1{animation:mRise .8s var(--ease-out) .2s  backwards}
.m-ready .hero .orn{animation:mFade .8s ease .34s  backwards}
.m-ready .hero .tag{animation:mRise .7s var(--ease-out) .4s  backwards}
.m-ready .hero .hero-text>.hi{animation:mRise .7s var(--ease-out) .48s  backwards}
.m-ready .hero .cta>*{animation:mRise .65s var(--ease-out)  backwards}
.m-ready .hero .cta>*:nth-child(1){animation-delay:.58s}.m-ready .hero .cta>*:nth-child(2){animation-delay:.66s}.m-ready .hero .cta>*:nth-child(3){animation-delay:.74s}
.m-ready .hero .sub{animation:mFade .8s ease .85s  backwards}
.m-ready .hero .arch{animation:mRise 1s var(--ease-out) .3s  backwards}
.m-ready .hero .stats>*{animation:mRise .7s var(--ease-out)  backwards}
.m-ready .hero .stats>*:nth-child(1){animation-delay:.8s}.m-ready .hero .stats>*:nth-child(2){animation-delay:.9s}.m-ready .hero .stats>*:nth-child(3){animation-delay:1s}

/* ---- hero background: a very slow warm-gold glow drifting behind the crest ---- */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:min(760px,150vw);height:min(560px,120vw);margin-left:calc(min(760px,150vw)/-2);pointer-events:none;
  background:radial-gradient(closest-side at 38% 40%,rgba(170,200,243,.30),rgba(170,200,243,0) 70%),radial-gradient(closest-side at 66% 58%,rgba(31,99,196,.08),rgba(31,99,196,0) 70%);
  animation:mGlow 16s ease-in-out infinite alternate;will-change:transform}
@keyframes mGlow{from{transform:translate3d(-4%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.08)}}

/* ---- coin: gentle idle float on top of its existing sway (the sway / flip itself is untouched) ---- */
.hero .stage .coin{animation:tbaSway 7s cubic-bezier(.45,0,.55,1) infinite,mFloat 5.5s ease-in-out infinite!important}
@keyframes mFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* ---- soft-UI (neumorphic) finish: cards ---- */
.course,.teacher,.batch,.offer,.dl,.mapcard,.enq,details,#toppers-list .card,.app-screens .shot-phone,.lec,.contact>.glass{transition:box-shadow .35s ease,translate .35s var(--ease-out),border-color .35s ease}
.course,.batch,.offer,.dl,.mapcard,.enq,details,#toppers-list .card,.lec{box-shadow:var(--nm-card)!important}
.teacher-c{box-shadow:var(--nm-card)!important;transition:box-shadow .35s ease,translate .35s var(--ease-out)}
#teacher-list>.teacher{box-shadow:var(--nm-card)!important}
.app-screens .shot-phone{box-shadow:0 0 0 1px var(--line2),-8px -8px 18px var(--nm-hi),10px 14px 28px -8px rgba(11,42,91,.40)!important}
.stats .glass{box-shadow:var(--nm-card)!important}

/* icon chips */
.offer-ic,.course .c-ic,.course>svg,.course>.ic,.why .w .lic,.sc,.t-contact .t-acts a{transition:box-shadow .3s ease,translate .3s var(--ease-out),transform .3s var(--ease-out)}
.t-contact .t-acts a,.foot-soc .sc,.follow .sc{box-shadow:var(--nm-btn)}

/* buttons: soft raised shadow, a hair of lift on hover, pressed-in on tap */
.btn,.gplay,.sbtn,.chip-btn{transition:transform .2s var(--ease-out),box-shadow .25s ease,background-color .25s ease,filter .25s ease!important}
.btn-call,.btn-wa,.btn-ghost,.gplay,.sbtn,.chip-btn{box-shadow:var(--nm-btn)!important}
.sticky .btn,.sticky a,.fab a{box-shadow:none!important}
/* on the maroon app band the light source is dimmer: dark-side soft UI */
#app .gplay,#app .btn{box-shadow:-3px -3px 8px rgba(255,255,255,.07),5px 7px 14px rgba(0,0,0,.35)!important}
#app .app-icon{box-shadow:-5px -5px 12px rgba(255,255,255,.06),8px 10px 22px rgba(0,0,0,.32)!important}
.btn:active,.gplay:active,.sbtn:active,.chip-btn:active,.t-contact .t-acts a:active{transform:scale(.97)!important;box-shadow:var(--nm-press)!important}
.btn-ghost:active,.sbtn:active,.chip-btn:active,.t-contact .t-acts a:active{box-shadow:inset 3px 3px 7px rgba(1,75,170,.16),inset -3px -3px 7px rgba(255,255,255,.9)!important}

/* enquiry form: fields sit inset into the card */
form.enq input,form.enq select,form.enq textarea{box-shadow:var(--nm-in)!important;transition:box-shadow .25s ease,border-color .25s ease}
form.enq input:focus,form.enq select:focus,form.enq textarea:focus{box-shadow:var(--nm-in),0 0 0 3px rgba(1,75,170,.14)!important}

/* gallery: framed photos, gentle zoom */
.gallery .gi{transition:box-shadow .35s ease,translate .35s var(--ease-out)}
.gallery .gi img{transition:transform .6s var(--ease-out)}
.gallery .gi:active img{transform:scale(1.03)}

/* hover only where a mouse exists (phones get the tap states above) */
@media (hover:hover) and (pointer:fine){
  .course:hover,.batch:hover,.offer:hover,.dl:hover,.mapcard:hover,#toppers-list .card:hover,.lec:hover,details:hover,.teacher-c:hover,#teacher-list>.teacher:hover{translate:0 -5px;box-shadow:var(--nm-card-up)!important}
  .app-screens .shot:hover .shot-phone{translate:0 -6px}
  .gallery .gi:hover{translate:0 -4px}
  .gallery .gi:hover img{transform:scale(1.06)}
  main .btn:hover,.gplay:hover,.sbtn:hover{transform:translateY(-2px)}
  .btn-call:hover{box-shadow:-4px -4px 10px var(--nm-hi),6px 10px 20px rgba(1,75,170,.28),0 0 0 3px rgba(170,200,243,.35)!important}
  .btn-wa:hover{box-shadow:-4px -4px 10px var(--nm-hi),6px 10px 20px rgba(29,143,78,.28),0 0 0 3px rgba(29,143,78,.16)!important}
  .btn-ghost:hover{box-shadow:-4px -4px 10px var(--nm-hi),6px 10px 18px rgba(1,75,170,.18)!important}
  .t-contact .t-acts a:hover,.foot-soc .sc:hover,.follow .sc:hover{translate:0 -2px}
}

/* calm everything down when asked */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero::before,.hero .stage .coin{animation:none!important}
  .m-ready .hero *{animation:none!important}
}
.no-motion .hero::before,.no-motion .hero .stage .coin{animation:none!important}
.no-motion{scroll-behavior:auto}
@media print{.hero::before{display:none}}

/* =========================================================================================
   BENTO + CLAY + one MAXIMAL moment (owner's steer, 24 Oct 2026) — same items, same words.
   ========================================================================================= */
/* ---- clay: small puffy elements only (icon chips, badge, status pills) ---- */
:root{
  --clay-mar:inset 3px 4px 7px rgba(255,255,255,.24),inset -4px -5px 9px rgba(5,22,52,.38),6px 9px 18px -4px rgba(1,75,170,.38);
  --clay-cream:inset 3px 3px 6px rgba(255,255,255,.95),inset -3px -4px 8px rgba(1,75,170,.20),5px 7px 14px -4px rgba(1,75,170,.22)
}
.course .ic{background:radial-gradient(circle at 32% 26%,#2A72D6,var(--mar) 58%,var(--mar3))!important;box-shadow:var(--clay-mar)!important}
.offer-ic{box-shadow:inset 2px 3px 5px rgba(255,255,255,.22),inset -3px -4px 7px rgba(5,22,52,.35),0 0 0 3px var(--paper),0 0 0 4px var(--gold),5px 8px 14px -2px rgba(1,75,170,.28)!important}
.hero .badge{background:linear-gradient(145deg,#FFFFFF,#F3EDE8)!important;padding:8px 16px 8px 14px!important;border-radius:999px!important;box-shadow:var(--clay-cream)!important}
.status{border-radius:999px!important;box-shadow:inset 2px 2px 4px rgba(255,255,255,.85),inset -2px -3px 5px rgba(29,107,63,.16),3px 4px 9px -3px rgba(29,107,63,.30)}

/* ---- bento: "Why Thakur British Academy?" (the same six items) ---- */
.why#features-list{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;border:0!important;max-width:980px;margin:6px auto 0}
.why#features-list .w{flex-direction:column!important;align-items:flex-start!important;justify-content:space-between;gap:16px!important;min-height:128px;padding:16px!important;
  background:var(--paper)!important;border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:var(--nm-card)!important;text-align:left!important}
.why#features-list .w:nth-child(odd){border-right:1px solid var(--line)!important}
.why#features-list .w>span{display:grid!important;place-items:center;width:52px!important;height:52px!important;border-radius:16px!important;
  background:linear-gradient(145deg,#FFFFFF,#F1EBE6)!important;color:var(--mar)!important;box-shadow:var(--clay-cream)!important}
.why#features-list .w .lic{width:26px!important;height:26px!important}
.why#features-list .w b{font-family:var(--serif)!important;font-size:1.28rem!important;font-weight:700!important;color:var(--mar)!important;line-height:1.12;letter-spacing:.005em}
/* tile 1: the hero tile — maroon, gold crest chip, bigger type */
.why#features-list .w:nth-child(1){grid-column:1/-1;min-height:170px;background:radial-gradient(120% 140% at 0% 0%,var(--mar2),var(--mar) 55%,var(--mar3))!important;border-color:var(--mar)!important;
  box-shadow:-7px -7px 16px var(--nm-hi),10px 14px 28px -6px rgba(11,42,91,.45)!important;position:relative;overflow:hidden}
.why#features-list .w:nth-child(1)::after{content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(170,200,243,.28);box-shadow:0 0 0 18px rgba(170,200,243,.06),0 0 0 40px rgba(170,200,243,.04);pointer-events:none}
.why#features-list .w:nth-child(1)>span{width:62px!important;height:62px!important;border-radius:20px!important;color:var(--mar3)!important;background:linear-gradient(145deg,#f6dc9c,#c99a3e)!important;
  box-shadow:inset 3px 4px 6px rgba(255,255,255,.55),inset -4px -5px 9px rgba(11,42,91,.35),6px 9px 18px -4px rgba(0,0,0,.40)!important}
.why#features-list .w:nth-child(1) b{color:var(--goldL)!important;font-size:clamp(1.7rem,7vw,2.3rem)!important}
.why#features-list .w:nth-child(6){grid-column:1/-1;flex-direction:row!important;align-items:center!important;min-height:0}
@media (min-width:760px){
  .why#features-list{grid-template-columns:repeat(4,1fr)!important;grid-auto-rows:minmax(150px,auto);gap:16px!important}
  .why#features-list .w{padding:20px!important}
  .why#features-list .w:nth-child(1){grid-column:1/3;grid-row:1/3;padding:28px!important}
  .why#features-list .w:nth-child(1) b{font-size:2.6rem!important;max-width:9ch}
  section[data-sec=features]>h2{max-width:18ch}
  .why#features-list .w:nth-child(4){grid-column:3/5}
  .why#features-list .w:nth-child(5){grid-column:1/3}
  .why#features-list .w:nth-child(6){grid-column:3/5;flex-direction:column!important;align-items:flex-start!important}
}
@media (hover:hover) and (pointer:fine){
  .why#features-list .w{transition:translate .35s var(--ease-out),box-shadow .35s ease}
  .why#features-list .w:hover{translate:0 -5px;box-shadow:var(--nm-card-up)!important}
  .why#features-list .w:nth-child(1):hover{box-shadow:-9px -9px 20px var(--nm-hi),14px 20px 36px -6px rgba(11,42,91,.5)!important}
}

/* ---- maximal moment: the "Why" section — oversized serif heading, gold ornament, faint gold lattice ---- */
section[data-sec=features]{position:relative;isolation:isolate}
section[data-sec=features]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:repeating-linear-gradient(45deg,rgba(1,75,170,.09) 0 1px,transparent 1px 22px),repeating-linear-gradient(-45deg,rgba(1,75,170,.09) 0 1px,transparent 1px 22px);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 80%)}
section[data-sec=features]>h2{font-size:clamp(2.5rem,10.5vw,4.4rem)!important;line-height:1!important;letter-spacing:-.01em;max-width:13ch;color:var(--mar)}
section[data-sec=features]>h2::after{content:"";display:block;width:132px;height:12px;margin:16px auto 4px;
  background:linear-gradient(var(--gold),var(--gold)) left center/54px 1.5px no-repeat,linear-gradient(var(--gold),var(--gold)) right center/54px 1.5px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0 12 6 6 12 0 6Z' fill='%23c99a3e'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  background-color:transparent}
@media (prefers-reduced-motion:reduce){.why#features-list .w{transition:none!important}}