/* SkyView Innovation — logo animé
   Calques : wing-left / wing-right / lens (+ shine-mask pour le reflet)
   Rejouer : SkyViewLogo.play(element)  (voir skyview-logo.js) */

.sv-logo {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 1800 / 753;
  margin-inline: auto;
  --sv-shine-mask: url("images/shine-mask.webp");
}
.sv-logo > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Pivots : racine de chaque aile, centre de l'objectif */
.sv-wing--l { transform-origin: 40% 70.6%; }
.sv-wing--r { transform-origin: 60% 70.6%; }
.sv-lens    { transform-origin: 50% 75.55%; }

/* Reflet métallique qui balaie ailes + bague de l'objectif */
.sv-shine {
  background: linear-gradient(105deg,
      transparent 42%,
      rgba(255,255,255,.55) 47%,
      #fff 50%,
      rgba(255,255,255,.55) 53%,
      transparent 58%) no-repeat;
  background-size: 300% 100%;
  background-position: 0% 0;            /* repos : reflet hors champ */
  -webkit-mask: var(--sv-shine-mask) center / 100% 100% no-repeat;
          mask: var(--sv-shine-mask) center / 100% 100% no-repeat;
  opacity: .9;
}

/* Masqué juste avant le lancement (ajouté par le JS, donc sans JS le logo reste visible) */
.sv-logo.sv-armed:not(.sv-play) > * { opacity: 0; }

/* ---------- Séquence ---------- */
.sv-logo.sv-play .sv-lens {
  animation: sv-lens 1s cubic-bezier(.16,1,.3,1) both;
}
.sv-logo.sv-play .sv-wing--l {
  animation: sv-wing-l 1.15s .45s cubic-bezier(.22,1,.36,1) both;
}
.sv-logo.sv-play .sv-wing--r {
  animation: sv-wing-r 1.15s .45s cubic-bezier(.22,1,.36,1) both;
}
.sv-logo.sv-play .sv-shine {
  animation: sv-shine 8s 1.45s cubic-bezier(.45,0,.25,1) infinite;
}

@keyframes sv-lens {
  0%   { opacity: 0; transform: scale(.35) rotate(-140deg); }
  55%  { opacity: 1; }
  82%  { filter: brightness(1.18); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes sv-wing-l {
  0%   { opacity: 0; transform: rotate(-38deg) scale(.2); }
  30%  { opacity: 1; }
  72%  { transform: rotate(2.5deg) scale(1.015); }
  100% { opacity: 1; transform: none; }
}
@keyframes sv-wing-r {
  0%   { opacity: 0; transform: rotate(38deg) scale(.2); }
  30%  { opacity: 1; }
  72%  { transform: rotate(-2.5deg) scale(1.015); }
  100% { opacity: 1; transform: none; }
}
@keyframes sv-shine {
  0%   { background-position: 100% 0; }
  13%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-logo > * { animation: none !important; opacity: 1 !important; }
}