/* About page: CRY-style cards with animated illustrations */

/* ---------- card shell ---------- */
.vision-grid .vision-card{
  min-height:400px;border-radius:12px;border:0;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.06),0 10px 28px rgba(0,0,0,.08);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
}
.vision-grid .vision-card::before{display:none}
.vision-grid .vision-card::after{                /* thick colour bar, like CRY */
  content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--c1);z-index:3;
}
.vision-grid .vision-card:hover{transform:translateY(-6px);box-shadow:0 4px 10px rgba(0,0,0,.07),0 22px 44px rgba(0,0,0,.14)}
.vision-grid .color-pink  {--c1:#e8296b;--t1:#fff0f5}
.vision-grid .color-teal  {--c1:#20b5b0;--t1:#e8f9f8}
.vision-grid .color-purple{--c1:#a64ca6;--t1:#f8eef8}
.vision-grid .color-yellow{--c1:#ff9812;--t1:#fff4e2}

/* ---------- front face ---------- */
.vision-grid .card-front{justify-content:flex-start;gap:0;padding:12px 0 0}
.vision-grid .vision-illus{
  order:-1;width:100%;height:236px;margin:0;flex:none;position:relative;
  display:flex;align-items:center;justify-content:center;pointer-events:none;background:transparent;
}
.vision-grid .vision-illus svg{width:236px;height:200px;overflow:visible}
.vision-grid .vision-card h3{margin:14px 0 0;font:500 20px/1.3 "Montserrat",sans-serif;color:#2a2a2a;padding:0}
.vision-grid .vision-card h3::after{                /* small yellow dash */
  content:"";display:block;width:30px;height:3px;margin:12px auto 0;background:#ffd83a;
}
.vision-grid .card-front::after{
  content:"Hover to read more";margin-top:18px;
  font:600 10.5px/1 "Montserrat",sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#a3a3a3;
}

/* ---------- back face ---------- */
.vision-grid .card-back{padding:36px 28px 44px;background:linear-gradient(170deg,var(--t1),#fff 75%)}
.vision-grid .card-back::before{content:"";width:30px;height:3px;margin-bottom:22px;background:#ffd83a}
.vision-grid .card-back p{font:500 14.5px/1.8 "Montserrat",sans-serif;color:#4a4a4a;margin:0 0 26px}
.vision-grid .know-more-btn{
  background:var(--c1);border-radius:999px;padding:11px 30px;
  font:600 13px "Montserrat",sans-serif;letter-spacing:.3px;box-shadow:0 8px 18px rgba(0,0,0,.14)}
.vision-grid .know-more-btn:hover{filter:none;transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.2)}

/* ==========================================================
   ANIMATION  — only specific classes get a transform origin,
   so the static positioning transforms are never disturbed.
========================================================== */
.vision-illus .sp,.vision-illus .glass,.vision-illus .orbit,.vision-illus .cloud,.vision-illus .sun,
.vision-illus .bird,.vision-illus .flag,.vision-illus .rise,.vision-illus .ring,.vision-illus .heartbeat,
.vision-illus .conf,.vision-illus .sunrise{transform-box:fill-box;transform-origin:center}
.vision-illus .orbit{transform-origin:50% 50%}
.vision-illus .flag{transform-origin:0 50%}
.vision-illus .arm,.vision-illus .scope{transform-box:view-box;transform-origin:0 0}   /* pivot = shoulder / telescope handle */
.vision-illus .body{transform-box:view-box;transform-origin:0 0}

.orbit{animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sp{animation:twinkle 2.6s ease-in-out infinite}
.sp.d2{animation-delay:.9s}.sp.d3{animation-delay:1.7s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}
.cloud{animation:drift 7s ease-in-out infinite alternate}
.cloud.c2{animation-duration:9s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translateX(-7px)}to{transform:translateX(7px)}}
.sun{animation:spin 16s linear infinite}

/* people */
.body.bob{animation:bob 1.5s ease-in-out infinite}
.body.bob.d2{animation-duration:1.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4px)}}
.body.jump{animation:jump 1.2s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes jump{0%,100%{transform:translateY(0)}45%{transform:translateY(-6px)}}
.body.sway-a{animation:swayA 3s ease-in-out infinite}
.body.sway-b{animation:swayB 3s ease-in-out infinite}
@keyframes swayA{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@keyframes swayB{0%,100%{transform:rotate(1.4deg)}50%{transform:rotate(-1.4deg)}}

.arm.reach-a{animation:reachA 1.6s ease-in-out infinite}
.arm.reach-b{animation:reachB 1.6s ease-in-out infinite}
@keyframes reachA{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes reachB{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
.arm.wave-up{animation:waveUp .9s ease-in-out infinite}
@keyframes waveUp{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}
.arm.clap-a{animation:clapA .6s ease-in-out infinite}
.arm.clap-b{animation:clapB .6s ease-in-out infinite}
@keyframes clapA{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
@keyframes clapB{0%,100%{transform:rotate(0)}50%{transform:rotate(10deg)}}

/* scene props */
.flag{animation:flutter 1.2s ease-in-out infinite}
@keyframes flutter{0%,100%{transform:scaleX(1) skewY(0)}50%{transform:scaleX(.84) skewY(6deg)}}
.scope{animation:scan 4.5s ease-in-out infinite}
@keyframes scan{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-8deg)}}
.sunrise{animation:rise-sun 6s ease-in-out infinite alternate}
@keyframes rise-sun{from{transform:translateY(8px)}to{transform:translateY(-2px)}}
.bird{animation:fly 5s ease-in-out infinite alternate}
.bird.b2{animation-duration:6.5s;animation-direction:alternate-reverse}
@keyframes fly{from{transform:translate(-8px,3px)}to{transform:translate(8px,-3px)}}
.heartbeat{animation:beat 1.7s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.12)}28%{transform:scale(1)}42%{transform:scale(1.07)}60%{transform:scale(1)}}
.ring{animation:ripple 1.7s ease-out infinite}
@keyframes ripple{0%{opacity:.7;transform:scale(.8)}100%{opacity:0;transform:scale(1.8)}}
.rise{opacity:0;animation:riseUp 3.4s ease-in infinite}
.rise.r2{animation-delay:1.5s}
@keyframes riseUp{0%{opacity:0;transform:translateY(8px)}25%{opacity:.95}100%{opacity:0;transform:translateY(-34px)}}
.conf{opacity:0;animation:fall 3.2s linear infinite}
.conf.k1{animation-delay:.5s}.conf.k2{animation-delay:1.1s}.conf.k3{animation-delay:1.7s}
.conf.k4{animation-delay:2.3s}.conf.k5{animation-delay:.9s}.conf.k6{animation-delay:2.7s}
@keyframes fall{0%{opacity:0;transform:translateY(0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translateY(110px) rotate(260deg)}}

@media (max-width:575px){
  .vision-grid .vision-illus{height:210px}
  .vision-grid .vision-illus svg{width:204px;height:173px}
}
@media (prefers-reduced-motion:reduce){.vision-illus *{animation:none!important}.rise,.ring,.conf{opacity:0}}

.vision-illus .jump{transform-box:view-box;transform-origin:0 0;animation:jump 1.2s cubic-bezier(.3,.7,.4,1) infinite}