body { 
    background-color: #000; 
    color: #FFF; 
    overflow: hidden; 
}

.snap-container { 
    scroll-snap-type: y mandatory; 
    height: 100vh; 
    overflow-y: auto; 
}

.snap-center-child { 
    scroll-snap-align: center; 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.news-card {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, filter 0.5s ease;
    transform: scale(0.85); 
    opacity: 0.4; 
    filter: blur(5px);
}

.news-card.is-active { 
    transform: scale(1); 
    opacity: 1; 
    filter: blur(0); 
}

.news-card .card-content { 
    transition: opacity 0.4s ease; 
    opacity: 0; 
}

.news-card.is-active .card-content { 
    opacity: 1; 
}

.fade-overlay::before { 
    content: ''; 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 30%, transparent 70%); 
    z-index: 1; 
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.article-view-container {
    background-color: #FFF; 
    color: #000; 
    position: fixed; 
    inset: 0; 
    z-index: 100;
    transform: translateY(100%); 
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.article-view-container.is-open { 
    transform: translateY(0); 
}

.article-content-scroll { 
    height: 100%; 
    overflow-y: auto; 
}

.article-content h1, .article-content h2, .article-content h3 {
    font-weight: 800;
    margin-top: 2em;
    margin-bottom: 1em;
}
.article-content h1 { font-size: 2.5rem; }
.article-content h2 { font-size: 1.75rem; }
.article-content p { margin-bottom: 1.5rem; }
.article-content a { color: #2563eb; text-decoration: underline; }
.article-content blockquote {
    border-left: 4px solid #d1d5db;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #4b5563;
}

.modal-overlay { 
    transition: opacity 0.2s ease-in-out; 
}

.modal-content { 
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-in-out; 
}

.font-option.selected { 
    background-color: #2563eb; 
    color: white; 
}