/* ═══════════════════════════════════════════════════════
   WOW ANIMATIONS V2 — Blinkit Delivery
   Couche d'animations avancées sur l'existant
   ═══════════════════════════════════════════════════════ */

/* ── Custom cursor (pointeur fin uniquement, natif sur champs texte) ── */
body.has-cursor:not(.cursor-native),
body.has-cursor:not(.cursor-native) * { cursor: none !important; }

#cursor-dot,
#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
body:not(.has-cursor) #cursor-dot,
body:not(.has-cursor) #cursor-ring { display: none; }
body.cursor-seen #cursor-dot,
body.cursor-seen #cursor-ring { opacity: 1; }
body.cursor-native #cursor-dot,
body.cursor-native #cursor-ring,
body.cursor-out #cursor-dot,
body.cursor-out #cursor-ring { opacity: 0; }

#cursor-dot {
  width: 8px; height: 8px;
  background: var(--accent, #1f9d3a);
  z-index: 99999;
  transition: opacity .25s, width .22s cubic-bezier(.22,1,.36,1), height .22s cubic-bezier(.22,1,.36,1), background .22s;
}
#cursor-ring {
  width: 42px; height: 42px;
  border: 1.5px solid color-mix(in srgb, var(--accent, #1f9d3a) 50%, transparent);
  z-index: 99998;
  transition: opacity .25s,
              width .38s cubic-bezier(.34,1.56,.64,1),
              height .38s cubic-bezier(.34,1.56,.64,1),
              border-color .3s, background .3s;
}
body.cursor-hover #cursor-dot { width: 5px; height: 5px; }
body.cursor-hover #cursor-ring {
  width: 58px; height: 58px;
  border-color: var(--accent, #1f9d3a);
  background: color-mix(in srgb, var(--accent, #1f9d3a) 8%, transparent);
}
body.cursor-click #cursor-dot { width: 16px; height: 16px; }
body.cursor-click #cursor-ring { width: 30px; height: 30px; border-color: var(--accent, #1f9d3a); }
@media (prefers-reduced-motion: reduce) {
  body.has-cursor, body.has-cursor * { cursor: auto !important; }
  #cursor-dot, #cursor-ring { display: none !important; }
}

/* ── Hero particles ─────────────────────────────────── */
#hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.hero-particle {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  background: rgba(31,157,58,.7);
  animation: particle-rise linear infinite;
}
@keyframes particle-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: .5; }
  100% { transform: translateY(-105vh) translateX(var(--drift,0px)); opacity: 0; }
}

/* ── Hero veil renforcé (texte lisible, vidéo nette à droite) ── */
.hero-veil {
  background:
    linear-gradient(
      105deg,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,.62) 32%,
      rgba(0,0,0,.25) 58%,
      rgba(0,0,0,.1) 100%
    ),
    linear-gradient(to bottom, rgba(0,0,0,.3) 0%, transparent 35%, rgba(0,0,0,.55) 100%) !important;
}

/* ── Masque coin haut-droite — cache le watermark ── */
.hero-corner-mask {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 28%;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,.97) 30%, rgba(0,0,0,.7) 55%, transparent 75%);
  z-index: 2;
  pointer-events: none;
}

/* ── Ken-Burns hero video ───────────────────────────── */
.hero-video {
  animation: none;
}
@keyframes kenburns {
  0%   { transform: scale(1.0) translate(0,0); }
  100% { transform: scale(1.1) translate(-2%, -1%); }
}

/* ── Hero phone float ───────────────────────────────── */
.hero-phone {
  animation: phone-float 7s ease-in-out infinite;
}
@keyframes phone-float {
  0%,100% { transform: translateY(0)   rotate(0deg); }
  33%     { transform: translateY(-14px) rotate(.8deg); }
  66%     { transform: translateY(-7px)  rotate(-.6deg); }
}

/* ── Boutons — shimmer au hover ─────────────────────── */
.btn-primary { overflow: hidden; position: relative; }
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 25%,
    rgba(255,255,255,.22) 50%,
    transparent 75%);
  background-size: 220% 100%;
  background-position: 200% 0;
  transition: background-position .55s ease;
  pointer-events: none;
}
.btn-primary:hover::after { background-position: -30% 0; }

/* ── About media — image cinématique ───────────────── */
.about-media {
  border-radius: 16px !important;
  overflow: hidden;
  position: relative;
}
.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 1.1s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.about-media:hover img { transform: scale(1.02); }

/* ── Track (scan) media ─────────────────────────────── */
.track-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.track-media video {
  border-radius: 16px;
  display: block;
  width: 100%;
}

/* Scan line animée par-dessus la vidéo */
.scan-line-fx {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(31,157,58,.7) 30%,
    #1f9d3a 50%,
    rgba(31,157,58,.7) 70%,
    transparent 100%);
  box-shadow: 0 0 18px 4px rgba(31,157,58,.55);
  animation: scan-sweep 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes scan-sweep {
  0%   { top: 8%;  opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: .85; }
  100% { top: 92%; opacity: 0; }
}

/* ── Trust-band — image coulissante ─────────────────── */
.tb-media {
  overflow: hidden;
}
.tb-media img,
.tb-media video {
  transition: transform 14s linear;
  transform: scale(1.06);
}
.trust-band:hover .tb-media img,
.trust-band:hover .tb-media video { transform: scale(1.12); }

/* ── Galerie flotte (section nouvelle) ──────────────── */
.photo-fleet {
  padding: 0;
  overflow: hidden;
  background: #060d0a;
}
.fleet-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 340px 280px;
  gap: 3px;
}
.fleet-cell {
  position: relative;
  overflow: hidden;
}
.fleet-cell:nth-child(1) { grid-row: 1 / 3; }

.fleet-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.fleet-cell:hover img { transform: scale(1.07); }

.fleet-cell-label {
  position: absolute;
  bottom: 18px; left: 18px;
  font-family: var(--mono, 'Spline Sans Mono', monospace);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.15);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.fleet-cell:hover .fleet-cell-label { opacity: 1; transform: translateY(0); }

/* Titre de la section flotte */
.fleet-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 56px 60px 36px;
  background: #060d0a;
}
.fleet-title-bar h2 {
  font-family: var(--serif, 'Newsreader', serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 44px);
  color: rgba(247,248,244,.92);
  margin: 0;
}
.fleet-title-bar .fleet-tag {
  font-family: var(--mono, 'Spline Sans Mono', monospace);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(31,157,58,.9);
  border: 1px solid rgba(31,157,58,.35);
  padding: 8px 16px;
  border-radius: 40px;
}

/* ── Feat cards — 3D tilt ───────────────────────────── */
.feat-card {
  transform-style: preserve-3d;
  transition: box-shadow .3s, transform .5s cubic-bezier(.34,1.56,.64,1) !important;
}

/* ── Number counters — glow ─────────────────────────── */
.numbers .val .counter {
  text-shadow: 0 0 40px rgba(31,157,58,.35);
}

/* ── CTA — halo tournant ─────────────────────────────── */
.cta { position: relative; overflow: hidden; }
.cta::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  margin: -300px 0 0 -300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,157,58,.12) 0%, transparent 70%);
  animation: cta-pulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cta-pulse {
  0%,100% { transform: scale(.8); opacity: .5; }
  50%      { transform: scale(1.3); opacity: 1; }
}

/* ── Scroll progress bar glow ───────────────────────── */
#lecture-fill {
  box-shadow: 2px 0 16px 2px rgba(31,157,58,.55) !important;
}

/* ── Marquee — fade edges ───────────────────────────── */
.marquee {
  position: relative;
  mask-image: linear-gradient(to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%);
}

/* ── Section head scramble reset ─────────────────────── */
.section-head .meta { letter-spacing: .3em; }

/* ── Engage emblem — pulse ring ─────────────────────── */
.engage-emblem .big {
  animation: emblem-glow 3s ease-in-out infinite;
}
@keyframes emblem-glow {
  0%,100% { text-shadow: 0 0 30px rgba(31,157,58,.3); }
  50%     { text-shadow: 0 0 60px rgba(31,157,58,.7); }
}

/* ── Image reveal clip ───────────────────────────────── */
.about-media,
.track-media {
  clip-path: inset(0 0 0 0);
}
.about-media.clip-enter {
  animation: clipReveal .9s cubic-bezier(.77,0,.175,1) forwards;
}
@keyframes clipReveal {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0   0% 0); }
}

/* ── Route SVG glow ─────────────────────────────────── */
.route-line {
  filter: drop-shadow(0 0 6px rgba(31,157,58,.8));
}

/* ── Feature card numbers — accent ──────────────────── */
.feat-card .ic {
  background: linear-gradient(135deg, #1f9d3a, #2dd162);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 44px !important;
}

/* ── Responsive fleet grid ───────────────────────────── */
@media (max-width: 900px) {
  .fleet-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 260px 220px 220px;
  }
  .fleet-cell:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
}
@media (max-width: 600px) {
  .fleet-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 220px);
  }
  .fleet-cell:nth-child(1) { grid-column: 1; grid-row: 1; }
  .fleet-title-bar { padding: 40px 24px 28px; flex-direction: column; align-items: flex-start; gap: 16px; }
}