/* ПРЕМИАЛЬНЫЕ ФОНЫ В СТИЛЕ PIPE BRANDBOOK */

/* ========================================
   HERO SECTION - 3D SILK SMOKE EFFECT
   Воссоздание объемного дымного эффекта как в Brand_1.png
======================================== */

.hero-bg {
    background: 
        var(--gradient-smoke-main),
        var(--gradient-smoke-secondary);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* Основной объемный дымный слой */
.hero-bg::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -20%;
    width: 140%;
    height: 160%;
    background: 
        var(--silk-gradient-1),
        var(--silk-gradient-2),
        var(--silk-gradient-3);
    animation: silkFlow 25s ease-in-out infinite;
    z-index: 1;
    opacity: 0.9;
    transform: translateZ(0);
    will-change: transform;
}

/* Дополнительный слой глубины */
.hero-bg::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -30%;
    width: 120%;
    height: 180%;
    background: 
        radial-gradient(ellipse 80% 60% at 70% 30%, rgba(40,40,40,0.8) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 30% 70%, rgba(20,20,20,0.6) 0%, transparent 60%);
    animation: silkFlowReverse 30s ease-in-out infinite;
    z-index: 1;
    opacity: 0.7;
    transform: translateZ(0);
    will-change: transform;
}

/* Живые дымные анимации */
@keyframes silkFlow {
    0%, 100% { 
        transform: translateX(-2%) translateY(-1%) rotate(0.5deg) scale(1);
        opacity: 0.9;
    }
    25% { 
        transform: translateX(1%) translateY(-2%) rotate(-0.3deg) scale(1.02);
        opacity: 0.95;
    }
    50% { 
        transform: translateX(-1%) translateY(1%) rotate(0.8deg) scale(0.98);
        opacity: 0.85;
    }
    75% { 
        transform: translateX(2%) translateY(-0.5%) rotate(-0.6deg) scale(1.01);
        opacity: 0.92;
    }
}

@keyframes silkFlowReverse {
    0%, 100% { 
        transform: translateX(1%) translateY(2%) rotate(-0.3deg) scale(1);
        opacity: 0.7;
    }
    33% { 
        transform: translateX(-1.5%) translateY(-1%) rotate(0.5deg) scale(1.03);
        opacity: 0.8;
    }
    66% { 
        transform: translateX(0.8%) translateY(1.5%) rotate(-0.8deg) scale(0.97);
        opacity: 0.6;
    }
}

/* ========================================
   SECTION BACKGROUNDS - ORGANIC BLOBS
   Органические фоны для секций
======================================== */

/* О компании - волнистые переливы */
.abstract-waves {
    background: 
        linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    position: relative;
    overflow: hidden;
}

.abstract-waves::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 60%;
    height: 140%;
    background: 
        radial-gradient(ellipse 80% 100% at 20% 50%, var(--color-smoke-light) 0%, transparent 70%);
    animation: organicFloat 20s ease-in-out infinite;
    transform: rotate(-15deg);
    filter: blur(40px);
}

.abstract-waves::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -15%;
    width: 70%;
    height: 120%;
    background: 
        radial-gradient(ellipse 60% 80% at 80% 30%, var(--color-smoke-light) 0%, transparent 60%);
    animation: organicFloatReverse 25s ease-in-out infinite;
    transform: rotate(10deg);
    filter: blur(50px);
}

/* Услуги - тонкие акценты */
.services {
    background: #ffffff;
    position: relative;
}

.services::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 5%;
    width: 200px;
    height: 200px;
    background: var(--gradient-orange-glow);
    border-radius: 50%;
    filter: blur(60px);
    animation: pulseGlow 15s ease-in-out infinite;
    opacity: 0.3;
}

.services::after {
    content: '';
    position: absolute;
    bottom: 20%;
    right: 10%;
    width: 300px;
    height: 300px;
    background: 
        radial-gradient(circle, var(--color-smoke-light) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    animation: pulseGlow 20s ease-in-out infinite reverse;
    opacity: 0.2;
}

/* Калькулятор - активные градиенты */
.calculator {
    background: 
        linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.calculator::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 50%;
    height: 120%;
    background: 
        linear-gradient(45deg, var(--color-orange-glow) 0%, transparent 70%);
    transform: rotate(15deg);
    filter: blur(100px);
    animation: organicFlow 25s ease-in-out infinite;
    opacity: 0.4;
}

.calculator::after {
    content: '';
    position: absolute;
    bottom: -15%;
    right: -15%;
    width: 60%;
    height: 130%;
    background: 
        radial-gradient(ellipse at center, var(--color-smoke-medium) 0%, transparent 60%);
    transform: rotate(-20deg);
    filter: blur(90px);
    animation: organicFlowReverse 30s ease-in-out infinite;
    opacity: 0.3;
}

/* Преимущества - геометрические элементы */
.advantages {
    background: #ffffff;
    position: relative;
}

.advantages::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 15%;
    width: 150px;
    height: 150px;
    background: 
        conic-gradient(from 45deg, var(--color-orange-glow) 0%, transparent 50%, var(--color-orange-glow) 100%);
    border-radius: 50%;
    filter: blur(40px);
    animation: geometricRotate 40s linear infinite;
    opacity: 0.2;
}

.advantages::after {
    content: '';
    position: absolute;
    bottom: 25%;
    right: 20%;
    width: 200px;
    height: 200px;
    background: 
        radial-gradient(circle, var(--color-smoke-light) 0%, transparent 60%);
    border-radius: 50%;
    filter: blur(60px);
    animation: pulseGlow 18s ease-in-out infinite;
    opacity: 0.15;
}

/* Контакты - финальные акценты */
.contacts {
    background: 
        linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.contacts::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, transparent 0%, var(--color-orange-glow) 50%, transparent 100%);
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
    opacity: 0.1;
}

.contacts::after {
    content: '';
    position: absolute;
    top: 40%;
    right: 25%;
    width: 250px;
    height: 250px;
    background: 
        radial-gradient(circle, var(--color-smoke-medium) 0%, transparent 50%);
    border-radius: 50%;
    filter: blur(70px);
    animation: organicFloat 35s ease-in-out infinite;
    opacity: 0.2;
}

/* ========================================
   УНИВЕРСАЛЬНЫЕ АНИМАЦИИ
======================================== */

@keyframes organicFloat {
    0%, 100% { 
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
    33% { 
        transform: translateY(-15px) translateX(10px) rotate(1deg) scale(1.05);
    }
    66% { 
        transform: translateY(10px) translateX(-8px) rotate(-0.5deg) scale(0.95);
    }
}

@keyframes organicFloatReverse {
    0%, 100% { 
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
    50% { 
        transform: translateY(20px) translateX(-15px) rotate(-1deg) scale(1.08);
    }
}

@keyframes organicFlow {
    0%, 100% { 
        transform: translateY(0) translateX(0) rotate(15deg) scale(1);
    }
    25% { 
        transform: translateY(-20px) translateX(15px) rotate(17deg) scale(1.1);
    }
    50% { 
        transform: translateY(10px) translateX(-10px) rotate(13deg) scale(0.9);
    }
    75% { 
        transform: translateY(-5px) translateX(20px) rotate(16deg) scale(1.05);
    }
}

@keyframes organicFlowReverse {
    0%, 100% { 
        transform: translateY(0) translateX(0) rotate(-20deg) scale(1);
    }
    40% { 
        transform: translateY(25px) translateX(-20px) rotate(-18deg) scale(1.15);
    }
    80% { 
        transform: translateY(-15px) translateX(10px) rotate(-22deg) scale(0.85);
    }
}

@keyframes pulseGlow {
    0%, 100% { 
        opacity: 0.2; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.4; 
        transform: scale(1.2);
    }
}

@keyframes geometricRotate {
    0% { 
        transform: rotate(0deg) scale(1);
    }
    50% { 
        transform: rotate(180deg) scale(1.1);
    }
    100% { 
        transform: rotate(360deg) scale(1);
    }
}

/* ========================================
   ПРОИЗВОДИТЕЛЬНОСТЬ И АДАПТИВНОСТЬ
======================================== */

/* Оптимизация для слабых устройств */
@media (max-width: 768px) {
    .hero-bg::before,
    .hero-bg::after {
        filter: blur(30px);
        animation-duration: 35s;
    }
    
    .abstract-waves::before,
    .abstract-waves::after,
    .calculator::before,
    .calculator::after,
    .contacts::after {
        filter: blur(25px);
        animation-duration: 30s;
    }
    
    .services::before,
    .services::after,
    .advantages::before,
    .advantages::after {
        filter: blur(20px);
        animation-duration: 25s;
    }
}

/* Уважение к настройкам пользователя */
@media (prefers-reduced-motion: reduce) {
    .hero-bg::before,
    .hero-bg::after,
    .abstract-waves::before,
    .abstract-waves::after,
    .services::before,
    .services::after,
    .calculator::before,
    .calculator::after,
    .advantages::before,
    .advantages::after,
    .contacts::before,
    .contacts::after {
        animation: none;
    }
}

/* Оптимизация производительности */
.hero-bg::before,
.hero-bg::after,
.abstract-waves::before,
.abstract-waves::after,
.services::before,
.services::after,
.calculator::before,
.calculator::after,
.advantages::before,
.advantages::after,
.contacts::before,
.contacts::after {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: layout style paint;
}

/* Дополнительные декоративные элементы */
.smoke-particle {
    position: absolute;
    background: var(--gradient-orange-glow);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.1;
    animation: smokeParticle 8s ease-in-out infinite;
}

@keyframes smokeParticle {
    0% {
        transform: translateY(100px) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.1;
    }
    90% {
        opacity: 0.05;
    }
    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}

/* Floating elements для дополнительной атмосферы */
.floating-element {
    position: absolute;
    background: var(--color-smoke-light);
    border-radius: 50%;
    pointer-events: none;
    animation: floatingDrift 12s ease-in-out infinite;
    opacity: 0.05;
}

@keyframes floatingDrift {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-20px) translateX(10px);
    }
    50% {
        transform: translateY(-10px) translateX(-15px);
    }
    75% {
        transform: translateY(-30px) translateX(5px);
    }
}