/* ============================================================ Smooth scrolling ============================================================ */ html { scroll-behavior: smooth; } /* ============================================================ Hero entrance animations ============================================================ */ #centerstage h1 { animation: nv-slide-up 0.75s cubic-bezier(0.23, 1, 0.32, 1) 0.1s both; } #centerstage h2 { animation: nv-slide-up 0.75s cubic-bezier(0.23, 1, 0.32, 1) 0.25s both; } #centerstage-content { animation: nv-slide-up 0.75s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both; } #centerstage h4 { animation: nv-slide-up 0.75s cubic-bezier(0.23, 1, 0.32, 1) 0.55s both; } @keyframes nv-slide-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Blinking underscore cursor after the h1 — terminal aesthetic */ #centerstage h1::after { content: '_'; color: rgba(255, 255, 255, 0.65); font-weight: 300; margin-left: 2px; animation: nv-blink 1.1s step-end infinite; } @keyframes nv-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ============================================================ Scroll-reveal system Classes assigned by JS; only active when .js-loaded on prevents flash of invisible content if JS is disabled ============================================================ */ .js-loaded .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.23, 1, 0.32, 1); } .js-loaded .reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.23, 1, 0.32, 1); } .js-loaded .reveal-right { opacity: 0; transform: translateX(36px); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.23, 1, 0.32, 1); } .js-loaded .reveal.is-visible, .js-loaded .reveal-left.is-visible, .js-loaded .reveal-right.is-visible { opacity: 1; transform: none; } /* ============================================================ Portfolio section hover effects ============================================================ */ .platformDisplay img { transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; } .portfolio-section:hover .platformDisplay img { transform: scale(1.025); } /* Subtle cyan glow on sectionTitle accent bar on hover */ .sectionTitle { transition: border-color 0.3s ease; } .sectionTitle:hover { border-left-color: rgba(0, 255, 240, 0.55); box-shadow: -3px 0 12px rgba(0, 255, 240, 0.12); } /* ============================================================ Contact form (existing #contactForm rules in main.css are dead — wrong ID) ============================================================ */ #contact-form ul li { margin-bottom: 22px; list-style: none; } #contact-form label { display: block; color: #999; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 7px; font-family: Helvetica, Arial, sans-serif; } #contact-form input[type="text"], #contact-form textarea { display: block; width: 100%; max-width: 420px; background-color: #1e1e1e; color: #ffffff; border: 1px solid #3a3a3a; border-radius: 0; padding: 10px 12px; font-size: 14px; font-family: Helvetica, Arial, sans-serif; box-sizing: border-box; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #contact-form textarea { height: 180px; resize: vertical; } #contact-form input[type="text"]:focus, #contact-form textarea:focus { border-color: #00fff0; box-shadow: 0 0 0 2px rgba(0, 255, 240, 0.12); } #contact-form input[type="text"]::placeholder, #contact-form textarea::placeholder { color: #484848; } /* Submit / Clear row */ #contactSubmit { margin-top: 8px; width: auto !important; } #contactSubmit p { float: none !important; display: inline-block; margin: 0; } p#contact-submit { background-color: #00fff0; color: #141414; border: 1px solid #00fff0; font-size: 12px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 22px; width: auto; margin-left: 0; margin-right: 10px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } #contact-submit:hover { background-color: transparent; color: #00fff0; } #clear { background-color: transparent; color: #555; border: 1px solid #3a3a3a; font-size: 12px; font-family: Helvetica, Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 18px; margin-left: 10px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } #clear:hover { color: #d4d4d4; border-color: #555; } /* ============================================================ Reduced motion: disable everything ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #centerstage h1, #centerstage h2, #centerstage-content, #centerstage h4 { animation: none; } #centerstage h1::after { display: none; } .js-loaded .reveal, .js-loaded .reveal-left, .js-loaded .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; } .platformDisplay img { transition: none; } .sectionTitle { transition: none; } }