body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #0b0f19;
}
.heading-font {
    font-family: 'Space Grotesk', sans-serif;
}
.mono-font {
    font-family: 'JetBrains Mono', sans-serif;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0f172a;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a855f7;
}
.neon-pulse {
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 15px rgba(168, 85, 247, 0.4); }
    50% { transform: scale(1.02); opacity: .9; box-shadow: 0 0 25px rgba(168, 85, 247, 0.7); }
}
#play-btn {
    transition: opacity 0.4s ease;
}

@property --amb-1 {
    syntax: '<color>';
    inherits: true;
    initial-value: #a855f7;
}
@property --amb-2 {
    syntax: '<color>';
    inherits: true;
    initial-value: #22d3ee;
}
@property --amb-3 {
    syntax: '<color>';
    inherits: true;
    initial-value: #6366f1;
}

html {
    --amb-1: #a855f7;
    --amb-2: #22d3ee;
    --amb-3: #6366f1;
    transition: --amb-1 1.6s ease, --amb-2 1.6s ease, --amb-3 1.6s ease;
}

.ambient-glow {
    position: absolute;
    inset: -25% -12%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    filter: blur(45px) saturate(160%);
}
.ambient-blob {
    position: absolute;
    width: 55%;
    height: 55%;
    border-radius: 9999px;
    transition: background-color 1.6s ease;
}
.ambient-blob-1 {
    background-color: var(--amb-1);
    top: 8%;
    left: 6%;
    opacity: .8;
    animation: blobFloat1 16s ease-in-out infinite, blobBreathe1 5.5s ease-in-out infinite;
}
.ambient-blob-2 {
    background-color: var(--amb-2);
    top: 20%;
    right: 4%;
    opacity: .7;
    animation: blobFloat2 22s ease-in-out infinite, blobBreathe2 7s ease-in-out infinite;
}
.ambient-blob-3 {
    background-color: var(--amb-3);
    bottom: 2%;
    left: 28%;
    opacity: .65;
    animation: blobFloat3 28s ease-in-out infinite, blobBreathe3 6.2s ease-in-out infinite;
}

@keyframes blobFloat1 {
    0%, 100% { transform: translate(-8%, -4%) scale(1); }
    25%      { transform: translate(18%, 12%) scale(1.2); }
    50%      { transform: translate(6%, 24%) scale(0.88); }
    75%      { transform: translate(-16%, 6%) scale(1.1); }
}
@keyframes blobFloat2 {
    0%, 100% { transform: translate(6%, -6%) scale(1); }
    30%      { transform: translate(-20%, 10%) scale(0.85); }
    60%      { transform: translate(-8%, 22%) scale(1.25); }
}
@keyframes blobFloat3 {
    0%, 100% { transform: translate(0%, 0%) scale(1); }
    40%      { transform: translate(20%, -14%) scale(1.15); }
    70%      { transform: translate(-14%, -6%) scale(0.9); }
}
@keyframes blobBreathe1 {
    0%, 100% { opacity: .55; }
    50%      { opacity: .9; }
}
@keyframes blobBreathe2 {
    0%, 100% { opacity: .45; }
    50%      { opacity: .8; }
}
@keyframes blobBreathe3 {
    0%, 100% { opacity: .4; }
    50%      { opacity: .75; }
}

#track-art-blur-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: color-mix(in srgb, var(--amb-1) 22%, transparent);
    mix-blend-mode: overlay;
    transition: --amb-1 1.6s ease;
}

.neon-pulse-dynamic {
    animation: pulseDynamic 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    transition: --amb-1 1.6s ease;
}
@keyframes pulseDynamic {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 15px color-mix(in srgb, var(--amb-1) 55%, transparent);
    }
    50% {
        transform: scale(1.02);
        opacity: .9;
        box-shadow: 0 0 25px color-mix(in srgb, var(--amb-1) 75%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-blob-1, .ambient-blob-2, .ambient-blob-3 { animation: none; }
    .neon-pulse-dynamic { animation: none; }
}

/* Containerul principal al bannerului */
.ad-banner-container {
  width: 100%;
  max-width: 100%; /* Se asigură că nu depășește containerul tău părinte */
  margin: 2.5rem 0 1.5rem 0; /* Spațiu generos sus și jos */
  box-sizing: border-box;
}

/* Textul mic de deasupra bannerului */
.ad-label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a0a0a0;
  margin-bottom: 0.35rem;
  text-align: right; /* Aliniat elegant în dreapta */
}

/* Link-ul care îmbracă bannerul */
.ad-link {
  display: block;
  text-decoration: none;
  outline: none;
}

/* Aspectul bannerului propriu-zis */
.ad-content {
  width: 100%;
  height: 120px; /* Înălțimea ideală */
  background-color: #f8f9fa; /* Fundal neutru în caz că imaginea se încarcă greu */
  border: 1px solid #e9ecef;
  border-radius: 8px; /* Margini fin rotunjite */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Efect discret la trecerea mouse-ului */
.ad-content:hover {
  transform: translateY(-2px); /* Se ridică ușor */
  border-color: #dee2e6;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.04); /* Umbră foarte fină */
}

/* Comportamentul imaginii din banner */
.ad-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* „Decupează” și adaptează imaginea fără să o deformeze */
  display: block;
}

/* Stil pentru textul de rezervă (dacă nu folosești imagine) */
.ad-placeholder-text {
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Ajustare spațiu pentru zona Back to News */
.back-to-news-container {
  margin-top: 1.5rem;
}