/*
Theme Name: Natrium Portfolio
Theme URI: https://natriumali.com
Author: Natrium Ali
Author URI: https://natriumali.com
Description: Professional WordPress Portfolio Theme - Dark Gold Design
Version: 2.0.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: natrium-portfolio
Tags: portfolio, custom-colors, custom-menu, featured-images, blog, custom-background, custom-header, custom-logo, footer-widgets, full-width-template, threaded-comments, translation-ready, rtl-language-support
*/


/* ══════════════════════════════════════════
   BASE & RESET
   ══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --gold: var(--color-primary, #F5B800);
    --gold-light: var(--color-primary-light, #FFD54F);
    --gold-dark: var(--color-primary-dark, #C9A227);
    --gold-bright: var(--color-primary-bright, #FFC107);
    --gold-glow: var(--color-primary-40, rgba(245, 184, 0, 0.4));
    --bg: #000000;
    --card: #0a0a0a;
    --surface: #1a1a1a;
}

html { scroll-behavior: smooth; }
body { background-color: var(--bg); color: #fff; overflow-x: hidden; font-family: 'Inter', system-ui, sans-serif; }


/* ══════════════════════════════════════════
   ANIMATIONS - Replaces Framer Motion
   ══════════════════════════════════════════ */

/* Scroll-triggered fade in up */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--delay, 0s);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Floating animation for hero stat cards */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}
.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Pulsing glow for hero image ring */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px var(--color-primary-40), 0 0 40px var(--color-primary-20); }
    50% { box-shadow: 0 0 40px var(--color-primary-60), 0 0 80px var(--color-primary-30); }
}
.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Rotating conic border for hero image */
@keyframes rotateBorder {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.animated-border-container {
    position: relative;
    overflow: hidden;
}
.animated-border-container::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(
        transparent 0deg, transparent 60deg,
        var(--color-primary-90) 90deg,
        var(--color-primary-60) 120deg,
        transparent 150deg, transparent 360deg
    );
    animation: rotateBorder 4s linear infinite;
    z-index: 0;
}
.animated-border-container::after {
    content: '';
    position: absolute; inset: 2px;
    background: #000;
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}
.animated-border-container > * {
    position: relative;
    z-index: 2;
}

/* Button shimmer shine */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.btn-shine {
    position: relative;
    overflow: hidden;
}
.btn-shine::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 3s infinite;
}

/* Gold gradient text with animated shine */
@keyframes goldShine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.gradient-text {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 40%, var(--gold-bright) 60%, var(--gold-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: goldShine 3s linear infinite;
}

/* Skill bar fill animation */
@keyframes fillBar {
    from { width: 0; }
    to { width: var(--target-width, 0%); }
}
.skill-bar {
    width: 0;
    transition: width 1.2s ease-out;
}
.skill-bar.is-visible {
    width: var(--target-width, 0%);
}


/* ══════════════════════════════════════════
   CARD EFFECTS
   ══════════════════════════════════════════ */
.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px var(--color-primary-25), 0 0 20px var(--color-primary-10);
}

.gold-border-hover {
    transition: all 0.3s ease;
}
.gold-border-hover:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 0 20px var(--color-primary-20);
}


/* ══════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-light), var(--gold)); }


/* ══════════════════════════════════════════
   SELECTION & FOCUS
   ══════════════════════════════════════════ */
::selection { background: var(--color-primary-40); color: #fff; }
*:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }


/* ══════════════════════════════════════════
   NOISE OVERLAY
   ══════════════════════════════════════════ */
.noise-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}


/* ══════════════════════════════════════════
   HEADER SCROLL STATE
   ══════════════════════════════════════════ */
#site-header.scrolled {
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-primary-15);
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

/* Active nav link */
.nav-link.active {
    color: #000 !important;
    background-color: var(--gold);
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Carousel fade-in animation */
@keyframes carouselFadeIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
.carousel-fade-in {
    animation: carouselFadeIn 0.4s ease-out;
}

/* Screen reader only (for hidden SEO heading) */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* WordPress 7.0 Admin Refresh & View Transitions */
@media (prefers-color-scheme: dark) {
    :root {
        --admin-color: modern;
    }
}

.wp-admin {
    view-transition-name: none;
}

body {
    view-transition-name: page;
}

/* ══════════════════════════════════════════
   WORDPRESS CORE ALIGNMENT & CAPTION CLASSES
   ══════════════════════════════════════════ */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: var(--card); border: 1px solid rgba(255,255,255,0.1); max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption-text, .gallery-caption { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; color: #a1a1aa; }
.sticky {}
.bypostauthor {}
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }