/* ══════════════════════════════════════════════════════════════
   MODERN 3D LAYER — Pharmacie Rhazlaoui
   Glassmorphisme · Tilt 3D · Aurora · Glow — suit les variables
   de thème existantes (--vert, --vert-dark).
   ══════════════════════════════════════════════════════════════ */

/* ---------- Canvas WebGL du hero ---------- */
#hero-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

#hero > *:not(#hero-3d-canvas):not(.hero-aurora) {
  position: relative;
  z-index: 2;
}

/* ---------- Aurora animée derrière le hero ---------- */
.hero-aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 35% at 20% 25%, color-mix(in srgb, var(--vert) 28%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 20%, color-mix(in srgb, var(--vert-dark) 24%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 55% 85%, color-mix(in srgb, var(--vert) 18%, transparent), transparent 70%);
  filter: blur(40px);
  animation: aurora-drift 18s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 1%, 0) scale(1.02); }
}

/* ---------- Navigation glassmorphism ---------- */
#navbar {
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  background: color-mix(in srgb, #ffffff 78%, transparent) !important;
  box-shadow: 0 8px 32px rgba(0, 60, 30, 0.08);
  transition: box-shadow .35s ease, background .35s ease;
}

/* ---------- Badges hero : verre + lévitation ---------- */
.hero-badge {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in srgb, #ffffff 65%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--vert) 35%, transparent) !important;
  box-shadow: 0 4px 18px rgba(0, 60, 30, 0.10), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}

.hero-badge:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--vert) 30%, transparent),
              inset 0 1px 0 rgba(255,255,255,.8);
  border-color: var(--vert) !important;
}

/* ---------- Cartes : perspective + glow 3D ---------- */
.product-card,
.catalogue-card {
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

.product-card::after,
.catalogue-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--glare-x, 50%) var(--glare-y, 50%),
              rgba(255,255,255,.35), transparent 45%);
  mix-blend-mode: soft-light;
}

.product-card.tilting,
.catalogue-card.tilting {
  box-shadow: 0 24px 48px -12px color-mix(in srgb, var(--vert-dark) 35%, transparent),
              0 4px 12px rgba(0,0,0,.06);
}

.product-card.tilting::after,
.catalogue-card.tilting::after { opacity: 1; }

/* Surbrillance verte au survol */
.product-card:hover,
.catalogue-card:hover {
  border-color: color-mix(in srgb, var(--vert) 55%, transparent);
}

/* ---------- Ticker glass ---------- */
.ticker-bar {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--vert-dark) 88%, transparent) !important;
}

/* ---------- Titres de section : lueur moderne ---------- */
.section-title h2 {
  background: linear-gradient(120deg, var(--vert-dark), var(--vert) 55%, var(--vert-dark));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-sheen 6s linear infinite;
}

@keyframes title-sheen {
  to { background-position: 200% center; }
}

/* ---------- Boutons magnétiques ---------- */
.btn-whatsapp-nav {
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  will-change: transform;
}

.btn-whatsapp-nav:hover {
  box-shadow: 0 10px 26px color-mix(in srgb, var(--vert) 40%, transparent);
}

/* ---------- Scrollbar moderne ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--vert-light, #E8F5EE); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--vert), var(--vert-dark));
  border-radius: 6px;
  border: 2px solid var(--vert-light, #E8F5EE);
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-aurora,
  .section-title h2 { animation: none !important; }
  .product-card, .catalogue-card, .hero-badge { transition: none !important; }
  #hero-3d-canvas { display: none; }
}