/* CSS Custom Properties */
:root {
  /* Terminal backgrounds */
  --bg: #282c34;
  --bg2: #1e2228;
  --panel: #1a1e24;
  --panel2: #21252b;

  /* HFN Consultancy brand accents */
  --accent: #00d4ff;
  --accent2: #00ff88;
  --muted: #7dd3fc;

  /* Borders & text - BRIGHTER for readability */
  --border: #3a5060;
  --fg: #c8e6f4;
  --heading: #e8f4fc;
  --text-muted: #a0b8c4;

  /* Status colors */
  --green: #00ff88;
  --gold: #f0ad4e;
  --red: #e06c75;

  --radius: 8px;
}

/* Base / Reset */
html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--fg);
    overflow-x: hidden;
    background:
        radial-gradient(1100px 520px at 82% -10%, rgba(0, 212, 255, 0.08), transparent 60%),
        radial-gradient(900px 520px at 0% 0%, rgba(53, 90, 102, 0.25), transparent 55%),
        var(--bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

#home,
#about,
#services,
#works,
#contact {
    scroll-margin-top: 6rem;
}

/* Scroll Animation Classes */
.hero, section {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}

.hero.in, section.in {
    opacity: 1;
    transform: none;
}

.home-content,
.about-header,
.about-label,
.about-title,
.about-description,
.about-sections,
.about-card,
.services-header,
.services-description,
.services-grid,
.service-card,
.works-header,
.works-description,
.works-grid,
.work-card,
.contact-label,
.contact-title,
.contact-info,
.contact-address {
    opacity: 0;
}

.animate-in {
    animation: fadeInUp 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.home-content.animate-in { animation-delay: 0s; }
.home-sidelinks li.animate-in { animation: fadeInRight 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.about-card.animate-in { animation-delay: 0.15s; }
.about-card:nth-child(2).animate-in { animation-delay: 0.3s; }
.service-card.animate-in { animation-delay: 0.1s; }
.work-card.animate-in { animation-delay: 0.1s; }
.contact-label.animate-in { animation-delay: 0s; }
.contact-title.animate-in { animation-delay: 0.1s; }
.contact-info.animate-in { animation-delay: 0.2s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

@keyframes scroll-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(5px);
    }
    60% {
        transform: translateY(3px);
    }
}

@keyframes term-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero, section {
        opacity: 1 !important;
        transform: none !important;
    }

    .home-content,
    .about-header,
    .about-label,
    .about-title,
    .about-description,
    .about-sections,
    .about-card,
    .services-header,
    .services-description,
    .services-grid,
    .service-card,
    .works-header,
    .works-description,
    .works-grid,
    .work-card,
    .contact-label,
    .contact-title,
    .contact-info,
    .contact-address {
        opacity: 1 !important;
        transform: none !important;
    }

    .s-home::before {
        animation: none !important;
    }

    #heroFlow {
        display: none !important;
    }
}