/* ============ JEM — business card + music video ============ */
:root{
  --pink:#ff2db7; --pink2:#ff7ad9; --cyan:#33e7ff; --purple:#8a2be2;
  --gold:#ffd43b; --ink:#07030d;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:var(--ink);color:#fff;
  font-family:'Orbitron',system-ui,sans-serif;user-select:none;-webkit-user-select:none;
  touch-action:manipulation}
body{position:fixed;inset:0}
body.booting #cover,body.booting #main{opacity:0}

/* view switch: aspect-ratio flips the panels (same threshold as the tape app) */
#cover{display:flex}
#main{display:none}
@media (min-aspect-ratio:3/5){ #cover{display:none} #main{display:flex} }
body.force-cover #cover{display:flex!important} body.force-cover #main{display:none!important}
body.force-main #cover{display:none!important} body.force-main #main{display:flex!important}
section{position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .35s ease}

/* ================= BUSINESS CARD (cover) ================= */
#cover{background:
  radial-gradient(140% 90% at 50% 0%,#2a0f3a 0%,#120722 45%,#07030d 100%);
  padding:4vh 5vw}
.card{position:relative;width:min(92vw,360px);height:min(90vh,640px);border-radius:20px;overflow:hidden;
  background:linear-gradient(155deg,#1a1026 0%,#0e0718 55%,#140a22 100%);
  box-shadow:0 20px 60px #000a,0 0 0 1.5px #ffffff18,inset 0 0 60px #ff2db71f;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:5vmin 6vmin 4vmin;text-align:center}
/* holographic sheen */
.holo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:linear-gradient(115deg,transparent 30%,#33e7ff55 45%,#ff2db755 55%,#ffd43b55 62%,transparent 75%);
  background-size:300% 300%;animation:sheen 6s linear infinite}
@keyframes sheen{0%{background-position:0% 0%}100%{background-position:300% 300%}}
.foil{position:absolute;inset:6px;border-radius:15px;pointer-events:none;
  box-shadow:inset 0 0 0 1px #ff2db766,inset 0 0 22px #33e7ff33}

.agency{position:relative;z-index:2;font-weight:700;letter-spacing:3px;font-size:clamp(11px,3.4vmin,16px);
  color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
.agency span{display:block;font-weight:500;letter-spacing:2px;font-size:.62em;color:#d9c7ff;opacity:.8;margin-top:3px}

.hero{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.star{font-size:clamp(20px,6vmin,30px);color:var(--gold);text-shadow:0 0 14px var(--gold);margin-bottom:-6px}
.jem{font-family:'Monoton',cursive;font-size:clamp(58px,20vmin,120px);line-height:.9;letter-spacing:3px;
  color:#fff;text-shadow:0 0 8px var(--pink),0 0 22px var(--pink),0 0 48px var(--purple)}
.holos{font-weight:900;letter-spacing:clamp(2px,1.6vmin,6px);font-size:clamp(9px,3vmin,15px);
  color:var(--cyan);text-shadow:0 0 8px var(--cyan);margin-top:2px}
.truly{font-family:'Permanent Marker',cursive;color:var(--gold);font-size:clamp(14px,4.4vmin,24px);
  transform:rotate(-2deg);margin-top:8px;text-shadow:0 0 12px #ffae00}

.rule{position:relative;z-index:2;width:70%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#ff2db7,#33e7ff,transparent)}

.mgr{position:relative;z-index:2}
.name{font-family:'Permanent Marker',cursive;font-size:clamp(22px,7vmin,40px);color:#fff;
  letter-spacing:1px;text-shadow:0 0 12px var(--pink2)}
.role{font-weight:700;letter-spacing:3px;font-size:clamp(10px,3vmin,15px);color:var(--pink2);margin-top:2px}
.disc{font-style:italic;font-size:clamp(9px,2.6vmin,13px);color:#e7d9ff;opacity:.85;margin-top:6px}
.contact{display:flex;flex-direction:column;gap:3px;margin-top:10px;
  font-size:clamp(9px,2.5vmin,12px);color:#cfc0e8;letter-spacing:1px}

.cta{position:relative;z-index:2;font-weight:700;letter-spacing:2px;font-size:clamp(10px,2.8vmin,13px);
  color:var(--cyan);text-shadow:0 0 10px var(--cyan);animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px);opacity:.7}}

/* ================= MUSIC VIDEO (unfolded) ================= */
#main{background:#000 url('/img/bg-neon.png') center/cover no-repeat}
#main::before{content:"";position:absolute;inset:0;background:rgba(3,1,8,.55)}
.stage{position:relative;z-index:2;width:100%;flex:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden}
#ytplayer,#ytplayer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#ytplayer{background:#000}
body:not(.playing) #ytplayer{opacity:0;pointer-events:none}

.poster{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2.5vmin;background:radial-gradient(120% 80% at 50% 40%,#2a0f3aee,#07030df2)}
body.playing .poster{display:none}
.p-top{font-weight:900;letter-spacing:4px;font-size:clamp(14px,4vmin,26px);color:#fff;
  text-shadow:0 0 12px var(--pink)}
.p-top span{color:var(--cyan);text-shadow:0 0 10px var(--cyan);letter-spacing:2px;font-size:.7em}
.bigplay{width:24vmin;height:24vmin;max-width:130px;max-height:130px;border:0;border-radius:50%;
  color:#fff;font-size:9vmin;cursor:pointer;display:grid;place-items:center;padding-left:1vmin;
  background:radial-gradient(circle at 50% 35%,#ff5cc6,#c0167f);
  box-shadow:0 0 40px #ff2db7aa,inset 0 2px 0 #ffffff44,0 0 0 3px #ff2db755;
  animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07);box-shadow:0 0 60px #ff2db7,inset 0 2px 0 #ffffff44,0 0 0 3px #ff2db7}}
.p-title{font-family:'Permanent Marker',cursive;font-size:clamp(18px,5vmin,34px);color:var(--gold);
  text-shadow:0 0 12px #ffae00;transform:rotate(-1.5deg)}
.p-hint{font-size:clamp(10px,2.6vmin,14px);letter-spacing:2px;color:var(--cyan)}

.soundcue{position:absolute;z-index:5;bottom:3vmin;right:3vmin;border:0;border-radius:30px;
  padding:10px 16px;background:#ff2db7;color:#fff;font-weight:900;font-size:14px;cursor:pointer;
  box-shadow:0 6px 20px #000a}

.picker{position:relative;z-index:2;width:100%;display:flex;gap:1.6vmin;padding:1.6vmin 2.4vmin;
  overflow-x:auto;background:linear-gradient(#0000,#07030dcc);scrollbar-width:none}
.picker::-webkit-scrollbar{display:none}
.picker button{flex:0 0 auto;border:0;cursor:pointer;border-radius:12px;padding:1.4vmin 3vmin;
  font-family:'Orbitron';font-weight:700;font-size:clamp(11px,2.6vmin,14px);color:#fff;letter-spacing:.5px;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #ffffff1f;white-space:nowrap}
.picker button.all{background:linear-gradient(90deg,#ff2db7,#8a2be2);box-shadow:0 0 14px #ff2db766}
.picker button.active{background:linear-gradient(90deg,#ff2db73a,#33e7ff22);
  box-shadow:inset 0 0 0 1px #ff2db7,0 0 14px #ff2db744;color:var(--gold)}

/* hidden-ish corner swap link */
.swap{position:fixed;z-index:20;top:env(safe-area-inset-top,0);left:0;padding:10px 12px;
  font-size:11px;letter-spacing:1px;color:#ffffff3a;text-decoration:none;font-weight:700}
.swap:active{color:#fff}

#dbg{position:fixed;z-index:99;bottom:8px;right:8px;padding:8px 12px;border:0;border-radius:8px;
  background:#ff2db7;color:#fff;font-weight:900}