/* ============================================================
   VeridusCx — Main Stylesheet
   ============================================================ */

/* ---------- Base & Reset ---------- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
}

/* ---------- Hero ---------- */
.hero-gradient {
    background: linear-gradient(135deg, #041627 0%, #1a2b3c 100%);
}

/* ---------- Rotating Motto Animations ---------- */
.motto-enter {
    animation: mottoIn 0.8s ease forwards;
}

.motto-exit {
    animation: mottoOut 0.8s ease forwards;
}

@keyframes mottoIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes mottoOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-30px); }
}

/* ---------- Scroll Reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Nav Shrink on Scroll ---------- */
.nav-scrolled {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    box-shadow: 0 4px 30px rgba(4, 22, 39, 0.3);
}

/* ---------- LinkedIn & Instagram Brand Colors ---------- */
.social-linkedin:hover {
    background-color: #0A66C2 !important;
    border-color: #0A66C2 !important;
    color: #ffffff;
}

.social-instagram {
    position: relative;
    overflow: hidden;
    z-index: 0;
    border: 1px solid rgba(255,255,255,0.1);
}

.social-instagram::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    border-radius: inherit;
}

.social-instagram:hover::before {
    opacity: 1;
}

.social-instagram:hover {
    border-color: transparent !important;
    color: #ffffff;
}