/* Accueil, maquette D : le mur vivant. La maquette C, animée : arrivée en cascade, vignettes
   qui s'inclinent sous la souris avec un reflet, pochette qui respire, égaliseur qui danse,
   vignette qui se retourne à chaque nouveau titre, halo de couleur de la radio survolée. */
@import url("home-c.css?v=0.17.0");

body { overflow-x: hidden; }

/* Halo de couleur derrière la page : prend la couleur de la radio survolée */
.aura {
  position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background: radial-gradient(40vmax 40vmax at var(--ax, 30%) var(--ay, 20%), color-mix(in srgb, var(--ac, #3a0aa0) 55%, transparent), transparent 70%),
              radial-gradient(50vmax 50vmax at 85% 90%, color-mix(in srgb, var(--ac2, #0b5d1e) 35%, transparent), transparent 70%);
  filter: blur(40px); opacity: .55; transition: opacity .6s;
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(4vmax, -3vmax) scale(1.08); } }

.top-sub { display: inline-flex; align-items: center; gap: 10px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; animation: live 2s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(255,59,59,.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255,59,59,0); } }

/* Arrivée : les vignettes tombent une à une en se redressant */
.walls { perspective: 1400px; }
.walls li { animation: drop .9s cubic-bezier(.2,.9,.25,1.1) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes drop { from { opacity: 0; transform: translateY(40px) rotateX(-28deg) scale(.94); } }
.top { animation: fadeup .8s var(--ease) both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(-12px); } }

/* Inclinaison 3D suivant la souris (valeurs posées par home-d.js) */
.wall { transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .5s var(--ease), box-shadow .4s; will-change: transform; }
.wall.is-tilt { transition: transform .08s linear, box-shadow .4s; }
.wall:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--c) 60%, #fff 20%), 0 0 60px color-mix(in srgb, var(--c) 45%, transparent); }
.wall-glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(60% 60% at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.35), transparent 60%);
  mix-blend-mode: overlay;
}
.wall:hover .wall-glare { opacity: 1; }
.wall-info { transform: translateZ(40px); }
.wall-play { transform: translateZ(50px) scale(.8); }
.wall:hover .wall-play { transform: translateZ(50px); }

/* La pochette respire doucement (lent zoom et glissement), chaque vignette à son rythme */
.wall .ch-cover img { animation: breathe 16s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.7s); }
@keyframes breathe { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -2%); } }
.wall:hover .ch-cover img { animation-play-state: paused; }

/* Égaliseur : « ça joue » */
.eq { position: absolute; top: 16px; left: 16px; display: flex; align-items: flex-end; gap: 3px; height: 18px; transform: translateZ(30px); }
.eq i { width: 4px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.4); animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(1) { animation-duration: .9s; } .eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.5s; } .eq i:nth-child(4) { animation-duration: .8s; animation-delay: -.2s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* Nouveau titre : la vignette se retourne */
.wall.is-new { animation: flip .9s cubic-bezier(.5,0,.2,1); }
@keyframes flip { 0% { transform: perspective(900px) rotateY(0); } 45% { transform: perspective(900px) rotateY(88deg) scale(.96); } 55% { transform: perspective(900px) rotateY(-88deg) scale(.96); } 100% { transform: perspective(900px) rotateY(0); } }
.ch.is-new .ch-text { animation: none; }
.wall.is-new .ch-title { animation: titlein .7s .45s var(--ease) both; }
@keyframes titlein { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }

/* LS RADIO : un léger reflet qui balaie la vignette en continu */
.walls li:first-child .wall::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%); animation: sheen 6s ease-in-out infinite 2s;
}
@keyframes sheen { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

@media (hover: none) { .wall-glare { display: none; } }
@media (prefers-reduced-motion: reduce) { .aura, .eq i, .wall .ch-cover img, .walls li, .wall::after { animation: none !important; } }