/* ========================================================================== SOURCING INDIA — Motion layer Pure CSS + IntersectionObserver driven. No library dependency. Every effect degrades to "visible, static" if JS or motion is unavailable. ========================================================================== */ /* ------------------- Page entry (runs once per load) --------------------- */ @keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes maskWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-14px,10px) rotate(-1.5deg)}} @keyframes sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(220%)}} /* The gets .js from main.js as early as possible. Without JS every animated element simply renders in its final state. */ .js .page-enter{animation:pageIn .62s var(--ease) both} .js .hero-mask{animation:maskWipe .95s var(--ease) both .1s} /* ------------------------- Scroll reveal system -------------------------- */ .js [data-reveal]{opacity:0;transform:translateY(24px);will-change:opacity,transform} .js [data-reveal="fade"]{transform:none} .js [data-reveal="left"]{transform:translateX(-28px)} .js [data-reveal="right"]{transform:translateX(28px)} .js [data-reveal="scale"]{transform:scale(.965)} .js [data-reveal].is-revealed{ opacity:1;transform:none; transition:opacity .78s var(--ease),transform .78s var(--ease); } /* Stagger children */ .js [data-reveal-group]>*{opacity:0;transform:translateY(22px)} .js [data-reveal-group].is-revealed>*{ opacity:1;transform:none; transition:opacity .7s var(--ease),transform .7s var(--ease); } .js [data-reveal-group].is-revealed>*:nth-child(1){transition-delay:.02s} .js [data-reveal-group].is-revealed>*:nth-child(2){transition-delay:.09s} .js [data-reveal-group].is-revealed>*:nth-child(3){transition-delay:.16s} .js [data-reveal-group].is-revealed>*:nth-child(4){transition-delay:.23s} .js [data-reveal-group].is-revealed>*:nth-child(5){transition-delay:.3s} .js [data-reveal-group].is-revealed>*:nth-child(6){transition-delay:.37s} .js [data-reveal-group].is-revealed>*:nth-child(7){transition-delay:.44s} .js [data-reveal-group].is-revealed>*:nth-child(8){transition-delay:.51s} .js [data-reveal-group].is-revealed>*:nth-child(n+9){transition-delay:.56s} /* ------------------------------ Ambience -------------------------------- */ .js .float-slow{animation:floaty 7s ease-in-out infinite} .js .drift-slow{animation:drift 16s ease-in-out infinite} /* Decorative gradient orb used behind dark sections */ .orb{ position:absolute;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle at 32% 32%,rgba(62,217,163,.34),rgba(34,167,224,.16) 46%,transparent 70%); filter:blur(6px); } .orb--a{width:min(46vw,520px);aspect-ratio:1;right:-8%;top:-18%} .orb--b{width:min(34vw,380px);aspect-ratio:1;left:-10%;bottom:-22%; background:radial-gradient(circle at 60% 40%,rgba(27,79,216,.34),transparent 68%)} /* --------------------- Animated counters (numbers) ----------------------- */ .counter{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* -------------------- Progress line for process rows --------------------- */ .js .process__item::before{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)} .js .process__item.is-revealed::before, .js [data-reveal-group].is-revealed .process__item::before{transform:scaleX(1)} /* --------------------- Roadmap connector line draw ----------------------- */ .js .roadmap__item::before{transform:scaleY(0);transform-origin:top;transition:transform .85s var(--ease)} .js .roadmap.is-revealed .roadmap__item::before{transform:scaleY(1)} .js .roadmap.is-revealed .roadmap__item:nth-child(2)::before{transition-delay:.14s} .js .roadmap.is-revealed .roadmap__item:nth-child(3)::before{transition-delay:.26s} .js .roadmap.is-revealed .roadmap__item:nth-child(4)::before{transition-delay:.38s} .js .roadmap.is-revealed .roadmap__item:nth-child(5)::before{transition-delay:.5s} .js .roadmap.is-revealed .roadmap__item:nth-child(6)::before{transition-delay:.62s} .js .roadmap.is-revealed .roadmap__item:nth-child(7)::before{transition-delay:.74s} /* ------------------------ Capital journey rail --------------------------- */ .journey{position:relative;display:grid;gap:clamp(20px,2.4vw,30px);grid-template-columns:repeat(5,1fr)} .journey::before{ content:"";position:absolute;left:0;right:0;top:23px;height:2px; background:linear-gradient(90deg,rgba(34,167,224,.5),rgba(62,217,163,.5)); transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease); } .journey.is-revealed::before,html:not(.js) .journey::before{transform:scaleX(1)} .journey__step{position:relative;padding-top:60px} .journey__step .dot{ position:absolute;top:8px;left:0;width:32px;height:32px;border-radius:11px; background:var(--grad-brand);display:grid;place-items:center; font-size:.7rem;font-weight:700;color:#fff; box-shadow:0 0 0 6px var(--surface); } .section--dark .journey__step .dot{box-shadow:0 0 0 6px #0D2350} .journey__step h4{margin-bottom:6px;font-size:1rem} .journey__step p{font-size:var(--fs-xs);color:var(--muted);margin:0;line-height:1.6} .section--dark .journey__step p{color:rgba(255,255,255,.62)} /* ------------------------- Interactive polish ---------------------------- */ .hover-sheen{position:relative;overflow:hidden;isolation:isolate} .hover-sheen::after{ content:"";position:absolute;top:0;bottom:0;width:38%;z-index:1;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform:translateX(-120%); } .js .hover-sheen:hover::after{animation:sheen 1.05s var(--ease)} .lift{transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .lift:hover{transform:translateY(-6px);box-shadow:var(--shadow)} /* Underline sweep for text links inside prose */ .prose p a,.prose li a{ background-image:linear-gradient(var(--royal-blue),var(--royal-blue)); background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .34s var(--ease); } .prose p a:hover,.prose li a:hover{background-size:0 1px} /* Header shrink on scroll */ .site-header{transition:height .3s var(--ease),background-color .3s var(--ease), border-color .3s var(--ease),box-shadow .3s var(--ease)} .site-header.is-stuck .header-inner{height:calc(var(--header-h) - 6px)} /* Image zoom frames */ .zoom-frame{overflow:hidden} .zoom-frame img{transition:transform 1s var(--ease)} .zoom-frame:hover img{transform:scale(1.045)} /* ------------------------ Reduced motion respect ------------------------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } .js [data-reveal],.js [data-reveal-group]>*{opacity:1!important;transform:none!important} .js .process__item::before,.js .roadmap__item::before,.journey::before{transform:none!important} .js .float-slow,.js .drift-slow{animation:none!important} }