.reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 600ms ease, transform 600ms ease;
        }

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

        /* Sutil sombreado para tarjetas */
        .card-shadow {
            box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06), 0 2px 6px rgba(16, 24, 40, 0.04);
        }

        /* Project card tweaks */
        .project-card img {
            transition: transform 320ms ease;
        }

        .project-card:hover img {
            transform: scale(1.04);
        }

        /* Force a consistent height for the cards so thumbnails align */
        .project-card .project-thumb {
            height: 20rem;
            display: block;
            width: 100%;
        }

        /* Ensure project thumbnails are centered */
        .project-card .project-thumb {
            object-position: center;
        }

        @media (min-width: 640px) {
            .project-card .project-thumb {
                height: 14rem;
            }

            .project-card {
                min-height: 22rem;
            }
        }

        /* Center thumb crop */
        .project-card .project-thumb {
            object-position: center;
        }

        /* ---------------------------------------------
           Dark mode color tweaks and toggle animation
           --------------------------------------------- */

        /* Slightly richer dark background to improve depth */
        .dark body {
            background: radial-gradient(1200px 400px at 6% 6%, rgba(79, 70, 229, 0.05), transparent 16%),
                linear-gradient(180deg, #071023 0%, #06111c 100%);
        }

        /* Tweak cards to feel warmer in dark mode and increase contrast */
        .dark .card-shadow {
            box-shadow: 0 10px 30px rgba(2, 6, 23, 0.7);
            background-image: linear-gradient(180deg, rgba(3, 7, 18, 0.6), rgba(6, 13, 26, 0.6));
        }

        /* Project thumb background in dark — keep subtle contrast */
        .dark .project-thumb {
            background-color: #0b1220;
        }

        /* Use an amber-like accent for dark hover state for better visibility */
        .dark a:hover,
        .dark a:focus {
            color: #f59e0b;
        }

        /* Theme toggle animation */
        .theme-anim {
            animation: theme-bounce 420ms cubic-bezier(.2, .9, .3, 1);
        }

        @keyframes theme-bounce {
            0% {
                transform: scale(1) rotate(0deg);
            }

            28% {
                transform: scale(1.08) rotate(18deg);
            }

            62% {
                transform: scale(.98) rotate(-8deg);
            }

            100% {
                transform: scale(1) rotate(0deg);
            }
        }

        /* Mobile SVG icons animate a small lift when theme changes */
        #btn-theme svg,
        #btn-theme-desktop svg,
        .theme-anim svg {
            transition: transform 220ms ease, opacity 220ms ease;
        }

        .theme-anim svg {
            transform: translateY(-2px) scale(1.05);
        }

        /* Mobile menu button animation */
        #btn-menu {
            transition: transform 220ms cubic-bezier(.2, .9, .3, 1), background-color 180ms ease, box-shadow 220ms ease;
        }

        /* Animate the SVG inside the menu button for a smooth rotation */
        #btn-menu svg {
            transition: transform 260ms cubic-bezier(.2, .9, .3, 1);
        }

        /* When the menu is open we add a class to change background and rotate the icon */
        #btn-menu.menu-open {
            transform: scale(1.02);
            background-color: rgba(79, 70, 229, 0.12);
            /* indigo-600/12 */
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
        }

        #btn-menu.menu-open svg {
            transform: rotate(90deg) scale(1.06);
        }

        /* Mobile dropdown animation - show and hide smoothly */
        #mobile-nav {
            transition: transform 220ms cubic-bezier(.2, .9, .3, 1), opacity 220ms ease, visibility 220ms linear;
            transform-origin: top right;
            opacity: 0;
            transform: translateY(-6px) scale(.99);
            visibility: hidden;
        }

        #mobile-nav.open {
            opacity: 1;
            transform: translateY(0) scale(1);
            visibility: visible;
        }

        /* Slight border to the dropdown that changes per theme */
        #mobile-nav {
            border: 1px solid rgba(15, 23, 42, 0.06);
        }

        .dark #mobile-nav {
            border-color: rgba(255, 255, 255, 0.04);
        }

        /* Header border that adapts to theme (helps separation on mobile) */
        header {
            border-bottom: 1px solid rgba(15, 23, 42, 0.04);
        }

        .dark header {
            border-bottom-color: rgba(255, 255, 255, 0.04);
        }

        /* Avatar in About card */
        .avatar-img {
            display: block;
            border-radius: 9999px;
            /* rounded-full */
            border: 3px solid #fff;
            box-shadow: 0 8px 20px rgba(2, 6, 23, 0.12);
            transition: transform 240ms cubic-bezier(.2, .9, .3, 1), box-shadow 240ms ease;
            /* Ensure the face is visible inside the crop — allow variable to fine-tune */
            object-fit: cover;
            object-position: var(--avatar-position, 50% 14%);
            max-width: 190px;
            max-height: 190px;
            width: 190px;
        }

        .avatar-img:hover,
        .avatar-img:focus {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 14px 40px rgba(2, 6, 23, 0.18);
        }

        /* Dark mode avatar border */
        .dark .avatar-img {
            border-color: rgba(255, 255, 255, 0.06);
        }