/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

@layer components {
    .desk {
        /* Desk flatlay background */
        --paper-shadow: 0 8px 24px rgba(0, 0, 0, .25);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: var(--space-xl, 3rem);
        background: radial-gradient(ellipse at top left, rgba(0, 0, 0, .06), transparent 60%), url('/images/textures/wood-desk-placeholder.jpg');
        background-size: cover;
        min-height: 70vh;

        @media (max-width: 768px) {
            padding: var(--space-m, 1rem);
        }

        & .desk__tabs {
            display: flex;
            align-items: flex-end;
            padding-inline: 2rem;
            width: 100%;
            max-width: 800px;
            z-index: 1;

            @media (max-width: 768px) {
                padding-inline: 0.5rem;
            }
        }

        & .desk__paper {
            z-index: 5;
            width: 100%;
            max-width: 800px;
            position: relative;
            background:
                /* Coffee ring stain (cliché detail) - positioned with 'at' to avoid cropping box issues */
                radial-gradient(circle at calc(100% - 70px) 70px, transparent 58px, rgba(60, 30, 0, 0.07) 60px, rgba(60, 30, 0, 0.1) 62px, transparent 66px),
                /* Noise texture overlay */
                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.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
                linear-gradient(#f9f6e8, #efe7c9);
            background-size: 100% 100%, 200px 200px, 100% 100%;
            background-position: 0 0, 0 0, 0 0;
            background-repeat: no-repeat, repeat, no-repeat;
            background-blend-mode: multiply, overlay, normal;
            color: var(--color-text, #222);
            font-family: var(--font-typewriter, 'Courier New', Courier, monospace);
            border: 1px solid rgba(0, 0, 0, .08);
            border-radius: 6px;
            padding: clamp(1rem, 2vw, 2rem);
            box-shadow: var(--paper-shadow);
            isolation: isolate;
            overflow: visible; /* allow ::before to stick out above the paper */

            &::before { /* rusty clipboard */
                content: '';
                position: absolute;
                inset: -12px auto auto 50%;
                translate: -50% 0;
                width: 120px;
                height: 28px;
                background: linear-gradient(#7a6a58, #3b342c);
                border: 2px solid #2c261f;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
                z-index: 3; /* render above the paper */
                filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35));
                pointer-events: none;
            }

            &[data-variant="dark"] {
                background: linear-gradient(#34322e, #2e2b27);
                color: var(--color-white, #fff);
            }
        }
    }

    @keyframes clip-drop {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}