/* Fond animé « vent de sable » — partagé par les pages à fond noir.
   Inclure : <link rel="stylesheet" href="sand-effect.css"> et <script src="sand-effect.js" defer></script> */
html { background: #0d0d0d; }
body { background: transparent !important; }
#sandHaze { position: fixed; inset: -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 12% 108%, rgba(190,118,58,.30), transparent 70%),
    radial-gradient(ellipse 60% 40% at 92% -6%, rgba(150,92,42,.22), transparent 70%),
    radial-gradient(ellipse 50% 35% at 60% 55%, rgba(130,86,48,.16), transparent 75%);
  animation: sandHazeDrift 38s ease-in-out infinite alternate; }
@keyframes sandHazeDrift { from { transform: translate3d(-2%, 1%, 0) scale(1); } to { transform: translate3d(3%, -2%, 0) scale(1.08); } }

#sandSun { position: fixed; left: -30%; top: -30%; width: 90%; height: 90%; z-index: -2; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,178,88,.42), rgba(222,124,52,.17) 55%, transparent 100%);
  animation: sunTravel 84s ease-in-out infinite alternate; will-change: transform, opacity; }
@keyframes sunTravel {
  0%   { transform: translate3d(0, 0, 0) scale(1);        opacity: .85; }
  35%  { transform: translate3d(60%, 36%, 0) scale(1.22); opacity: 1; }
  70%  { transform: translate3d(112%, 8%, 0) scale(1.05); opacity: .8; }
  100% { transform: translate3d(128%, 52%, 0) scale(1.3); opacity: .95; }
}
#sandBg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; }
#doors, #excursions, #how-it-works, #quads, #why-us, #faq, #gallery, #blog { background: transparent !important; }
#footer { background: rgba(9,9,9,0.55) !important; }
#cta { background: transparent !important; position: relative; overflow: hidden; padding-bottom: 190px; }
#cta .cta-inner { position: relative; z-index: 2; }
.dunes { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; z-index: 1; pointer-events: none; }
.dunes svg { position: absolute; bottom: 0; left: -6%; width: 112%; height: 100%; display: block; }
.dunes .d1 { animation: duneSway 46s ease-in-out infinite alternate; }
.dunes .d2 { animation: duneSway 62s ease-in-out infinite alternate-reverse; }
@keyframes duneSway { from { transform: translateX(-2.4%); } to { transform: translateX(2.4%); } }

/* fondu doux sur le bas des grandes images (test) */
.fade-media { position: absolute; inset: 0; overflow: hidden; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%); }
.hero-media { -webkit-mask-image: linear-gradient(to bottom, #000 91%, transparent 100%); mask-image: linear-gradient(to bottom, #000 91%, transparent 100%); }
@media (prefers-reduced-motion: reduce) { #sandHaze, #sandSun, .dunes svg { animation: none; } }
  
/* boa-vista.html : sections à fond uni rendues transparentes, bandeau de chiffres remis en relief */
.highlights-section, .pratique-section { background: transparent !important; }
.stats-band { background: rgba(14,14,14,.9) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* boa-vista.html : fondu sous la première image (carrousel) et autour du bloc orangé de la citation */
.bv-hero-bg { -webkit-mask-image: linear-gradient(to bottom, #000 91%, transparent 100%); mask-image: linear-gradient(to bottom, #000 91%, transparent 100%); }
.panorama { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); }