/* KYMA brand motion: subtle HOME depth + page-transition wave motif. */
.heroKy,
.heroMa{
  --kyma-parallax-x:0px;
  --kyma-parallax-y:0px;
  translate:var(--kyma-parallax-x) var(--kyma-parallax-y);
  filter:drop-shadow(0 6px 14px rgba(113,74,124,.05));
}

/* Reuse the existing transition veil; this pseudo-element adds only a faint curved crest. */
.kymaPageTransitionVeil::after{
  content:"";
  position:absolute;
  inset:7%;
  border-radius:50%;
  background:
    radial-gradient(
      ellipse at 34% 48%,
      transparent 0 57.5%,
      rgba(255,255,255,.14) 58.7%,
      rgba(213,168,227,.12) 59.8%,
      rgba(183,137,197,.045) 61.1%,
      transparent 63.4%
    );
  opacity:.16;
  pointer-events:none;
  transform:rotate(-4deg) scale(.985);
  transform-origin:center;
}
.kymaPageTransition.isActive .kymaPageTransitionVeil::after{
  animation:kymaBrandTransitionCrest 330ms cubic-bezier(.16,.62,.24,1) both;
}

@keyframes kymaBrandTransitionCrest{
  0%{opacity:0;transform:rotate(-4deg) scale(.96)}
  48%{opacity:.22}
  100%{opacity:.10;transform:rotate(-4deg) scale(1.015)}
}

@media(pointer:coarse){
  .heroKy,
  .heroMa{translate:0 0}
}

@media(prefers-reduced-motion:reduce){
  .heroKy,
  .heroMa{translate:0 0}
  .kymaPageTransitionVeil::after{opacity:0;animation:none!important}
}