/* =============================================
   HOME PAGE - Supplementary Styles
   Adds subtle textures & animations specific to landing page
============================================= */

.hero::after {
   content: '';
   position: absolute;
   inset: 40px;
   border-radius: 48px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   pointer-events: none;
}

.hero-card {
   position: relative;
   overflow: hidden;
}

.hero-card::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 65%);
   mix-blend-mode: screen;
}

.hero-right .hero-card {
   animation: floatCard 6s ease-in-out infinite;
}

.hero-right .hero-card:nth-child(2) {
   animation-delay: 1.5s;
}

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

.text-switching {
   opacity: 0;
   transform: translateY(10px);
   transition: opacity 0.4s ease, transform 0.4s ease;
}

.feature-card,
.category-card,
.news-card,
.media-card {
   transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.feature-card:hover,
.category-card:hover,
.news-card:hover,
.media-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 25px 55px rgba(15, 23, 42, 0.14);
}

.news-spotlight {
   position: relative;
}

.news-spotlight::before {
   content: '';
   position: absolute;
   top: -20px;
   left: -20px;
   width: 120px;
   height: 120px;
   background: rgba(28, 126, 214, 0.08);
   border-radius: 32px;
   z-index: -1;
}

.media-card .card-label {
   color: var(--primary);
   letter-spacing: 2px;
}