/* Smile For All Foundation — Motion Experience v1.2.0
   Progressive enhancement only. All motion is disabled for prefers-reduced-motion. */

:root{
  --motion-ease:cubic-bezier(.2,.75,.2,1);
  --motion-soft:cubic-bezier(.22,1,.36,1);
  --motion-glow:rgba(239,111,81,.16);
}

.scroll-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:180;pointer-events:none;background:transparent}
.scroll-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--saffron),var(--coral),var(--teal));box-shadow:0 0 18px rgba(239,111,81,.3);will-change:transform}

.motion-ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.motion-orb{position:absolute;border-radius:50%;filter:blur(58px);opacity:.12;will-change:transform}
.motion-orb-a{width:360px;height:360px;background:var(--saffron);right:-120px;top:18vh;animation:ambientFloatA 18s ease-in-out infinite alternate}
.motion-orb-b{width:420px;height:420px;background:var(--coral);left:-180px;top:58vh;animation:ambientFloatB 22s ease-in-out infinite alternate}
.motion-orb-c{width:320px;height:320px;background:var(--teal);right:18vw;bottom:-160px;animation:ambientFloatC 25s ease-in-out infinite alternate}
@keyframes ambientFloatA{to{transform:translate3d(-90px,110px,0) scale(1.12)}}
@keyframes ambientFloatB{to{transform:translate3d(130px,-95px,0) scale(.9)}}
@keyframes ambientFloatC{to{transform:translate3d(-70px,-120px,0) scale(1.14)}}

/* Header: smaller, calmer motion instead of flashy movement */
.site-header{will-change:transform,top,height,box-shadow;background:rgba(255,250,243,.86);transition:top .35s var(--motion-soft),height .35s var(--motion-soft),box-shadow .35s ease,background .35s ease,border-color .35s ease}
.site-header.scrolled{box-shadow:0 20px 55px rgba(23,50,60,.12);background:rgba(255,250,243,.94);border-color:rgba(255,255,255,.88)}
.brand img{transition:transform .45s var(--motion-soft),filter .35s ease}.brand:hover img{transform:scale(1.025);filter:saturate(1.05)}
.main-nav a:after{transition:right .35s var(--motion-soft)}
.nav-dropdown>div{transform-origin:top center;animation:menuDrop .22s var(--motion-soft)}
@keyframes menuDrop{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:none}}

/* Buttons: subtle lift, sheen and magnetic JS enhancement */
.btn,.quick-donate{position:relative;overflow:hidden;isolation:isolate;will-change:transform}
.btn:before,.quick-donate:before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.26) 46%,transparent 72%);transform:translateX(-120%) skewX(-16deg);transition:transform .7s var(--motion-soft)}
.btn:hover:before,.quick-donate:hover:before{transform:translateX(120%) skewX(-16deg)}
.btn:active,.quick-donate:active{transform:translateY(0) scale(.985)}
.quick-donate{animation:donateBreath 7s ease-in-out infinite}
@keyframes donateBreath{0%,78%,100%{box-shadow:0 18px 38px rgba(239,111,81,.34)}86%{box-shadow:0 18px 42px rgba(239,111,81,.48),0 0 0 8px rgba(239,111,81,.07)}}

/* Premium card surface / pointer glare */
.motion-tilt{position:relative;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .45s var(--motion-soft),box-shadow .4s ease,border-color .3s ease;will-change:transform}
.motion-tilt:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.48),rgba(255,255,255,0) 38%);transition:opacity .28s ease;mix-blend-mode:soft-light}
.motion-tilt:hover:after{opacity:.62}
.programme-card.motion-tilt:hover,.listing-card.motion-tilt:hover,.trust-card.motion-tilt:hover,.ngo-card.motion-tilt:hover,.gallery-collection-card.motion-tilt:hover{box-shadow:0 28px 65px rgba(23,50,60,.12)}

/* Images feel more editorial on entry / hover */
.motion-image{overflow:hidden}.motion-image img{transition:transform .85s var(--motion-soft),filter .6s ease}.motion-image:hover img{transform:scale(1.035);filter:saturate(1.04) contrast(1.02)}
.hero-frame,.story-main,.programme-media,.listing-card .media,.gallery-photo-button,.detail-hero-image,.ngo-cover{transform:translateZ(0)}

/* Section reveals. JS only adds .motion-target after load, so no-JS content remains visible. */
.motion-target{opacity:0;transform:translate3d(0,30px,0);filter:blur(5px)}
.motion-target.motion-in{opacity:1;transform:none;filter:none;transition:opacity .8s var(--motion-soft),transform .85s var(--motion-soft),filter .7s ease}
.motion-target.motion-in.motion-delay-1{transition-delay:.05s}.motion-target.motion-in.motion-delay-2{transition-delay:.10s}.motion-target.motion-in.motion-delay-3{transition-delay:.15s}.motion-target.motion-in.motion-delay-4{transition-delay:.20s}.motion-target.motion-in.motion-delay-5{transition-delay:.25s}

/* Headline accent: a short highlight sweep once it enters */
.motion-heading{position:relative;width:fit-content;max-width:100%}.motion-heading:after{content:"";position:absolute;left:0;bottom:-8px;width:min(88px,28%);height:4px;border-radius:99px;background:linear-gradient(90deg,var(--coral),var(--saffron));transform:scaleX(0);transform-origin:left;opacity:.9}
.motion-heading.motion-heading-in:after{animation:headingStroke .72s .18s var(--motion-soft) forwards}
@keyframes headingStroke{to{transform:scaleX(1)}}

/* Hero depth enhancements */
.hero-visual{perspective:1100px}.hero-main,.hero-float{will-change:transform;transition:transform .65s var(--motion-soft),box-shadow .5s ease}.hero-visual:hover .hero-main{box-shadow:0 34px 70px rgba(23,50,60,.16)}
.hero-scribble{animation:scribbleFloat 5.5s ease-in-out infinite alternate}
.hero-watch .play{animation:playPulse 3.6s ease-in-out infinite}
@keyframes scribbleFloat{to{transform:rotate(-4deg) translateY(-6px)}}
@keyframes playPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,111,81,.25)}50%{box-shadow:0 0 0 9px rgba(239,111,81,0)}}

/* Statistics / transparency */
.stat-pill,.transparency-stat{transition:transform .35s var(--motion-soft),background .35s ease,box-shadow .35s ease}.stat-pill:hover,.transparency-stat:hover{transform:translateY(-4px)}
.stat-value,[data-count],.transparency-stat strong{font-variant-numeric:tabular-nums}

/* Progress bars: animate the container as it becomes visible; keeps native accessibility */
.ngo-progress progress,.giving-story progress,.public-case-progress progress{transform-origin:left center}.motion-progress-in{animation:progressReveal .95s var(--motion-soft) both}
@keyframes progressReveal{from{transform:scaleX(.08);opacity:.25}to{transform:scaleX(1);opacity:1}}

/* Forms / donation choices */
.giving-amounts button,.giving-methods label,.cause-choice,.ngo-form input,.ngo-form select,.ngo-form textarea,.field input,.field textarea,.field select{transition:border-color .25s ease,box-shadow .25s ease,transform .22s var(--motion-soft),background .25s ease,color .25s ease}
.giving-amounts button:hover,.giving-methods label:hover,.cause-choice:hover{transform:translateY(-2px)}
.giving-amounts button.selected{animation:selectPop .34s var(--motion-soft)}
@keyframes selectPop{0%{transform:scale(.97)}60%{transform:scale(1.025)}100%{transform:scale(1)}}
.giving-methods label:has(input:checked){border-color:#6e9c82;background:#f1f7f3;box-shadow:0 9px 26px rgba(33,77,59,.08)}

/* Gallery motion */
.gallery-photo-button .gallery-zoom{transition:transform .35s var(--motion-soft),background .3s ease}.gallery-photo-button:hover .gallery-zoom{transform:scale(1.08) rotate(-5deg);background:rgba(239,111,81,.9)}
.gallery-lightbox[open],.ngo-lightbox[open]{animation:dialogIn .28s var(--motion-soft)}
.gallery-lightbox::backdrop,.ngo-lightbox::backdrop{animation:backdropIn .22s ease}
@keyframes dialogIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}

/* Footer */
.footer{overflow:hidden}.footer:before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-120px;top:-140px;border:1px solid rgba(255,255,255,.10);box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.018);animation:footerOrbit 13s ease-in-out infinite alternate;pointer-events:none}
@keyframes footerOrbit{to{transform:translate(-35px,30px) scale(1.08)}}
.footer-grid a{transition:color .25s ease,transform .25s var(--motion-soft)}.footer-grid a:hover{color:#fff;transform:translateX(4px)}
.footer-socials span{transition:transform .3s var(--motion-soft),background .3s ease}.footer-socials span:hover{transform:translateY(-3px);background:rgba(255,255,255,.13)}

/* Mobile navigation animation */
@media(max-width:900px){
  .main-nav.open{animation:mobileMenuIn .32s var(--motion-soft)}
  @keyframes mobileMenuIn{from{opacity:0;transform:translateY(-12px) scale(.985)}to{opacity:1;transform:none}}
}

/* Motion should never compromise accessibility or battery-sensitive preferences. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .motion-target{opacity:1!important;transform:none!important;filter:none!important}
  .scroll-progress,.motion-ambient{display:none!important}
}

@media(max-width:640px){
  .motion-ambient{opacity:.55}
  .quick-donate{animation:none}
  .motion-tilt{transform:none!important}
}