/* ENGRAVING <h1 class="engrave-text">3D ДЪСКА</h1> */



/* --- Optimized Milling and Edging Effects --- */

/* General Milling Effect for H2, etc. */
.milling-effect {
    position: relative;
    display: inline-block;
    white-space: nowrap; /* Keep text on one line */
    color: transparent; /* Hide original text, show stroke only */
    -webkit-text-stroke: 1px; /* Stroke width, color is inherited */
    text-stroke: 1px;
    text-align: center;
}

/* The ::before pseudo-element creates the text "fill" effect */
.milling-effect::before {
    content: attr(data-text); /* Use the text from the data-attribute */
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    color: inherit; /* Inherit the color from the parent (.milling-effect) */
    overflow: hidden;
    white-space: nowrap;
    animation: mill-in 2s linear forwards;
    animation-play-state: paused; /* Animation is paused by default */
}

/* When .is-visible is added, the animation runs */
.milling-effect.is-visible::before {
    animation-play-state: running;
}

@keyframes mill-in {
    to {
        width: 100%;
    }
}

/* Edging Effect for H2 */
.edging-effect {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    /* The color of the text and its stroke is set here */
    color: #5a392b;
}

/* The ::before and ::after pseudo-elements create the animated border */
.edging-effect::before,
.edging-effect::after {
    content: '';
    position: absolute;
    inset: 0; /* Covers the entire element area */
    box-sizing: border-box;
}

/* ::before creates the top and bottom borders */
.edging-effect::before {
    border-top: 2px solid #a67c52;
    border-bottom: 2px solid #a67c52;
    transform: scaleX(0); /* Start scaled to 0 horizontally */
    transition: transform 0.5s ease-out;
}

/* ::after creates the left and right borders */
.edging-effect::after {
    border-left: 2px solid #a67c52;
    border-right: 2px solid #a67c52;
    transform: scaleY(0); /* Start scaled to 0 vertically */
    transition: transform 0.5s ease-out;
}

/* When .is-visible is added, the borders animate in sequence */
.edging-effect.is-visible::before {
    transform: scaleX(1);
    transition-delay: 2s; /* Start after milling effect (2s) */
}

.edging-effect.is-visible::after {
    transform: scaleY(1);
    transition-delay: 2.5s; /* Start after top/bottom borders */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .milling-effect,
    .milling-effect::before {
        white-space: normal; /* Allow text to wrap on smaller screens */
    }
}

/* Navigation link edging effect */
.nav-link-text {
    position: relative;
    padding: 5px 10px;
    font-family: "Rubik Bubbles", system-ui;
    font-size: 1.2rem;
    animation: laser-cut 2s infinite;
}

@keyframes laser-cut {
  0% {
    box-shadow: 0 0 10px #a5a5a5;
  }
  50% {
    box-shadow: 0 0 20px #969696;
  }
  100% {
    box-shadow: 0 0 10px #9f9f9f;
  }
}

.nav-link.active .nav-link-text::before,
.nav-link:hover .nav-link-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #a67c52;
    animation: draw-border 0.5s linear forwards;
}

@keyframes draw-border {
    0% {
        width: 0;
        height: 0;
        border-width: 0;
    }
    50% {
        width: 100%;
        height: 0;
        border-width: 2px 2px 0 0;
    }
    100% {
        width: 100%;
        height: 100%;
        border-width: 2px;
    }
}


/* Hero-specific milling effect */
.hero .milling-effect {
    color: #ffffff;
    -webkit-text-stroke-color: #ffffff;
    text-stroke-color: #ffffff;
}

.hero .milling-effect.is-visible::before {
    animation-delay: 0.5s;
}

.hero p.milling-effect {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.hero p.milling-effect.is-visible::before {
    animation-delay: 1.5s; /* Delay the paragraph animation */
}

.logo-engraving-bg {
    width: 200px; /* Adjust width as needed */
    height: 60px; /* Adjust height as needed */
}

#logo-engrave-animation .engrave-path {
    fill: none;
    stroke: black;
    stroke-width: 1;
}

#toolhead-group {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

#toolhead-group.toolhead-exit {
    animation: tool-exit 1s ease-in-out forwards;
}

@keyframes tool-exit {
    0% {
        opacity: 1;
        transform: translate(var(--last-x, 0), var(--last-y, 0));
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--last-x, 0) + 10px), calc(var(--last-y, 0) - 10px));
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--last-x, 0) + 20px), calc(var(--last-y, 0) - 20px));
    }
}

/* Social Icons Engrave Effect */
.social-engrave-effect a {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.social-engrave-effect.is-visible a {
    opacity: 1;
    transform: scale(1);
}

.social-engrave-effect.is-visible a:nth-child(1) { transition-delay: 0.1s; }
.social-engrave-effect.is-visible a:nth-child(2) { transition-delay: 0.2s; }
.social-engrave-effect.is-visible a:nth-child(3) { transition-delay: 0.3s; }
.social-engrave-effect.is-visible a:nth-child(4) { transition-delay: 0.4s; }


/* -------- style.css -------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}



body {
    line-height: 1.6;
    color: #333;
    padding-top: 100px; /* Increased padding for taller navbar */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #5a392b;
}

.section {
    padding: 60px 0;
}

.bg-light {
    background-color: #f9f7f5;
}

.navbar {
    background-color: #ffffff;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically align items */
    padding: 10px 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #5a392b;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}

.logo-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid transparent;
    position: relative;
}

.logo-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    border-color: #8b5a3c;
}

.logo-svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* МАЩАБИРАНЕ при hover */
.logo-wrapper:hover .logo-svg {
    fill: #8b5a3c;
    transform: scale(1.02); /* без translate */
}


/* Pause animation on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .logo-svg {
        transition: none;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-wrapper {
        border-width: 2px; /* Keep consistent border width */
    }
}

/* Simple fade-in animation for logo */
@keyframes logo-fade-in {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.logo-svg {
    animation: logo-fade-in 1s ease-out forwards;
}

.nav-links {
    list-style: none;
    display: flex;
    position: relative;
    transition: transform 0.5s ease;
}

.nav-links.open {
    transform: translateX(0);
}

.nav-links li {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.nav-links li a {
    color: #333;
    text-decoration: none;
    margin-left: 20px;
    font-weight: 500;
    transition: color 0.3s ease;
    text-decoration: none;;
}

.nav-links li a:hover {
    color: #5a392b;
}

.hamburger {
    cursor: pointer;
    font-size: 1.8rem; /* Увеличавам леко размера */
    display: none;
    color: #333;
    padding: 10px; /* Добавям падинг за по-лесно натискане */
    position: relative;
    z-index: 10002;
}

.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.hero {
    background: url('images/hero-bg.jpg') center/cover no-repeat;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    position: relative;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.btn-main {
    display: inline-block;
    padding: 22px 30px;
    background-color: #a67c52;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    position:absolute;
    top:90%;
    left:0;
    right:0;
    margin:auto;
    /* text-align:Center; */
    width: 200px;
    height: 50px;

}

.btn-main:hover {
    background-color: #5a392b;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.service-item {
    background-color: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.service-item.appear {
    opacity: 1;
    transform: translateY(0);
}

.service-item:hover {
    transform: translateY(-10px);
}

.service-item i {
    color: #a67c52;
    margin-bottom: 15px;
}

.service-item h3 {
    margin-bottom: 10px;
    color: #5a392b;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.portfolio-item {
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.portfolio-item.appear {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.portfolio-item img:hover {
    transform: scale(1.05);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}

.contact-info p {
    margin-bottom: 10px;
    font-size: 1rem;
}

.contact-info i {
    margin-right: 10px;
    color: #a67c52;
}

.social-buttons a {
    display: inline-block;
    margin-right: 10px;
    color: #fff;
    background-color: #5a392b;
    padding: 10px;
}


.contact-form form {
    display: flex;
    flex-direction: column;
}

.contact-form input,
.contact-form textarea {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.contact-form .btn-submit {
    padding: 12px;
    background-color: #5a392b;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form .btn-submit:hover {
    background-color: #a67c52;
}

/* CAPTCHA widget styling */
.cf-turnstile,
.g-recaptcha {
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

/* reCAPTCHA v2 responsive */
.g-recaptcha {
    transform: scale(0.85);
    transform-origin: center;
}

@media (max-width: 576px) {
    .g-recaptcha {
        transform: scale(0.75);
    }
}

/* Contact Options Styling */
.contact-options {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.contact-options h3 {
    color: #5a392b;
    margin-bottom: 25px;
    text-align: center;
    font-size: 1.5rem;
}

.contact-option {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding: 20px;
    border: 2px solid #f0f0f0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.contact-option:hover {
    border-color: #a67c52;
    background-color: #fafafa;
    transform: translateY(-2px);
}

.option-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #a67c52, #8b5a3c);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.option-icon i {
    color: #fff;
    font-size: 1.2rem;
}

.option-content h4 {
    color: #5a392b;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.option-content p {
    color: #666;
    margin-bottom: 10px;
    line-height: 1.4;
}

.option-content small {
    color: #888;
    font-style: italic;
}

.contact-link {
    color: #a67c52;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #5a392b;
    text-decoration: underline;
}

/* CTA Buttons */
.cta-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    flex: 1;
    justify-content: center;
    min-width: 140px;
}

.btn-phone {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.btn-phone:hover {
    background: linear-gradient(135deg, #218838, #1ba085);
    transform: translateY(-2px);
}

.btn-email {
    background: linear-gradient(135deg, #007bff, #6f42c1);
    color: white;
}

.btn-email:hover {
    background: linear-gradient(135deg, #0056b3, #5a32a3);
    transform: translateY(-2px);
}

.btn-cta i {
    margin-right: 8px;
}

/* Navigation Buttons Container */
.nav-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Contact Info Links */
.contact-info a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #a67c52;
}

/* Map Container */
.map-container iframe {
    border: 0;
    border-radius: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-option {
        flex-direction: column;
        text-align: center;
    }
    
    .option-icon {
        margin-right: 0;
        margin-bottom: 15px;
        align-self: center;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .btn-cta {
        flex: none;
    }
    
    .nav-buttons {
        display: none; /* Hide on mobile, show hamburger menu instead */
    }
}

.success {
    color: green;
    margin-bottom: 15px;
}

.error {
    color: red;
    margin-bottom: 15px;
}

.map-container {
    margin-top: 30px;
}

/* Футър */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}


/* Fade-in ефекти */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.fade-in.appear {
    opacity: 1;
    transform: translateY(0);
}


/* Адаптивност */
@media (max-width: 1200px) {
    .container {
        width: 95%;
    }
}

@media (max-width: 992px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Logo adjustments for smaller laptops */
    .logo-wrapper {
        width: 65px;
        height: 65px;
        margin-right: 15px;
    }
}

/* Enhanced desktop logo experience */
@media (min-width: 1200px) {
    .logo-wrapper {
        width: 75px;
        height: 75px;
        margin-right: 20px;
        border-width: 2px; /* Keep consistent border */
    }

    .logo-wrapper:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    }
}

@media (min-width: 1400px) {
    .logo-wrapper {
        width: 80px;
        height: 80px;
        margin-right: 25px;
    }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        right: -100%;
        height: 100vh;
        top: 0;
        background-color: #fff;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50%;
        transition: right 0.5s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }

    .nav-links.open {
        right: 0;
    }

    .nav-links li {
        opacity: 1;
        margin: 20px 0;
    }

    .hamburger {
        display: flex;
        z-index: 10002;
    }

    .drawer-menu {
        position: fixed;
        top: 0; left: 0;
        width: 70vw;
        max-width: 320px;
        height: 100vh;
        background: var(--unit-three, #e6e6e6);
        box-shadow: 2vmin 0 4vmin rgba(0,0,0,0.15);
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(.68,-0.55,.27,1.55);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;   /* Align to top */
        overflow-y: auto;              /* Enable vertical scroll */
        padding-top: 6vmin;            /* Space for hamburger */
      }

    .hero {
        margin-top: 0;
    }

    .services-grid, .portfolio-grid {
        grid-template-columns: 1fr;
    }

    /* Responsive logo for tablets */
    .logo-wrapper {
        width: 55px;
        height: 55px;
        margin-right: 12px;
        border-width: 2px; /* Keep consistent border */
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .nav-links {
        width: 80%;
    }

    /* Mobile logo optimization */
    .logo-wrapper {
        width: 80px;
        height: 80px;
        margin-right: 10px;
        border-width: 2px; /* Keep consistent border */
    }

    .nav-container {
        padding: 8px 0;
    }
}


/* =================================
           UNIVERSAL TEXT ENGRAVING LIBRARY
           ================================= */

        /* Base Variables */
        :root {
            --engrave-primary: #8B4513;
            --engrave-secondary: #A0522D;
            --engrave-accent: #CD853F;
            --engrave-light: #DEB887;
            --engrave-spark: #FFD700;
            --engrave-shadow: rgba(0, 0, 0, 0.6);
            --engrave-speed: 3s;
        }

        /* Base Font Styles */
        .engrave-text {
            position: relative;
            display: inline-block;
            color: transparent;
            background: linear-gradient(45deg, var(--engrave-primary), var(--engrave-secondary), var(--engrave-accent));
            -webkit-background-clip: text;
            background-clip: text;
            font-weight: bold;
            overflow: visible;
            cursor: pointer;
        }

        /* ========== LASER ENGRAVING EFFECT ========== */
        .engrave-laser {
            animation: laserEngrave var(--engrave-speed) ease-in-out forwards;
        }

        .engrave-laser::before {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent 0%, 
                var(--engrave-spark) 45%, 
                #FF4500 50%, 
                var(--engrave-spark) 55%, 
                transparent 100%);
            -webkit-background-clip: text;
            background-clip: text;
            transform: translateX(-100%);
            animation: laserBeam var(--engrave-speed) ease-in-out forwards;
            z-index: 2;
        }

        .engrave-laser::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--engrave-spark), transparent);
            transform: translateX(-100%) translateY(-50%);
            animation: laserLine var(--engrave-speed) ease-in-out forwards;
            box-shadow: 0 0 10px var(--engrave-spark), 0 0 20px #FF4500;
            z-index: 3;
        }

        @keyframes laserEngrave {
            0% { 
                color: transparent; 
                text-shadow: none;
            }
            70% { 
                color: transparent; 
                text-shadow: none;
            }
            100% { 
                color: var(--engrave-primary);
                text-shadow: 
                    2px 2px 4px var(--engrave-shadow),
                    inset 0 0 10px rgba(139, 69, 19, 0.5);
            }
        }

        @keyframes laserBeam {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        @keyframes laserLine {
            0% { transform: translateX(-100%) translateY(-50%); }
            100% { transform: translateX(100%) translateY(-50%); }
        }

        /* ========== DRILL ENGRAVING EFFECT ========== */
        .engrave-drill {
            animation: drillReveal var(--engrave-speed) ease-in-out forwards;
        }

        .engrave-drill::before {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at var(--drill-x, 0%) 50%, 
                var(--engrave-primary) 0%, 
                var(--engrave-primary) 20%, 
                transparent 20%);
            -webkit-background-clip: text;
            background-clip: text;
            animation: drillProgress var(--engrave-speed) ease-in-out forwards;
            z-index: 2;
        }

        .engrave-drill::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 10px;
            height: 10px;
            background: radial-gradient(circle, var(--engrave-spark), #FF4500, var(--engrave-primary));
            border-radius: 50%;
            transform: translateY(-50%) translateX(-50%);
            animation: drillSpinMove var(--engrave-speed) ease-in-out forwards;
            box-shadow: 
                0 0 15px var(--engrave-spark),
                0 0 30px #FF4500;
            z-index: 3;
        }

        @keyframes drillReveal {
            0% { color: transparent; }
            100% { 
                color: var(--engrave-primary);
                text-shadow: 
                    inset 2px 2px 4px var(--engrave-shadow),
                    2px 2px 8px rgba(0, 0, 0, 0.3);
            }
        }

        @keyframes drillProgress {
            0% { --drill-x: 0%; }
            100% { --drill-x: 100%; }
        }

        @keyframes drillSpinMove {
            0% { 
                transform: translateY(-50%) translateX(-50%) rotate(0deg) scale(1);
            }
            50% {
                transform: translateY(-50%) translateX(-50%) rotate(1800deg) scale(1.5);
            }
            100% { 
                transform: translateY(-50%) translateX(-50%) rotate(3600deg) scale(0);
            }
        }

        /* ========== PLASMA CUTTING EFFECT ========== */
        .engrave-plasma {
            animation: plasmaForm var(--engrave-speed) ease-in-out forwards;
        }

        .engrave-plasma::before {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, 
                #00FFFF 0%, 
                #0080FF 25%, 
                #8000FF 50%, 
                #FF0080 75%, 
                #FF4500 100%);
            -webkit-background-clip: text;
            background-clip: text;
            clip-path: polygon(0 0, var(--plasma-progress, 0%) 0, var(--plasma-progress, 0%) 100%, 0 100%);
            animation: plasmaProgress var(--engrave-speed) ease-in-out forwards;
            filter: drop-shadow(0 0 10px #00FFFF);
            z-index: 2;
        }

        .engrave-plasma::after {
            content: '';
            position: absolute;
            top: 0;
            left: var(--plasma-progress, 0%);
            width: 3px;
            height: 100%;
            background: linear-gradient(to bottom, 
                #00FFFF, 
                #0080FF, 
                #8000FF, 
                #FF0080, 
                #FF4500);
            animation: plasmaMove var(--engrave-speed) ease-in-out forwards;
            box-shadow: 
                0 0 20px #00FFFF,
                0 0 40px #0080FF,
                0 0 60px #8000FF;
            z-index: 3;
        }

        @keyframes plasmaForm {
            0% { color: transparent; }
            100% { 
                color: var(--engrave-primary);
                text-shadow: 
                    0 0 5px #00FFFF,
                    2px 2px 4px var(--engrave-shadow);
            }
        }

        @keyframes plasmaProgress {
            0% { --plasma-progress: 0%; }
            100% { --plasma-progress: 100%; }
        }

        @keyframes plasmaMove {
            0% { left: 0%; }
            100% { left: 100%; }
        }

        /* ========== WATERJET CUTTING EFFECT ========== */
        .engrave-waterjet {
            animation: waterjetForm var(--engrave-speed) ease-in-out forwards;
        }

        .engrave-waterjet::before {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                #0066CC 0%, 
                #0080FF 25%, 
                #40E0D0 50%, 
                #00CED1 75%, 
                #008B8B 100%);
            -webkit-background-clip: text;
            background-clip: text;
            mask: linear-gradient(90deg, 
                transparent 0%, 
                black var(--water-progress, 0%), 
                black var(--water-progress, 0%), 
                transparent calc(var(--water-progress, 0%) + 10%));
            animation: waterjetProgress var(--engrave-speed) ease-in-out forwards;
            z-index: 2;
        }

        .engrave-waterjet::after {
            content: '';
            position: absolute;
            top: -5px;
            left: var(--water-progress, 0%);
            width: 1px;
            height: calc(100% + 10px);
            background: linear-gradient(to bottom, 
                transparent, 
                #40E0D0, 
                #00CED1, 
                #0080FF, 
                transparent);
            animation: waterjetStream var(--engrave-speed) ease-in-out forwards;
            box-shadow: 
                0 0 10px #40E0D0,
                0 0 20px #00CED1;
            z-index: 3;
        }

        @keyframes waterjetForm {
            0% { color: transparent; }
            100% { 
                color: var(--engrave-primary);
                text-shadow: 
                    0 0 3px #40E0D0,
                    2px 2px 4px var(--engrave-shadow);
            }
        }

        @keyframes waterjetProgress {
            0% { --water-progress: 0%; }
            100% { --water-progress: 100%; }
        }

        @keyframes waterjetStream {
            0% { left: 0%; opacity: 1; }
            100% { left: 100%; opacity: 0; }
        }

        /* ========== TRADITIONAL CHISEL EFFECT ========== */
        .engrave-chisel {
            animation: chiselForm var(--engrave-speed) ease-in-out forwards;
        }

        .engrave-chisel::before {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, 
                var(--engrave-primary), 
                var(--engrave-secondary), 
                var(--engrave-accent));
            -webkit-background-clip: text;
            background-clip: text;
            mask: repeating-linear-gradient(
                45deg,
                transparent 0px,
                black calc(var(--chisel-progress, 0%) * 1px),
                black calc(var(--chisel-progress, 0%) * 1px + 5px),
                transparent calc(var(--chisel-progress, 0%) * 1px + 15px)
            );
            animation: chiselProgress var(--engrave-speed) ease-in-out forwards;
            z-index: 2;
        }

        .engrave-chisel::after {
            content: '';
            position: absolute;
            top: 50%;
            left: calc(var(--chisel-progress, 0%) * 1%);
            width: 20px;
            height: 3px;
            background: linear-gradient(45deg, #C0C0C0, #A0A0A0, #808080);
            transform: translateY(-50%) rotate(45deg);
            animation: chiselMove var(--engrave-speed) ease-in-out forwards;
            box-shadow: 
                2px 2px 4px rgba(0, 0, 0, 0.5),
                0 0 5px rgba(192, 192, 192, 0.7);
            z-index: 3;
        }

        @keyframes chiselForm {
            0% { 
                color: transparent; 
                text-shadow: none;
            }
            100% { 
                color: var(--engrave-primary);
                text-shadow: 
                    3px 3px 0px var(--engrave-secondary),
                    6px 6px 8px var(--engrave-shadow);
            }
        }

        @keyframes chiselProgress {
            0% { --chisel-progress: 0; }
            100% { --chisel-progress: 500; }
        }

        @keyframes chiselMove {
            0% { 
                left: 0%; 
                transform: translateY(-50%) rotate(45deg) scale(1);
                opacity: 1;
            }
            100% { 
                left: 100%; 
                transform: translateY(-50%) rotate(45deg) scale(0.5);
                opacity: 0;
            }
        }

        /* ========== SANDBLASTING EFFECT ========== */
        .engrave-sandblast {
            animation: sandblastForm var(--engrave-speed) ease-in-out forwards;
            position: relative;
        }

        .engrave-sandblast::before {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, 
                var(--engrave-primary), 
                var(--engrave-accent), 
                var(--engrave-light));
            -webkit-background-clip: text;
            background-clip: text;
            mask: radial-gradient(circle at var(--sand-x, 0%) 50%, 
                transparent 0%, 
                transparent 30%, 
                black 30%, 
                black 70%, 
                transparent 70%);
            animation: sandblastProgress var(--engrave-speed) ease-in-out forwards;
            z-index: 2;
        }

        .engrave-sandblast::after {
            content: '';
            position: absolute;
            top: 30%;
            left: var(--sand-x, 0%);
            width: 60px;
            height: 40%;
            background: radial-gradient(ellipse, 
                rgba(245, 222, 179, 0.8) 0%, 
                rgba(210, 180, 140, 0.6) 30%, 
                rgba(160, 82, 45, 0.4) 60%, 
                transparent 100%);
            transform: translateX(-50%);
            animation: sandblastSpray var(--engrave-speed) ease-in-out forwards;
            filter: blur(2px);
            z-index: 3;
        }

        @keyframes sandblastForm {
            0% { 
                color: transparent;
                filter: blur(5px);
            }
            100% { 
                color: var(--engrave-primary);
                filter: blur(0px);
                text-shadow: 
                    1px 1px 2px var(--engrave-shadow),
                    0 0 8px rgba(245, 222, 179, 0.5);
            }
        }

        @keyframes sandblastProgress {
            0% { --sand-x: 0%; }
            100% { --sand-x: 100%; }
        }

        @keyframes sandblastSpray {
            0% { 
                left: 0%; 
                opacity: 1;
                transform: translateX(-50%) scale(0.5);
            }
            50% {
                transform: translateX(-50%) scale(1.2);
            }
            100% { 
                left: 100%; 
                opacity: 0;
                transform: translateX(-50%) scale(0.8);
            }
        }

        /* ========== PARTICLES AND DEBRIS EFFECTS ========== */
        .debris-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 4;
        }

        .debris {
            position: absolute;
            width: 2px;
            height: 2px;
            border-radius: 50%;
            pointer-events: none;
        }

        .spark {
            background: radial-gradient(circle, var(--engrave-spark), #FF4500);
            animation: sparkFly 1s ease-out forwards;
            box-shadow: 0 0 4px var(--engrave-spark);
        }

        .chip {
            background: var(--engrave-primary);
            animation: chipFly 2s ease-out forwards;
        }

        .dust {
            background: rgba(210, 180, 140, 0.7);
            animation: dustFloat 3s ease-out forwards;
        }

        @keyframes sparkFly {
            0% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
            100% {
                opacity: 0;
                transform: scale(0) rotate(360deg) translateY(-50px) translateX(var(--random-x, 0px));
            }
        }

        @keyframes chipFly {
            0% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
            100% {
                opacity: 0;
                transform: scale(0.5) rotate(180deg) translateY(30px) translateX(var(--random-x, 0px));
            }
        }

        @keyframes dustFloat {
            0% {
                opacity: 0.7;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(2) translateY(-20px) translateX(var(--random-x, 0px));
            }
        }


        /* ========== BASE BUTTON STYLES ========== */
        .cnc-btn {
            position: relative;
            display: inline-block;
            padding: 18px 36px;
            margin: 15px;
            background: linear-gradient(135deg, var(--wood-primary), var(--wood-secondary), var(--wood-accent));
            border: none;
            border-radius: 12px;
            color: transparent;
            font-size: 1.2rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            opacity: 0;
            transform: translateY(50px);
            box-shadow: 
                0 8px 16px var(--engraving-shadow),
                inset 0 2px 4px rgba(255, 255, 255, 0.1),
                inset 0 -2px 4px rgba(0, 0, 0, 0.2);
        }

        /* Scroll trigger class */
        .cnc-btn.scroll-triggered {
            opacity: 1;
            transform: translateY(0);
        }

        /* Wood grain texture overlay */
        .cnc-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 2px,
                    rgba(101, 67, 33, 0.3) 2px,
                    rgba(101, 67, 33, 0.3) 4px
                );
            pointer-events: none;
            z-index: 1;
        }

        /* Button text */
        .cnc-btn span {
            position: relative;
            display: block;
            color: var(--wood-dark);
            text-shadow: 
                1px 1px 0px var(--wood-light),
                2px 2px 4px var(--engraving-shadow);
            z-index: 2;
        }

        /* ========== LASER ENGRAVING EFFECT ========== */
        .cnc-btn.laser-engrave span {
            background: linear-gradient(90deg, 
                transparent 0%,
                var(--laser-red) 45%,
                var(--laser-yellow) 50%,
                var(--laser-red) 55%,
                transparent 100%);
            background-size: 200% 100%;
            background-position: -100% 0;
            -webkit-background-clip: text;
            background-clip: text;
            animation: laserSweep var(--scroll-speed) ease-in-out forwards;
        }

        .cnc-btn.laser-engrave::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, 
                transparent, 
                var(--laser-red), 
                var(--laser-yellow), 
                var(--laser-red), 
                transparent);
            transform: translateX(-100%) translateY(-50%);
            box-shadow: 
                0 0 10px var(--laser-red),
                0 0 20px var(--laser-orange),
                0 0 30px var(--laser-yellow);
            animation: laserBeam var(--scroll-speed) ease-in-out forwards;
            z-index: 3;
        }

        @keyframes laserSweep {
            0% {
                background-position: -100% 0;
                color: transparent;
            }
            50% {
                background-position: 0% 0;
                color: var(--laser-yellow);
            }
            100% {
                background-position: 100% 0;
                color: var(--wood-dark);
            }
        }

        @keyframes laserBeam {
            0% { transform: translateX(-100%) translateY(-50%); }
            100% { transform: translateX(100%) translateY(-50%); }
        }

        /* ========== ROUTER CARVING EFFECT ========== */
        .cnc-btn.router-carve span {
            clip-path: circle(0% at 50% 50%);
            animation: routerReveal var(--scroll-speed) ease-in-out forwards;
        }

        .cnc-btn.router-carve::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, 
                var(--metal-silver), 
                var(--metal-steel), 
                var(--wood-dark));
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            animation: routerSpin var(--scroll-speed) ease-in-out forwards;
            box-shadow: 
                0 0 15px rgba(192, 192, 192, 0.7),
                0 0 30px rgba(112, 128, 144, 0.5);
            z-index: 3;
        }

        @keyframes routerReveal {
            0% { 
                clip-path: circle(0% at 50% 50%);
                color: transparent;
            }
            100% { 
                clip-path: circle(100% at 50% 50%);
                color: var(--wood-dark);
            }
        }

        @keyframes routerSpin {
            0% { 
                transform: translate(-50%, -50%) scale(0) rotate(0deg);
                opacity: 0;
            }
            20% {
                transform: translate(-50%, -50%) scale(1.5) rotate(720deg);
                opacity: 1;
            }
            80% {
                transform: translate(-50%, -50%) scale(1) rotate(2160deg);
                opacity: 1;
            }
            100% { 
                transform: translate(-50%, -50%) scale(0) rotate(2880deg);
                opacity: 0;
            }
        }

        /* ========== DRILL PRESS EFFECT ========== */
        .cnc-btn.drill-press span {
            mask: radial-gradient(circle at var(--drill-x, 0%) 50%, 
                transparent 0%, 
                transparent 15%, 
                black 15%, 
                black 85%, 
                transparent 85%);
            animation: drillProgress var(--scroll-speed) ease-in-out forwards;
        }

        .cnc-btn.drill-press::after {
            content: '';
            position: absolute;
            top: 20%;
            left: 50%;
            width: 8px;
            height: 60%;
            background: linear-gradient(to bottom, 
                var(--metal-silver), 
                var(--metal-steel), 
                var(--wood-dark));
            transform: translateX(-50%);
            animation: drillMove var(--scroll-speed) ease-in-out forwards;
            box-shadow: 
                0 0 10px rgba(192, 192, 192, 0.8),
                2px 0 5px var(--engraving-shadow);
            z-index: 3;
        }

        @keyframes drillProgress {
            0% { 
                --drill-x: 0%;
                color: transparent;
            }
            100% { 
                --drill-x: 100%;
                color: var(--wood-dark);
            }
        }

        @keyframes drillMove {
            0% { 
                left: 0%;
                transform: translateX(-50%) rotate(0deg) scaleY(0.5);
            }
            50% {
                transform: translateX(-50%) rotate(1800deg) scaleY(1.2);
            }
            100% { 
                left: 100%;
                transform: translateX(-50%) rotate(3600deg) scaleY(0.8);
            }
        }

        /* ========== BANDSAW CUTTING EFFECT ========== */
        .cnc-btn.bandsaw-cut span {
            clip-path: polygon(0 0, var(--saw-progress, 0%) 0, var(--saw-progress, 0%) 100%, 0 100%);
            animation: sawProgress var(--scroll-speed) ease-in-out forwards;
        }

        .cnc-btn.bandsaw-cut::after {
            content: '';
            position: absolute;
            top: 0;
            left: var(--saw-progress, 0%);
            width: 2px;
            height: 100%;
            background: repeating-linear-gradient(to bottom,
                var(--metal-steel) 0px,
                var(--metal-silver) 2px,
                var(--metal-steel) 4px);
            animation: sawBlade var(--scroll-speed) ease-in-out forwards;
            box-shadow: 
                0 0 8px rgba(192, 192, 192, 0.9),
                2px 0 4px var(--engraving-shadow);
            z-index: 3;
        }

        @keyframes sawProgress {
            0% { 
                --saw-progress: 0%;
                color: transparent;
            }
            100% { 
                --saw-progress: 100%;
                color: var(--wood-dark);
            }
        }

        @keyframes sawBlade {
            0% { 
                left: 0%;
                transform: translateY(0);
            }
            25% { transform: translateY(-2px); }
            50% { transform: translateY(2px); }
            75% { transform: translateY(-1px); }
            100% { 
                left: 100%;
                transform: translateY(0);
            }
        }

        /* ========== SANDPAPER SMOOTHING EFFECT ========== */
        .cnc-btn.sandpaper-smooth span {
            filter: blur(5px);
            opacity: 0.3;
            animation: smoothReveal var(--scroll-speed) ease-in-out forwards;
        }

        .cnc-btn.sandpaper-smooth::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                repeating-linear-gradient(45deg,
                    transparent 0px,
                    rgba(245, 222, 179, 0.3) 1px,
                    transparent 2px),
                radial-gradient(ellipse at var(--sand-x, 0%) 50%, 
                    rgba(245, 222, 179, 0.6) 0%, 
                    rgba(210, 180, 140, 0.4) 30%, 
                    transparent 60%);
            animation: sandMove var(--scroll-speed) ease-in-out forwards;
            z-index: 3;
        }

        @keyframes smoothReveal {
            0% { 
                filter: blur(5px);
                opacity: 0.3;
                color: transparent;
            }
            100% { 
                filter: blur(0px);
                opacity: 1;
                color: var(--wood-dark);
            }
        }

        @keyframes sandMove {
            0% { 
                --sand-x: 0%;
                opacity: 0.8;
            }
            50% {
                opacity: 1;
            }
            100% { 
                --sand-x: 100%;
                opacity: 0;
            }
        }

        /* ========== WOOD STAIN EFFECT ========== */
        .cnc-btn.wood-stain span {
            background: linear-gradient(90deg, 
                var(--wood-primary) 0%,
                var(--wood-secondary) 25%,
                var(--wood-accent) 50%,
                var(--wood-light) 75%,
                var(--wood-primary) 100%);
            background-size: 300% 100%;
            background-position: -100% 0;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: stainSoak var(--scroll-speed) ease-in-out forwards;
        }

        .cnc-btn.wood-stain::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at var(--stain-x, 0%) 50%,
                rgba(139, 69, 19, 0.7) 0%,
                rgba(160, 82, 45, 0.5) 30%,
                rgba(205, 133, 63, 0.3) 60%,
                transparent 80%);
            animation: stainSpread var(--scroll-speed) ease-in-out forwards;
            z-index: 1;
        }

        @keyframes stainSoak {
            0% { 
                background-position: -100% 0;
                color: transparent;
            }
            100% { 
                background-position: 100% 0;
                color: var(--wood-dark);
            }
        }

        @keyframes stainSpread {
            0% { 
                --stain-x: 0%;
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% { 
                --stain-x: 100%;
                opacity: 0.3;
            }
        }

        /* ========== HOVER EFFECTS ========== */
        .cnc-btn:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 
                0 15px 30px var(--engraving-shadow),
                inset 0 3px 6px rgba(255, 255, 255, 0.2),
                inset 0 -3px 6px rgba(0, 0, 0, 0.3);
        }

        .cnc-btn:active {
            transform: translateY(-2px) scale(1.02);
        }

        /* ========== WOOD PARTICLES EFFECT ========== */
        .wood-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 4;
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 2px;
            background: var(--wood-accent);
            border-radius: 1px;
            animation: particleFly 2s ease-out forwards;
            opacity: 0;
        }

        @keyframes particleFly {
            0% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
            100% {
                opacity: 0;
                transform: scale(0.3) rotate(180deg) 
                          translateY(var(--particle-y, -30px)) 
                          translateX(var(--particle-x, 0px));
            }
        }

/* NEW NAV-LINK STYLES   */
.button{
  position:relative;
  width:120px;
  height:0;
  margin: 0px 10px 0 10px;
  display: inline-block;
}

.back, .backout{
  position:relative;
  width:100px;
  border-bottom:10px solid #000;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  margin:0 0 0 8px;
}


.box{
  position:relative;
  z-index: 3;
  margin: -20px 0;
  background: url('/css/images/drawer-menu.png')  160px;
  width:130px;
  height:65px;
  border-radius:5px;
  /*border: 1px solid rgba(0,0,0,1);*/
  box-shadow:
    0 0 5px rgba(0,0,0,.6),
    0 0 60px rgba(0,0,0,.4) inset,
    -1px -1px 3px rgba(0,0,0,.4) inset,
    1px 1px 0px rgba(255,200,20,.1) inset,
    1px 1px 8px rgba(255,200,20,.2) inset,
    0 3px 2px rgba(0,0,0,.5),
    0 0px 100px rgba(0,0,0,.1) inset,
    0px 0px 5px rgba(0,0,0,.1);
  -webkit-transition: all .3s ease-out;
}

.button.active-section .box,
.box:hover {
  margin:0;
  box-shadow:
    0 0 5px rgba(0,0,0,.6),
    0 0 60px rgba(0,0,0,.4) inset,
    -1px -1px 3px rgba(0,0,0,.4) inset,
    1px 1px 0px rgba(255,200,20,.1) inset,
    1px 1px 8px rgba(255,200,20,.2) inset,
    0 3px 2px rgba(0,0,0,.5),
    0 0px 100px rgba(205,155,155,.1) inset,
    0px -5px 5px rgba(0,0,0,.2);
  
  -webkit-transition: all .2s ease-out;
}

.paper{
  /*display:none*/
  position:relative;
  z-index: 2;
  width:90px;
  color:#222;
  padding: 5px 0 0 0;
  text-align:center;
  height:28px;
  margin:0 0 -37px 20px;
  background: #ffffff;
  box-shadow:
    0 0 30px rgba(214, 234, 170, 0.6) inset,
    0 -1px 20px rgba(0,0,0,.4),
    0 -8px 13px rgba(0,0,0,.6) inset;
  -webkit-transition: all .2s cubic-bezier(1, 0, 0, .8);
}

.button.active-section .paper,
.button:hover .paper {
  top:-23px;
  -webkit-transition: all .3s  cubic-bezier(1,-1,.2,.1);
}

.box p{
  color: rgb(255, 255, 255);
  font-family: "Rubik Bubbles", system-ui;
  text-shadow: 1px 1px 1px rgba(0,0,0,1);
  text-align: center;
  padding: 20px 0 0 0;
  margin: 0;
}

.box p a{
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-weight: bold;
}
.box p a:hover{
  color: rgb(255, 200, 20);
  text-decoration: none;
}

a.nav-link {
  text-decoration: none;
  color: inherit; /* Or choose a custom color like white or red */
}

/* =================================
   INTERACTIVE NAVIGATION CURSORS & ANIMATIONS
   ================================= */

/* --- Custom Cursors --- */
/* Забележка: Трябва да създадете тези .cur или .png файлове и да ги поставите в посочения път. */
/* Препоръчителен размер за изображенията на курсора е 32x32 пиксела. */

.button-measure:hover {
    cursor: url('images/cursors/tape-measure.png') 16 16, auto;
}

.button-screw:hover {
    cursor: url('images/cursors/screwdriver.png') 16 16, auto;
}

.button-cut:hover {
    cursor: url('images/cursors/router-bit.png') 16 16, auto;
}

/* --- Hover Animations --- */

/* Анимация "завинтване" за иконата с отвертка */
.button-screw:hover .paper i,
.button-screw.active-section .paper i {
    animation: screw-in 0.8s linear infinite;
}

@keyframes screw-in {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Анимация "рязане" (вибриране) за иконата на фреза/пергел */
.button-cut:hover .paper i,
.button-cut.active-section .paper i {
    animation: cut-vibrate 0.1s linear infinite;
}

@keyframes cut-vibrate {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(1px, -1px) rotate(5deg); }
    50%  { transform: translate(-1px, 1px) rotate(-5deg); }
    75%  { transform: translate(1px, 1px) rotate(5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* Анимация "измерване" за иконата с рулетка */
.button-measure:hover .paper i,
.button-measure.active-section .paper i {
    animation: unroll 1.5s ease-in-out infinite;
}

@keyframes unroll {
    0%, 100% { transform: scaleX(1) rotate(0deg); }
    20% { transform: scaleX(1.2) rotate(-5deg); }
    50% { transform: scaleX(0.9) rotate(5deg); }
    80% { transform: scaleX(1.1) rotate(0deg); }
}

/* Анимация "звънене" за иконата на телефон */
.button-contact:hover .paper i,
.button-contact.active-section .paper i {
    animation: ring-shake 0.5s infinite;
}

@keyframes ring-shake {
  0% { transform: rotate(0); } 15% { transform: rotate(5deg); } 30% { transform: rotate(-5deg); } 45% { transform: rotate(4deg); } 60% { transform: rotate(-4deg); } 75% { transform: rotate(2deg); } 85% { transform: rotate(-2deg); } 100% { transform: rotate(0); }
}

.button.active-section .box {
    margin: 0;
    box-shadow: 0 0 5px rgba(0,0,0,.6), 0 0 60px rgba(0,0,0,.4) inset, -1px -1px 3px rgba(0,0,0,.4) inset, 1px 1px 0px rgba(255,200,20,.1) inset, 1px 1px 8px rgba(255,200,20,.2) inset, 0 3px 2px rgba(0,0,0,.5), 0 0px 100px rgba(205,155,155,.1) inset, 0px -5px 5px rgba(0,0,0,.2);
    -webkit-transition: all .2s ease-out;
}

.button.active-section .paper {
    top: -23px;
    -webkit-transition: all .3s cubic-bezier(1,-1,.2,.1);
}

.puzzle-container {
    position: relative;
    width: 100%;
    padding-top: 75%; /* Aspect ratio 4:3 */
    overflow: hidden;
    border-radius: 10px;
}

.puzzle-piece {
    position: absolute;
    background-size: 400% 400%; /* Example for a 4x4 grid */
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
}

.puzzle-container.assembled .puzzle-piece {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Mobile Cabinet Menu */
.cabinet-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 9999;
}

.cabinet-menu.active {
    visibility: visible;
    opacity: 1;
}

.cabinet-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.cabinet-container {
    position: absolute;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 10000;
}

.cabinet-menu.active .cabinet-container {
    right: 0;
}

.cabinet-frame {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #8B4513, #A0522D);
    border-left: 4px solid #654321;
    border-top: 4px solid #654321;
    border-bottom: 4px solid #3E2723;
    position: relative;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.cabinet-frame:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 15px,
            rgba(139, 69, 19, 0.1) 16px,
            rgba(139, 69, 19, 0.1) 17px
        ),
        linear-gradient(90deg, rgba(210, 180, 140, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.cabinet-top, .cabinet-bottom {
    height: 60px;
    background: linear-gradient(145deg, #A0522D, #8B4513);
    border-bottom: 2px solid #654321;
    position: relative;
}

.cabinet-bottom {
    border-bottom: none;
    border-top: 2px solid #654321;
    position: absolute;
    bottom: 60px;
    width: 100%;
}

.cabinet-top:before, .cabinet-bottom:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 3px;
    background: linear-gradient(90deg, #654321, #8B4513, #654321);
    border-radius: 2px;
}

/* Drawer Container */
.drawer-container {
    position: relative;
    margin: 8px 20px;
    height: 80px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: visible;
}

.drawer-checkbox {
    display: none;
}

.drawer-front {
    display: block;
    width: 100%;
    height: 70px;
    background: linear-gradient(145deg, #D2B48C, #DEB887);
    border: 2px solid #8B7355;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

/* Wood grain effect for drawer front */
.drawer-front:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 8px,
            rgba(139, 115, 85, 0.1) 9px,
            rgba(139, 115, 85, 0.1) 10px
        );
    pointer-events: none;
}

.drawer-front:hover {
    background: linear-gradient(145deg, #DEB887, #F5DEB3);
    transform: translateY(-1px);
    box-shadow: 
        0 5px 10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.drawer-checkbox:checked + .drawer-front {
    background: linear-gradient(145deg, #F5DEB3, #DEB887);
    transform: translateY(8px) scale(1.02);
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 -2px 0 #8B7355;
}

/* Expanded state - push down subsequent drawers */
.drawer-container.push-down {
    transform: translateY(140px);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reset transform when not needed */
.drawer-container:not(.push-down) {
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.drawer-handle {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 8px;
    background: linear-gradient(145deg, #DAA520, #B8860B);
    border-radius: 4px;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.drawer-handle:before {
    content: '';
    position: absolute;
    right: -3px;
    top: -3px;
    width: 14px;
    height: 14px;
    background: linear-gradient(145deg, #FFD700, #DAA520);
    border-radius: 50%;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.drawer-label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: #654321;
    font-weight: 600;
    font-size: 16px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.drawer-label i {
    margin-right: 12px;
    font-size: 20px;
    color: #8B4513;
}

/* Drawer Content - appears inside the pulled drawer */
.drawer-content {
    position: absolute;
    top: 78px; /* Start right below the drawer front */
    left: 4px;
    right: 4px;
    background: linear-gradient(145deg, #F5F5DC, #FAEBD7);
    border: 2px solid #D2B48C;
    border-top: 1px solid #8B7355;
    border-radius: 0 0 8px 8px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 5;
    opacity: 0;
}

.drawer-checkbox:checked ~ .drawer-content {
    max-height: 180px;
    padding: 12px 0;
    opacity: 1;
}

.drawer-link {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: #654321;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(139, 69, 19, 0.1);
    background: linear-gradient(145deg, transparent, rgba(245, 245, 220, 0.3));
    margin: 2px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}

.drawer-link:hover {
    background: linear-gradient(145deg, rgba(210, 180, 140, 0.4), rgba(222, 184, 135, 0.6));
    color: #8B4513;
    transform: translateX(5px);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.drawer-link i {
    margin-right: 10px;
    font-size: 14px;
    color: #8B4513;
    width: 18px;
    text-align: center;
    opacity: 0.8;
}

.drawer-link:hover i {
    opacity: 1;
    transform: scale(1.1);
}

.drawer-link:last-child {
    border-bottom: none;
    margin-bottom: 6px;
}

.drawer-link:first-child {
    margin-top: 6px;
}

/* Close Button */
.cabinet-close {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #CD853F, #A0522D);
    border: 2px solid #654321;
    border-radius: 50%;
    color: #F5DEB3;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.cabinet-close:hover {
    background: linear-gradient(145deg, #D2691E, #CD853F);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.cabinet-close:active {
    transform: scale(0.95);
}

/* Wood grain effect */
@keyframes wood-grain {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

.cabinet-frame:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(139, 69, 19, 0.1) 2px, transparent 2px),
        radial-gradient(circle at 80% 70%, rgba(160, 82, 45, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(139, 69, 19, 0.08) 1px, transparent 1px);
    animation: wood-grain 6s ease-in-out infinite;
    pointer-events: none;
}

/* Mobile Responsive Adjustments */
@media (max-width: 480px) {
    .cabinet-container {
        width: 100vw;
        right: -100vw;
    }
    
    .drawer-container {
        margin: 6px 15px;
        height: 75px;
    }
    
    .drawer-front {
        height: 65px;
    }
    
    .drawer-label {
        font-size: 15px;
    }
    
    .drawer-label i {
        font-size: 18px;
        margin-right: 10px;
    }
    
    .drawer-handle {
        width: 35px;
        height: 7px;
        right: 15px;
    }
    
    .drawer-handle:before {
        width: 12px;
        height: 12px;
    }
    
    .cabinet-close {
        top: 15px;
        left: 15px;
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .drawer-container {
        margin: 5px 10px;
        height: 70px;
    }
    
    .drawer-front {
        height: 60px;
    }
    
    .drawer-label {
        font-size: 14px;
        left: 15px;
    }
    
    .drawer-label i {
        font-size: 16px;
        margin-right: 8px;
    }
}