/* Start custom CSS *//* HERO Background */

.gda-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gda-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;

  width: 150vw;
  height: 150vw;
  left: var(--spot-x, 50%);
  top: var(--spot-y, 50%);
  transform: translate(-50%, -50%);

  background: radial-gradient(
    50% 50%,
    #1f1f38 0%,
    transparent 100%
  );
  opacity: 0.5;
  
}

.gda-hero > * {
  position: relative;
  z-index: 1;
}




/* HERO Mosaik-Animation */
.mosaic .shard {
  opacity: 0;

  animation:
    shard-move 3s cubic-bezier(.25, .1, .25, 1)
      var(--delay, 0s) both,
    shard-fade 3.5s cubic-bezier(.4, 0, .2, 1)
      var(--delay, 0s) both;
}

/* Bewegung: schnell ankommen, dann sanft auslaufen */
@keyframes shard-move {
  0% {
    transform:
      translate3d(var(--x, 0), var(--y, 0), 350px)
      scale(var(--start-scale, 1.4));
  }

  50% {
    transform: translate3d(.15vw, -.1vh, 5px) scale(1.015);
    animation-timing-function: ease-out;
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Opacity bleibt unverändert */
@keyframes shard-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reihenfolge und Startpositionen */
.mosaic .shard-1 {
  --start-scale: 2.5;
  --x: -4.4vw;
  --y: -1.5vh;
}

.mosaic .shard-2, .mosaic .shard-3 {
  --start-scale: 3;
  --x: 3vw;
  --y: -2vh;
}

.mosaic .shard-4 {
  --start-scale: 3.5;
  --x: -1vw;
  --y: 1vh;
}

.mosaic .shard-5 {
  --start-scale: 2.75;
  --x: 7.5vw;
  --y: 1.5vh;
}

.mosaic .shard-6 {
  --start-scale: 2.5;
  --x: 3vw;
  --y: 5vh;
}

.mosaic .shard-7 {
  --start-scale: 3.25;
  --x: 3vw;
  --y: 5vh;
}

.mosaic .shard-8 {
  --start-scale: 3.25;
  --x: 3vw;
  --y: 7.5vh;
}

.mosaic .shard-9 {
  --start-scale: 4.25;
  --x: -1.5vw;
  --y: 1.5vh;
}

.mosaic .shard-10 {
  --delay: 2s;
  --start-scale: 1;
}

/* Logo */
.hero-logo {
  --start-scale: 3;
  --x: 3vw;
  --y: -2vh;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  animation:
    logo-move 3s cubic-bezier(.25, .1, .25, 1) 0s both,
    logo-reveal 1.75s ease 1.25s both;
}

@keyframes logo-move {
  0% {
    transform:
      translate3d(var(--x), var(--y), 350px)
      scale(var(--start-scale));
  }

  50% {
    transform: translate3d(.15vw, -.1vh, 5px) scale(1.015);
    animation-timing-function: ease-out;
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes logo-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}


.mosaic {
  --mosaic-bg-color: var(--dark-purple); /* hier deinen Elementor-Farbwert einsetzen */
  animation: mosaic-bg-reveal 1.5s ease 2s both;
}

@keyframes mosaic-bg-reveal {
  from { background-color: transparent; }
  to   { background-color: var(--mosaic-bg-color); }
}





.gda-hero::before {
  transition: opacity 1.2s ease;
}

body:has(.vin-logo:hover) .gda-hero::before {
  opacity: 1;
  
}/* End custom CSS */