/*
Theme Name: AKRAM.MARKETING Digital Architecture
Theme URI: https://akram.marketing
Author: Mohammad Akram
Version: 1.3
Text Domain: akram-marketing
*/

body {
    background-color: #0A0A0B;
    color: #F4F4F4;
    overflow-x: hidden;
}

/* Updated Tech Panel for JS interaction */
.tech-panel {
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* High-end Image Card */
.project-card {
    transition: border-color 0.4s ease;
}
.project-card:hover {
    border-color: rgba(197, 160, 89, 1);
}

/* Scrollbar and Selections */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0A0A0B; }
::-webkit-scrollbar-thumb { background: #333; }
::-webkit-scrollbar-thumb:hover { background: #C5A059; }

::selection {
    background: #C5A059;
    color: #0A0A0B;
}

/* Portal Smoothing */
#projectPortal::-webkit-scrollbar { display: none; }
#projectPortal { -ms-overflow-style: none; scrollbar-width: none; }

/* GPU Acceleration for smooth scrolling */
.obsidian-card, img, .timeline-dot {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* Prevent the browser from showing fallback fonts in the Hero */
.font-serif {
    font-display: block; /* Tells the browser: hide text until font is ready */
}

/* Ensure Italics use the specific loaded font-face, not a fake slant */
i, .italic {
    font-style: italic;
    font-synthesis: none; /* Architectural Guard: prevents browser from 'faking' italics */
}

/* Optional: Slight delay to the very first animation to allow for font-rendering */
.animate-\[fadeInUp_1s_ease-out_0\.2s_forwards\] {
    animation-delay: 0.4s; /* Added 0.2s buffer for font-paint */
}