/* ===== ARTISTS = トレーディングカード（SERIES 1） =====
   表=実写真＋クローム枠＋ホロ（リフラクター）／裏=曲とクレジット。
   傾き・光・裏返しは tcard.js が --rx --ry --flip --mx --my --hyp を毎フレーム書く。JSが無くても表は普通に見える。 */
.music-hero{overflow-x:clip}
.tcards{display:grid;grid-template-columns:repeat(2,minmax(0,400px));justify-content:center;gap:clamp(32px,7vw,110px);padding-bottom:12px}
.tc{position:relative;isolation:isolate;container-type:inline-size;width:100%;--rx:0deg;--ry:0deg;--flip:0deg;--mx:50;--my:50;--hyp:0}
.tc::before{content:"";position:absolute;inset:-6% -14% 10%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--tone) 26%,transparent),transparent 72%);filter:blur(28px);pointer-events:none}
.tc-stage{position:relative;perspective:1100px;animation:tc-in .9s cubic-bezier(.2,.8,.2,1) both}
.tc:nth-child(2) .tc-stage{animation-delay:.14s}
@keyframes tc-in{from{opacity:0;transform:translateY(46px) rotate(-4deg) scale(.96)}}
.tc-card{position:relative;aspect-ratio:63/88;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip)));will-change:transform}
.tc-face{position:absolute;inset:0;overflow:hidden;border-radius:4.6cqw;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 4cqw 9cqw -3cqw rgba(0,0,0,.85),0 0 12cqw -4cqw color-mix(in srgb,var(--tone) 45%,transparent)}
.tc-back{transform:rotateY(180deg);visibility:hidden}
.tc-card.show-back .tc-back{visibility:visible}.tc-card.show-back .tc-front{visibility:hidden}
.tc-hit{position:absolute;inset:0;z-index:2;width:100%;border:0;padding:0;background:none;cursor:pointer;border-radius:4.6cqw}
.tc-hit:focus-visible{outline:2px solid var(--tone);outline-offset:6px}

/* ---- 表 ---- */
.tc-front{background:linear-gradient(135deg,#ececec 0%,#8a8a8a 17%,#fbfbfb 31%,#777 47%,#e4e4e4 61%,#676767 77%,#d8d8d8 100%)}
.tc-holo,.tc-sheen,.tc-glare{position:absolute;inset:0;pointer-events:none}
/* 枠のホロ：虹の帯＋放射状のプリズム線。写真の下に敷く */
.tc-holo{background-image:repeating-linear-gradient(112deg,#ff6b6b 0%,#ffd25e 4.5%,#6dffa0 9%,#5ec8ff 13.5%,#a77bff 18%,#ff6bd0 22.5%,#ff6b6b 27%),repeating-conic-gradient(from 0deg at 50% 42%,transparent 0deg 3.2deg,rgba(255,255,255,.55) 3.2deg 4.6deg);background-size:420% 420%,100% 100%;background-position:calc(var(--mx) * 1%) calc(var(--my) * 1%),center;mix-blend-mode:hard-light;opacity:calc(.5 + var(--hyp) * .4)}
.tc-win{position:absolute;inset:4.4cqw;overflow:hidden;border-radius:2.2cqw;background:#0b0b0b}
.tc-win::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 .55cqw var(--tone),inset 0 0 0 1cqw rgba(0,0,0,.5)}
.tc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 35%);display:block}
/* 写真の上のリフラクター：ふだんは薄く、光の当たる所だけ虹が乗る。color-dodge は Safari の3D内で白飛びするので通常合成 */
.tc-sheen{background:repeating-linear-gradient(112deg,#ff6b6b 0%,#ffd25e 4.5%,#6dffa0 9%,#5ec8ff 13.5%,#a77bff 18%,#ff6bd0 22.5%,#ff6b6b 27%);background-size:420% 420%;background-position:calc(var(--mx) * 1%) calc(var(--my) * 1%);opacity:calc(.05 + var(--hyp) * .26);-webkit-mask-image:radial-gradient(circle at calc(var(--mx) * 1%) calc(var(--my) * 1%),#000 0%,rgba(0,0,0,.35) 45%,transparent 80%);mask-image:radial-gradient(circle at calc(var(--mx) * 1%) calc(var(--my) * 1%),#000 0%,rgba(0,0,0,.35) 45%,transparent 80%)}
.tc-glare{background:radial-gradient(farthest-corner circle at calc(var(--mx) * 1%) calc(var(--my) * 1%),rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 28%,rgba(0,0,0,.38) 95%);mix-blend-mode:overlay;opacity:calc(.35 + var(--hyp) * .5);z-index:3}
.tc-top{position:absolute;left:4cqw;right:4cqw;top:4cqw;display:flex;align-items:center;justify-content:space-between;z-index:2}
.tc-top img{width:31cqw;height:auto;display:block;filter:drop-shadow(0 .6cqw 1.2cqw rgba(0,0,0,.7))}
.tc-no{font:700 3.1cqw/1 'Courier New',monospace;letter-spacing:.14em;color:#0b0b0b;background:var(--tone);padding:1.3cqw 2cqw 1.1cqw;border-radius:1cqw}
.tc-badge{position:absolute;right:4cqw;bottom:34%;z-index:2;width:15cqw;height:17cqw;display:grid;place-content:center;text-align:center;color:#0b0b0b;clip-path:polygon(50% 0,100% 17%,100% 68%,50% 100%,0 68%,0 17%);background:linear-gradient(135deg,#fff 0%,#c9c9c9 30%,#fff 48%,#9a9a9a 70%,#f2f2f2 100%)}
.tc-badge::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(112deg,#ff6b6b 0%,#ffd25e 9%,#6dffa0 18%,#5ec8ff 27%,#a77bff 36%,#ff6b6b 45%);background-size:300% 300%;background-position:calc(var(--mx) * 1%) 50%;mix-blend-mode:multiply;opacity:.55}
.tc-badge small{position:relative;z-index:1;font:700 2.1cqw/1 'Archivo',sans-serif;letter-spacing:.12em}
.tc-badge b{position:relative;z-index:1;font:400 8cqw/1 'Archivo Black',sans-serif;margin-top:.3cqw}
/* 名前の帯：右上がりの斜めプレート（90年代カードの型） */
.tc-plate{position:absolute;left:0;right:0;bottom:0;height:32%;z-index:2;padding:0 5.4cqw 5cqw;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,rgba(8,8,8,.84),#080808 62%);clip-path:polygon(0 24%,100% 0,100% 100%,0 100%)}
.tc-plate::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;background:var(--tone);clip-path:polygon(0 24%,100% 0,100% 2.2%,0 26.2%)}
.tc-name{margin:0;font:400 15.5cqw/.9 'Archivo Black',sans-serif;letter-spacing:-.035em;transform:rotate(-5deg) skewX(-7deg);transform-origin:left bottom;color:transparent;background:linear-gradient(100deg,#fff 0%,#fff 22%,var(--tone) 34%,#fff 46%,#bdbdbd 58%,#fff 70%,var(--tone) 84%,#fff 100%);background-size:260% 100%;background-position:calc(var(--mx) * 1%) 50%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 .5cqw 0 rgba(0,0,0,.9))}
.tc-name small{display:none}
.tc-aka{margin:2.6cqw 0 0;font:700 3.5cqw/1 'Archivo',sans-serif;letter-spacing:.2em;color:var(--tone);min-height:3.5cqw}
.tc-pos{margin:1.8cqw 0 0;font:700 2.6cqw/1 'Courier New',monospace;letter-spacing:.16em;color:#bdbdbd}

/* ---- 裏 ---- */
.tc-back{background:radial-gradient(circle,color-mix(in srgb,var(--tone) 22%,transparent) 0 .45cqw,transparent .6cqw) 0 0/2.4cqw 2.4cqw,#0d0d0d;color:#f4f4f4;padding:4.4cqw;display:flex;flex-direction:column}
.tc-back-in{position:relative;flex:1;display:flex;flex-direction:column;border:.5cqw solid var(--tone);border-radius:2.2cqw;overflow:hidden;background:rgba(10,10,10,.82)}
.tc-bhead{display:flex;align-items:baseline;justify-content:space-between;gap:3cqw;padding:3.2cqw 4.4cqw 2.6cqw;background:var(--tone);color:#0b0b0b}
.tc-bhead b{font:400 9cqw/1 'Archivo Black',sans-serif;letter-spacing:-.03em}
.tc-bhead span{font:700 2.4cqw/1.3 'Courier New',monospace;letter-spacing:.14em;text-align:right}
.tc-bname{display:flex;gap:4cqw;align-items:center;padding:4.4cqw 4.4cqw 3cqw;border-bottom:.3cqw solid rgba(244,244,244,.16)}
.tc-bname img{width:22cqw;height:28cqw;object-fit:cover;object-position:var(--pos,50% 35%);border-radius:1.4cqw;border:.4cqw solid var(--tone);flex:none;filter:grayscale(1) contrast(1.1)}
.tc-bname p{margin:0;font:400 10.5cqw/.95 'Archivo Black',sans-serif;letter-spacing:-.03em}
.tc-bname p small{display:block;margin-top:2cqw;font:700 3.2cqw/1 'Archivo',sans-serif;letter-spacing:.18em;color:var(--tone)}
.tc-stats{margin:0;padding:1.4cqw 4.4cqw;flex:1;display:flex;flex-direction:column;justify-content:center}
.tc-stats div{display:grid;grid-template-columns:20cqw 1fr;gap:2cqw;align-items:baseline;padding:2.1cqw 0;border-bottom:.25cqw dashed rgba(244,244,244,.16)}
.tc-stats div:last-child{border-bottom:0}
.tc-stats dt{font:700 2.4cqw/1.4 'Courier New',monospace;letter-spacing:.14em;color:var(--tone)}
.tc-stats dd{margin:0;font:700 3.6cqw/1.35 'Archivo',sans-serif;letter-spacing:.02em}
.tc-stats dd small{display:block;font-size:2.6cqw;font-weight:500;color:#9a9a9a;letter-spacing:.06em}
.tc-bfoot{padding:2.4cqw 4.4cqw 2.8cqw;font:700 2.1cqw/1.5 'Courier New',monospace;letter-spacing:.12em;color:#8f8f8f;border-top:.3cqw solid rgba(244,244,244,.16);display:flex;justify-content:space-between;gap:2cqw}
.tc-back .tc-glare{opacity:calc(.18 + var(--hyp) * .3);background:radial-gradient(farthest-corner circle at calc((100 - var(--mx)) * 1%) calc(var(--my) * 1%),rgba(255,255,255,.4) 0%,rgba(255,255,255,.06) 30%,rgba(0,0,0,.3) 95%)}

/* ---- カード下の操作列 ---- */
.tc .artist-actions{margin-top:26px;justify-content:flex-start}
.tc-flipbtn{background:none;border:0;border-bottom:1px solid var(--line);color:var(--dim);font:11px/1.8 'Archivo',sans-serif;letter-spacing:.08em;padding:6px 0;cursor:pointer;margin-left:auto}
.tc-flipbtn:hover{color:var(--white)}

@media(max-width:760px){
  .tcards{grid-template-columns:minmax(0,340px);gap:56px}
  .tc .artist-actions{margin-top:22px}
}
@media(prefers-reduced-motion:reduce){.tc-stage{animation:none}}