/**
 * Kontezza Landing — Custom Styles
 * AI Ad Network
 */

/* Fallback: custom colors (if Tailwind config fails to load) */
.bg-obsidian { background-color: #0B0F19 !important; }
.bg-coral { background-color: #E17564 !important; }
.bg-cream { background-color: #F4F4F5 !important; }
.bg-surface { background-color: #FFFFFF !important; }
.bg-charcoal { background-color: #1E293B !important; }
.text-obsidian { color: #1E293B !important; }
.text-coral { color: #E17564 !important; }
.text-white { color: #ffffff !important; }
.text-charcoal { color: #1E293B !important; }
.border-coral { border-color: #E17564 !important; }
.border-obsidian { border-color: #0B0F19 !important; }
.border-black\/5 { border-color: rgba(0,0,0,0.05) !important; }
.border-white\/10 { border-color: rgba(255,255,255,0.1) !important; }
.border-white\/20 { border-color: rgba(255,255,255,0.2) !important; }
.text-white\/70 { color: rgba(255,255,255,0.7) !important; }
.text-white\/60 { color: rgba(255,255,255,0.6) !important; }
.text-white\/50 { color: rgba(255,255,255,0.5) !important; }
.text-white\/40 { color: rgba(255,255,255,0.4) !important; }
.text-charcoal\/70 { color: rgba(30,41,59,0.7) !important; }
.text-charcoal\/60 { color: rgba(30,41,59,0.6) !important; }
.bg-white\/5 { background-color: rgba(255,255,255,0.05) !important; }
.bg-white\/10 { background-color: rgba(255,255,255,0.1) !important; }
.bg-white\/20 { background-color: rgba(255,255,255,0.2) !important; }
.bg-coral\/10 { background-color: rgba(225,117,100,0.1) !important; }
.bg-coral\/20 { background-color: rgba(225,117,100,0.2) !important; }
.bg-obsidian\/80 { background-color: rgba(11,15,25,0.8) !important; }
.bg-obsidian\/90 { background-color: rgba(11,15,25,0.9) !important; }
.bg-obsidian\/95 { background-color: rgba(11,15,25,0.95) !important; }
.bg-white\/90 { background-color: rgba(255,255,255,0.9) !important; }
.bg-\[#050505\] { background-color: #050505 !important; }
.bg-\[#121826\] { background-color: #121826 !important; }

/* Base */
body {
    background-color: #F4F4F5;
    color: #1E293B;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Page views (SPA-style navigation) */
.page-view {
    display: none;
    opacity: 0;
}

.page-view.active {
    display: block;
    opacity: 1;
}

/* Sticky protocol cards */
.sticky-card {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center top;
}

/* Diagram glow effects */
.glow-node {
    box-shadow: 0 0 30px rgba(225, 117, 100, 0.3);
}

.glow-node-core {
    box-shadow: 0 0 50px rgba(225, 117, 100, 0.6);
}

/* Animated energy flow lines */
.energy-pulse-1 {
    stroke-dasharray: 60 250;
    animation: energy-flow 2.5s infinite linear;
}

.energy-pulse-2 {
    stroke-dasharray: 60 250;
    animation: energy-flow 2.5s infinite linear;
    animation-delay: 1.25s;
}

@keyframes energy-flow {
    0% {
        stroke-dashoffset: 60;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -180;
        opacity: 0;
    }
}

/* Калькулятор паблишера: плавнее ползунки (меньше лагов при движении) */
.publisher-calc-range {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Live analytics bars */
.analytics-bar {
    transition: height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Neon orange button */
@keyframes spin-gradient {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.btn-wrapper-neon {
    position: relative;
    display: inline-block;
    z-index: 20;
}

.btn-neon-orange {
    position: relative;
    display: inline-flex;
    border-radius: 1rem;
    padding: 2px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    box-shadow: 0 10px 25px -5px rgba(225, 117, 100, 0.5);
}

.btn-wrapper-neon:hover .btn-neon-orange {
    transform: scale(1.05);
}

.btn-neon-orange::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    background: conic-gradient(from 90deg, transparent 0%, transparent 70%, #ffffff 90%, #E17564 100%);
    animation: spin-gradient 2s linear infinite;
}

.btn-neon-orange-inner {
    position: relative;
    background: #E17564;
    width: 100%;
    height: 100%;
    border-radius: calc(1rem - 2px);
    padding: 1rem 2rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: background 0.4s ease;
}

.btn-wrapper-neon:hover .btn-neon-orange-inner {
    background: #d46b5a;
}

.btn-neon-glow {
    position: absolute;
    inset: 0;
    background: #E17564;
    filter: blur(15px);
    opacity: 0.5;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 1rem;
}

.btn-wrapper-neon:hover .btn-neon-glow {
    opacity: 0.9;
    filter: blur(22px);
    transform: scale(1.05);
}