@layer design-system, reset, base, utilities, components, layout, overrides;
@import "https://unpkg.com/open-props" layer(design-system.tokens);
@import "https://cdn.jsdelivr.net/gh/mobalti/open-props-interfaces@main/hdr-palettes-astro-op/src/styles/hdr-palettes.css" layer(design-system.tokens-hdr);

/* Custom Color Palette */
:root {
    --color-cyan: #00BCD4; /* A vibrant cyan */
    --color-purple: #673AB7; /* A deep purple */
    --color-orange: #FF9800; /* A bright orange */

    /* Re-mapping Open-Props to our custom colors for consistency */
    --ui-surface: var(--hdr-purple-15);
    --ui-surface-container: var(--hdr-purple-14);
    --ui-on-surface: oklch(from var(--ui-surface) var(--contrast-fn) 0 h);
    --ui-primary: var(--color-orange); /* Using orange for primary accents */
    --ui-accent: var(--color-cyan); /* Using cyan for secondary accents */
    --ui-text: var(--ui-on-surface);
}

@layer reset {
    *,
    ::before,
    ::after {
        box-sizing: border-box;
    }

    :where(:not(dialog)) {
        margin: 0;
    }

    :where(html) {
        -webkit-text-size-adjust: none;

        @media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }
    }

    :where(body) {
        min-block-size: 100svb;
        -webkit-font-smoothing: antialiased;
        font-family: var(--base-font), var(--font-system-ui);
        color: var(--ui-text);
        background-color: var(--ui-surface-container);
    }
}

@layer base {
    html {
        color-scheme: dark;
        --palette-chroma: 1;
        --threshold: 0.625;
        --contrast-fn: min(max(((l - var(--threshold)) * -infinity), 0), 1);

        --ui-spacing-none: 0;
        --ui-spacing-xxs: var(--size-1);
        --ui-spacing-xs: var(--size-2);
        --ui-spacing-sm: var(--size-3);
        --ui-spacing-md: var(--size-5);
        --ui-spacing-lg: var(--size-7);
        --ui-spacing-xl: var(--size-8);
        --ui-spacing-xxl: var(--size-11);

        --base-font: "Roboto";
        --ui-label: var(--font-weight-5) var(--font-size-1) / var(--font-lineheight-0) var(--base-font), var(--font-system-ui);
        --ui-body: var(--font-weight-4) var(--font-size-2) / var(--font-lineheight-3) var(--base-font), var(--font-system-ui);
        --ui-title: var(--font-weight-5) var(--font-size-4) / var(--font-lineheight-1) var(--base-font), var(--font-system-ui);

        --ui-icon-font-family: 'Material Symbols Outlined';
        --icon-font-small: var(--font-weight-6) var(--font-size-1) / 1 var(--ui-icon-font-family);
        --icon-font-medium: var(--font-weight-4) var(--font-size-4) / 0 var(--ui-icon-font-family);

        @media (prefers-color-scheme: light) {
            --shadow-color: 220 40% 2%;
            --shadow-strength: 25%;
        }

        --ui-scroll-btn-radius: var(--radius-4);
        --ui-scroll-btn-layer: var(--layer-3);
        --ui-scroll-btn-outline: var(--border-size-2) dashed var(--ui-primary);
        --ui-scroll-btn-border: var(--border-size-1) solid var(--ui-primary);
        --ui-scroll-btn-size: var(--size-px-9);

        --ui-visual-radius: var(--radius-3);
        --ui-card-radius: calc(var(--ui-visual-radius) * 1.25);
        --ui-btn-radius: var(--radius-2);
        --ui-icon-size: var(--size-7);
        --ui-card-shadow: var(--shadow-2);
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--ui-primary);
    }
}

@layer layout {
    .portfolio-container {
        display: flex;
        min-height: 100vh;
        background-color: var(--ui-surface-container);
    }

    .sidebar {
        width: 250px;
        background-color: var(--ui-surface);
        padding: var(--ui-spacing-md);
        box-shadow: var(--shadow-2);
        flex-shrink: 0;
        overflow-y: auto;
    }

    .search-container {
        margin-bottom: var(--ui-spacing-md);
    }

    #certSearch {
        width: 100%;
        padding: var(--ui-spacing-xs);
        border: 1px solid var(--ui-accent);
        border-radius: var(--ui-btn-radius);
        background-color: var(--ui-surface-container);
        color: var(--ui-text);
    }

    .category-list h3 {
        margin-bottom: var(--ui-spacing-sm);
        color: var(--ui-accent);
    }

    .category-list ul {
        list-style: none;
        padding: 0;
    }

    .category-list li {
        margin-bottom: var(--ui-spacing-xxs);
    }

    .category-list li a {
        display: block;
        padding: var(--ui-spacing-xxs) var(--ui-spacing-xs);
        text-decoration: none;
        color: var(--ui-text);
        border-radius: var(--ui-btn-radius);
        transition: background-color 0.2s ease;
    }

    .category-list li a:hover,
    .category-list li a.active {
        background-color: color-mix(in oklch, var(--ui-accent), var(--ui-surface) 80%);
        color: var(--ui-on-surface);
    }

    .main-content {
        flex-grow: 1;
        padding: var(--ui-spacing-lg);
        background: var(--ui-surface-container) url('https://raw.githubusercontent.com/mobalti/open-props-interfaces/refs/heads/main/hdr-palettes-astro-op/src/assets/images/hero.avif') no-repeat center / cover;
        background-blend-mode: multiply; /* Helps blend the image with the background color */
        background-attachment: fixed; /* Optional: makes the background image fixed while scrolling */
    }

    .page-title {
        font: var(--ui-title);
        font-size: var(--font-size-6);
        text-align: center;
        margin-bottom: var(--ui-spacing-md);
        color: var(--color-orange);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .page-intro {
        font: var(--ui-body);
        text-align: center;
        max-width: 800px;
        margin: 0 auto var(--ui-spacing-xl) auto;
        color: var(--ui-text);
        padding: var(--ui-spacing-sm);
        background-color: rgba(var(--ui-surface, 0 0 0), 0.7); /* Slightly transparent background for readability */
        border-radius: var(--ui-btn-radius);
    }

    .section-heading {
        font: var(--ui-title);
        font-size: var(--font-size-5);
        margin-top: var(--ui-spacing-xl);
        margin-bottom: var(--ui-spacing-md);
        color: var(--color-cyan);
        text-align: center;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    }

    hr {
        border: none;
        border-top: 1px solid var(--ui-accent);
        margin: var(--ui-spacing-xl) 0;
        opacity: 0.5;
    }

    .section {
        container-type: inline-size;
        min-block-size: auto; /* Adjusted for content within main */
        inline-size: 100%;
        display: grid;
        place-items: center;
        column-gap: var(--ui-spacing-xs);
        row-gap: var(--ui-spacing-lg);
        padding-block: var(--ui-spacing-xxl);
        background-color: rgba(var(--ui-surface, 0 0 0), 0.5); /* Semi-transparent background */
        border-radius: var(--ui-card-radius);
        margin-bottom: var(--ui-spacing-xl);
    }

    .cards {
        --_carousel-inline-padding: var(--ui-spacing-sm);
        display: grid;
        gap: var(--ui-spacing-sm);
        grid-auto-flow: column;
        grid-template-rows: auto;
        inline-size: 100%;
        list-style: none;
        min-block-size: 300px; /* Adjusted height for carousel */
        overflow-inline: auto;
        overscroll-behavior-inline: contain;
        padding-block: var(--ui-spacing-lg);
        padding-inline: var(--_carousel-inline-padding);
        scroll-behavior: smooth;
        scroll-padding-inline: var(--_carousel-inline-padding);
        scroll-snap-type: inline mandatory;

        @media (width >=768px) {
            --_carousel-inline-padding: var(--ui-spacing-lg);
        }
    }

    .card {
        scroll-snap-align: start;
        background-color: var(--ui-surface);
        border-radius: var(--ui-card-radius);
        box-shadow: var(--ui-card-shadow);
        display: grid;
        grid-template-rows: subgrid;
        padding: var(--ui-spacing-xs);
        inline-size: min(75cqi, 320px); /* Slightly smaller cards */
        min-height: 280px; /* Ensure a minimum height */
    }

    .visual {
        border-radius: var(--ui-visual-radius);
        overflow: hidden; /* Changed from clip to hidden for broader support */
        height: 150px; /* Fixed height for consistency */
    }

    .img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        background-color: var(--ui-surface-container);
    }

    .content {
        display: grid;
        align-content: space-between;
        padding: var(--ui-spacing-sm);
        gap: var(--ui-spacing-sm); /* Reduced gap */
        color: var(--ui-on-surface);
    }

    .content-wrapper {
        display: grid;
        gap: var(--ui-spacing-xxs); /* Further reduced gap */
    }

    .title {
        font: var(--ui-title);
        font-size: var(--font-size-3); /* Slightly smaller title */
        text-wrap: pretty;
        color: var(--color-orange); /* Orange for card titles */
    }

    .desc {
        font: var(--ui-body);
        font-size: var(--font-size-1); /* Slightly smaller description */
        text-wrap: pretty;
    }

    .card-link {
        --_icon-bg: var(--ui-primary);
        font: var(--ui-label);
        color: var(--color-cyan); /* Cyan for links */
        text-decoration: none;
        display: flex;
        gap: var(--ui-spacing-xs);
        align-items: center;

        &:hover {
            --_icon-bg: color-mix(in oklch, var(--ui-primary), var(--ui-on-surface) 8%);
        }

        &::before {
            display: grid;
            place-items: center;
            background-color: var(--_icon-bg);
            color: oklch(from var(--ui-primary) var(--contrast-fn) 0 h);
            inline-size: var(--ui-icon-size);
            block-size: var(--ui-icon-size);
            border-radius: var(--ui-btn-radius);
            font: var(--icon-font-small);
            content: 'arrow_forward_ios' / 'Arrow';
        }
    }

    /* Scroll buttons for carousel */
    @supports (scroll-marker-group: after) {
        .cards {
            anchor-name: --carousel;
            scrollbar-width: none; /* Hide scrollbar for cleaner look */

            &::scroll-button(*) {
                -webkit-tap-highlight-color: transparent;
                -webkit-touch-callout: none;
                background-color: var(--ui-surface);
                block-size: var(--ui-scroll-btn-size);
                border-radius: var(--ui-scroll-btn-radius);
                color: var(--ui-primary);
                cursor: pointer;
                display: inline-grid; /* Changed from inline grid for better alignment */
                font: var(--icon-font-medium);
                inline-size: var(--ui-scroll-btn-size);
                outline-width: 0;
                place-items: center;
                position-anchor: --carousel;
                inset-block-end: calc(anchor(end) - calc(var(--ui-spacing-xs) + var(--ui-scroll-btn-size)));
                inset-inline-start: calc(anchor(start) + var(--_carousel-inline-padding));
                position: absolute;
                user-select: none;
                border: var(--ui-scroll-btn-border);
                z-index: 10; /* Ensure buttons are above cards */
            }

            &::scroll-button(*):focus:not(:disabled) {
                outline: var(--ui-scroll-btn-outline);
            }

            &::scroll-button(*):disabled {
                cursor: not-allowed;
                opacity: 0.4;
            }

            &::scroll-button(*):not(:disabled):hover {
                background-color: color-mix(in oklch, var(--ui-accent), var(--ui-surface) 60%);
            }

            &::scroll-button(inline-start) {
                content: 'arrow_back' / 'Scroll back';
            }

            &::scroll-button(inline-end) {
                content: 'arrow_forward' / 'Scroll forward';
                inset-inline-start: calc(anchor(start) + var(--ui-spacing-xs) + var(--ui-scroll-btn-size) + var(--_carousel-inline-padding));
            }
        }
    }
}

/* Gallery Styles */
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--ui-spacing-xl);
    background: rgba(var(--ui-surface, 0 0 0), 0.6); /* Adjusted background for gallery */
    border-radius: var(--ui-card-radius);
    margin-bottom: var(--ui-spacing-xl);
}

.demo__help {
    margin-bottom: var(--ui-spacing-xs);
    font-size: var(--font-size-4);
    font-family: "Yanone Kaffeesatz", sans-serif;
    color: var(--color-orange);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.demo__gallery {
    --partSize: 110px;
    --margins: 2px;
    --rows: 4;
    --cols: 6;
    --perspective: 700px;
    --transTime: 0.3s;
    --border-radius: 5px;
    --shadow-size: 10px;
    --gallery-bg: var(--ui-surface-container);

    width: calc(var(--cols) * var(--partSize) + 2 * var(--cols) * var(--margins) + 2 * var(--margins));
    height: calc(var(--rows) * var(--partSize) + 2 * var(--rows) * var(--margins) + 2 * var(--margins));
    padding: var(--margins);
    flex-shrink: 0;

    background: var(--gallery-bg);
    perspective: var(--perspective);
    border-radius: var(--border-radius);
    overflow: hidden; /* Ensure content stays within bounds */
}

.demo__placeholder {
    width: var(--partSize);
    height: var(--partSize);
    margin: var(--margins);
    float: left;
    background-color: var(--ui-surface); /* Using UI surface color */
    border-radius: var(--border-radius);
}

.demo__part {
    position: relative;
    float: left;
    width: var(--partSize);
    height: var(--partSize);
    margin: var(--margins);
    transform: rotateY(0deg); /* Start facing front */
    transform-style: preserve-3d;
    transition: all var(--transTime) ease-in-out;
    cursor: pointer; /* Indicate clickable */
}

.demo__part:hover .demo__part-front {
    box-shadow: 0 0 var(--shadow-size) var(--color-cyan); /* Cyan glow on hover */
    transform: scale(0.96);
}

.demo__part-front, .demo__part-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    border-radius: var(--border-radius);
}

.demo__part-front {
    background-color: var(--ui-surface);
    background-size: cover;
    background-position: center;
    transform: rotateX(0deg);
    transition: all calc(var(--transTime) / 1.5) ease;

    &:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3); /* Lighter overlay */
        content: "";
        opacity: 1;
        transition: all calc(var(--transTime) / 1.5) ease;
    }
}

.demo__part:hover .demo__part-front:after {
    opacity: 0; /* Remove overlay on hover */
}

.demo__part-back {
    transform: rotateY(180deg) rotateX(0deg);
    background-color: var(--ui-surface-container); /* Background for back of card */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-text);
    font-size: var(--font-size-0);
    text-align: center;
    padding: var(--ui-spacing-xxs);
}

.demo__part-back-inner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    backface-visibility: hidden;
}

.show-front {
    transform: none;
}

/* Detail Box Styles */
.details-section {
    padding: var(--ui-spacing-lg);
    background: rgba(var(--ui-surface, 0 0 0), 0.6);
    border-radius: var(--ui-card-radius);
    margin-top: var(--ui-spacing-xl);
}

.cert-details-box {
    background-color: var(--ui-surface);
    padding: var(--ui-spacing-md);
    border-radius: var(--ui-card-radius);
    box-shadow: var(--shadow-3);
    min-height: 200px;
}

.cert-details-box h4 {
    color: var(--color-purple);
    margin-bottom: var(--ui-spacing-sm);
    font-size: var(--font-size-3);
}

.typing-container {
    min-height: 150px; /* Ensure enough space for typing effect */
}

.typing-text {
    font-family: 'Courier New', Courier, monospace; /* Monospace for typing effect */
    color: var(--color-cyan);
    white-space: pre-wrap; /* Preserve whitespace and wrap text */
    overflow: hidden; /* Ensures text doesn't overflow before typing completes */
    border-right: .15em solid var(--color-orange); /* The "blinking cursor" */
    animation: typing 2s steps(40, end), blink-caret .75s step-end infinite;
}

/* Typing animation */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* Blinking cursor animation */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--color-orange); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .portfolio-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        max-height: 200px; /* Limit sidebar height on small screens */
    }

    .main-content {
        padding: var(--ui-spacing-md);
    }

    .demo__gallery {
        width: 100%; /* Adjust gallery width for smaller screens */
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .demo__part {
        width: 90px;
        height: 90px;
        margin: 1px;
    }

    .demo__gallery {
        --partSize: 90px;
        --margins: 1px;
    }
}