/* ===== ADC RADIO — logo 3D animé =====
   Usage : <a class="logo3d" data-v="hifi"> … </a>
   Variantes : hifi · sunset · miami · memphis · vhs · brass
   Taille : --s (taille du "ADC"), ex. style="--s:56px"            */

.logo3d{
  --s:34px;
  --face:#151311; --ex:#151311; --dot:#FF4A1C; --dot-dark:#9A2408;
  --st1:#FF4A1C; --st2:#FFB23A; --st3:#151311; --sub:#151311;
  --glow:none;
  display:inline-flex;align-items:center;gap:calc(var(--s)*.3);
  text-decoration:none;color:inherit;isolation:isolate;
  font-family:"Archivo",system-ui,sans-serif;
  transform-style:preserve-3d;
  animation:l3-float 7s ease-in-out infinite;
  filter:var(--glow);
  padding:4px 10px 6px 2px;
}
@keyframes l3-float{
  0%,100%{transform:perspective(600px) rotateY(-11deg) rotateX(7deg) translateY(0)}
  50%    {transform:perspective(600px) rotateY(11deg)  rotateX(-4deg) translateY(-2px)}
}

/* sphère / bouton */
.l3-dot{
  width:calc(var(--s)*.62);height:calc(var(--s)*.62);border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#fff 0 9%,var(--dot) 34%,var(--dot-dark) 100%);
  box-shadow:calc(var(--s)*.06) calc(var(--s)*.08) 0 var(--ex),0 0 0 calc(var(--s)*.05) var(--ex);
  transform:translateZ(20px);
}
body.playing .l3-dot{animation:l3-pulse 1.2s ease-in-out infinite}
@keyframes l3-pulse{50%{filter:brightness(1.35) saturate(1.3)}}

.l3-txt{display:flex;flex-direction:column;line-height:.82}

/* lettrage principal : face dégradée + extrusion en pseudo-élément */
.l3-main{
  position:relative;font-size:var(--s);font-weight:900;font-style:italic;font-stretch:125%;
  letter-spacing:-.03em;padding-right:.12em;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 48%,transparent 60%) no-repeat,var(--face);
  background-size:300% 100%,100% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:l3-shine 5.5s ease-in-out infinite;
}
.l3-main::after{
  content:attr(data-text);position:absolute;left:0;top:0;z-index:-1;
  color:var(--ex);-webkit-text-fill-color:var(--ex);
  text-shadow:calc(var(--s)*.028*1) calc(var(--s)*.028*1) 0 var(--ex),calc(var(--s)*.028*2) calc(var(--s)*.028*2) 0 var(--ex),calc(var(--s)*.028*3) calc(var(--s)*.028*3) 0 var(--ex),calc(var(--s)*.028*4) calc(var(--s)*.028*4) 0 var(--ex),calc(var(--s)*.028*5) calc(var(--s)*.028*5) 0 var(--ex),calc(var(--s)*.028*6) calc(var(--s)*.028*6) 0 var(--ex),
    calc(var(--s)*.028*7) calc(var(--s)*.028*9) calc(var(--s)*.028*10) rgba(0,0,0,.28);
}
@keyframes l3-shine{0%,55%{background-position:150% 0,0 0}100%{background-position:-50% 0,0 0}}

/* "RADIO" + bandes 80s */
.l3-sub{display:flex;align-items:center;gap:3px;margin-top:calc(var(--s)*.12);padding-left:calc(var(--s)*.06)}
.l3-sub i{width:calc(var(--s)*.2);height:calc(var(--s)*.26);transform:skewX(-22deg);flex:none}
.l3-sub i:nth-child(1){background:var(--st1)}
.l3-sub i:nth-child(2){background:var(--st2)}
.l3-sub i:nth-child(3){background:var(--st3);margin-right:4px}
.l3-sub b{
  font-size:calc(var(--s)*.34);font-weight:800;font-style:italic;font-stretch:125%;letter-spacing:.24em;
  color:var(--sub);text-shadow:1px 1px 0 var(--ex);
}

/* ---------- VARIANTES ---------- */
/* 1 · Hi-Fi chrome — alu brossé, extrusion noire, voyant orange */
.logo3d[data-v="hifi"]{
  --face:linear-gradient(180deg,#fff 0%,#d4d8db 42%,#5f666c 50%,#c9ced2 64%,#fff 100%);
  --ex:#151311;--dot:#FF4A1C;--dot-dark:#8E1F05;
  --st1:#FF4A1C;--st2:#FFB23A;--st3:#151311;--sub:#151311;
}
/* 2 · Sunset synth — coucher de soleil, extrusion violette */
.logo3d[data-v="sunset"]{
  --face:linear-gradient(180deg,#FFF07A 0%,#FFB11F 38%,#FF3C7E 62%,#A2129E 100%);
  --ex:#2B0B3F;--dot:#2DE2E6;--dot-dark:#065A68;
  --st1:#FF3C7E;--st2:#FFB11F;--st3:#FFF07A;--sub:#2B0B3F;
}
/* 3 · Miami neon — cyan/rose avec halo */
.logo3d[data-v="miami"]{
  --face:linear-gradient(180deg,#F2FFFF 0%,#2DE2E6 50%,#078C96 100%);
  --ex:#FF2E9A;--dot:#FF2E9A;--dot-dark:#7A0846;
  --st1:#2DE2E6;--st2:#FF2E9A;--st3:#FFE66D;--sub:#FF2E9A;
  --glow:drop-shadow(0 0 6px rgba(255,46,154,.45));
}
/* 4 · Memphis — aplat jaune, contour noir, touches turquoise/rose */
.logo3d[data-v="memphis"]{
  --face:#FFD23F;--ex:#151311;--dot:#00A6A6;--dot-dark:#004F4F;
  --st1:#FF5FA2;--st2:#00A6A6;--st3:#151311;--sub:#151311;
}
.logo3d[data-v="memphis"] .l3-main{-webkit-text-stroke:1.5px #151311}
/* 5 · VHS — décalage chromatique rouge/cyan + glitch */
.logo3d[data-v="vhs"]{
  --face:#151311;--ex:#151311;--dot:#FF2A2A;--dot-dark:#6E0000;
  --st1:#FF2A2A;--st2:#1FD1FF;--st3:#151311;--sub:#151311;
}
.logo3d[data-v="vhs"] .l3-main::after{
  color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:-3px 0 0 rgba(255,42,42,.85),3px 1px 0 rgba(31,209,255,.85);
  animation:l3-glitch 4s steps(1) infinite;
}
@keyframes l3-glitch{
  0%,86%,100%{transform:none}
  88%{transform:translate(3px,-1px) skewX(-8deg)}
  90%{transform:translate(-4px,1px)}
  92%{transform:translate(2px,0) skewX(6deg)}
}
/* 6 · Walnut & brass — ampli vintage, laiton et noyer */
.logo3d[data-v="brass"]{
  --face:linear-gradient(180deg,#FFF6CF 0%,#E9B84E 40%,#7E4F15 50%,#D9A945 68%,#FFE9A3 100%);
  --ex:#3B2416;--dot:#FF7A1A;--dot-dark:#7A2C00;
  --st1:#E9B84E;--st2:#C0392B;--st3:#3B2416;--sub:#3B2416;
}

/* sur fond sombre : sous-titre clair */
.on-dark .logo3d{--sub:#EFEBE3}
.on-dark .logo3d[data-v="hifi"],.on-dark .logo3d[data-v="memphis"],.on-dark .logo3d[data-v="vhs"]{--st3:#EFEBE3}
.on-dark .logo3d[data-v="vhs"]{--face:#EFEBE3}

@media (prefers-reduced-motion:reduce){
  .logo3d,.l3-main,.l3-main::after,.l3-dot{animation:none!important}
}