/* Le chargement d'une page d'artiste (voir entree.js) : le fond de la case de l'artiste en plein écran, son nom, une animation à lui.
   Pas de @view-transition (il bloquait le rendu de la page d'arrivée). Animations en transform / opacity seulement. */
.ta-charge { position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; overflow:hidden; transition:opacity .5s ease, transform .6s cubic-bezier(.5,0,.8,.4); }
.ta-charge.ta-part { opacity:0; transform:scale(1.06); pointer-events:none; }
.ta-c { position:relative; display:flex; flex-direction:column; align-items:center; gap:1.1rem; padding:0 16px; text-align:center; animation:ta-arrive .45s .12s cubic-bezier(.2,.9,.2,1) backwards; }
@keyframes ta-arrive { from { opacity:0; transform:scale(.92); } }
.ta-nom { font:400 clamp(3rem, 11vw, 7.5rem)/.92 'Anton', Impact, sans-serif; text-transform:uppercase; margin:0; }
.ta-mot { font:700 .8rem/1.4 'Space Mono', monospace; text-transform:uppercase; letter-spacing:.08em; margin:0; }
.ta-mot span { animation:ta-point 1.2s infinite both; } .ta-mot span:nth-child(2) { animation-delay:.2s; } .ta-mot span:nth-child(3) { animation-delay:.4s; }
@keyframes ta-point { 0%, 60%, 100% { opacity:.15; } 30% { opacity:1; } }

/* les fonds des cartes (les mêmes que sur l'accueil) */
.ta-fond-hc { background:#0d0f0a; color:#efe9dc; }
.ta-fond-hc::before { content:""; position:absolute; inset:0; background:radial-gradient(circle, #b8ff2e 0 3px, transparent 3.5px) 0 0/10px 10px; -webkit-mask:radial-gradient(closest-side, #000 25%, transparent); mask:radial-gradient(closest-side, #000 25%, transparent); opacity:.5; }
.ta-fond-bs { background:#f7cfdc repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 22px, transparent 22px 44px); color:#121110; }
.ta-fond-lo { color:#efe9dc; background:linear-gradient(90deg, rgba(155,77,255,.5) 0 12.5%, transparent 12.5% 25%, rgba(255,47,176,.4) 25% 37.5%, rgba(155,77,255,.22) 37.5% 50%, transparent 50% 62.5%, rgba(255,47,176,.55) 62.5% 75%, rgba(155,77,255,.3) 75% 87.5%, transparent 87.5%) 0 100%/100% 46% no-repeat, linear-gradient(90deg, transparent 0 12.5%, rgba(155,77,255,.28) 12.5% 25%, transparent 25% 50%, rgba(255,47,176,.25) 50% 62.5%, transparent 62.5% 87.5%, rgba(155,77,255,.4) 87.5%) 0 0/100% 30% no-repeat, radial-gradient(circle, rgba(201,176,255,.22) 0 1.2px, transparent 1.6px) 0 0/12px 12px, #160d2b; }
.ta-fond-pg { color:#eef2ff; background:#1f45b0; background-image:linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size:32px 32px; }

/* HashCode : les 16 pas du séquenceur qui défilent */
.ta-hc .ta-nom { color:#b8ff2e; }
.ta-pas { display:grid; grid-template-columns:repeat(16, 1fr); gap:clamp(3px, .6vw, 8px); width:min(34rem, 86vw); }
.ta-pas i { aspect-ratio:1; border:2px solid #b8ff2e; border-radius:3px; background:#b8ff2e; opacity:.12; animation:ta-pas 1.6s steps(1) infinite; }
.ta-pas i:nth-child(4n+1) { border-color:#efe9dc; }
@keyframes ta-pas { 0% { opacity:1; transform:scale(1.18); } 6.25% { opacity:.12; transform:none; } }
.ta-pas i:nth-child(2) { animation-delay:.1s; } .ta-pas i:nth-child(3) { animation-delay:.2s; } .ta-pas i:nth-child(4) { animation-delay:.3s; }
.ta-pas i:nth-child(5) { animation-delay:.4s; } .ta-pas i:nth-child(6) { animation-delay:.5s; } .ta-pas i:nth-child(7) { animation-delay:.6s; } .ta-pas i:nth-child(8) { animation-delay:.7s; }
.ta-pas i:nth-child(9) { animation-delay:.8s; } .ta-pas i:nth-child(10) { animation-delay:.9s; } .ta-pas i:nth-child(11) { animation-delay:1s; } .ta-pas i:nth-child(12) { animation-delay:1.1s; }
.ta-pas i:nth-child(13) { animation-delay:1.2s; } .ta-pas i:nth-child(14) { animation-delay:1.3s; } .ta-pas i:nth-child(15) { animation-delay:1.4s; } .ta-pas i:nth-child(16) { animation-delay:1.5s; }

/* Bâtarde Sensible : un vinyle qui tourne, étiquette cerise */
.ta-bs .ta-nom { color:#e2306f; }
.ta-vinyle { width:min(13rem, 46vw); aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle, #151312 0 2px, #26221f 2px 3px); box-shadow:0 14px 0 rgba(18,17,16,.14); display:grid; place-items:center; animation:ta-tourne 1.8s linear infinite; }
.ta-vinyle i { width:36%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, #f7cfdc 0 9%, transparent 10%), conic-gradient(#e2306f 0 25%, #fff 25% 27%, #e2306f 27% 75%, #fff 75% 77%, #e2306f 77%); }
@keyframes ta-tourne { to { transform:rotate(360deg); } }

/* Laf-O : le break haché, des tranches qui sautent */
.ta-lo .ta-nom { text-shadow:-5px 3px 0 #9b4dff, 5px -2px 0 #ff2fb0; }
.ta-break { display:flex; align-items:center; gap:clamp(3px, .7vw, 8px); height:6rem; }
.ta-break i { width:clamp(8px, 1.6vw, 16px); height:100%; background:#ff2fb0; animation:ta-tranche .9s steps(1) infinite alternate; }
.ta-break i:nth-child(odd) { background:#9b4dff; }
@keyframes ta-tranche { 0% { transform:scaleY(.15); } 25% { transform:scaleY(.9); } 50% { transform:scaleY(.35); } 75% { transform:scaleY(1); } 100% { transform:scaleY(.2); } }
.ta-break i:nth-child(1) { animation-delay:-.1s; } .ta-break i:nth-child(2) { animation-delay:-.55s; } .ta-break i:nth-child(3) { animation-delay:-.3s; } .ta-break i:nth-child(4) { animation-delay:-.8s; }
.ta-break i:nth-child(5) { animation-delay:-.2s; } .ta-break i:nth-child(6) { animation-delay:-.65s; } .ta-break i:nth-child(7) { animation-delay:-.45s; } .ta-break i:nth-child(8) { animation-delay:-.05s; }
.ta-break i:nth-child(9) { animation-delay:-.7s; } .ta-break i:nth-child(10) { animation-delay:-.35s; } .ta-break i:nth-child(11) { animation-delay:-.6s; } .ta-break i:nth-child(12) { animation-delay:-.15s; }

/* Dj Pigme : la presse descend sur le white label */
.ta-presse { position:relative; width:min(12rem, 44vw); height:9.5rem; }
.ta-presse i { position:absolute; left:0; bottom:0; width:100%; height:1.5rem; border-radius:50%; background:#f4f1ea; box-shadow:0 .5rem 0 rgba(0,0,0,.25); transform-origin:50% 100%; animation:ta-ecrase 1.5s cubic-bezier(.6,0,.3,1) infinite; }
.ta-presse b { position:absolute; left:8%; right:8%; top:0; height:2.4rem; background:#eef2ff; border:3px solid #0d1c4d; border-radius:.3rem; animation:ta-presse 1.5s cubic-bezier(.6,0,.3,1) infinite; }
.ta-presse b::before { content:""; position:absolute; left:50%; bottom:100%; width:1rem; height:60vh; margin-left:-.5rem; background:#0d1c4d; }
@keyframes ta-presse { 0%, 20% { transform:translateY(0); } 45%, 60% { transform:translateY(5.4rem); } 100% { transform:translateY(0); } }
@keyframes ta-ecrase { 0%, 40% { transform:scaleY(1); } 48%, 60% { transform:scaleY(.55); } 75%, 100% { transform:scaleY(1); } }

/* la page se pose une fois l'écran levé : le menu et le texte, un morceau à la fois */
@keyframes ta-pose { from { opacity:0; transform:translate3d(0, 34px, 0); } to { opacity:1; transform:none; } }
@keyframes ta-tombe { from { opacity:0; transform:translate3d(0, -100%, 0); } to { opacity:1; transform:none; } }
html.ta-construit .nav { animation:ta-tombe .6s cubic-bezier(.2,.9,.2,1) .15s backwards; }
html.ta-construit .intro > * { animation:ta-pose .7s cubic-bezier(.2,.9,.2,1) backwards; }
html.ta-construit .intro > :nth-child(1) { animation-delay:.1s; } html.ta-construit .intro > :nth-child(2) { animation-delay:.2s; }
html.ta-construit .intro > :nth-child(3) { animation-delay:.3s; } html.ta-construit .intro > :nth-child(4) { animation-delay:.4s; }
html.ta-construit .intro > :nth-child(n+5) { animation-delay:.5s; }
@media (prefers-reduced-motion: reduce) { .ta-charge, .ta-charge * { animation:none !important; transition:none !important; } html.ta-construit * { animation:none !important; } }