
/* SreeEarth direct animation integration — 20260921j */
.research-approach-animation{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:28px;background:#0b2238;box-shadow:0 28px 80px rgba(0,0,0,.34);isolation:isolate}
.research-approach-animation .ra-base{position:absolute;inset:-2%;background:url('/assets/img/research-approach-animation.jpg') center/cover no-repeat;transform-origin:52% 46%;animation:raCamera 12s ease-in-out infinite alternate}
.research-approach-animation .ra-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,12,23,.20),transparent 34%,transparent 75%,rgba(2,12,23,.10)),linear-gradient(180deg,rgba(1,8,17,.04),transparent 65%,rgba(1,8,17,.20));z-index:8}
.research-approach-animation .ra-scan{position:absolute;top:-20%;left:-27%;width:22%;height:150%;background:linear-gradient(90deg,transparent,rgba(83,235,218,.04),rgba(83,235,218,.30),transparent);transform:skewX(-15deg);mix-blend-mode:screen;animation:raScan 5.5s linear infinite;z-index:4}
.research-approach-animation .ra-scan.ra-scan-2{animation-delay:2.2s;opacity:.55}
.research-approach-animation .ra-line{position:absolute;height:2px;transform-origin:left;background:repeating-linear-gradient(90deg,rgba(93,235,222,.95) 0 8px,transparent 8px 17px);filter:drop-shadow(0 0 5px rgba(93,235,222,.7));opacity:.72;animation:raFlow 1.2s linear infinite;z-index:5}
.research-approach-animation .ra-line.l1{left:31%;top:43%;width:27%;transform:rotate(-7deg)}
.research-approach-animation .ra-line.l2{left:50%;top:34%;width:24%;transform:rotate(9deg);animation-delay:.3s}
.research-approach-animation .ra-line.l3{left:42%;top:61%;width:34%;transform:rotate(-2deg);animation-delay:.6s}
.research-approach-animation .ra-pulse{position:absolute;width:10px;height:10px;border-radius:50%;background:#58e4d5;box-shadow:0 0 0 0 rgba(88,228,213,.58);animation:raPulse 2.2s ease-out infinite;z-index:6}
.research-approach-animation .ra-p1{left:28%;top:66%}.research-approach-animation .ra-p2{left:42%;top:61%;animation-delay:.55s}.research-approach-animation .ra-p3{left:56%;top:68%;animation-delay:1.1s}.research-approach-animation .ra-p4{left:66%;top:59%;animation-delay:1.65s}
.research-approach-animation .ra-hud{position:absolute;right:3%;top:8%;width:25%;padding:16px 18px;border-radius:18px;border:1px solid rgba(137,238,228,.22);background:rgba(4,18,31,.54);backdrop-filter:blur(10px);box-shadow:0 16px 50px rgba(0,0,0,.18);animation:raFloat 5.5s ease-in-out infinite;z-index:7}
.research-approach-animation .ra-hud-title{font-size:.72rem;letter-spacing:.14em;color:#b6f5ef;font-weight:800;margin-bottom:11px}
.research-approach-animation .ra-bars{display:flex;gap:9px;align-items:end;height:54px}
.research-approach-animation .ra-bars i{display:block;width:13%;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#66e9dc,#3487d9);transform-origin:bottom;animation:raBars 2.8s ease-in-out infinite}
.research-approach-animation .ra-bars i:nth-child(1){height:28%}.research-approach-animation .ra-bars i:nth-child(2){height:50%;animation-delay:.2s}.research-approach-animation .ra-bars i:nth-child(3){height:42%;animation-delay:.4s}.research-approach-animation .ra-bars i:nth-child(4){height:72%;animation-delay:.6s}.research-approach-animation .ra-bars i:nth-child(5){height:90%;animation-delay:.8s}
.research-approach-animation .ra-stage{position:absolute;left:3%;bottom:4%;display:flex;gap:12px;align-items:center;padding:10px 14px;border-radius:999px;background:rgba(3,18,30,.56);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.10);font-size:.78rem;z-index:7;color:#bcd2df}
.research-approach-animation .ra-stage-dot{width:7px;height:7px;border-radius:50%;background:#58e4d5;box-shadow:0 0 12px #58e4d5}
.research-approach-animation .ra-stage strong{color:#fff;letter-spacing:.08em}
.research-approach-animation .ra-glow{position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(44px);opacity:.18;mix-blend-mode:screen;z-index:3}
.research-approach-animation .g1{left:35%;top:43%;background:#3bf4c7;animation:raGlow 4s ease-in-out infinite}.research-approach-animation .g2{left:57%;top:36%;background:#2b83ff;animation:raGlow 4.8s ease-in-out infinite .8s}
@keyframes raCamera{0%{transform:scale(1.02) translate3d(-.4%,0,0)}100%{transform:scale(1.095) translate3d(1.2%,-.9%,0)}}
@keyframes raScan{0%{transform:translateX(0) skewX(-15deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(620%) skewX(-15deg);opacity:0}}
@keyframes raFlow{to{background-position:34px 0}}
@keyframes raPulse{0%{transform:scale(.6);box-shadow:0 0 0 0 rgba(88,228,213,.6);opacity:.8}75%{transform:scale(1);box-shadow:0 0 0 20px rgba(88,228,213,0);opacity:1}100%{opacity:0}}
@keyframes raFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes raBars{0%,100%{transform:scaleY(.78)}50%{transform:scaleY(1.08)}}
@keyframes raGlow{0%,100%{transform:scale(.8);opacity:.12}50%{transform:scale(1.25);opacity:.24}}
@media(max-width:900px){.research-approach-animation .ra-hud{width:34%}.research-approach-animation .ra-stage{font-size:.67rem;gap:.5rem}}
@media(max-width:650px){.research-approach-animation{border-radius:20px}.research-approach-animation .ra-hud{width:43%;padding:12px}.research-approach-animation .ra-stage{left:4%;right:4%;flex-wrap:wrap}.research-approach-animation .ra-stage strong{width:100%}}
@media(prefers-reduced-motion:reduce){.research-approach-animation *{animation-duration:.001ms!important;animation-iteration-count:1!important}}
