/* ===== Direction D · "Stage" — one full-screen opener, then the site you have ===== */
.opener{display:none}
@media(min-width:621px){
.opener{display:grid;place-items:center;position:relative;isolation:isolate;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);height:100vh;min-height:560px;max-height:1100px;background:#04070a}
.opener-bg{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;z-index:-2;
  object-position:50% 0;transform-origin:50% 0;filter:grayscale(1) contrast(1.15) brightness(.55);transform:scale(1.7);animation:stage-drift 26s ease-in-out infinite alternate}
.opener::before{content:"";position:absolute;inset:0;z-index:-1;background:#2f6f8f;mix-blend-mode:color;opacity:.85}
.opener::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 45%,#0000 30%,#04070acc 100%),linear-gradient(#0000 70%,#050505)}
.opener-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.opener-label{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#cfe3ec}
.opener-name{margin:0;font-family:var(--display);font-weight:600;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(96px,13vw,210px);line-height:.8;letter-spacing:-.01em;color:#f4f2ec}
.opener-nav{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px}
.opener-nav a{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#e8eef0;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.opener-nav a:hover,.opener-nav a:focus-visible{color:var(--accent);border-color:var(--accent)}
.opener-now{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#f4f2ec;text-decoration:none;border:1px solid #ffffff40;padding:11px 16px;background:#05050566;backdrop-filter:blur(8px)}
.opener-now span{color:var(--accent);margin-right:8px}
.opener-now:hover{border-color:var(--accent)}
/* the old header steps aside: the opener carries the name now */
.artist{padding:28px 0 18px}
.artist h1{font-size:clamp(34px,3.6vw,48px);line-height:.9;margin:8px 0 10px}
.artist h1 br{display:none}
.artist .portrait{width:150px;height:180px}
}
@keyframes stage-drift{to{transform:scale(1.8) translate(-1.5%,-1%)}}
/* mobile: same layout, the identity block sits on the tinted image */
.mobile-bg{display:none}
@media(max-width:620px),(max-width:950px) and (max-height:500px){
.mobile-identity{position:relative;isolation:isolate;overflow:hidden;margin:-26px -16px 22px;padding:36px 16px 30px}
.mobile-bg{display:block;position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;border:0!important;border-radius:0!important;object-fit:cover;object-position:50% 0;transform-origin:50% 0;transform:scale(1.9);z-index:-2;filter:grayscale(1) brightness(.5) contrast(1.1)}
.mobile-identity::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#2f6f8fcc,#2f6f8f99 60%,#050505)}
}
@media(prefers-reduced-motion:reduce){.opener-bg{animation:none}}

/* ===== Stage 2: Efrain's Midjourney beam + his logo ===== */
@media(min-width:621px){
.opener{background:#000}
.opener-bg{inset:0;width:100%;height:100%;object-position:30% 70%;transform:none;filter:none;animation:none}
.opener::before{display:none}
.opener::after{background:linear-gradient(#0000 78%,#050505)}
.opener-inner{position:absolute;left:52%;right:4%;top:50%;transform:translateY(-62%);align-items:center;gap:22px}
.opener-logo{width:min(520px,38vw);height:auto;display:block}
.opener-nav{flex-direction:row;gap:28px;margin-top:8px}
.opener-now{left:auto;right:4%;transform:none}
}
@media(max-width:620px),(max-width:950px) and (max-height:500px){
.mobile-bg{object-position:50% 60%;transform:none;filter:none}
.mobile-identity::before{background:linear-gradient(#0008,#0004 45%,#050505)}
}
.m-logo{display:none}
@media(max-width:620px),(max-width:950px) and (max-height:500px){
.mobile-identity>.mobile-bg{filter:none}
.mobile-identity h1.has-logo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.mobile-identity>.m-logo{display:block;width:78%;height:auto;margin:18px auto 10px;border:0;border-radius:0;filter:drop-shadow(0 2px 12px #000c)}
}

/* "Out now" pill pulses so it reads as the way in to the song */
@media(min-width:621px){
.opener-now{cursor:pointer;animation:now-pulse 2.4s ease-in-out infinite}
.opener-now:hover,.opener-now:focus-visible{animation-play-state:paused;border-color:var(--accent);background:#0b1a22cc}
}
@keyframes now-pulse{0%,100%{box-shadow:0 0 0 0 #97bdce00;border-color:#ffffff40}50%{box-shadow:0 0 0 7px #97bdce26,0 0 24px #97bdce55;border-color:#97bdceee}}
@media(prefers-reduced-motion:reduce){.opener-now{animation:none;border-color:#97bdce99}}