/* ════════════════════════════════════════════════════════════════
   MOTION DESIGN — Site Officiel Dodji
   ADN : underground rap · rouge sang · sombre · brutal · street
   ════════════════════════════════════════════════════════════════ */

/* ── 0. Respect prefers-reduced-motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .vinyl-disc, .vinyl-disc::before { animation: none !important; }
  .waveform-bar { animation: none !important; opacity: .5; }
}

/* ══════════════════════════════════════════════════════════════
   1. GLITCH — Titres principaux
   ══════════════════════════════════════════════════════════════ */
@keyframes glitch-shift {
  0%, 92%  { clip-path: inset(0 0 100% 0); transform: translate(0); }
  93%      { clip-path: inset(18% 0 62% 0); transform: translate(-4px, 0); color: #ff2200; }
  94%      { clip-path: inset(55% 0 28% 0); transform: translate( 4px, 0); color: #00ccff; }
  95%      { clip-path: inset(80% 0  5% 0); transform: translate(-2px, 0); color: #ff2200; }
  96%, 100%{ clip-path: inset(0 0 100% 0); transform: translate(0); }
}
@keyframes glitch-noise {
  0%, 90%  { opacity: 0; }
  91%      { opacity: .7; transform: translate(-3px,  1px); }
  92%      { opacity: .8; transform: translate( 3px, -1px); }
  93%      { opacity: .6; transform: translate(-2px,  2px); }
  94%, 100%{ opacity: 0;  transform: translate(0); }
}

.glitch-wrap {
  position: relative;
  display: inline-block;
}
.glitch-wrap::before,
.glitch-wrap::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  pointer-events: none;
}
.glitch-wrap::before {
  animation: glitch-shift 7s steps(1) infinite;
}
.glitch-wrap::after {
  animation: glitch-noise 7s steps(1) infinite 0.05s;
  mix-blend-mode: screen;
}

/* ══════════════════════════════════════════════════════════════
   2. WAVEFORM — Égaliseur audio animé
   ══════════════════════════════════════════════════════════════ */
.waveform {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  margin-top: 18px;
  opacity: .7;
}
.waveform-bar {
  width: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--red, #cc2200);
  transform-origin: bottom;
  animation: waveform-beat var(--dur, .8s) ease-in-out infinite alternate;
}
@keyframes waveform-beat {
  0%   { transform: scaleY(.15); opacity: .4; }
  100% { transform: scaleY(1);   opacity: 1;  }
}
/* Couleurs variées sur les barres hautes */
.waveform-bar:nth-child(3n)   { background: #ff4500; }
.waveform-bar:nth-child(5n)   { background: #ff2200; }

/* ══════════════════════════════════════════════════════════════
   3. POCHETTES 3D — Relief · Specular · Tranche · Reflet
   ══════════════════════════════════════════════════════════════ */

/* ── A. RELEASE PAGE — Couverture principale ── */
.release-cover-wrap {
  position: relative;
  perspective: 1200px;
  perspective-origin: 55% 50%;
  transform-style: preserve-3d;
}

/* La cover est pilotée par JS (spring parallax) — pas d'animation CSS auto */
.release-cover-wrap .release-cover {
  transform: rotateY(-18deg) rotateX(5deg) translateY(0px);
  transition: box-shadow .4s ease;
  box-shadow: -22px 28px 70px rgba(0,0,0,.9), -4px 4px 18px rgba(204,0,0,.3);
  will-change: transform;
  border-radius: 4px;
  display: block;
}

/* Specular highlight qui suit la souris */
.cover-page-specular {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    circle at var(--specX, 30%) var(--specY, 25%),
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.05) 30%,
    transparent 60%
  );
  mix-blend-mode: overlay;
  transition: opacity .3s;
}

/* Tranche physique droite */
.cover-spine {
  position: absolute;
  right: -14px;
  top: 3px;
  width: 14px;
  height: calc(100% - 3px);
  background: linear-gradient(to right,
    #252525 0%,
    #141414 60%,
    #0a0a0a 100%);
  transform-origin: left center;
  transform: rotateY(72deg);
  pointer-events: none;
  border-radius: 0 3px 3px 0;
  box-shadow: inset -2px 0 6px rgba(0,0,0,.5);
}
.cover-spine::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 35%;
  background: linear-gradient(to bottom, rgba(255,40,0,.12), transparent);
}

/* Tranche bas */
.cover-spine-bottom {
  position: absolute;
  bottom: -10px;
  left: 3px;
  height: 10px;
  width: calc(100% - 3px);
  background: linear-gradient(to bottom,
    #1a1a1a 0%, #0d0d0d 100%);
  transform-origin: top center;
  transform: rotateX(-72deg);
  pointer-events: none;
  border-radius: 0 0 3px 3px;
}

/* Reflet au sol */
.cover-floor-reflection {
  position: absolute;
  bottom: -55%;
  left: 0;
  width: 100%;
  height: 55%;
  pointer-events: none;
  z-index: -1;
  transform: scaleY(-1);
  transform-origin: top;
  opacity: .2;
  filter: blur(5px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 85%);
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

/* Glow derrière la pochette */
.release-cover-glow {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(204,0,0,.4) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
  animation: cover-glow-pulse 3s ease-in-out infinite;
  filter: blur(12px);
}
@keyframes cover-glow-pulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: .9; transform: scale(1.1); }
}

/* ── B. RELEASE CARDS — index.html / sorties.html ── */
.release-card-img,
.sorties-card .sc-img,
.other-card {
  position: relative;
  transform-style: preserve-3d;
}

/* Specular sur les cartes */
.card-specular {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--specX, 50%) var(--specY, 50%),
    rgba(255,255,255,.25) 0%,
    rgba(255,255,255,.04) 35%,
    transparent 60%
  );
  opacity: 0;
  mix-blend-mode: overlay;
  transition: opacity .25s ease;
}
.release-card:hover .card-specular,
.sorties-card:hover .card-specular { opacity: 1; }

/* Tranche droite (illusion physique) */
.card-edge-r {
  position: absolute;
  top: 3px;
  right: -7px;
  width: 7px;
  height: calc(100% - 3px);
  background: linear-gradient(to right, #1e1e1e, #0d0d0d);
  transform: rotateY(75deg);
  transform-origin: left;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}
/* Tranche bas */
.card-edge-b {
  position: absolute;
  left: 3px;
  bottom: -7px;
  height: 7px;
  width: calc(100% - 3px);
  background: linear-gradient(to bottom, #1e1e1e, #0d0d0d);
  transform: rotateX(-75deg);
  transform-origin: top;
  border-radius: 0 0 2px 2px;
  pointer-events: none;
}

/* Reflet mini en bas des cartes */
.card-reflection {
  position: absolute;
  left: 5%;
  width: 90%;
  bottom: -28%;
  height: 28%;
  pointer-events: none;
  transform: scaleY(-1);
  transform-origin: top;
  opacity: .15;
  filter: blur(4px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}

/* Gradient surface (finition mate/brillante) */
.card-surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.06) 0%,
    transparent 50%,
    rgba(0,0,0,.12) 100%
  );
}

/* ══════════════════════════════════════════════════════════════
   4. 3D TILT CARDS — Release cards
   ══════════════════════════════════════════════════════════════ */
.release-card,
.sorties-card,
.other-card {
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.23,1,.32,1),
              box-shadow .25s ease;
  will-change: transform;
}
/* L'image inner a la profondeur */
.release-card-img,
.sorties-card .sc-img {
  transform: translateZ(0);
  transition: transform .25s cubic-bezier(.23,1,.32,1);
}
.release-card:hover .release-card-img,
.sorties-card:hover .sc-img {
  transform: translateZ(12px);
}

/* ══════════════════════════════════════════════════════════════
   5. MAGNETIC BUTTONS — Transition spring
   ══════════════════════════════════════════════════════════════ */
.btn {
  transition: transform .35s cubic-bezier(.23, 1, .32, 1),
              background .2s ease,
              box-shadow .2s ease !important;
  will-change: transform;
}
.btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }

/* S'assurer que les btn sont bien en position: relative */
.btn { position: relative; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   6. HERO 3D CANVAS — Vinyl Three.js
   ══════════════════════════════════════════════════════════════ */
#hero-vinyl-wrap {
  position: absolute;
  right: -40px;
  bottom: -30px;
  width: 280px;
  height: 280px;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}
#hero-vinyl-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ══════════════════════════════════════════════════════════════
   7. PARTICULES EMBER — Canvas flottantes
   ══════════════════════════════════════════════════════════════ */
#hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
#hero-particles canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ══════════════════════════════════════════════════════════════
   8. CURSOR GLOW — Lueur rouge qui suit la souris
   ══════════════════════════════════════════════════════════════ */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(204,0,0,.08) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: opacity .4s ease;
  mix-blend-mode: screen;
}
@media (hover: none) { .cursor-glow { display: none; } }

/* ══════════════════════════════════════════════════════════════
   9. SCROLL REVEAL AMÉLIORÉ — Sur les titres de section
   ══════════════════════════════════════════════════════════════ */
.section-title,
.section-sub,
.tag {
  --reveal-delay: 0ms;
  transition: opacity .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay),
              transform .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay),
              filter .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay);
}
/* État initial géré par les classes fade-* existantes + visible */

/* ── Entrée des cartes release avec skew ── */
.release-card {
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}
/* L'état hidden est géré par fade-up dans style.min.css */

/* ══════════════════════════════════════════════════════════════
   10. SCANLINES — Superposition subtile style broadcast
   ══════════════════════════════════════════════════════════════ */
.hero-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,.04) 2px,
    rgba(0,0,0,.04) 4px
  );
  mix-blend-mode: multiply;
  animation: scanlines-move 8s linear infinite;
}
@keyframes scanlines-move {
  from { background-position: 0 0; }
  to   { background-position: 0 100px; }
}

/* ══════════════════════════════════════════════════════════════
   11. TEXT SCRAMBLE — Masque pendant l'animation JS
   ══════════════════════════════════════════════════════════════ */
.scramble-active {
  opacity: 1 !important; /* Reste visible pendant le scramble */
}

/* ══════════════════════════════════════════════════════════════
   12. HERO COUNTER / STAT — Animation chiffres
   ══════════════════════════════════════════════════════════════ */
@keyframes stat-pop {
  0%   { transform: scale(.8); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.stat-num { animation: stat-pop .6s cubic-bezier(.23,1,.32,1) both; }

/* ══════════════════════════════════════════════════════════════
   13. PLAY OVERLAY — Effet ripple au hover sur les covers
   ══════════════════════════════════════════════════════════════ */
@keyframes ripple-out {
  0%   { transform: scale(.7); opacity: .8; }
  100% { transform: scale(2.2); opacity: 0; }
}
.release-card-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(204,0,0,.3);
  transform: scale(.7);
  opacity: 0;
  pointer-events: none;
}
.release-card-img:hover .release-card-overlay::before {
  animation: ripple-out .55s ease-out forwards;
}

/* ══════════════════════════════════════════════════════════════
   14. NAV LINK UNDERLINE ANIMÉ
   ══════════════════════════════════════════════════════════════ */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--red, #cc2200);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s cubic-bezier(.23,1,.32,1);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ══════════════════════════════════════════════════════════════
   15. RELEASE COVER — Reflet vinyle (pages sorties)
   ══════════════════════════════════════════════════════════════ */
.sc-img, .other-card img {
  transition: transform .5s cubic-bezier(.23,1,.32,1),
              filter .5s ease;
}
.sorties-card:hover .sc-img,
.other-card:hover img {
  transform: scale(1.05) translateY(-4px);
  filter: brightness(1.1);
}

/* ══════════════════════════════════════════════════════════════
   16. AMBIENT — Lueur rouge section-by-section
   ══════════════════════════════════════════════════════════════ */
.section::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  width: 600px;
  height: 160px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse,
    rgba(204,0,0,.04) 0%, transparent 70%);
  pointer-events: none;
}