/* =========================================================
   ARMONIX — "Próximamente" (coming soon) section
   Relies on tokens from styles.css:
   --near-black, --cream, --cream-2, --gold, --rust, --pad,
   --font-display, --font-body
   ========================================================= */

.soon{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72vh;
    padding: clamp(3.5rem, 10vw, 7rem) var(--pad);
    background: var(--near-black);
    color: var(--cream);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

/* soft rust glow behind the content, like a light left on in the studio */
.soon::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(46rem, 120vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(177,80,46,0.32) 0%, rgba(177,80,46,0) 65%);
    z-index: -1;
    pointer-events: none;
}

.soon-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 40rem;
}

/* status pill with a "recording" light */
.soon-status{
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1.1rem;
    border: 1px solid rgba(239,227,200,0.3);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    color: var(--gold);
}
.soon-dot{
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #ff5b45;
    box-shadow: 0 0 8px rgba(255,91,69,0.9), 0 0 18px rgba(255,91,69,0.5);
    animation: soon-pulse 2.4s ease-in-out infinite;
}
@keyframes soon-pulse{
    0%, 100%{ opacity: 1; }
    50%{ opacity: 0.35; }
}

.soon-title{
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 8vw, 5rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--cream);
    text-wrap: balance;
}

.soon-text{
    max-width: 38ch;
    font-size: clamp(1.02rem, 2.4vw, 1.15rem);
    line-height: 1.65;
    color: rgba(239,227,200,0.8);
    text-wrap: pretty;
}

/* equalizer bars, a quiet nod to the studio */
.soon-wave{
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 28px;
    margin-top: 0.5rem;
}
.soon-wave span{
    width: 4px;
    height: 30%;
    border-radius: 2px;
    background: var(--gold);
    animation: soon-wave 1.4s ease-in-out infinite;
}
.soon-wave span:nth-child(1){ animation-delay: 0s; }
.soon-wave span:nth-child(2){ animation-delay: 0.15s; }
.soon-wave span:nth-child(3){ animation-delay: 0.3s; }
.soon-wave span:nth-child(4){ animation-delay: 0.45s; }
.soon-wave span:nth-child(5){ animation-delay: 0.6s; }
.soon-wave span:nth-child(6){ animation-delay: 0.75s; }
.soon-wave span:nth-child(7){ animation-delay: 0.9s; }
@keyframes soon-wave{
    0%, 100%{ height: 20%; }
    50%{ height: 100%; }
}

@media (max-width: 560px){
    .soon{ min-height: 64vh; }
    .soon-inner{ gap: 1.25rem; }
}

/* styles.css already shortens animations for reduced motion;
   here the bars are also frozen at a readable height */
@media (prefers-reduced-motion: reduce){
    .soon-wave span{ height: 60%; }
}