/* wc-v4: round 5. header, hero buttons, intro, marquee, beam, hover effects */

/* header: always visible, dark glass after the hero */
header .header__container{transform:none!important}
header{transition:background .45s,backdrop-filter .45s,border-color .45s;border-bottom:1px solid transparent}
header.wc-solid{background:rgba(10,5,33,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(214,190,255,.14)}

/* scroll progress */
.wc-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#ffb27a,#b07af2,#6fc3ff);z-index:60;pointer-events:none}

/* hero buttons: stacked on desktop so they never sit on the portrait */
@media(min-width:1024px){
 .wc-cta{flex-direction:column!important;flex-wrap:nowrap!important;align-items:flex-start!important;gap:1.2rem!important;max-width:24rem}
 .wc-cta .btn,.wc-cta .wc-ghost{width:21rem!important}
}
.wc-spot{position:absolute;left:0;top:0;width:46rem;height:46rem;margin:-23rem 0 0 -23rem;border-radius:50%;background:radial-gradient(circle,rgba(255,190,140,.20),rgba(150,90,230,.10) 42%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .6s;mix-blend-mode:screen;z-index:1}

/* mobile menu: no bleached light window */
.header-menu .lightning{display:none!important}

/* tablet + phone hero */
@media(max-width:1023px){
 .wc-m{display:none}
 .wc-name,.hero-line-wrap{text-align:center}
 .wc-portrait-wrap:after{left:50%;right:auto;width:100vw;margin-left:-50vw;height:34%;background:linear-gradient(180deg,rgba(var(--wc-fog-rgb,19,10,60),0) 0%,rgba(var(--wc-fog-rgb,19,10,60),.75) 60%,rgb(var(--wc-fog-rgb,19,10,60)) 100%)}
}

/* hero stage dissolves into the page, no hairline */
.wc-stage{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%)}

/* intro under the hero */
.wc-aurora{position:absolute;inset:-6rem 0 -4rem;overflow:hidden;pointer-events:none;z-index:0}
.wc-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.6;animation:wcAur 18s ease-in-out infinite alternate}
.wc-aurora i:nth-child(1){left:6%;top:8%;width:46vw;height:30rem;background:radial-gradient(closest-side,rgba(255,150,100,.30),transparent)}
.wc-aurora i:nth-child(2){right:4%;top:34%;width:52vw;height:34rem;background:radial-gradient(closest-side,rgba(138,84,230,.38),transparent);animation-duration:23s;animation-direction:alternate-reverse}
@keyframes wcAur{from{transform:translate3d(-5%,0,0) scale(1)}to{transform:translate3d(7%,12%,0) scale(1.18)}}
.wc-kicker,.wc-statement,.wc-hint{position:relative;z-index:1}
.wc-kicker{font:600 1.2rem/1 "Work Sans",sans-serif;letter-spacing:.34em;text-transform:uppercase;color:#ffb27a;margin:0 0 3rem}
.wc-statement{max-width:94rem;margin:0 auto;font-size:clamp(2.6rem,3.7vw,5rem)!important;line-height:1.22!important;color:#fff}
.wc-statement.js-words .wc-w{opacity:.16;display:inline-block;will-change:opacity}
.wc-hint{display:inline-flex;flex-direction:column;align-items:center;gap:1rem;margin-top:5rem;font:600 1.1rem/1 "Work Sans",sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#cdb3ff;opacity:.85}
.wc-hint i{display:block;width:1px;height:6rem;background:linear-gradient(#cdb3ff,transparent);transform-origin:top;animation:wcLine 2.4s ease-in-out infinite}
@keyframes wcLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* marquee */
.wc-marquee{position:relative;overflow:hidden;padding:2.6rem 0;margin:0 -3rem 7rem;border-block:1px solid rgba(214,190,255,.16);background:linear-gradient(90deg,rgba(10,5,33,0),rgba(70,36,126,.28),rgba(10,5,33,0));transform:rotate(-1.4deg)}
.wc-marquee-track{display:flex;align-items:center;width:max-content;white-space:nowrap;will-change:transform}
.wc-marquee-track>*{margin-right:3.2rem;flex:none}
.wc-marquee span{font:italic 400 clamp(3.4rem,5.4vw,7.6rem)/1 Georgia,"Times New Roman",serif;color:transparent;-webkit-text-stroke:1px rgba(226,205,255,.72);text-transform:uppercase;letter-spacing:.04em;transition:color .35s}
.wc-marquee span:hover{color:#f0e4ff}
.wc-marquee b{width:1.2rem;height:1.2rem;border-radius:50%;background:#ffb27a;box-shadow:0 0 14px rgba(255,170,110,.85)}

/* soft beam replaces the old bleached light window */
#music{overflow:visible}
.wc-beam{position:absolute;left:50%;top:-4rem;width:80rem;max-width:96vw;height:64rem;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%,rgba(255,170,110,.18),rgba(150,90,230,.13) 38%,transparent 68%);filter:blur(12px);pointer-events:none;z-index:0}

/* ways section is its own block now */
.wc-ways-sec{padding:6rem 0 2rem}
.wc-ways-sec .wc-ways{margin-top:0}

/* hover effects */
.wc-ev{position:relative;transition:transform .5s cubic-bezier(.2,.7,.2,1),background .5s}
.wc-ev:before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,#ffb27a,#b07af2,transparent);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.wc-ev:hover{transform:translateX(14px);background:linear-gradient(90deg,rgba(150,90,230,.2),transparent 72%)}
.wc-ev:hover:before{transform:scaleX(1)}
.wc-ev .wc-ev-date b{transition:color .4s}
.wc-ev:hover .wc-ev-date b{color:#ffcf9e}
.wc-ev-cta i{display:inline-block;transition:transform .35s}
.wc-ev:hover .wc-ev-cta i{transform:translateX(8px)}
.media-grid-v2 figure{transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s,border-color .55s}
.media-grid-v2 figure:hover{transform:translateY(-6px);box-shadow:0 34px 60px -24px rgba(150,90,230,.55);border-color:rgba(255,190,140,.5)}
.media-grid-v2 img{transition:filter .6s!important}
.media-grid-v2 figure:hover img{transform:none;filter:saturate(1) brightness(.98)}
.btn--primary,.wc-ghost{transition:box-shadow .4s,background .4s,border-color .4s}
.btn--primary:hover{box-shadow:0 14px 44px -12px rgba(176,122,242,.85)}
.wc-pan:hover:not(.is-open) img{filter:grayscale(.35) brightness(.7)}

@media(prefers-reduced-motion:reduce){.wc-aurora i,.wc-hint i{animation:none!important}}

/* V4 hero wordmark: keep the title close to the portrait without covering it. */
@media(min-width:1024px){
 #home.artist-hero-v2 .wc-name{
  width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) clamp(48rem,40vw,93rem) minmax(0,1fr)!important;
  padding-inline:clamp(1rem,1.7vw,2.5rem)!important;gap:0!important;
  font-size:clamp(5.2rem,5.2vw,8.4rem)!important
 }
 #home.artist-hero-v2 .wc-name:before{content:"";grid-column:2;grid-row:1}
 #home.artist-hero-v2 .wc-name>div{min-width:max-content;white-space:nowrap}
 #home.artist-hero-v2 .wc-name>div:first-child{grid-column:1;grid-row:1;justify-self:end}
 #home.artist-hero-v2 .wc-name>div:last-child{grid-column:3;grid-row:1;justify-self:start}
}
@media(prefers-reduced-motion:no-preference) and (min-width:1024px){
 .artist-hero-v2 .wc-name>div:first-child{animation:wc-title-in-left .9s cubic-bezier(.2,.7,.2,1) both}
 .artist-hero-v2 .wc-name>div:last-child{animation:wc-title-in-right .9s cubic-bezier(.2,.7,.2,1) both}
 @keyframes wc-title-in-left{from{opacity:0;transform:translateX(-1.5rem)}to{opacity:1;transform:translateX(0)}}
 @keyframes wc-title-in-right{from{opacity:0;transform:translateX(1.5rem)}to{opacity:1;transform:translateX(0)}}
}