/* ==========================================================================
   Holistic Minds - Core Styles & Smooth Page Transitions
   ========================================================================== */

/* Modern Cross-Document View Transitions */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both fadeOut;
}

::view-transition-new(root) {
    animation: 250ms cubic-bezier(0.4, 0, 0.2, 1) both fadeIn;
}

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

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

/* Base Layout & Performance Styling */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background-color: #FCFCFC;
    color: #222222;
    opacity: 1;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 100vh;
}

/* Page Transition Out State */
body.page-is-transitioning {
    opacity: 0;
    pointer-events: none;
}

/* Smooth Image Display & Zero Layout Shift */
img {
    content-visibility: auto;
}

img[loading="lazy"] {
    opacity: 1;
    transition: opacity 0.35s ease-in-out;
}

/* Mobile Menu Transitions */
#mobile-menu {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, transform 0.25s ease;
    transform-origin: top;
}

#mobile-menu.menu-closed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-color: transparent !important;
}

#mobile-menu.menu-open {
    max-height: 480px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    overflow: visible;
}

/* Navigation Links Micro-interactions */
.nav-link {
    position: relative;
    transition: color 0.2s ease, border-color 0.2s ease;
}

/* Category Filter Buttons in Blog */
.filter-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cards Hover Elevation */
.blog-card-hover {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card-hover:hover {
    transform: translateY(-3px);
}