/* ============================================================ ANIMATIONS.CSS — Scroll-triggered section animations Drop this AFTER index.css in your . No existing styles are overridden — purely additive. ============================================================ */ /* ── 1. BASE ANIMATION STATES ────────────────────────────── */ .anim-fade-up { opacity: 0; transform: translateY(48px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .anim-fade-down { opacity: 0; transform: translateY(-48px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .anim-fade-left { opacity: 0; transform: translateX(-56px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .anim-fade-right { opacity: 0; transform: translateX(56px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .anim-zoom-in { opacity: 0; transform: scale(0.82); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .anim-blur-in { opacity: 0; filter: blur(12px); transform: scale(0.97); transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease; } .anim-rotate-in { opacity: 0; transform: rotate(-8deg) scale(0.9); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } /* All converge to natural position */ .anim-fade-up.in, .anim-fade-down.in, .anim-fade-left.in, .anim-fade-right.in, .anim-zoom-in.in, .anim-blur-in.in, .anim-rotate-in.in { opacity: 1; transform: none; filter: none; } /* ── 2. STAGGER DELAY HELPERS ────────────────────────────── */ .sd-0 { transition-delay: 0s !important; } .sd-1 { transition-delay: 0.08s !important; } .sd-2 { transition-delay: 0.16s !important; } .sd-3 { transition-delay: 0.24s !important; } .sd-4 { transition-delay: 0.32s !important; } .sd-5 { transition-delay: 0.4s !important; } .sd-6 { transition-delay: 0.48s !important; } .sd-7 { transition-delay: 0.56s !important; } /* ── 3. SECTION HEADER — slide from top + tag pop + divider wipe ── */ .section-header { opacity: 0; transform: translateY(-30px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .section-header.hdr-in { opacity: 1; transform: none; } .section-header .section-tag { opacity: 0; transform: scale(0.75); transition: opacity 0.4s ease 0.15s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s; } .section-header.hdr-in .section-tag { opacity: 1; transform: none; } .section-header .section-title { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s; } .section-header.hdr-in .section-title { opacity: 1; transform: none; } .section-header .section-divider { transform: scaleX(0); transform-origin: left; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.45s; } .section-header.hdr-in .section-divider { transform: scaleX(1); } /* ── 4. SHIMMER on section-tag after reveal ── */ @keyframes shimmer-tag { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .section-header.hdr-in .section-tag.shimmer-once { background: linear-gradient( 90deg, rgba(30, 91, 198, 0.08) 25%, rgba(30, 91, 198, 0.25) 50%, rgba(30, 91, 198, 0.08) 75% ); background-size: 200% 100%; animation: shimmer-tag 1.8s ease 0.5s 1; } /* ── 5. ACHIEVEMENTS — columns slide up ── */ #achievements .ach-grid > div { opacity: 0; transform: translateY(42px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } #achievements .ach-grid > div:nth-child(1) { transition-delay: 0.06s; } #achievements .ach-grid > div:nth-child(2) { transition-delay: 0.2s; } #achievements.section-in .ach-grid > div { opacity: 1; transform: none; } /* Progress bars animate from 0 */ @keyframes pb-grow { from { width: 0 !important; } } #achievements.section-in .progress-bar { animation: pb-grow 0.85s ease 0.5s both; } /* ── 6. PROGRAM INFO / TABS + NOTIFICATIONS — split slide ── */ #placement-stats .prog-left { opacity: 0; transform: translateX(-52px); transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.05s, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.05s; } #placement-stats .prog-right { opacity: 0; transform: translateX(52px); transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.2s, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; } #placement-stats.section-in .prog-left, #placement-stats.section-in .prog-right { opacity: 1; transform: none; } /* Notification scroll wrap lift */ .notif-scroll-wrap { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease 0.4s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s; } #placement-stats.section-in .notif-scroll-wrap { opacity: 1; transform: none; } /* Tab button sliding underline */ .ptab { position: relative; overflow: hidden; } .ptab::after { content: ""; position: absolute; bottom: 0; left: 50%; right: 50%; height: 2px; background: var(--gold); transition: left 0.3s ease, right 0.3s ease; } .ptab:hover::after, .ptab.active::after { left: 0; right: 0; } /* ── 7. FACILITY CARDS — zoom-in with stagger ── */ .facility-card { opacity: 0; transform: scale(0.88) translateY(24px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s; } .section-cards-in .facility-card { opacity: 1; transform: none; } /* Stagger by existing inline transition-delay on parent col */ .section-cards-in [style*="transition-delay:.05s"] .facility-card { transition-delay: 0.06s; } .section-cards-in [style*="transition-delay:.08s"] .facility-card { transition-delay: 0.12s; } .section-cards-in [style*="transition-delay:.11s"] .facility-card { transition-delay: 0.18s; } .section-cards-in [style*="transition-delay:.14s"] .facility-card { transition-delay: 0.24s; } .section-cards-in [style*="transition-delay:.17s"] .facility-card { transition-delay: 0.3s; } .section-cards-in [style*="transition-delay:.2s"] .facility-card { transition-delay: 0.36s; } .section-cards-in [style*="transition-delay:.23s"] .facility-card { transition-delay: 0.42s; } .section-cards-in [style*="transition-delay:.26s"] .facility-card { transition-delay: 0.48s; } /* 3-D tilt on hover (JS enhances further) */ .facility-card:hover { transform: perspective(600px) rotateX(4deg) rotateY(-3deg) translateY(-4px) !important; } /* ── 8. ACADEMICS — flip-in perspective ── */ #academics .academic-card { opacity: 0; transform: rotateY(-14deg) translateX(-20px); transform-origin: left center; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } #academics.section-in .academic-card { opacity: 1; transform: none; } #academics.section-in [style*="transition-delay:.04s"] .academic-card { transition-delay: 0.05s; } #academics.section-in [style*="transition-delay:.08s"] .academic-card { transition-delay: 0.13s; } #academics.section-in [style*="transition-delay:.12s"] .academic-card { transition-delay: 0.21s; } #academics.section-in [style*="transition-delay:.16s"] .academic-card { transition-delay: 0.29s; } #academics.section-in [style*="transition-delay:.24s"] .academic-card { transition-delay: 0.39s; } /* ── 9. RESEARCH — blur reveal + floating orbs ── */ #research { position: relative; overflow: hidden; } #research .research-card { opacity: 0; filter: blur(8px); transform: translateY(32px); transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } #research.section-in .research-card { opacity: 1; filter: none; transform: none; } #research.section-in [style*="transition-delay:.04s"] .research-card { transition-delay: 0.08s; } #research.section-in [style*="transition-delay:.08s"] .research-card { transition-delay: 0.18s; } #research.section-in [style*="transition-delay:.12s"] .research-card { transition-delay: 0.28s; } /* ── 10. FACULTY — spring bounce-in ── */ #faculty .research-card { opacity: 0; transform: rotate(-5deg) scale(0.88); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } #faculty.section-in .research-card { opacity: 1; transform: none; } #faculty.section-in [style*="transition-delay:.04s"] .research-card { transition-delay: 0.08s; } #faculty.section-in [style*="transition-delay:.08s"] .research-card { transition-delay: 0.18s; } #faculty.section-in [style*="transition-delay:.16s"] .research-card { transition-delay: 0.3s; } /* ── 11. STUDENT CORNER — cascade from right ── */ #students .student-resource, #students .academic-card { opacity: 0; transform: translateX(42px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } #students.section-in .student-resource, #students.section-in .academic-card { opacity: 1; transform: none; } #students.section-in [style*="transition-delay:.04s"] .student-resource, #students.section-in [style*="transition-delay:.04s"] .academic-card { transition-delay: 0.06s; } #students.section-in [style*="transition-delay:.12s"] .student-resource { transition-delay: 0.16s; } #students.section-in [style*="transition-delay:.28s"] .student-resource { transition-delay: 0.26s; } #students.section-in [style*="transition-delay:.28s"] ~ [style*="transition-delay:.28s"] .student-resource { transition-delay: 0.36s; } /* ── 12. FOOTER — stagger fade up ── */ footer > .container > .row > .col-lg-4, footer > .container > .row > .col-6, footer > .container > .row > .col-md-4 { opacity: 0; transform: translateY(32px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } footer.footer-in > .container > .row > .col-lg-4 { opacity: 1; transform: none; transition-delay: 0.05s; } footer.footer-in > .container > .row > .col-6 { opacity: 1; transform: none; transition-delay: 0.18s; } footer.footer-in > .container > .row > .col-md-4 { opacity: 1; transform: none; transition-delay: 0.3s; } /* ── 13. PLACEMENTS — page-load entrance ── */ @keyframes hero-fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } #placements { animation: hero-fade-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; } /* ── 14. FLOATING ORB DECORATOR ── */ @keyframes float-orb { 0%, 100% { transform: translateY(0) translateX(0); } 33% { transform: translateY(-18px) translateX(8px); } 66% { transform: translateY(10px) translateX(-6px); } } .anim-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1s ease; animation: float-orb 7s ease-in-out infinite; } .anim-orb.orb-in { opacity: 1; } /* ── 15. ICON PULSE after section reveal ── */ @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(30, 91, 198, 0.35); } 70% { box-shadow: 0 0 0 12px rgba(30, 91, 198, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 91, 198, 0); } } .section-in .facility-icon, .section-in .vm-icon, .section-in .academic-icon, .section-cards-in .facility-icon { animation: pulse-ring 1.8s ease-out 0.8s 2; } /* ── 16. HOVER MICRO-INTERACTIONS ── */ .research-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .research-card:hover { transform: translateY(-6px) !important; } .student-resource { transition: transform 0.3s ease; } .student-resource:hover { transform: translateX(-4px) scale(1.02) !important; } /* ── 17. BUTTON RIPPLE ── */ .btn-primary-custom, .btn-gold, .btn-outline-custom { position: relative; overflow: hidden; } @keyframes ripple { to { transform: scale(1); opacity: 0; } } /* ── 18. ANNOUNCEMENT ITEMS slide-in ── */ .notif-scroll-wrap .ann-item, .announcements-scroll .ann-item { opacity: 0; transform: translateX(30px); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* individual delays applied via JS */ /* ── 19. RESPONSIVE: reduce motion for accessibility ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }