/**
 * Effet « laser » — frise méthode (#DreamprojectAI) : 100 % CSS, aucun JS dédié.
 * Actif uniquement lorsque le bandeau porte .dp-method-strip--fx-laser (voir platform___homepage___future_playground.php).
 */
#dp-method-strip.dp-method-strip--fx-laser .dp-method-strip__detail-idle {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: visible;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#dp-method-strip.dp-method-strip--fx-laser:has(.dp-method-strip__detail.is-visible) .dp-method-strip__detail-idle,
#dp-method-strip.dp-method-strip--fx-laser:has(.dp-method-strip__detail:not(:empty)) .dp-method-strip__detail-idle {
  opacity: 0;
  visibility: hidden;
}

/*
 * Jets de lumière (dégradés), parcours en « G » puis poussée vers Passation.
 * 2 couches max, transform + opacity ; halo = box-shadow (pas de filter: blur).
 */
#dp-method-strip.dp-method-strip--fx-laser .dp-method-strip__detail-idle::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 8%;
  top: 24%;
  width: min(46vw, 6rem);
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  transform-origin: 18% 50%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 22%, transparent) 24%,
    color-mix(in srgb, #fff 50%, var(--accent) 50%) 50%,
    color-mix(in srgb, var(--accent) 22%, transparent) 76%,
    transparent 100%
  );
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
  opacity: 0.82;
  animation: dpMethodLightGPrimary 4.7s cubic-bezier(0.42, 0, 0.22, 1) infinite;
}

#dp-method-strip.dp-method-strip--fx-laser .dp-method-strip__detail-idle::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 11%;
  top: 27%;
  width: min(36vw, 4.25rem);
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  transform-origin: 14% 50%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 4%,
    rgba(255, 232, 210, 0.4) 34%,
    color-mix(in srgb, var(--accent) 92%, #fff) 51%,
    rgba(255, 232, 210, 0.4) 68%,
    transparent 100%
  );
  box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 38%, transparent);
  opacity: 0.62;
  animation: dpMethodLightGSecondary 4.7s cubic-bezier(0.42, 0, 0.22, 1) infinite;
  animation-delay: -0.4s;
}

@keyframes dpMethodLightGPrimary {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-10deg);
    opacity: 0.76;
  }
  10% {
    transform: translate3d(4cqi, -0.45rem, 0) rotate(6deg);
    opacity: 0.82;
  }
  20% {
    transform: translate3d(11cqi, 1.15rem, 0) rotate(88deg);
  }
  34% {
    transform: translate3d(-1.5cqi, 2.35rem, 0) rotate(172deg);
  }
  46% {
    transform: translate3d(-9cqi, 0.55rem, 0) rotate(-96deg);
  }
  56% {
    transform: translate3d(2.5cqi, 0.3rem, 0) rotate(-6deg);
    opacity: 0.88;
  }
  66% {
    transform: translate3d(15cqi, -1.6rem, 0) rotate(-32deg);
    opacity: 0.92;
  }
  80% {
    transform: translate3d(74cqi, 5.35rem, 0) rotate(-42deg);
    opacity: 1;
  }
  86% {
    transform: translate3d(78cqi, 5.65rem, 0) rotate(-46deg);
    opacity: 1;
  }
  94% {
    transform: translate3d(5cqi, 0.15rem, 0) rotate(-20deg);
    opacity: 0.84;
  }
}

@keyframes dpMethodLightGSecondary {
  0%,
  100% {
    transform: translate3d(0, 2px, 0) rotate(-14deg);
    opacity: 0.58;
  }
  10% {
    transform: translate3d(3.5cqi, -0.35rem, 0) rotate(10deg);
  }
  20% {
    transform: translate3d(9cqi, 1.05rem, 0) rotate(94deg);
  }
  34% {
    transform: translate3d(-2.5cqi, 1.95rem, 0) rotate(176deg);
  }
  46% {
    transform: translate3d(-10cqi, 0.45rem, 0) rotate(-100deg);
  }
  56% {
    transform: translate3d(1.5cqi, 0.35rem, 0) rotate(-10deg);
    opacity: 0.72;
  }
  66% {
    transform: translate3d(12cqi, -1.35rem, 0) rotate(-36deg);
  }
  80% {
    transform: translate3d(68cqi, 5.05rem, 0) rotate(-44deg);
    opacity: 0.88;
  }
  86% {
    transform: translate3d(72cqi, 5.35rem, 0) rotate(-48deg);
    opacity: 0.9;
  }
  94% {
    transform: translate3d(4cqi, 0.1rem, 0) rotate(-22deg);
    opacity: 0.65;
  }
}

@keyframes dpMethodLightGPrimaryMob {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-10deg);
    opacity: 0.76;
  }
  12% {
    transform: translate3d(2cqi, 1.1rem, 0) rotate(72deg);
    opacity: 0.82;
  }
  28% {
    transform: translate3d(-3cqi, 3.2rem, 0) rotate(168deg);
  }
  44% {
    transform: translate3d(1cqi, 1.4rem, 0) rotate(-88deg);
  }
  58% {
    transform: translate3d(0.5cqi, 0.6rem, 0) rotate(-8deg);
    opacity: 0.88;
  }
  74% {
    transform: translate3d(1cqi, 6.5rem, 0) rotate(-28deg);
    opacity: 0.94;
  }
  84% {
    transform: translate3d(-1cqi, 11.25rem, 0) rotate(-40deg);
    opacity: 1;
  }
  92% {
    transform: translate3d(0, 9.5rem, 0) rotate(-32deg);
    opacity: 0.86;
  }
}

@keyframes dpMethodLightGSecondaryMob {
  0%,
  100% {
    transform: translate3d(0, 2px, 0) rotate(-14deg);
    opacity: 0.58;
  }
  12% {
    transform: translate3d(1.5cqi, 1rem, 0) rotate(76deg);
  }
  28% {
    transform: translate3d(-3.5cqi, 2.85rem, 0) rotate(172deg);
  }
  44% {
    transform: translate3d(0.5cqi, 1.2rem, 0) rotate(-92deg);
  }
  58% {
    transform: translate3d(0, 0.55rem, 0) rotate(-12deg);
    opacity: 0.72;
  }
  74% {
    transform: translate3d(0.5cqi, 6.1rem, 0) rotate(-30deg);
  }
  84% {
    transform: translate3d(-1.5cqi, 10.85rem, 0) rotate(-42deg);
    opacity: 0.9;
  }
  92% {
    transform: translate3d(0, 9rem, 0) rotate(-34deg);
    opacity: 0.68;
  }
}

@media (max-width: 719px) {
  #dp-method-strip.dp-method-strip--fx-laser .dp-method-strip__detail-idle::before {
    left: 12%;
    top: 14%;
    animation-name: dpMethodLightGPrimaryMob;
  }

  #dp-method-strip.dp-method-strip--fx-laser .dp-method-strip__detail-idle::after {
    left: 15%;
    top: 16%;
    animation-name: dpMethodLightGSecondaryMob;
    animation-delay: -0.4s;
  }
}

html.dp-anim-paused #dp-method-strip.dp-method-strip--fx-laser .dp-method-strip__detail-idle::before,
html.dp-anim-paused #dp-method-strip.dp-method-strip--fx-laser .dp-method-strip__detail-idle::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #dp-method-strip.dp-method-strip--fx-laser .dp-method-strip__detail-idle::before,
  #dp-method-strip.dp-method-strip--fx-laser .dp-method-strip__detail-idle::after {
    animation: none !important;
    opacity: 0.35;
    transform: none;
  }
}