/* ============================================================ home-anim.css — Homepage animation layer Loads after home.css. Does NOT duplicate anything in c3ntro-shared.css or anim.js (parallax, progress bar, icon stroke-draw, cursor spotlight). ============================================================ */ /* ── Hero content entrance ─────────────────────────────── */ /* Starts hidden; JS adds .ha-in to trigger */ .hero-content h1, .hero-content .hero-sub { opacity: 0; } @keyframes ha-rise { from { opacity:0; transform:translateY(36px); } to { opacity:1; transform:none; } } /* h1 — typewriter cursor (absolute so it never affects text flow) */ .hero-content h1 { position: relative; } @keyframes hw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes hw-cursor-fade { to { opacity: 0; } } .hw-cursor { position: absolute; width: 2px; background: currentColor; border-radius: 1px; pointer-events: none; animation: hw-blink .65s step-end infinite; } .hw-cursor-done { animation: hw-blink .65s step-end 3, hw-cursor-fade .3s ease 2s forwards; } /* hero-sub */ .hero-content .hero-sub.ha-in { animation: ha-rise .75s cubic-bezier(.16,1,.3,1) both; } /* ── Topographic lines — slow horizontal drift ──────────── */ @keyframes ha-topo-drift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(16px); } } .hero-topo g { animation: ha-topo-drift 30s ease-in-out infinite; } /* ── Fiber node pulse ───────────────────────────────────── */ @keyframes ha-node-pulse { 0%,100% { opacity:1; } 50% { opacity:.15; } } /* g:nth-of-type(2) = cyan circles, (3) = orange, (4) = green */ .hero-fibers g:nth-of-type(2) circle, .hero-fibers g:nth-of-type(3) circle, .hero-fibers g:nth-of-type(4) circle { animation: ha-node-pulse 3s ease-in-out infinite; } .hero-fibers g:nth-of-type(2) circle:nth-child(1) { animation-delay: .00s } .hero-fibers g:nth-of-type(2) circle:nth-child(2) { animation-delay: .35s } .hero-fibers g:nth-of-type(2) circle:nth-child(3) { animation-delay: .70s } .hero-fibers g:nth-of-type(2) circle:nth-child(4) { animation-delay: 1.05s } .hero-fibers g:nth-of-type(2) circle:nth-child(5) { animation-delay: 1.40s } .hero-fibers g:nth-of-type(2) circle:nth-child(6) { animation-delay: 1.75s } .hero-fibers g:nth-of-type(2) circle:nth-child(7) { animation-delay: 2.10s } .hero-fibers g:nth-of-type(2) circle:nth-child(8) { animation-delay: .52s } .hero-fibers g:nth-of-type(2) circle:nth-child(9) { animation-delay: .88s } .hero-fibers g:nth-of-type(2) circle:nth-child(10) { animation-delay: 1.22s } .hero-fibers g:nth-of-type(3) circle { animation-duration:4.4s; animation-delay: .65s } .hero-fibers g:nth-of-type(4) circle { animation-duration:3.8s; animation-delay:1.45s } /* ── Scroll-reveal keyframes ────────────────────────────── */ @keyframes ha-reveal-up { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } } @keyframes ha-reveal-left { from { opacity:0; transform:translateX(-22px); } to { opacity:1; transform:none; } } @keyframes ha-reveal-scale { from { opacity:0; transform:scale(.82) translateY(18px); } to { opacity:1; transform:none; } } /* CSS gate — elements hidden before animation fires (needs .js-ha in ) */ .js-ha .div-card, .js-ha .scale-stat, .js-ha .scale-main, .js-ha .case, .js-ha .news-item, .js-ha .award { opacity: 0; } /* Snap visible instantly on scroll-up re-entry (no animation flash) */ .js-ha .ha-snap { opacity: 1 !important; animation: none !important; transform: none !important; } /* Each marker class sets which keyframe; .ha-reveal fires it */ .ha-div-card.ha-reveal { animation: ha-reveal-up .75s cubic-bezier(.16,1,.3,1) both; } .ha-scale-stat.ha-reveal { animation: ha-reveal-up .62s cubic-bezier(.16,1,.3,1) both; } .ha-scale-main.ha-reveal { animation: ha-reveal-up .68s cubic-bezier(.16,1,.3,1) both; } .ha-case.ha-reveal { animation: ha-reveal-up .65s cubic-bezier(.16,1,.3,1) both; } .ha-news.ha-reveal { animation: ha-reveal-left .55s cubic-bezier(.16,1,.3,1) both; } .ha-award.ha-reveal { animation: ha-reveal-scale .52s cubic-bezier(.16,1,.3,1) both; } /* ── Division card — image zoom on hover ────────────────── */ /* .div-card already has overflow:hidden in home.css — safe to scale */ .div-card .div-media { transition: transform .6s cubic-bezier(.16,1,.3,1); will-change: transform; } .div-card:hover .div-media { transform: scale(1.06); } /* ── Case study — background image parallax on hover ────── */ .case-img[style*="background-image"] { transition: background-position .5s cubic-bezier(.16,1,.3,1); } .case:hover .case-img[style*="background-image"] { background-position: center 42% !important; } /* ── News items — arrow micro-interaction ───────────────── */ .news-item .news-read .arrow { display: inline-block; transition: transform .18s ease; } .news-item:hover .news-read .arrow { transform: translateX(4px); } /* ── Award logo — subtle lift ───────────────────────────── */ .award { transition: transform .35s cubic-bezier(.16,1,.3,1); } .award:hover { transform: translateY(-4px); } /* ── prefers-reduced-motion — disable everything ────────── */ @media (prefers-reduced-motion:reduce) { .hero-content h1, .hero-content .hero-sub { opacity: 1 !important; animation: none !important; transform: none !important; } .hw-cursor { display: none !important; } .hero-topo g, .hero-fibers g:nth-of-type(2) circle, .hero-fibers g:nth-of-type(3) circle, .hero-fibers g:nth-of-type(4) circle { animation: none !important; } .div-card .div-media { transition: none !important; } .award { transition: none !important; } .ha-div-card.ha-reveal, .ha-scale-stat.ha-reveal, .ha-scale-main.ha-reveal, .ha-case.ha-reveal, .ha-news.ha-reveal, .ha-award.ha-reveal { animation: none !important; opacity: 1 !important; transform: none !important; } }