/* ==========================================
   JEEVAN CHAKRA - GLOBAL STYLES
   ==========================================
   Only global resets, fonts, and utilities
   NO section-specific styles here
   Place in root folder: /styles.css
   ========================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* ==========================================
   CSS RESET
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================
   BASE TYPOGRAPHY
   ========================================== */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 80px;
    /* Compensate for fixed header */
}

/* ==========================================
   SMOOTH SCROLLING
   ========================================== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    /* Fix for sticky header overlap */
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #F4A261;
    outline-offset: 2px;
}

/* ==========================================
   GLOBAL UTILITY - CHAKRA PULSE ANIMATION
   ========================================== */
.chakra-pulse {
    animation: jc-global-chakra-pulse 3s ease-in-out infinite;
}

@keyframes jc-global-chakra-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {

    header,
    footer,
    nav,
    .no-print {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }
}

/* Scroll Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

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