/* 071 — Aurora Veil
   Voile d'aurore boréale : trois nappes de gradient (vert, violet, cyan)
   floutées, en blend screen, qui ondulent lentement avec une légère
   respiration de teinte (hue-rotate). Masque vertical pour l'horizon. */

.aurora-veil {
  position: relative;
  width: 100%;
  min-height: 240px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, #0a0e18 0%, var(--ml-bg, #0d1017) 100%);
  isolation: isolate;
}

.aurora-veil__layer {
  position: absolute;
  inset: -45% -25%;
  mix-blend-mode: screen;
  will-change: transform, filter;
  -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 25%, transparent 78%);
}

.aurora-veil__layer--1 {
  background: linear-gradient(
    104deg,
    transparent 18%,
    var(--aurora-veil-green, rgba(74, 222, 128, 0.34)) 38%,
    var(--aurora-veil-teal, rgba(45, 212, 191, 0.42)) 50%,
    transparent 72%
  );
  filter: blur(26px);
  animation: aurora-veil-sway 7s ease-in-out -2.5s infinite alternate;
}

.aurora-veil__layer--2 {
  background: linear-gradient(
    82deg,
    transparent 22%,
    var(--aurora-veil-violet, rgba(139, 92, 246, 0.32)) 46%,
    var(--aurora-veil-magenta, rgba(192, 132, 252, 0.2)) 58%,
    transparent 78%
  );
  filter: blur(32px);
  animation: aurora-veil-sway 10s ease-in-out -4s infinite alternate-reverse;
}

.aurora-veil__layer--3 {
  background: linear-gradient(
    96deg,
    transparent 30%,
    var(--aurora-veil-cyan, rgba(103, 232, 249, 0.24)) 52%,
    transparent 70%
  );
  filter: blur(38px);
  animation: aurora-veil-sway 13s ease-in-out -7s infinite alternate;
}

/* Contenu par-dessus le voile (mini-hero) */
.aurora-veil__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 22px;
}

.aurora-veil__eyebrow {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ml-accent-2, #2dd4bf);
}

.aurora-veil__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ml-fg, #e8eaf2);
  text-shadow: 0 2px 20px rgba(4, 7, 16, 0.65);
}

.aurora-veil__sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ml-muted, #8b91a3);
}

@keyframes aurora-veil-sway {
  0% {
    transform: translate3d(-9%, 3%, 0) rotate(-5deg) skewX(-10deg) scaleY(1);
    filter: blur(26px) hue-rotate(-14deg);
  }
  50% {
    transform: translate3d(2%, -2%, 0) rotate(1deg) skewX(2deg) scaleY(1.12);
    filter: blur(30px) hue-rotate(4deg);
  }
  100% {
    transform: translate3d(10%, 2%, 0) rotate(5deg) skewX(11deg) scaleY(0.94);
    filter: blur(26px) hue-rotate(16deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-veil__layer {
    animation: none;
  }
}