/* Drift Wall - mur de tuiles en perspective (adaptation vanilla du composant React Bits) */
.drift-wall {
  --dw-tile-w: 76px; --dw-tile-h: 57px; --dw-gap: 9px; --dw-radius: 8px;
  --dw-perspective: 800px; --dw-lift: 40px; --dw-dim: 0.35; --dw-overlay: #060010; --dw-edge: 40%;
  position: relative; overflow: hidden; perspective: var(--dw-perspective);
  background: #0b171c; isolation: isolate;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 var(--dw-edge), transparent 100%);
          mask-image: radial-gradient(ellipse at center, #000 var(--dw-edge), transparent 100%);
}
.drift-wall .drift-wall__plane {
  position: absolute; left: 50%; top: 50%; display: flex; gap: var(--dw-gap);
  transform-style: preserve-3d; will-change: transform; transform: translate(-50%, -50%);
}
.drift-wall .drift-wall__col { position: relative; width: var(--dw-tile-w); height: var(--dw-col-h, 600px); transform-style: preserve-3d; }
.drift-wall .drift-wall__track {
  position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; gap: var(--dw-gap);
  transform-style: preserve-3d; will-change: transform;
}
.drift-wall .drift-wall__tile { display: block; width: var(--dw-tile-w); height: var(--dw-tile-h); transform-style: preserve-3d; }
.drift-wall .drift-wall__inner {
  position: relative; display: block; width: 100%; height: 100%; border-radius: var(--dw-radius); overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.drift-wall .drift-wall__inner img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.drift-wall .drift-wall__overlay {
  position: absolute; inset: 0; background: var(--dw-overlay); opacity: var(--dw-dim); transition: opacity .35s ease; pointer-events: none;
}
.drift-wall .drift-wall__tile.is-active .drift-wall__inner { transform: translateZ(var(--dw-lift)) scale(1.06); box-shadow: 0 20px 30px rgba(0,0,0,.55); }
.drift-wall .drift-wall__tile.is-active .drift-wall__overlay { opacity: 0; }

/* Curseur nomme au survol d'un drapeau (style ShowcasePointer) */
.drift-wall-pointer {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; color: var(--dwp-fill, #0e9f6e);
  opacity: 0; transition: opacity .18s ease; will-change: transform;
}
.drift-wall-pointer.is-on { opacity: 1; }
.drift-wall-pointer__arrow { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.drift-wall-pointer__label {
  position: absolute; left: 16px; top: 18px; white-space: nowrap; padding: 3px 10px; border-radius: 999px;
  background: var(--dwp-fill, #0e9f6e); color: var(--dwp-text, #fff); border: 1.5px solid #fff; font: 600 13px/1.4 "Trebuchet MS", system-ui, sans-serif;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
@media (hover: none) { .drift-wall-pointer { display: none; } }
.drift-wall.is-pointer-hidden, .drift-wall.is-pointer-hidden * { cursor: none; }