/* ============================================
   HTML, CSS, JS, VUE, REACT, NODE EXPLOSION SECTIONS
   Додати до основного python-explosion.css
   ============================================ */

/* ===== ЗАГАЛЬНІ СТИЛІ ДЛЯ ВСІХ СЕКЦІЙ ===== */
.html-explosion-section,
.css-explosion-section,
.js-explosion-section,
.vue-explosion-section,
.react-explosion-section,
.node-explosion-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
    padding: 100px 20px;
}

/* ===== HTML ЛОГО ===== */
.html-logo-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: transform 0.3s ease;
}

.html-logo-wrapper:hover {
    transform: scale(1.1);
}

.html-main-logo {
    width: 260px;
    height: 260px;
    filter: drop-shadow(0 0 60px rgba(227, 79, 38, 0.8));
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.html-logo-wrapper.shake .html-main-logo {
    animation: logo-shake 0.6s ease;
}

.html-logo-wrapper:hover .html-main-logo {
    filter: drop-shadow(0 0 80px rgba(227, 79, 38, 1)) drop-shadow(0 0 120px rgba(255, 159, 0, 0.5));
}

.html-glow {
    background: radial-gradient(circle, rgba(227, 79, 38, 0.4) 0%, rgba(255, 159, 0, 0.2) 40%, transparent 70%);
}

.html-highlight {
    color: #E34F26 !important;
}

/* ===== CSS ЛОГО ===== */
.css-logo-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: transform 0.3s ease;
}

.css-logo-wrapper:hover {
    transform: scale(1.1);
}

.css-main-logo {
    width: 260px;
    height: 260px;
    filter: drop-shadow(0 0 60px rgba(38, 77, 228, 0.8));
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.css-logo-wrapper.shake .css-main-logo {
    animation: logo-shake 0.6s ease;
}

.css-logo-wrapper:hover .css-main-logo {
    filter: drop-shadow(0 0 80px rgba(38, 77, 228, 1)) drop-shadow(0 0 120px rgba(0, 157, 255, 0.5));
}

.css-glow {
    background: radial-gradient(circle, rgba(38, 77, 228, 0.4) 0%, rgba(0, 157, 255, 0.2) 40%, transparent 70%);
}

.css-highlight {
    color: #264DE4 !important;
}

/* ===== JS ЛОГО ===== */
.js-logo-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: transform 0.3s ease;
}

.js-logo-wrapper:hover {
    transform: scale(1.1);
}

.js-main-logo {
    width: 260px;
    height: 260px;
    filter: drop-shadow(0 0 60px rgba(247, 223, 30, 0.8));
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
    border-radius: 20px;
}

.js-logo-wrapper.shake .js-main-logo {
    animation: logo-shake 0.6s ease;
}

.js-logo-wrapper:hover .js-main-logo {
    filter: drop-shadow(0 0 80px rgba(247, 223, 30, 1)) drop-shadow(0 0 120px rgba(255, 159, 0, 0.5));
}

.js-glow {
    background: radial-gradient(circle, rgba(247, 223, 30, 0.4) 0%, rgba(255, 159, 0, 0.2) 40%, transparent 70%);
}

.js-highlight {
    color: #F7DF1E !important;
}

/* ===== VUE ЛОГО ===== */
.vue-logo-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: transform 0.3s ease;
}

.vue-logo-wrapper:hover {
    transform: scale(1.1);
}

.vue-main-logo {
    width: 260px;
    height: 260px;
    filter: drop-shadow(0 0 60px rgba(65, 184, 131, 0.8));
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.vue-logo-wrapper.shake .vue-main-logo {
    animation: logo-shake 0.6s ease;
}

.vue-logo-wrapper:hover .vue-main-logo {
    filter: drop-shadow(0 0 80px rgba(65, 184, 131, 1)) drop-shadow(0 0 120px rgba(52, 73, 94, 0.5));
}

.vue-glow {
    background: radial-gradient(circle, rgba(65, 184, 131, 0.4) 0%, rgba(52, 73, 94, 0.2) 40%, transparent 70%);
}

.vue-highlight {
    color: #41B883 !important;
}

/* ===== REACT ЛОГО ===== */
.react-logo-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: transform 0.3s ease;
}

.react-logo-wrapper:hover {
    transform: scale(1.1);
}

.react-main-logo {
    width: 260px;
    height: 260px;
    filter: drop-shadow(0 0 60px rgba(97, 218, 251, 0.8));
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
    animation: react-spin 20s linear infinite;
}

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

.react-logo-wrapper.shake .react-main-logo {
    animation: logo-shake 0.6s ease, react-spin 20s linear infinite;
}

.react-logo-wrapper:hover .react-main-logo {
    filter: drop-shadow(0 0 80px rgba(97, 218, 251, 1)) drop-shadow(0 0 120px rgba(0, 157, 255, 0.5));
}

.react-glow {
    background: radial-gradient(circle, rgba(97, 218, 251, 0.4) 0%, rgba(0, 157, 255, 0.2) 40%, transparent 70%);
}

.react-highlight {
    color: #61DAFB !important;
}

/* ===== NODE ЛОГО ===== */
.node-logo-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: transform 0.3s ease;
}

.node-logo-wrapper:hover {
    transform: scale(1.1);
}

.node-main-logo {
    width: 260px;
    height: 260px;
    filter: drop-shadow(0 0 60px rgba(104, 160, 99, 0.8));
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.node-logo-wrapper.shake .node-main-logo {
    animation: logo-shake 0.6s ease;
}

.node-logo-wrapper:hover .node-main-logo {
    filter: drop-shadow(0 0 80px rgba(104, 160, 99, 1)) drop-shadow(0 0 120px rgba(51, 51, 51, 0.5));
}

.node-glow {
    background: radial-gradient(circle, rgba(104, 160, 99, 0.4) 0%, rgba(51, 51, 51, 0.2) 40%, transparent 70%);
}

.node-highlight {
    color: #68A063 !important;
}

/* ===== ANGULAR ЛОГО ===== */
.angular-logo-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: transform 0.3s ease;
}

.angular-logo-wrapper:hover {
    transform: scale(1.1);
}

.angular-main-logo {
    width: 260px;
    height: 260px;
    filter: drop-shadow(0 0 60px rgba(221, 0, 49, 0.8));
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.angular-logo-wrapper.shake .angular-main-logo {
    animation: logo-shake 0.6s ease;
}

.angular-logo-wrapper:hover .angular-main-logo {
    filter: drop-shadow(0 0 80px rgba(221, 0, 49, 1)) drop-shadow(0 0 120px rgba(255, 78, 153, 0.5));
}

.angular-glow {
    background: radial-gradient(circle, rgba(221, 0, 49, 0.4) 0%, rgba(255, 78, 153, 0.2) 40%, transparent 70%);
}

.angular-highlight {
    color: #DD0031 !important;
}

.angular-explosion-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
    padding: 100px 20px;
}

/* ===== JAVA ЛОГО ===== */
.java-logo-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: transform 0.3s ease;
}

.java-logo-wrapper:hover {
    transform: scale(1.1);
}

.java-main-logo {
    width: 260px;
    height: 260px;
    filter: drop-shadow(0 0 60px rgba(237, 139, 0, 0.8));
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.java-logo-wrapper.shake .java-main-logo {
    animation: logo-shake 0.6s ease;
}

.java-logo-wrapper:hover .java-main-logo {
    filter: drop-shadow(0 0 80px rgba(237, 139, 0, 1)) drop-shadow(0 0 120px rgba(83, 130, 161, 0.5));
}

.java-glow {
    background: radial-gradient(circle, rgba(237, 139, 0, 0.4) 0%, rgba(83, 130, 161, 0.2) 40%, transparent 70%);
}

.java-highlight {
    color: #ED8B00 !important;
}

.java-explosion-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
    padding: 100px 20px;
}

/* ===== HIGHLIGHT TEXT ===== */
.highlight-text {
    font-weight: 800;
}

/* ===== АДАПТИВ ===== */
@media (max-width: 1200px) {
    .html-main-logo,
    .css-main-logo,
    .js-main-logo,
    .vue-main-logo,
    .react-main-logo,
    .node-main-logo,
    .angular-main-logo,
    .java-main-logo {
        width: 220px;
        height: 220px;
    }
    
    .html-logo-wrapper,
    .css-logo-wrapper,
    .js-logo-wrapper,
    .vue-logo-wrapper,
    .react-logo-wrapper,
    .node-logo-wrapper,
    .angular-logo-wrapper,
    .java-logo-wrapper {
        width: 280px;
        height: 280px;
    }
}

@media (max-width: 900px) {
    .html-explosion-section,
    .css-explosion-section,
    .js-explosion-section,
    .vue-explosion-section,
    .react-explosion-section,
    .node-explosion-section,
    .angular-explosion-section,
    .java-explosion-section {
        min-height: auto;
        padding: 60px 15px;
    }
    
    .html-main-logo,
    .css-main-logo,
    .js-main-logo,
    .vue-main-logo,
    .react-main-logo,
    .node-main-logo,
    .angular-main-logo,
    .java-main-logo {
        width: 160px;
        height: 160px;
    }
    
    .html-logo-wrapper,
    .css-logo-wrapper,
    .js-logo-wrapper,
    .vue-logo-wrapper,
    .react-logo-wrapper,
    .node-logo-wrapper,
    .angular-logo-wrapper,
    .java-logo-wrapper {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 480px) {
    .html-main-logo,
    .css-main-logo,
    .js-main-logo,
    .vue-main-logo,
    .react-main-logo,
    .node-main-logo,
    .angular-main-logo,
    .java-main-logo {
        width: 130px;
        height: 130px;
    }
}