/* ============================================================ PERLYN-IT | animations.css Animation Definitions — Scroll reveals, hover effects, transitions ============================================================ */ /* ── Keyframes ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 20px rgba(13, 115, 119, 0.20); } 50% { box-shadow: 0 0 40px rgba(13, 115, 119, 0.40); } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes lineGrow { from { width: 0; } to { width: 100%; } } @keyframes counterUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── Scroll-Reveal Base States ── */ /* IMPORTANT: opacity:0 only applies when .js-ready is on . animations.js adds .js-ready immediately on load. If JS is blocked or fails, all content remains visible — no blank page. */ .js-ready [data-reveal] { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; } .js-ready [data-reveal="fade-up"] { transform: translateY(28px); } .js-ready [data-reveal="fade-in"] { transform: none; } .js-ready [data-reveal="fade-left"] { transform: translateX(28px); } .js-ready [data-reveal="fade-right"] { transform: translateX(-28px); } .js-ready [data-reveal="scale-in"] { transform: scale(0.94); } /* Visible state — set by IntersectionObserver in animations.js */ .js-ready [data-reveal].is-visible { opacity: 1; transform: none; } /* Stagger children via custom delay */ [data-reveal-delay="100"] { transition-delay: 0.10s; } [data-reveal-delay="200"] { transition-delay: 0.20s; } [data-reveal-delay="300"] { transition-delay: 0.30s; } [data-reveal-delay="400"] { transition-delay: 0.40s; } [data-reveal-delay="500"] { transition-delay: 0.50s; } [data-reveal-delay="600"] { transition-delay: 0.60s; } [data-reveal-delay="700"] { transition-delay: 0.70s; } [data-reveal-delay="800"] { transition-delay: 0.80s; } /* ── Hero Entrance ── */ .hero-animate-1 { animation: fadeDown 0.7s ease both; animation-delay: 0.1s; } .hero-animate-2 { animation: fadeUp 0.7s ease both; animation-delay: 0.3s; } .hero-animate-3 { animation: fadeUp 0.7s ease both; animation-delay: 0.5s; } .hero-animate-4 { animation: fadeUp 0.7s ease both; animation-delay: 0.7s; } /* ── Hover Glow Effect ── */ .hover-glow { transition: box-shadow var(--transition-base), transform var(--transition-base); } .hover-glow:hover { box-shadow: var(--shadow-teal); transform: translateY(-3px); } .hover-glow--gold:hover { box-shadow: var(--shadow-gold); transform: translateY(-3px); } /* ── Card Lift ── */ .card-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); } .card-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); } /* ── Floating Element ── */ .float { animation: float 5s ease-in-out infinite; } .float--slow { animation-duration: 7s; } .float--delayed { animation-delay: 1.5s; } /* ── Glow Pulse ── */ .glow-pulse { animation: glowPulse 3s ease-in-out infinite; } /* ── Nav Scroll Transition ── */ /* Handled via JS adding .scrolled class to .nav element */ /* ── Accordion ── */ .accordion__body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s ease; padding-top: 0; } .accordion__body.open { max-height: 600px; padding-top: var(--space-md); } /* ── Page transition ── */ .page-enter { animation: fadeIn 0.4s ease both; } /* ── Respect user motion preference ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1; transform: none; } }