/* Simplicity article specific styles */

/* Article layout */
.article-content {
    max-width: 950px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* Make sure header is not sticky */
header {
    position: static !important;
}

/* Hero graphic */
.hero-graphic {
    margin: 2rem 0 3rem;
    border-radius: 8px;
    overflow: hidden;
}

/* SVG animations */
.complex-element {
    animation: rotate 30s infinite linear;
    transform-origin: center;
    opacity: 0.9;
}

@keyframes rotate {
    from { transform: translate(150px, 90px) rotate(0deg); }
    to { transform: translate(150px, 90px) rotate(360deg); }
}

.simple-element circle:first-child {
    animation: pulse 4s infinite ease-in-out;
}

@keyframes pulse {
    0% { stroke-width: 2; stroke-opacity: 0.8; }
    50% { stroke-width: 4; stroke-opacity: 1; }
    100% { stroke-width: 2; stroke-opacity: 0.8; }
}

.transform-arrow {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw 3s forwards ease-in-out;
}

@keyframes draw {
    to { stroke-dashoffset: 0; }
}

.transform-icon {
    animation: float 4s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.benefit-circle {
    opacity: 0;
    animation: appear 0.8s forwards ease-in-out;
}

.benefit-circle:nth-child(2) { animation-delay: 0.2s; }
.benefit-circle:nth-child(4) { animation-delay: 0.4s; }
.benefit-circle:nth-child(6) { animation-delay: 0.6s; }

@keyframes appear {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Introduction styling */
.introduction {
    font-size: 1.3rem;
    line-height: 1.7;
    margin-bottom: 3rem;
    color: #d0d0d0;
    border-left: 3px solid #3A7BD5;
    padding-left: 1.5rem;
}

.introduction p {
    margin-bottom: 1.2rem;
}

/* Section styling */
.article-section {
    margin-bottom: 4rem;
}

.article-section h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: #fff;
    border-bottom: 1px solid #333;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accent-emoji {
    font-size: 1.8rem;
    color: #d0d0d0;
}

/* Stats container */
.stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.stat-card {
    background-color: #151515;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    background-color: #191919;
}

.stat-icon {
    margin-bottom: 1rem;
}

.stat-text {
    font-size: 1rem;
    line-height: 1.4;
    color: #aaa;
}

/* Insight quote */
.insight-quote {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: #151515;
    border-left: 3px solid #00D2FF;
    font-size: 1.2rem;
    font-style: italic;
    color: #ccc;
}

/* Science graphic */
.science-graphic {
    margin: 2rem 0;
    border-radius: 8px;
    overflow: hidden;
}

.brain-outline {
    animation: pulseBrain 4s infinite ease-in-out;
}

@keyframes pulseBrain {
    0%, 100% { stroke-opacity: 0.7; stroke-width: 2; }
    50% { stroke-opacity: 1; stroke-width: 3; }
}

.complex-path path {
    animation: dashMove 15s infinite linear;
}

@keyframes dashMove {
    to { stroke-dashoffset: 100; }
}

.simple-path {
    opacity: 0;
    animation: fadeIn 1s 1s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.complex-load {
    animation: moveDown 3s infinite alternate ease-in-out;
}

@keyframes moveDown {
    from { transform: translateY(0); }
    to { transform: translateY(10px); }
}

.simple-load {
    animation: moveUp 3s infinite alternate ease-in-out;
}

@keyframes moveUp {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

/* Elements container */
.elements-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.element-card {
    background-color: #151515;
    padding: 1.5rem;
    border-radius: 8px;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.element-card:hover {
    transform: translateY(-5px);
    background-color: #191919;
}

.element-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.element-card h3 {
    color: #fff;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
}

.element-card p {
    font-size: 0.95rem;
    color: #aaa;
}

/* Examples section */
.examples {
    margin: 2rem 0;
}

.example {
    display: grid;
    grid-template-columns: 5fr 1fr 4fr;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
}

.example-before, .example-after {
    background-color: #151515;
    padding: 1.5rem;
    border-radius: 8px;
}

.example-before {
    border-left: 3px solid #FF4A4A;
}

.example-after {
    border-left: 3px solid #00D2FF;
}

.example-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #666;
}

.example h3 {
    margin-bottom: 1rem;
    color: #ccc;
    font-size: 1.1rem;
}

.example-before p {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.5;
}

.example-after p {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 500;
}

/* Simplification process */
.simplification-process {
    background-color: #151515;
    padding: 2rem;
    border-radius: 8px;
    margin-top: 3rem;
    border-left: 3px solid #3A7BD5;
}

.simplification-process h3 {
    color: #fff;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
}

.simplification-process ol {
    counter-reset: process;
    list-style-type: none;
    padding: 0;
}

.simplification-process li {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 3rem;
    counter-increment: process;
}

.simplification-process li:before {
    content: counter(process);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #3A7BD5;
    color: #fff;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.simplification-process li strong {
    color: #fff;
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.simplification-process li p {
    color: #aaa;
    font-size: 0.95rem;
}

/* Balance graphic */
.balance-graphic {
    margin: 2rem 0;
    border-radius: 8px;
    overflow: hidden;
}

.balance-left {
    animation: tiltLeft 4s infinite alternate ease-in-out;
    transform-origin: 300px 55px;
}

.balance-right {
    animation: tiltRight 4s infinite alternate ease-in-out;
    transform-origin: 300px 55px;
}

@keyframes tiltLeft {
    from { transform: rotate(0deg); }
    to { transform: rotate(-5deg); }
}

@keyframes tiltRight {
    from { transform: rotate(0deg); }
    to { transform: rotate(5deg); }
}

.highlight-box {
    animation: glow 3s infinite alternate ease-in-out;
}

@keyframes glow {
    from { opacity: 0.5; }
    to { opacity: 0.9; }
}

/* Comparison table */
.comparison-table {
    margin: 2rem 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
}

.comparison-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #1a1a1a;
}

.comparison-header .comparison-cell {
    padding: 1rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

.comparison-header .comparison-cell:nth-child(2) {
    color: #00D2FF;
}

.comparison-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.comparison-row .comparison-cell {
    padding: 1rem;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    background-color: #151515;
    text-align: center;
}

.comparison-row:last-child .comparison-cell {
    border-bottom: none;
}

.comparison-row .comparison-cell:last-child {
    border-right: none;
}

.comparison-row .comparison-cell:nth-child(2) {
    background-color: #182a3a;
}

/* Channels */
.channels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.channel-card {
    background-color: #151515;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 3px solid #3A7BD5;
}

.channel-card h3 {
    color: #fff;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.channel-card ul {
    margin: 0;
    padding-left: 1.2rem;
}

.channel-card li {
    margin-bottom: 0.7rem;
    color: #aaa;
}

/* Objections */
.objections {
    margin: 2rem 0;
}

.objection {
    background-color: #151515;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 3px solid #00D2FF;
}

.objection h3 {
    color: #fff;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
    font-style: italic;
}

.objection p {
    color: #aaa;
    font-size: 0.95rem;
}

.objection strong {
    color: #00D2FF;
}

/* Conclusion */
.conclusion {
    border-top: 1px solid #333;
    padding-top: 2rem;
    margin-top: 4rem;
}

.article-cta {
    margin: 3rem 0 2rem;
    padding: 2rem;
    background-color: #151515;
    border-radius: 8px;
    text-align: center;
    border-left: 3px solid #3A7BD5;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.article-cta:hover {
    transform: translateY(-5px);
    background-color: #191919;
}

.article-cta p {
    font-size: 1.2rem;
    color: #fff;
}

/* Article navigation */
.article-nav {
    display: flex;
    justify-content: space-between;
    margin: 3rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid #222;
    flex-wrap: wrap;
    gap: 1rem;
}

.back-to-articles, .prev-article, .next-article {
    display: inline-block;
    padding: 0.8rem 1.2rem;
    background-color: #151515;
    border-radius: 3px;
    transition: all 0.3s ease;
    border: none;
}

.back-to-articles:hover, .prev-article:hover, .next-article:hover {
    background-color: #222;
    transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stats-container, .elements-container, .channels {
        grid-template-columns: 1fr;
    }
    
    .example {
        grid-template-columns: 1fr;
    }
    
    .example-arrow {
        transform: rotate(90deg);
        margin: 1rem 0;
    }
    
    .comparison-header, .comparison-row {
        grid-template-columns: 1fr;
    }
    
    .article-nav {
        flex-direction: column;
    }
}