/* ============================================================ index-animations.css | Movina Values Link in index.html AFTER escripts.css ============================================================ */ /* ── 1. Scroll-reveal base ── */ [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal="left"] { transform: translateX(-40px); opacity: 0; } [data-reveal="right"] { transform: translateX(40px); opacity: 0; } [data-reveal="scale"] { transform: scale(0.92); opacity: 0; } [data-reveal].is-visible { opacity: 1 !important; transform: none !important; } [data-delay="100"] { transition-delay: 0.10s; } [data-delay="200"] { transition-delay: 0.20s; } [data-delay="300"] { transition-delay: 0.30s; } [data-delay="400"] { transition-delay: 0.40s; } /* ── 2. Navbar scroll-shrink ── */ #navbar { transition: padding 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; } #navbar.scrolled { padding: 4px 0; box-shadow: 0 4px 24px rgba(0,0,0,0.08); background: rgba(255,255,255,0.97); } /* ── 3. Hero background rings ── */ .movina-impact { position: relative; overflow: hidden; } .hero-rings { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(74,94,122,0.07); top: 50%; left: 50%; animation: ring-pulse 8s ease-in-out infinite; } .ring:nth-child(1) { width: 420px; height: 420px; transform: translate(-50%,-50%); animation-delay: 0s; } .ring:nth-child(2) { width: 700px; height: 700px; transform: translate(-50%,-50%); animation-delay: 1.8s; } .ring:nth-child(3) { width: 980px; height: 980px; transform: translate(-50%,-50%); animation-delay: 3.6s; } @keyframes ring-pulse { 0%,100% { opacity: 0.4; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.04); } } .movina-impact .container { position: relative; z-index: 1; } /* ── 4. Hero entrance stagger ── */ .hero-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #4A5E7A; background: #eef3fb; border: 1px solid rgba(74,94,122,0.15); padding: 8px 16px; border-radius: 999px; margin-bottom: 20px; opacity: 0; animation: slide-up 0.7s 0.15s cubic-bezier(0.22,1,0.36,1) forwards; } .accent-dot { width: 8px; height: 8px; border-radius: 50%; background: #FAC60A; flex-shrink: 0; animation: dot-pulse 2s ease-in-out infinite; } @keyframes dot-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.6; } } .hero-brand { opacity: 0; animation: slide-up 0.7s 0.30s cubic-bezier(0.22,1,0.36,1) forwards; } .hero-tagline{ opacity: 0; animation: slide-up 0.7s 0.48s cubic-bezier(0.22,1,0.36,1) forwards; } .hero-desc { opacity: 0; animation: slide-up 0.7s 0.62s cubic-bezier(0.22,1,0.36,1) forwards; } .hero-services{ opacity: 0; animation: slide-up 0.7s 0.76s cubic-bezier(0.22,1,0.36,1) forwards; } .hero-cta { opacity: 0; animation: slide-up 0.7s 0.90s cubic-bezier(0.22,1,0.36,1) forwards; } .proof-strip { opacity: 0; animation: slide-up 0.7s 1.05s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes slide-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* Logo bounce-in */ .site-logo { opacity: 0; animation: logo-drop 0.8s 0.05s cubic-bezier(0.34,1.56,0.64,1) forwards; } @keyframes logo-drop { from { opacity: 0; transform: scale(0.7) translateY(-16px); } to { opacity: 1; transform: none; } } /* Typewriter cursor */ .typewriter-cursor { display: inline-block; width: 3px; height: 1em; background: #FAC60A; margin-left: 4px; vertical-align: middle; border-radius: 2px; animation: blink 0.85s step-end infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } /* Animated underline on hero tagline */ .hero-tagline { position: relative; display: inline-block; } .hero-tagline::after { content: ""; display: block; height: 4px; width: 0; background: #FAC60A; border-radius: 999px; margin: 10px auto 0; animation: underline-in 0.9s 1.3s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes underline-in { to { width: 65%; } } /* ── 5. Services scrolling strip ── */ .services-scroll { width: 100%; overflow: hidden; position: relative; margin: 28px 0 36px; } .services-scroll::before, .services-scroll::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; } .services-scroll::before { left: 0; background: linear-gradient(90deg, #fff, transparent); } .services-scroll::after { right: 0; background: linear-gradient(-90deg, #fff, transparent); } .services-track { display: flex; gap: 10px; width: max-content; animation: scroll-left 24s linear infinite; } .services-track:hover { animation-play-state: paused; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .spill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 0.83rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: default; } .spill:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); } .spill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .p1{background:#f0fdfa;border-color:#9FE1CB;color:#0F6E56} .p1 .spill-dot{background:#1D9E75} .p2{background:#faf5ff;border-color:#AFA9EC;color:#3C3489} .p2 .spill-dot{background:#7F77DD} .p3{background:#fefce8;border-color:#FAC775;color:#633806} .p3 .spill-dot{background:#EF9F27} .p4{background:#FAECE7;border-color:#F0997B;color:#4A1B0C} .p4 .spill-dot{background:#D85A30} .p5{background:#E6F1FB;border-color:#85B7EB;color:#042C53} .p5 .spill-dot{background:#378ADD} .p6{background:#EAF3DE;border-color:#C0DD97;color:#173404} .p6 .spill-dot{background:#639922} .p7{background:#FBEAF0;border-color:#ED93B1;color:#4B1528} .p7 .spill-dot{background:#D4537E} /* ── 6. Social proof strip ── */ .proof-strip { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; } .proof-avatars { display: flex; } .avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #fff; } .proof-avatars .avatar:first-child { margin-left: 0; } .av1{background:#4A5E7A} .av2{background:#6D85A8} .av3{background:#FAC60A;color:#1e293b} .av4{background:#9FE1CB;color:#0F6E56} .proof-text { font-size: 0.88rem; color: #64748b; } .proof-text strong { color: #1e293b; font-weight: 700; } /* ── 7. Stats bar ── */ .stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); background: #f1f5f9; border-radius: 24px; overflow: hidden; margin: 60px 0; } .stat-item { padding: 36px 24px; text-align: center; border-right: 1px solid #e2e8f0; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .stat-item:last-child { border-right: none; } .stat-item.is-visible { opacity: 1; transform: none; } .stat-num { font-size: 2.6rem; font-weight: 800; color: #1e293b; line-height: 1; display: block; } .stat-label { font-size: 0.88rem; color: #64748b; margin-top: 6px; display: block; } /* ── 8. Value cards stagger + tilt ── */ .values-grid .value-card { opacity: 0; transform: translateY(28px); 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 ease; } .values-grid .value-card.is-visible { opacity: 1; transform: none; } .tilt-card { transform-style: preserve-3d; will-change: transform; } .tilt-card:hover { box-shadow: 0 22px 48px rgba(74,94,122,0.14); } /* ── 9. Principles stagger ── */ .principles-row .p-item { opacity: 0; transform: translateY(28px); transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1); } .principles-row .p-item.is-visible { opacity: 1; transform: none; } .p-item.is-visible .p-num { animation: num-glow 1.2s ease forwards; } @keyframes num-glow { 0% { color: rgba(250,198,10,0.6); } 100% { color: rgba(59,130,246,0.18); } } /* ── 10. Why-cards stagger + tilt ── */ .why-cards .why-card { opacity: 0; transform: translateY(28px); 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 ease; } .why-cards .why-card.is-visible { opacity: 1; transform: none; } .why-card:hover { box-shadow: 0 18px 40px rgba(74,94,122,0.13); } /* ── 11. Course cards stagger ── */ .courses-grid .course-card { opacity: 0; transform: translateY(28px); transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1); } .courses-grid .course-card.is-visible { opacity: 1; transform: none; } /* ── 12. Section-intro brand-title underline ── */ .section-intro .brand-title { position: relative; display: inline-block; } .section-intro .brand-title::after { content: ""; display: block; height: 3px; width: 0; background: #FAC60A; border-radius: 999px; margin: 8px auto 0; transition: width 0.8s cubic-bezier(0.22,1,0.36,1); } .section-intro.is-visible .brand-title::after { width: 60%; } /* ── 13. Footer column stagger ── */ .footer-column { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .footer-column.is-visible { opacity: 1; transform: none; } /* ── 14. Button ripple ── */ .ripple-btn { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-anim 0.55s linear; background: rgba(255,255,255,0.32); pointer-events: none; } @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } } /* ── 15. Scroll cue ── */ .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 40px auto 0; opacity: 0; animation: fade-in 0.8s 2.2s ease forwards; } @keyframes fade-in { to { opacity: 1; } } .scroll-cue span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; font-weight: 600; } .chevron { width: 16px; height: 16px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: rotate(45deg); animation: bounce-down 1.5s ease-in-out infinite; } @keyframes bounce-down { 0%,100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(5px); } } /* ── 16. Reduced-motion override ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; } [data-reveal], .hero-tag, .hero-brand, .hero-tagline, .hero-desc, .hero-services, .hero-cta, .proof-strip, .site-logo, .value-card, .p-item, .why-card, .course-card, .footer-column, .stat-item { opacity: 1 !important; transform: none !important; } }