/*
 Theme Name:   Dev Diaries
 Theme URI:    https://developer.dev-diaries.com
 Description:  A child theme of Hello Elementor, customized for a portfolio website. Built with Elementor compatibility in mind.
 Author:       Sheena
 Author URI:   https://developer.dev-diaries.com
 Template:     hello-elementor
 Version:      1.0.0
 Requires at least: 6.0
 Tested up to: 6.7
 Requires PHP: 7.4
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  dev-diaries
 Tags:         portfolio, elementor, one-page, custom-logo, featured-images
*/

/* ==========================================================================
   Dev Diaries Child Theme Custom Styles
   ========================================================================== */

/* --- CSS Variables / Design Tokens --- */
:root {
    --portfolio-primary: #8B6F4E;     /* Warm brown */
    --portfolio-secondary: #D4A0A0;   /* Soft pink */
    --portfolio-accent: #C47D5A;      /* Terracotta accent */
    --portfolio-dark: #2C2C2C;
    --portfolio-light: #FAF7F4;
    --portfolio-text: #3A3A3A;
    --portfolio-text-light: #6B6B6B;
    --portfolio-white: #FFFFFF;
    --portfolio-border: #E8E0D8;
    --portfolio-shadow: rgba(139, 111, 78, 0.1);

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --section-padding: clamp(3rem, 8vw, 6rem);
    --container-max: 1200px;

    /* Transitions */
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Global Resets & Base --- */
body {
    font-family: var(--font-body);
    color: var(--portfolio-text);
    background-color: var(--portfolio-light);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--portfolio-dark);
    line-height: 1.3;
}

a {
    color: var(--portfolio-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover,
a:focus {
    color: var(--portfolio-accent);
}

/* --- Selection --- */
::selection {
    background-color: var(--portfolio-secondary);
    color: var(--portfolio-dark);
}

/* --- Scrollbar (Webkit) --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--portfolio-light);
}

::-webkit-scrollbar-thumb {
    background: var(--portfolio-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--portfolio-accent);
}

/* --- Utility Classes --- */
.portfolio-section {
    padding: var(--section-padding) 0;
}

.portfolio-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.portfolio-btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: var(--portfolio-primary);
    color: var(--portfolio-white);
    border: 2px solid var(--portfolio-primary);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-base);
}

.portfolio-btn:hover,
.portfolio-btn:focus {
    background-color: transparent;
    color: var(--portfolio-primary);
}

.portfolio-btn--outline {
    background-color: transparent;
    color: var(--portfolio-primary);
}

.portfolio-btn--outline:hover,
.portfolio-btn--outline:focus {
    background-color: var(--portfolio-primary);
    color: var(--portfolio-white);
}

/* --- Portfolio Grid --- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.portfolio-card {
    background: var(--portfolio-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px var(--portfolio-shadow);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(139, 111, 78, 0.18);
}

.portfolio-card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.portfolio-card__content {
    padding: 1.5rem;
}

.portfolio-card__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.portfolio-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.portfolio-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--portfolio-light);
    color: var(--portfolio-text-light);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 50px;
    letter-spacing: 0.3px;
}

/* --- Smooth Scroll --- */
html {
    scroll-behavior: smooth;
}

/* --- Back to Top Button --- */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    background-color: var(--portfolio-primary);
    color: var(--portfolio-white);
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    z-index: 999;
    box-shadow: 0 2px 12px var(--portfolio-shadow);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--portfolio-accent);
    transform: translateY(-3px);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}



.glitch-container {
            position: relative;
            width: 100%;
            height: 100vh;
            background: linear-gradient(180deg, #3E2723 0%, #4E342E 50%, #3E2723 100%);
            overflow: hidden;
        }

        /* Scanlines overlay */
        .scanlines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.1) 0px,
                rgba(0, 0, 0, 0.1) 1px,
                transparent 1px,
                transparent 3px
            );
            pointer-events: none;
            z-index: 10;
        }

        /* Occasional flicker overlay */
        .flicker {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0);
            pointer-events: none;
            z-index: 11;
            animation: flicker 8s infinite;
        }

        @keyframes flicker {
            0%, 97%, 100% { opacity: 0; }
            97.5% { opacity: 0.02; }
            98% { opacity: 0; }
            98.5% { opacity: 0.03; }
            99% { opacity: 0; }
        }

        /* RGB shift glitch effect */
        .glitch-line {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(194, 24, 91, 0.3);
            pointer-events: none;
            z-index: 9;
            opacity: 0;
            animation: glitchLine 12s infinite;
        }

        .glitch-line:nth-child(2) {
            animation-delay: 4s;
            background: rgba(129, 199, 132, 0.2);
        }

        .glitch-line:nth-child(3) {
            animation-delay: 8s;
            background: rgba(100, 181, 246, 0.2);
        }

        @keyframes glitchLine {
            0%, 100% { opacity: 0; top: 0; }
            49% { opacity: 0; }
            50% { opacity: 1; top: 20%; }
            51% { opacity: 1; top: 45%; }
            52% { opacity: 0; top: 80%; }
            53%, 100% { opacity: 0; }
        }

        /* Code editor area */
        .code-editor {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 700px;
            padding: 40px;
            z-index: 5;
        }

        .code-line {
            font-size: clamp(14px, 2.5vw, 18px);
            line-height: 2;
            color: rgba(255, 255, 255, 0.15);
            white-space: nowrap;
            overflow: hidden;
            position: relative;
        }

        .code-line.active {
            color: rgba(255, 255, 255, 0.25);
        }

        .code-line .comment {
            color: rgba(139, 195, 74, 0.3);
        }

        .code-line .keyword {
            color: rgba(194, 24, 91, 0.4);
        }

        .code-line .string {
            color: rgba(255, 183, 77, 0.35);
        }

        .code-line .variable {
            color: rgba(100, 181, 246, 0.35);
        }

        .code-line .punctuation {
            color: rgba(255, 255, 255, 0.2);
        }

        /* Cursor */
        .cursor {
            display: inline-block;
            width: 10px;
            height: 1.2em;
            background: rgba(194, 24, 91, 0.6);
            vertical-align: text-bottom;
            animation: cursorBlink 1s step-end infinite;
        }

        @keyframes cursorBlink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        /* Subtle noise texture */
        .noise {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.03;
            z-index: 8;
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        /* Vignette effect */
        .vignette {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, transparent 40%, rgba(30, 15, 10, 0.5) 100%);
            pointer-events: none;
            z-index: 12;
        }

        /* Occasional screen shift */
        .screen-content {
            animation: screenShift 15s infinite;
        }

        @keyframes screenShift {
            0%, 100% { transform: translate(0, 0); }
            96% { transform: translate(0, 0); }
            96.5% { transform: translate(-2px, 0); }
            97% { transform: translate(2px, 0); }
            97.5% { transform: translate(0, 0); }
        }

        /* Demo label */
        .demo-label {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Fira Code', monospace;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.3);
            z-index: 100;
        }