/* CutArc Animations & Atmosphere Entrance animations, scroll-triggered reveals, and background texture. IMPORTANT: scroll-reveal and scroll-reveal-stagger require a .js class on to activate. Without JS, content is fully visible. Add this to each page's : */ /* === Background noise texture === */ body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9998; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; } /* === Page load entrance === */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fade-up { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } .animate-fade-in { animation: fadeIn 0.5s ease both; } /* Stagger delays for sequential element entrance */ .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; } .delay-6 { animation-delay: 0.6s; } /* === Scroll-triggered reveals === Only hide content when JS is confirmed active (.js on ). Without JS, content remains fully visible. */ .js .scroll-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .js .scroll-reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger children inside a scroll-reveal parent */ .js .scroll-reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .js .scroll-reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; } .js .scroll-reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; } .js .scroll-reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.15s; } .js .scroll-reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.2s; } .js .scroll-reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.25s; } .js .scroll-reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.3s; } /* Catch-all for 7th child and beyond */ .js .scroll-reveal-stagger.visible > *:nth-child(n+7) { transition-delay: 0.35s; } /* Make all stagger children visible when parent has .visible */ .js .scroll-reveal-stagger.visible > * { opacity: 1; transform: translateY(0); } /* === Respect reduced-motion preference === */ @media (prefers-reduced-motion: reduce) { .animate-fade-up, .animate-fade-in { animation: none; opacity: 1; transform: none; } .js .scroll-reveal { opacity: 1; transform: none; transition: none; } .js .scroll-reveal-stagger > * { opacity: 1; transform: none; transition: none; } body::after { display: none; } }