/* ========================================================================
   DEPTH — Direction artistique (couche isolée, chargée APRÈS style.css)
   Même design, structure et identité (running dusk / bleu).
   Objectif : matière · lumière · profondeur · relief · atmosphère · 3D.
   ======================================================================== */

/* ============ 1. FOND VIVANT — atmosphère bleue qui respire ============ */
body {
  background:
    radial-gradient(125% 105% at 50% 118%, rgba(0,0,0,.8), transparent 55%),
    radial-gradient(100% 78% at 50% -12%, rgba(143,192,240,.10), transparent 60%),
    var(--bg) !important;
  background-attachment: fixed !important;
}

/* Aurores bleu dusk en mouvement lent (blend screen) */
body::before {
  content: ""; position: fixed; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 18% 14%, rgba(143,192,240,.16), transparent 60%),
    radial-gradient(50vw 50vw at 86% 8%, rgba(90,140,200,.13), transparent 62%),
    radial-gradient(56vw 56vw at 64% 100%, rgba(120,170,230,.11), transparent 60%);
  mix-blend-mode: screen;
  animation: auroraDrift 24s ease-in-out infinite;
  will-change: transform;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.06) rotate(0deg); }
  50%  { transform: translate3d(3%, 4%, 0)  scale(1.22) rotate(4deg); }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.06) rotate(0deg); }
}

/* Grain — matière (nettement présent) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .12; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Vignette cinématique (injectée par depth.js) */
.fx-vignette {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 40%, transparent 46%, rgba(0,0,0,.58) 100%);
}

/* ============ 2. CARTES — matière, relief, 3D ============ */
.card {
  background:
    linear-gradient(157deg, rgba(180,214,247,.14), rgba(143,192,240,.03) 32%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #1a2331, #0b0f16) !important;
  border: 1px solid rgba(143,192,240,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -40px 70px -50px rgba(0,0,0,.95),
    0 3px 8px rgba(0,0,0,.65),
    0 26px 50px -24px rgba(0,0,0,.92),
    0 60px 110px -45px rgba(0,0,0,.88) !important;
  transform-style: preserve-3d;
  transition: box-shadow .5s var(--ease), border-color .45s ease, transform .5s var(--ease);
  will-change: transform;
}
.card:hover,
.card:focus-visible {
  border-color: rgba(143,192,240,.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -40px 70px -50px rgba(0,0,0,.9),
    0 6px 14px rgba(0,0,0,.65),
    0 40px 80px -28px rgba(0,0,0,.98),
    0 90px 150px -55px rgba(20,30,45,.9),
    0 0 60px -10px rgba(143,192,240,.14) !important;
}

/* Reflet/glare qui suit le curseur */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(200,226,255,.22), transparent 46%);
  opacity: 0; transition: opacity .4s ease; mix-blend-mode: soft-light;
}
.card:hover::before { opacity: 1; }

/* Photo produit — ancrée (sheen haut + contact bas) */
.card__media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(180,214,247,.09), transparent 18%, transparent 66%, rgba(0,0,0,.45));
}

/* ============ 3. BOUTONS — relief + balayage de lumière ============ */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(200,226,255,.5), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.btn:hover::after { animation: btnSweep .75s ease; }
@keyframes btnSweep { 0% { left: -70%; opacity: 0; } 18% { opacity: .9; } 100% { left: 140%; opacity: 0; } }

.btn--primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -3px 8px rgba(0,0,0,.25),
    0 6px 16px -6px rgba(0,0,0,.6),
    0 16px 34px -12px rgba(0,0,0,.6) !important;
}
.btn--primary:active { transform: translateY(2px) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.35) !important; }
.btn--ghost {
  background: linear-gradient(180deg, rgba(143,192,240,.06), rgba(143,192,240,0)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px -12px rgba(0,0,0,.75) !important;
}
.btn--ghost:active { transform: translateY(2px) !important; }

/* ============ 4. NAV ============ */
.nav { box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 20px 44px -30px rgba(0,0,0,.95); }

/* ============ 5. reduced-motion ============ */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .btn:hover::after { animation: none; }
}