/* =========================================================
   watchersvoices.com — styles.css (refactor, working)
   keeps your current look, removes duplicates/conflicts,
   keeps hero bg via ::after (brighten image only),
   wave centered behind vinyl (one implementation),
   fixes the "hervo" typo issue by removing that whole block.
   ========================================================= */

/* ----------------
   tokens
----------------- */
:root{
    --wv-bg: #050608;
    --wv-bg-2: #030406;
    --wv-ink: #f3f4f6;
    --wv-ink-dim: rgba(243,244,246,.78);
    --wv-ink-soft: rgba(243,244,246,.60);
    --wv-card: rgba(0,0,0,.42);
    --wv-line: rgba(255,255,255,.12);
    --wv-glow: rgba(255,255,255,.10);
}

/* ----------------
   base
----------------- */
.wv-body{
    background: var(--wv-bg-2);
    color: var(--wv-ink);
    font-family: "MuseoModerno", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    overflow-x: hidden;
}

a{ text-decoration: none; }

.wv-card p{
    line-height: 1.55;
}

.wv-card p.fw-bold{
    letter-spacing: .02em;
}

/* ----------------
   hero (single source of truth)
   bg is on ::after so we can brighten ONLY the image
----------------- */
.wv-hero{
    position: relative;
    overflow: hidden;

    min-height: 100svh;
    display: grid;
    align-items: center;
    padding: 3.25rem 0 4.5rem;

    background: none; /* no bg-image here */
}

/* background image layer (mobile first) */
.wv-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: url("assets/img/1080x1920-hero-v1.webp") center top / cover no-repeat;

    /* make it lighter */
    filter: brightness(1.28) contrast(1.08) saturate(1.05);
    transform: scale(1.03); /* avoids edge seams */
}

/* overlay (subtle) */
.wv-hero__overlay{
    position: absolute;
    inset: 0;
    z-index: 1;

    background: url("assets/img/2560x1440-hero-v2W.webp") center top / cover no-repeat;
}

/* hero bottom fade — overlaps into tracks */
.wv-hero__fade{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -120px;
    height: 280px;
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
            to bottom,
            rgba(0,0,0,0),
            rgba(5,6,8,.55) 40%,
            rgba(5,6,8,.85) 70%,
            rgba(5,6,8,1) 100%
    );
}

/* desktop background swap */
@media (min-width: 992px){
    .wv-hero{
        padding: 4.25rem 0 5.5rem;
    }

    .wv-hero::after{
        background-image: url("assets/img/2560x1440-hero-v1.webp");
        background-position: center center;
    }
}

/* ultra wide tweak */
@media (min-width: 1400px){
    .wv-hero::after{
        background-position: center 20%;
    }
}

/* content above bg/overlay/fade */
.wv-hero .container,
.wv-hero__content{
    position: relative;
    z-index: 5;
}

/* ----------------
   brand / type
   split weight: watchers (bold) + voices (regular)
----------------- */
.wv-logo{
    font-family: "MuseoModerno", system-ui, sans-serif;
    font-size: clamp(2.2rem, 6.5vw, 3.8rem);
    letter-spacing: .015em;
    color: rgba(255,255,255,.96);
    text-transform: lowercase;
    line-height: 1.05;
    margin: 0;

    font-weight: 400 !important; /* critical reset */
}

.wv-logo__lead{ font-weight: 800 !important; }

.wv-tagline{
    color: var(--wv-ink-dim);
    font-size: clamp(1.05rem, 3.2vw, 1.35rem);
    margin: 0;
}

@media (min-width: 992px){
    .wv-logo{
        font-size: clamp(3.4rem, 4.2vw, 4.6rem);
        margin-top: 1.2rem;
    }

    .wv-tagline{
        font-size: clamp(1.25rem, 1.6vw, 1.5rem);
        margin-top: .35rem;
    }
}

/* ----------------
   vinyl sizing
----------------- */
.wv-vinyl-wrap{
    position: relative;   /* parent for wavebar + glow */
    width: 82vw;
    max-width: 520px;
    aspect-ratio: 1 / 1;
}

@media (min-width: 992px){
    .wv-vinyl-wrap{ width: 480px; max-width: none; }
}
@media (min-width: 1200px){
    .wv-vinyl-wrap{ width: 560px; }
}
@media (min-width: 1600px){
    .wv-vinyl-wrap{ width: 620px; }
}

/* ----------------
   wave behind vinyl (ONE implementation)
   uses separate left/right SVGs so they flow outward
----------------- */
.wv-wavebar{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 100vw;
    height: clamp(200px, 18vw, 320px);

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;

    opacity: .78;
    pointer-events: none;
    z-index: 1; /* behind vinyl */
}

.wv-wavebar__half{
    position: relative;
    overflow: hidden;
}

/* soften seam */
.wv-wavebar__half--left{
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%);
    mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%);
}
.wv-wavebar__half--right{
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%);
}

/* base strip */
.wv-wavestrip{
    position: absolute;
    inset: 0;

    background-repeat: repeat-x;
    background-position: 0 50%;
    background-size: auto 100%;

    opacity: .90;
    filter: drop-shadow(0 0 14px rgba(255,255,255,.08));
}

/* outward motion */
.wv-wavestrip--left{
    background-image: url("assets/img/wave-left-240.svg");
    animation: wvLeft 7s linear infinite;
}
.wv-wavestrip--right{
    background-image: url("assets/img/wave-right-240.svg");
    animation: wvRight 7s linear infinite;
}

/* NOTE: 1906px should match one tile width for those SVGs */
@keyframes wvLeft{
    from{ background-position: 0px 50%; }
    to  { background-position: -1906px 50%; }
}
@keyframes wvRight{
    from{ background-position: 0px 50%; }
    to  { background-position: 1906px 50%; }
}

/* vinyl above wave */
.wv-vinyl{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    filter: drop-shadow(0 18px 50px rgba(0,0,0,.65));
    animation: wvSpin 18s linear infinite;
    transform-origin: 50% 50%;

    position: relative;
    z-index: 3;
}

.wv-vinyl-glow{
    position: absolute;
    inset: 12%;
    border-radius: 999px;
    box-shadow: 0 0 80px 10px rgba(255,255,255,.06);
    pointer-events: none;
    z-index: 4;
}

@keyframes wvSpin{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

/* ----------------
   sections
----------------- */
.wv-section{ padding: 4.25rem 0; }

.wv-section--tracks,
.wv-section--about,
.wv-section--contact{
    background: var(--wv-bg-2);
}

/* overlap into hero fade */
.wv-section--tracks{
    position: relative;
    margin-top: -120px;
    padding-top: 240px;
}

/* optional continuity blend at top of tracks */
.wv-section--tracks::before{
    content:"";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: clamp(180px, 22vh, 320px);
    pointer-events: none;
    z-index: 0;

    background: linear-gradient(
            to bottom,
            rgba(5,6,8,1) 0%,
            rgba(5,6,8,.65) 40%,
            rgba(5,6,8,0) 100%
    );
}

.wv-section--tracks > .container{
    position: relative;
    z-index: 1;
}

.wv-section__head{
    max-width: 640px;
    margin: 0 auto;
}

/* headings */
.wv-h2{
    font-weight: 900;
    text-transform: lowercase;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    letter-spacing: .02em;
}

.wv-lead{
    color: var(--wv-ink-dim);
    font-size: clamp(1.05rem, 3.2vw, 1.2rem);
}

/* ----------------
   cards
----------------- */
.wv-card{
    border: 1px solid var(--wv-line);
    background: var(--wv-card);
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

@media (min-width: 992px){
    .wv-card{ padding: 1.6rem 1.7rem; }
}

/* ----------------
   track cards
----------------- */
.wv-track{
    display: block;
    text-align: center;
    color: var(--wv-ink);

    padding: .75rem .25rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.28);

    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.wv-track:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.18);
    background: rgba(0,0,0,.36);
}

.wv-track__disc{
    width: min(34vw, 170px);
    aspect-ratio: 1/1;
    margin: 0 auto .65rem;
    border-radius: 999px;
    position: relative;
}

.wv-track__disc img{
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 999px;
    object-fit: cover;

    filter: drop-shadow(0 12px 24px rgba(0,0,0,.55));
    animation: wvSpin var(--spin, 20s) linear infinite;
}

.wv-track:hover .wv-track__disc img{
    animation-play-state: paused;
    transform: scale(1.03);
}

.wv-track__name{
    font-family: "MuseoModerno", system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
}

.wv-track__lead{ font-weight: 800; }


/* track card refactor (drop this AFTER your existing track styles) */

.wv-track{
    /* make the whole card feel intentional */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    gap: .65rem;
    padding: 1.05rem .95rem 1rem;

    height: 100%;
    min-height: 280px;              /* kills the “empty box” look */
    border-radius: 20px;

    border: 1px solid rgba(255,255,255,.10);
    background:
            radial-gradient(120% 90% at 50% 10%,
            rgba(255,255,255,.06) 0%,
            rgba(0,0,0,.18) 55%,
            rgba(0,0,0,.30) 100%
            );

    box-shadow: 0 14px 34px rgba(0,0,0,.40);
}

.wv-track:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.18);
    background:
            radial-gradient(120% 90% at 50% 10%,
            rgba(255,255,255,.08) 0%,
            rgba(0,0,0,.22) 55%,
            rgba(0,0,0,.36) 100%
            );
}

/* disc size + spacing */
.wv-track__disc{
    width: min(40vw, 160px);
    aspect-ratio: 1 / 1;
    margin: .25rem auto .15rem;
}

/* name tighter + cleaner */
.wv-track__name{
    margin-top: .15rem;
    font-size: 1rem;
    letter-spacing: .01em;
}

/* meta: readable, not cramped */
.wv-track__meta{
    margin-top: .15rem;
    width: 100%;

    display: grid;
    gap: .35rem;

    padding-top: .55rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.wv-track__meta-line{
    display: flex;
    justify-content: center;
    gap: .4rem;
    flex-wrap: wrap;
    text-align: center;
}

.wv-track__meta-line.is-stack{
    display: block;
}

.wv-track__meta-line.is-stack .wv-track__meta-label,
.wv-track__meta-line.is-stack .wv-track__meta-value{
    display: block;
}


.wv-track__meta-label{
    font-weight: 800;
    color: rgba(243,244,246,.88);
    text-transform: lowercase;
}

.wv-track__meta-value{
    color: var(--wv-ink-dim);
}



/* desktop tune */
@media (min-width: 992px){
    .wv-track{ min-height: 300px; }
    .wv-track__disc{ width: 150px; }
    .wv-track__meta-line{ font-size: .82rem; }
}


/* ----------------
   pills + buttons
----------------- */
.wv-meta{
    display: grid;
    gap: .75rem;
    max-width: 520px;
    margin-top: 1.1rem;
}

.wv-pill{
    border: 1px solid var(--wv-line);
    background: rgba(0,0,0,.30);
    border-radius: 999px;
    padding: .75rem 1rem;

    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .95rem;
}

.wv-btn{
    border-radius: 999px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-weight: 800;
    letter-spacing: .02em;
}

/* ----------------
   form
----------------- */
.wv-label{
    color: var(--wv-ink-dim);
    font-weight: 800;
    text-transform: lowercase;
    letter-spacing: .01em;
}

.wv-input{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.25);
    color: var(--wv-ink);
}

.wv-input:focus{
    background: rgba(0,0,0,.30);
    color: var(--wv-ink);
    border-color: rgba(255,255,255,.26);
    box-shadow: 0 0 0 .25rem rgba(255,255,255,.08);
}

.wv-muted{ color: var(--wv-ink-soft); }

/* ----------------
   footer
----------------- */
.wv-footer{
    background: var(--wv-bg);
    border-top: 1px solid rgba(255,255,255,.10);
}

.wv-footer__brand{
    font-weight: 900;
    font-size: 1.25rem;
    text-transform: lowercase;
}

/* ----------------
   reduced motion
----------------- */
@media (prefers-reduced-motion: reduce){
    .wv-vinyl,
    .wv-track__disc img,
    .wv-wavestrip--left,
    .wv-wavestrip--right{
        animation: none !important;
    }
}
/* add to styles.css */

.wv-track__meta{
    margin-top: .45rem;
    display: grid;
    gap: .25rem;
    text-align: center;
    line-height: 1.25;
}

.wv-track__meta-line{
    font-size: .78rem;
    color: var(--wv-ink-dim);
    letter-spacing: .01em;
}

.wv-track__meta-label{
    font-weight: 800;
    text-transform: lowercase;
    color: rgba(243,244,246,.82);
    margin-right: .35rem;
}

.wv-track__meta-value{
    color: var(--wv-ink-dim);
}

/* slightly larger meta on desktop */
@media (min-width: 992px){
    .wv-track__meta-line{ font-size: .82rem; }
}


/* you need these for the ajax message + honeypot */
.wv-alert{
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    background: rgba(0,0,0,.25);
    color: var(--wv-ink);
    text-align: center;
    line-height: 1.35;
    display:none;
}
.wv-alert--ok{ border-color: rgba(110,231,183,.35); }
.wv-alert--err{ border-color: rgba(248,113,113,.35); }

.wv-honeypot{
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}